1

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

user1747079
  • 121
  • 4

2 Answers2

0

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.

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • Thanks, that solves the problem of the mixing the layout. However, when navigating to that part now leaves me an empty space. I guess that's because that visibility:hidden takes up space? – user1747079 Oct 15 '12 at 12:49
  • "removes the element completely from the document" No, it is still in the DOM and can be re-styled via CSS or accessed via JavaScript. It's just hidden. – feeela Oct 15 '12 at 13:13
  • read this 'even though the HTML for it is still in the source code.' – sandeep Oct 15 '12 at 13:17
0

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();
andyace
  • 119
  • 1
  • 4
  • I tried it, but either I am doing something wrong or it is just not working. I tried putting it in the header of my html as well as in the body after the display:none div. I also tried adding $('#scroll1').show(); to the script as in your example `` – user1747079 Oct 20 '12 at 09:45