|
»
»
»
UI Tabs and Flot issue
|
View:
New views
4 Messages
—
Rating Filter:
Alert me
|
 |
UI Tabs and Flot issue
by adammarth
::
Rate this Message:
Hello, I am developing an application using UI Tabs and Flot. I am seeing hitting an issue that I am not able to resolve. The pages in question are currently static HTML mockups. The main page uses UI tabs to load content pages via ajax. Within the content pages, there is a DIV with a "chart" id and a DIV with a "legend" id. The "chart" and "legend" should be populated with a Flot chart/legend when the tab is loaded. Adding to the complexity of the page, the tabs and a footer are fixed while the content pages (loaded by the tabs) scroll between the tabs and "footer" when there is overflow (CSS controlled). When the page initially loads, the first tab is selected by default and the flot chart is loaded correctly. When I click another tab, the page content is loaded but the graph is not displayed in the "chart" element. Using FireBug, I can see there is an error thrown from the Flot plugin dealing with the height and/or width of the target being 0. If I place a breakpoint in my JS code calling the flot plugin, and do nothing more than let the code execute once the breakpoint is hit, the graph displays correctly. Allowing the code to run on its own hits the error. I have placed console.log statements in the code to check the height/ width before and after the call to Flot. The height/width are populated (as specified in the CSS) on the initial page load and the initial call to Flot. As I click other tabs, the height/width are 0. While in the breakpoint, the height/width are populated again. I have other pages that do not use tabs or the scrolling content but do use Flot and those work correctly, as the initial load of this problematic page does. Any ideas? Both of these plugins are awesome. I just need to get them working together. Thanks, Adam ========= Tab Page Example ========= <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"> <html> <head> <title></title> <style> html, body, form { height: 100%; overflow: hidden; } .ui-tabs-panel { overflow-y: auto; overflow-x: hidden; height: 73%; border-width: 1px 0; border-style: solid; border-color: #000; position: relative; } #footer { bottom: 0; margin-bottom: 5px; padding-bottom: 5px; } #chart { height: 200px; width: 90%; float: left; margin-top: 5px; margin-left: 5px; } </style> <script type="text/javascript" language="JavaScript" src="../js/jquery/ jquery.js"></script> <script src="../js/jquery/plugin/ui.tabs.js" type="text/javascript"></ script> <script src="../js/jquery/plugin/ui.tabs.ext.js" type="text/ javascript"></script> <script type="text/javascript" src="../js/jquery/plugin/ jquery.flot.js"></script> <script type="text/javascript" src="../js/jquery/plugin/excanvas.js"></ script> <script type="text/javascript"> var array1 = null; //null for example only var array2 = null; //null for example only var array3 = null; //null for example only var data = [array1, array2, array3]; $(document).ready(function(){ $("#tabs").tabs({remote: true, selected: 0}); $("#tabs").bind('tabsload', function(event, ui) { loadChart($("#chart"), data, $("#legend")); } ); }); function loadChart(chart, chartData, chartLegend) { if (chart != null) { var options = { legend: {container: chartLegend, noColumns: 1}, xaxis: { mode: "time", timeFormat: "%b", tickSize: [1, "month"]}, selection: { mode: "xy" }, shadowSize: 0 }; var plot = $.plot(chart,chartData,options); } } </script> </head> <body> <form> <div id="tabs"> <ul> <li><a href="XXX.htm"><span>Tab 0</span></a></li> <li><a href="XXX.htm"><span>Tab 1</span></a></li> <li><a href="XXX.htm"><span>Tab 2</span></a></li> <li><a href="XXX.htm"><span>Tab 3</span></a></li> <li><a href="XXX.htm"><span>Tab 4</span></a></li> </ul> </div> <!-- Tab content goes here --> <div id="footer"> Some elements that are fixed at the bottom of the page </ul> </div> </form> </body> </html> ============Content Page Example (XXX.htm) ============= <div id="chart"></div><div id="legend"> <div> Other content that appears below the chart and is scolled within the tabs/footer along with the chart </div> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@... To unsubscribe from this group, send email to jquery-dev-unsubscribe@... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: UI Tabs and Flot issue
by Klaus Hartl-4
::
Rate this Message:
This is probably related to inactive tab panels being hidden via "display: none" which is why computations for width/height result in 0. When do you do the call to Flot? To avoid this problem you can either create the chart in the show callback of the tabs or change the tabs style sheet to use the offleft technique for hiding a tab panel. Look for the class selector ".ui-tabs-hide" and change it to this: .ui-tabs-hide { position: absolute; left: 1000em; } HTH --Klaus On May 13, 6:07 pm, adammarth <adamma...@...> wrote: > Hello, > > I am developing an application using UI Tabs and Flot. I am seeing > hitting an issue that I am not able to resolve. The pages in question > are currently static HTML mockups. > > The main page uses UI tabs to load content pages via ajax. Within the > content pages, there is a DIV with a "chart" id and a DIV with a > "legend" id. The "chart" and "legend" should be populated with a Flot > chart/legend when the tab is loaded. Adding to the complexity of the > page, the tabs and a footer are fixed while the content pages (loaded > by the tabs) scroll between the tabs and "footer" when there is > overflow (CSS controlled). > > When the page initially loads, the first tab is selected by default > and the flot chart is loaded correctly. When I click another tab, the > page content is loaded but the graph is not displayed in the "chart" > element. Using FireBug, I can see there is an error thrown from the > Flot plugin dealing with the height and/or width of the target being > 0. If I place a breakpoint in my JS code calling the flot plugin, and > do nothing more than let the code execute once the breakpoint is hit, > the graph displays correctly. Allowing the code to run on its own hits > the error. > > I have placed console.log statements in the code to check the height/ > width before and after the call to Flot. The height/width are > populated (as specified in the CSS) on the initial page load and the > initial call to Flot. As I click other tabs, the height/width are 0. > While in the breakpoint, the height/width are populated again. > > I have other pages that do not use tabs or the scrolling content but > do use Flot and those work correctly, as the initial load of this > problematic page does. > > Any ideas? Both of these plugins are awesome. I just need to get them > working together. > > Thanks, > > Adam > > ========= Tab Page Example ========= > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ > TR/html4/strict.dtd"> > <html> > <head> > <title></title> > <style> > html, body, form { > height: 100%; > overflow: hidden; > > } > > .ui-tabs-panel { > overflow-y: auto; > overflow-x: hidden; > height: 73%; > border-width: 1px 0; > border-style: solid; > border-color: #000; > position: relative; > > } > > #footer { > bottom: 0; > margin-bottom: 5px; > padding-bottom: 5px; > > } > > #chart { > height: 200px; > width: 90%; > float: left; > margin-top: 5px; > margin-left: 5px;} > > </style> > > <script type="text/javascript" language="JavaScript" src="../js/jquery/ > jquery.js"></script> > <script src="../js/jquery/plugin/ui.tabs.js" type="text/javascript"></ > script> > <script src="../js/jquery/plugin/ui.tabs.ext.js" type="text/ > javascript"></script> > <script type="text/javascript" src="../js/jquery/plugin/ > jquery.flot.js"></script> > <script type="text/javascript" src="../js/jquery/plugin/excanvas.js"></ > script> > <script type="text/javascript"> > var array1 = null; //null for example only > var array2 = null; //null for example only > var array3 = null; //null for example only > > var data = [array1, array2, array3]; > > $(document).ready(function(){ > $("#tabs").tabs({remote: true, selected: 0}); > > $("#tabs").bind('tabsload', function(event, ui) { > loadChart($("#chart"), data, $("#legend")); > } > ); > }); > > function loadChart(chart, chartData, chartLegend) { > if (chart != null) { > var options = { > legend: {container: chartLegend, noColumns: 1}, > xaxis: { mode: "time", timeFormat: "%b", tickSize: [1, "month"]}, > selection: { mode: "xy" }, > shadowSize: 0 > }; > var plot = $.plot(chart,chartData,options); > } > } > > </script> > </head> > > <body> > <form> > <div id="tabs"> > <ul> > <li><a href="XXX.htm"><span>Tab 0</span></a></li> > <li><a href="XXX.htm"><span>Tab 1</span></a></li> > <li><a href="XXX.htm"><span>Tab 2</span></a></li> > <li><a href="XXX.htm"><span>Tab 3</span></a></li> > <li><a href="XXX.htm"><span>Tab 4</span></a></li> > </ul> > </div> > <!-- Tab content goes here --> > <div id="footer"> > Some elements that are fixed at the bottom of the page > </ul> > </div> > </form> > </body> > </html> > ============Content Page Example (XXX.htm) ============= > <div id="chart"></div><div id="legend"> > <div> > Other content that appears below the chart and is scolled within the > tabs/footer along with the chart > </div> You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@... To unsubscribe from this group, send email to jquery-dev-unsubscribe@... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: UI Tabs and Flot issue
by adammarth
::
Rate this Message:
I have gotten this somewhat resolved. The call to Flot is in the loadChart function contained in the example. I changed from binding to the "tabsload" event to the "tabsshow" event. This somewhat resolved the issue. Making this change caused the initial display with the default selected tab to not show the graph, but switching to other tabs would display the graph. This pointed out that the "tabsshow" event is not triggered when the default selected tab is included in the options to the constructor. Is this correct? Should "tabsshow" be triggered by the tabs plugin when a default is selected? To get around this, I removed the default selection from the constructor and called the .tabs("select", index) function, which does trigger the "tabsshow" event. All is now working well in FF, but not so much in IEv6//7. In IE, the graph on the initial tab displays but switching to any other tab gets the same 0 height/width error as is now resolved in FF. My next task will be to trace through the tabs plugin code and see if IE is treated differently enough to cause this. Your suggested style change may resolve as well. I'll give that a shot first as it seems to be a quicker/easier resolution if it works. Thx, AM On May 13, 4:59 pm, Klaus Hartl <klaus.ha...@...> wrote: > This is probably related to inactive tab panels being hidden via > "display: none" which is why computations for width/height result in > 0. > > When do you do the call to Flot? To avoid this problem you can either > create the chart in the show callback of the tabs or change the tabs > style sheet to use the offleft technique for hiding a tab panel. > > Look for the class selector ".ui-tabs-hide" and change it to this: > > .ui-tabs-hide { > position: absolute; > left: 1000em; > > } > > HTH > > --Klaus > > On May 13, 6:07 pm, adammarth <adamma...@...> wrote: > > > Hello, > > > I am developing an application using UI Tabs and Flot. I am seeing > > hitting an issue that I am not able to resolve. The pages in question > > are currently static HTML mockups. > > > The main page uses UI tabs to load content pages via ajax. Within the > > content pages, there is a DIV with a "chart" id and a DIV with a > > "legend" id. The "chart" and "legend" should be populated with a Flot > > chart/legend when the tab is loaded. Adding to the complexity of the > > page, the tabs and a footer are fixed while the content pages (loaded > > by the tabs) scroll between the tabs and "footer" when there is > > overflow (CSS controlled). > > > When the page initially loads, the first tab is selected by default > > and the flot chart is loaded correctly. When I click another tab, the > > page content is loaded but the graph is not displayed in the "chart" > > element. Using FireBug, I can see there is an error thrown from the > > Flot plugin dealing with the height and/or width of the target being > > 0. If I place a breakpoint in my JS code calling the flot plugin, and > > do nothing more than let the code execute once the breakpoint is hit, > > the graph displays correctly. Allowing the code to run on its own hits > > the error. > > > I have placed console.log statements in the code to check the height/ > > width before and after the call to Flot. The height/width are > > populated (as specified in the CSS) on the initial page load and the > > initial call to Flot. As I click other tabs, the height/width are 0. > > While in the breakpoint, the height/width are populated again. > > > I have other pages that do not use tabs or the scrolling content but > > do use Flot and those work correctly, as the initial load of this > > problematic page does. > > > Any ideas? Both of these plugins are awesome. I just need to get them > > working together. > > > Thanks, > > > Adam > > > ========= Tab Page Example ========= > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ > > TR/html4/strict.dtd"> > > <html> > > <head> > > <title></title> > > <style> > > html, body, form { > > height: 100%; > > overflow: hidden; > > > } > > > .ui-tabs-panel { > > overflow-y: auto; > > overflow-x: hidden; > > height: 73%; > > border-width: 1px 0; > > border-style: solid; > > border-color: #000; > > position: relative; > > > } > > > #footer { > > bottom: 0; > > margin-bottom: 5px; > > padding-bottom: 5px; > > > } > > > #chart { > > height: 200px; > > width: 90%; > > float: left; > > margin-top: 5px; > > margin-left: 5px;} > > > </style> > > > <script type="text/javascript" language="JavaScript" src="../js/jquery/ > > jquery.js"></script> > > <script src="../js/jquery/plugin/ui.tabs.js" type="text/javascript"></ > > script> > > <script src="../js/jquery/plugin/ui.tabs.ext.js" type="text/ > > javascript"></script> > > <script type="text/javascript" src="../js/jquery/plugin/ > > jquery.flot.js"></script> > > <script type="text/javascript" src="../js/jquery/plugin/excanvas.js"></ > > script> > > <script type="text/javascript"> > > var array1 = null; //null for example only > > var array2 = null; //null for example only > > var array3 = null; //null for example only > > > var data = [array1, array2, array3]; > > > $(document).ready(function(){ > > $("#tabs").tabs({remote: true, selected: 0}); > > > $("#tabs").bind('tabsload', function(event, ui) { > > loadChart($("#chart"), data, $("#legend")); > > } > > ); > > }); > > > function loadChart(chart, chartData, chartLegend) { > > if (chart != null) { > > var options = { > > legend: {container: chartLegend, noColumns: 1}, > > xaxis: { mode: "time", timeFormat: "%b", tickSize: [1, "month"]}, > > selection: { mode: "xy" }, > > shadowSize: 0 > > }; > > var plot = $.plot(chart,chartData,options); > > } > > } > > > </script> > > </head> > > > <body> > > <form> > > <div id="tabs"> > > <ul> > > <li><a href="XXX.htm"><span>Tab 0</span></a></li> > > <li><a href="XXX.htm"><span>Tab 1</span></a></li> > > <li><a href="XXX.htm"><span>Tab 2</span></a></li> > > <li><a href="XXX.htm"><span>Tab 3</span></a></li> > > <li><a href="XXX.htm"><span>Tab 4</span></a></li> > > </ul> > > </div> > > <!-- Tab content goes here --> > > <div id="footer"> > > Some elements that are fixed at the bottom of the page > > </ul> > > </div> > > </form> > > </body> > > </html> > > ============Content Page Example (XXX.htm) ============= > > <div id="chart"></div><div id="legend"> > > <div> > > Other content that appears below the chart and is scolled within the > > tabs/footer along with the chart > > </div> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@... To unsubscribe from this group, send email to jquery-dev-unsubscribe@... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: UI Tabs and Flot issue
by Klaus Hartl-4
::
Rate this Message:
On May 14, 4:23 am, adammarth <adamma...@...> wrote: > Is this correct? Should "tabsshow" be triggered by the tabs plugin > when a default is selected? I've fixed that the other day. Should be included in the latest UI 1.5b4 release and of course be available via SVN... --Klaus --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@... To unsubscribe from this group, send email to jquery-dev-unsubscribe@... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~--- |
| Free Forum Powered by Nabble | Forum Help |