jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tabs › Getting the tab window height
Tagged: javascript tabs, jQuery Tabs
This topic contains 11 replies, has 3 voices, and was last updated by Peter Stoev 12 years ago.
-
Author
-
I have an application where I’m setting the tab to take the full window height. I do this in a window resize handler, and set the tab as follows -:
h = $(window).height() - 20;
$('#mainTabs').jqxTabs('height', h);
This seems to work just fine, but if I try and read the height of a div inside the tab, I’m getting a size that’s larger than the actual available space (seemingly 36 pixels more). I suspect that this may be the header size, but I haven’t confirmed this.
What is the best way to find the inner height of the tab window?
Inside the tab I have a splitter, and the splitter bar extends below the tab window height, and I want to try and constrain it to the tab.
Any help would be greatfully received.
Thanks
ChrisYou can select the content element and use the jQuery’s height method to retrieve the content DIV tag’s height.
Sample HTML Structure for jqxTabs:
<div id='jqxTabs'> <ul> <li style="margin-left: 30px;">Node.js</li> <li>JavaServer Pages</li> </ul> <div id="tab1"> Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers. It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl. Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby. Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js includes a REPL environment for interactive testing. </div> <div> </div></div>
To get the height of the first tab’s content, you can use this:
var height = $("#tab1").height();
Hope this helps you.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks for the response Peter,
This is actually what I’m using, but the results aren’t consistant. The issue is possibly associated with scope – ie which tab is visible. The following code shows something along the lines of what I have, and shows the output. You can see that for the tab that is visible, the results look correct (I haven’t checked them, but they look ok). However, for the tab that’s not visible, invalid results are returned. Maybe this is just the way of life, and I’ve tried to handle this by detecting which tab is visible, but this doesn’t appear to be 100% reliable.#The other issue is that the splitter bar extends below the height of the tab window if you change tabs…
Thanks for your help.
Chris
$(document).ready(function () { var theme = ''; $("#tabs").jqxTabs({ theme: theme, height: '100%', width: 400, selectionTracker: true }); $('#splitter').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] }); $('#splitter2').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] }); $(window).bind("resize", function (event) { performLayout(); }); performLayout(); }); function performLayout() { var h = $(window).height() - 20; $('#tabs').jqxTabs('height', h); $('#size').html("tabs="+$("#tabs").height()+"splitter="+$("#splitter").height()+"splitter2="+$("#splitter2").height()+"splitter-1-1="+$("#splitter-1-1").height()+"splitter-2-1="+$("#splitter-2-1").height()); } html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } <div> Tab 1 Tab 2 <div> <div> Content 1.1 <div></div> </div> <div> Content 1.2 </div> </div> <div> <div> Content 2.1 </div> <div> Content 2.2 </div> </div></div>
Hi ChrisJ,
When a tab is not visible, the DIV tag’s display is set to ‘none’ i.e the jQuery’s height function will return 0 for a hidden tab.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter,
However, this is not what I’m seeing. The splitter that is not in view has a height that’s a bit larger than the tab that is in view. In any case, I can probably resolve this by trapping the “selected” event (although I’ve tried this and it’s not actually working – possibly because the selected event is called before the tabs are changed?).It simply does not seem possible to stop the splitter from resizing off the bottom of the window. If you run the code in the example above and resize a splitter, when you change back to the other tab the splitter bar extends outside of the tab window (ie off the bottom of the screen). I can’t work out how to resolve this. With a more complex application, it seems very difficult to get everything sized correctly.
Thanks
ChrisHi Chris,
I am not sure what exactly happens in this situation, but I will create a new work item regarding that scenario and we will do our best to improve the reported behavior for the next release.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for the support. If you want I can email you a more detailed application example.Thanks
ChrisThanks, Chris!
That would be very helpful. You can send the sample to support@jqwidgets.com.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi there!
Have you resolve this issue? I have the same trouble!
ThanksHi glip,
To make the Tab auto-resizable, set its “width” and “height” properties to percentage values.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comIt’s absolutly doesn’t help! I did all my dimensions in persentage. When switching between tabs layout of other tabs is broking down. Maybe you know what i do wrong?
Hi,
Here’s a sample which demonstrates how is expected to initialize jqxTabs widget and how should be initialized widgets inside jqxTabs.
Note: The Tab’s Size is set to “100%” so it will fit to the browser’s window.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This demo shows how to integrate jqxTabs with other widgets. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <style> html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; } </style> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var initGrid = function () { var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); $("#jqxGrid").jqxGrid( { width: '100%', height: '84%', source: dataAdapter, theme: theme, columns: [ { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 }, { text: 'S&P 500', datafield: 'S&P 500', width: 150 }, { text: 'NASDAQ', datafield: 'NASDAQ' } ] }); } var initChart = function () { // prepare the data var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // prepare jqxChart settings var settings = { title: "U.S. Stock Market Index Performance (2011)", description: "NASDAQ Composite compared to S&P 500", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { dataField: 'Date', formatFunction: function (value) { return months[value.getMonth()]; }, toolTipFormatFunction: function (value) { return value.getDate() + '-' + months[value.getMonth()]; }, type: 'date', baseUnit: 'month', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: true, gridLinesInterval: 3, gridLinesColor: '#888888', valuesOnTicks: false }, colorScheme: 'scheme04', seriesGroups: [ { type: 'line', valueAxis: { unitInterval: 500, minValue: 0, maxValue: 3000, displayValueAxis: true, description: 'Daily Closing Price', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'S&P 500', displayText: 'S&P 500' }, { dataField: 'NASDAQ', displayText: 'NASDAQ' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); } // init widgets. var initWidgets = function (tab) { switch (tab) { case 0: initGrid(); break; case 1: initChart(); break; } } $('#jqxTabs').jqxTabs({ width: '100%', height: '100%', theme: theme, initTabContent: initWidgets }); }); </script></head><body class='default'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;"> <div style="height: 20px; margin-top: 5px;"> <div style="float: left;"> <img width="16" height="16" src="../../images/catalogicon.png" /> </div> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> US Indexes</div> </div> </li> <li> <div style="height: 20px; margin-top: 5px;"> <div style="float: left;"> <img width="16" height="16" src="../../images/pieicon.png" /> </div> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> NASDAQ compared to S&P 500</div> </div> </li> </ul> <div style="overflow: hidden;"> <div id="jqxGrid"> </div> <div style="margin-top: 10px; height: 15%;"> The S&P 500 index finished 2011 less than a point away from where it ended 2010 -- 0.04 points down to be exact. That's the smallest annual change in history. At its peak in April, the S&P had climbed more than 8%. But by October, at the lowest levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8% for the year.</div> </div> <div style="overflow: hidden;"> <div id='jqxChart' style="width: 100%; height: 100%"> </div> </div> </div></body></html>
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.