I'm facing an issue with a popup window that displays a frameset. Within one of the frames, I'm using jQuery tabs to show some text.
The problem arises when trying to display long text or when resizing the window, causing the horizontal scroll to disappear and requiring the use of the vertical scroll to access the end of the page. I suspect the jQuery tab implementation, as the horizontal bar vanishes when it is removed.
I've attempted to adjust CSS attributes, but have not been successful in resolving the issue.
<script type="text/javascript>
window.open("windowpoppup.html", "page",'width=1200px,height=400px,left=215px,top=25px,resizable=yes').focus();
</script>
windowpoppup.html
<frameset cols="250,">
<frame name="displayTabs" src="other.html" marginheight="0" marginwidth="0" scrolling="auto">
<frame name="otherContent" src="myTabs.html" marginheight="0" marginwidth="0" scrolling="auto">
</frameset>
myTabs.html
HTML
<div id="tabs">
<ul style="background-color: white; position: fixed; width: 100%;margin-top: 39px;">
<li><a class="tab1" id="0" href="#tab1">tab1</a></li>
<li><a class="tab2" id="1" href="#tab2">tab2</a></li>
<li><a class="tab3" id="2" href="#tab3">tab3</a></li>
</ul>
<div class="div1" id="tab1"><pre>long text</prev></div>
<div class="div2" id="tab2"></div>
<div class="div3" id="tab3"></div>
JAVASCRIPT
$(function() {
$( "#tabs" ).tabs({
activate: function (event, ui) {
var index = $('#tabs').tabs('option', 'active');
} });
});