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>
> 
> <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
-~----------~----~----~----~------~----~------~--~---

« Return to Thread: UI Tabs and Flot issue

LightInTheBox - Buy quality products at wholesale price

jQuery: The Write Less, Do More JavaScript Library

Re: UI Tabs and Flot issue