CODEWITHSUNDEEP
jquerycsstinyscrollbar
user1747079
user1747079

Reputation: 121

CSS display:none and tinyscrollbar conflict

I am adjusting a one page website with parts that are seen independently. For example when I push the button "services" it goes to that part of the page without showing the other content.

The services part needs a scrollbar. I am using tinyscrollbar for it. 

#services { width:1100px; height:440px; bottom:0; position:absolute; top:60px; display:none; }

When display:none is included, the scrollbar does not work. It is being displayed, but the bar is not able to scroll. The scrollbar works when I remove display:none, but it completely masses my layout. The content of services (3rd menu item) is now shown mixed up with the content of the 1st menu item on first visit. This is only on first visit. After using the menu the problem is gone and the layout is normal again.

I cannot figure out how to solve this.

Please help.

Thanks!

p.s. I cannot put the website online now. I added some screenshots, hope that makes things clear. deleted display:none added display:none the first screenshot displays a scrollable scrollbar whereas the second does not. The problem only appears on entering the website. When the buttons are pushed the problem dissapears

p.p.s. Please take a look here for the problem. I have uploaded the website: test.iwebs.ws

Upvotes: 1

Views: 2131

Answers (2)

andyace
andyace

Reputation: 119

You need to use the tinyscrollbar_update() function after you show the div if it was display:none; on page load.

var scrollbar = $('#services');
scrollbar.tinyscrollbar();

$('#services').show();

scrollbar.tinyscrollbar_update();

Upvotes: 0

sandeep
sandeep

Reputation: 92803

You can define visibility:hidden instead of display:none.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Upvotes: 0

Related Questions