i'm using jQuery ui tab solution exactly as it is stated here http://jsfiddle.net/fordlover49/XHD5N/
everything works fine, except if i have a tab that has a lot of data, the browser will automatically scroll to the bottom of the window to show the content on the tab..
how do i keep the tabs in the same position regardless of how much data is on the tab? the tabs jumping up and down depending on the height of the tab drives me crazy - i have some data on the page above the tabs, so the tabs will be positioned half way on the screen (i want the tab to remain half way on the screen regardless of what's on the tab)
here is the full source code you can copy and paste test in your browser, please help!! ;)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by fordlover49</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$( "#tabs" ).tabs({
panelTemplate: "<iframe style='width:100%; border=0; height:500px'></iframe>",
idPrefix: "ui-tabs-",
select: function(event, ui) {
if (!$("#ui-tabs-" + ui.index).prop("src")) {
$("#ui-tabs-" + ui.index).attr("src", $.data(ui.tab, 'load.tabs'));
}
}
});
});
});//]]>
</script>
</head>
<body>
<div id="test" style="height:500px;">dummy</div>
<div id="tabs">
<ul style="padding: 0; margin: 0;">
<li><a id="recent-tab" href="#ui-tabs-0">Amazon</a></li>
<li><a id="popular-tab" href="http://jqueryui.com/demos/tabs">jQuery</a></li>
<li><a id="random-tab" href="http://www.jsfiddle.net">jsfiddle</a></li>
<li><a id="question-tab" href="http://www.bing.com">Bing</a></li>
</ul>
<div id="ui-tabs-0"> Select a tab, and watch it load!</div>
</div>
</body>
</html>