CODEWITHSUNDEEP
jqueryhtmlcsspopupwindowjquery-tabs
Jils
Jils

Reputation: 783

keep horizontal scroll bar fixed

I have a popup window that display a framset, in one of my frames I use the jquery tab to display some texts.

My problem is when I try to display a long text or when my I reduce the window size, the horizental scroll disapears then I have to use the vertical scroll to reach the x-scroll at the end of the page. I suspect the jquery tab, because when I remove it the horizental bar is fixed.

I tried to play with css attributs but without success.

<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');
  } });

  });

Upvotes: 0

Views: 411

Answers (1)

Rajesh
Rajesh

Reputation: 24945

Per my understanding, You want to make Pop Up responsive, so that if window size is changed, you still can scroll.

This can be done using $(window).resize() of JQuery.

// You can customize padding based on your requirement
var paddingBottom = 100;

// Initial value
$('#tabs').height($(window).height() - paddingBottom )

// Resize event
$(window).resize(function(){ $('#tabs').height($(window).height() - paddingBottom ) })

Upvotes: 1

Related Questions