Javascript and css overflow question

[cip6791]

I used javascript to display different divs in one div. The problem is that I don't need overflow:scroll; to be activated all the time. Code below. Now ... since the overflow:scroll is set in css for test_two, I don't know how to deactivate the scroll for certain divs which have less content and don't need to scroll but still get the blank scroll bar on the left side. Hope anybody can give me a hand with this one.

 

<div id="test_two" style="background-image:url(../../../img/clenser_background.gif); repeat: repeat-y;">

<div id="navigation">
<ul>
<li><a href="#" onclick="pageSwitch(1); return false;">Link1</a></li>|
<li><a href="#" onclick="pageSwitch(2); return false;">Link2</a></li>|
<li><a href="#" onclick="pageSwitch(3); return false;">Link3</a></li>|
<li><a href="#" onclick="pageSwitch(4); return false;">Link4</a></li>
</ul>
</div>
<div id="page1" style="display:block;"></div>

<div id="page2" style="display:none;"></div>

<div id="page3" style="display:none;"></div>

<div id="page4" style="display:none;"></div>

 

CSS code for test_two

#test_two {
position:absolute;
top:0;
left:227px;
width:500px;
height:350px;
overflow:scroll;
overflow-x:hidden;

}

[lemmin]

Do you just mean this?

<div id="page2" style="display:none;overflow:visible"></div>

 

You can check the length of the innerText of the div if you want to dynamically set them if their contents are small enough.

[cip6791]

I don't want overflow visible on some of them. That's my only problem. And the display:none; is set so the other divs will not show up until the link is clicked. This is the link.

 

http://pixeltennis.com/produse_html/sub_produse/roc_demachiant/roc_lapte_demachiant_piele_normala.html

 

The "Produsul" and the "Sfatul RoC" are the two links that i'm working with.

 

"Produsul" doesn't have enough text to make the scroll bar scroll down. But it still shows up. I just want to hide it.

[lemmin]

"Produsul" doesn't have enough text to make the scroll bar scroll down. But it still shows up. I just want to hide it.

 

If you don't want the scrollbars on that div, don't use the style overflow:scroll. Seeing your code now, it would seem you want page1 to not have the scrollbars so it would be the same code that I posted but for the div with id="page1".

 

If your question is how to dynamically provide a scrollbar if the content overflows and not show the scrollbar if it doesn't need to scroll, then, like I said, check the length of the innerText. Let me know if that is the case and I can go more indepth.

[cip6791]

I just took out the overflow:scroll; and they all just started working right. The divs that should scroll are scrolling and the divs that don t need to scroll don t have the inactive scroll bar.

 

Thanks