Setup :
I have a containing div which is meant to be scrollable. This is a container for my jquery ui tab div.
Problem:
When I scroll the container in IE8 it scrolls other content in it but the jquery UI tab is fixed as though position=fixed. Works fine in FF. Any help wele. Many thanks
CSS:
#content {
overflow:auto;
margin: 1px;
height: 700px;
}
div.content-container {
border: solid 1px #C8C8C8;
padding:10px;
background-color: #F5F3E5;
margin: 1px 2px 10px 1px;
}
js:
$('#tabs').tabs();
html:
<div id="content">
<div class="content-container">
<div id="tabs">
</div>
</div>
</div>
Setup :
I have a containing div which is meant to be scrollable. This is a container for my jquery ui tab div.
Problem:
When I scroll the container in IE8 it scrolls other content in it but the jquery UI tab is fixed as though position=fixed. Works fine in FF. Any help wele. Many thanks
CSS:
#content {
overflow:auto;
margin: 1px;
height: 700px;
}
div.content-container {
border: solid 1px #C8C8C8;
padding:10px;
background-color: #F5F3E5;
margin: 1px 2px 10px 1px;
}
js:
$('#tabs').tabs();
html:
<div id="content">
<div class="content-container">
<div id="tabs">
</div>
</div>
</div>
- 1 What a well formed question. +1 – Phil Commented Jul 25, 2011 at 15:45
- Still no answer is odd, I have the same issue and it's been a couple of months already. – Nick-ACNB Commented Nov 17, 2011 at 21:08
- I am also having this problem and have spent a very long time working on a fix to no avail so far. I'll post an answer if I figure it out – Jeff Escalante Commented Jan 5, 2012 at 16:25
- If you could take the time to create a jsFiddle, I would appreciate it. I could but having it ready would be advantageous. jsfiddle – Gabriel Ryan Nahmias Commented Feb 28, 2012 at 2:05
4 Answers
Reset to default 1Add position:relative to the scrolling container. This is a mon issue in IE.
I have the exactly same problems with other ponents - toggles and slider. When I use standard ponents for this I have no troubles, but it occurs only with the jquery ui library so I suppose it is a jQuery UI bug.
Can't reproduce on Firefox/Chrome and IE9 - only IE7/IE8.
I had this same problem in IE7 and a few others and I spent a couple hours trying every fix we could possibly think of, but to no avail. I figured it wasn't anywhere close to worth it to continue debugging something that was probably a bug in jquery UI (for IE7) and rewrote all the JS in three lines of jquery. For reference, if anyone else is struggling with it, this is what I did.
html
<div id='tabs'>
<ul>
<li><a href='#tab-1'></a><li>
<li><a href='#tab-2'></a><li>
<li><a href='#tab-3'></a><li>
</ul>
<div id='tab-1'>
<p>Some content</p>
</div>
<div id='tab-2'>
<p>Some content</p>
</div>
<div id='tab-3'>
<p>Some content</p>
</div>
</div>
relevant css (using scss here)
#tabs {
position: relative;
height: 250px; /* whatever the height is of your container */
& > div {
position: absolute;
top: 0;
margin-top: 10px;
&.hidden { visibility: hidden; }
}
javascript (requires jquery)
$('#tabs li a').click(function(){
$('#tabs > div').addClass('hidden');
$($(this).attr('href')).removeClass('hidden');
});
Hope this helps someone. This is probably a lot lighter weight than using the full tabs plugin anyway, in all honesty, and gets the job done quite nicely. If this is not plete enough or you can't get this code to work, drop me a ment and I'll help you out or put up a js fiddle.
Try following:
Define the height of container as:
.content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; }
/* Tabs
--------------------------------------------------- */
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; }
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
#tabs .tabs_img { float: left; background-color: #aaa; margin: 0px 0px 0px 0px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }
#tabs {height: 100%; overflow: 'auto';}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating a windows-like interface with jQuery UI</title>
<!-- Load the jQuery UI CSS -->
<link rel="stylesheet" type="text/css" href="mtl.css">
<link rel="stylesheet" href="https://code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<!-- Load jQuery first before jQuery UI! -->
<script src="http://code.jquery./jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
//$('#draggable3').dialog({width:'auto',height:'auto'});
// $('#tab_container').dialog({width:'600px',height:'auto'});
$( "#tabs" ).tabs();
// $('#tab_container').dialog({width:'600px',height:'auto'});
})
</script>
<style>
/* Style sheets for tab.*/
/* Containers
--------------------------------------------------- */
.content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; }
/* Tabs
--------------------------------------------------- */
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; }
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
#tabs .tabs_img { float: left; background-color: #aaa; margin: 0px 0px 0px 0px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }
#tabs {height: 100%; overflow: 'auto';}
</style>
</head>
<body>
<!-- Begin Tabs Container -->
<div id="tab_container" class="dialog_window" title="Tab Window Title">
<div class="content_container_1">
<!-- Begin Tabs Area -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">jQuery UI</a></li>
<li><a href="#tabs-2">jQuery</a></li>
<li><a href="#tabs-3">ThemeRoller</a></li>
</ul>
<!-- Begin Tabs Section #1 -->
<div id="tabs-1" style='max-width:400px;height:450px;overflow:auto; '>
<p>
<img class="tabs_img" src="images/jquery_ui.png" width="325" height="225" alt="jQuery UI" /><a href="http://jqueryui./" target="_blank" title="jQuery UI">jQuery UI</a> was built on top of the jQuery library and features ready to use widgets, advanced effects, animation, and much more.
</p>
<p>
Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, jQuery UI makes customizing your application fast and easy.
</p>
<p>
Detailed documentation and tutorials available on the <a href="http://jqueryui./" target="_blank" title="jQuery UI Official Website">official website</a> allow you to start using and learning jQuery UI right away. jQuery UI is also supported by a large and enthusiastic munity of web developers.
</p>
<p>
<a href="http://jqueryui./" target="_blank" title="Visit The jQuery UI Website">Visit The Official jQuery UI Website</a>
</p>
</div>
<!-- End Tabs Section #1 -->
<!-- Begin Tabs Section #2 -->
<div id="tabs-2" style='max-width:400px;height:450px;overflow:auto;'>
<p>
<img class="tabs_img" src="images/jquery.png" width="325" height="225" alt="jQuery" /><a href="http://jquery./" target="_blank" title="jQuery">jQuery</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development.
</p>
<p>
On the official jQuery website you can find <a href="http://docs.jquery./" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery./" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on <a href="http://docs.jquery./Using_jQuery_with_Other_Libraries" target="_blank" title="How to use jQuery with other Libraries">How to use jQuery with other Libraries</a> and much more.
</p>
<p>
jQuery is lightweight, CSS3 pliant and cross browser tested. jQuery was designed to change the way developers write JavaScript!
</p>
<p>
<a href="http://jquery./" target="_blank" title="Visit the jQuery Website">Visit the Official jQuery Website</a>
</p>
</div>
<!-- End Tabs Section #2 -->
<!-- Begin Tabs Section #3 -->
<div id="tabs-3" style='max-width:400px;height:450px;overflow:auto;'>
<div id="draggable3" class="dialog_window" title="Traced Modules Minimize">
<div class="css-tvw">
<ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2"><a>SubmitBWTable [ Submit ]</a></label>
<ul>
<li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label>
<ul>
<li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label>
</li>
</ul>
<ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2">SubmitBWTable [ Submit ]</label>
<ul>
<li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label>
<ul>
<li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label>
</li>
</ul>
</div>
</div>
</div>
<!-- End Tabs Section #3 -->
</div>
<!-- End Tabs Area -->
</div>
</div>
<!-- End Tabs Container -->
</body>
</html>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745287836a4620669.html
评论列表（0条）