Content shakes off in use of JQuery effect

JavaScript
1

Hello there, I am new in web designing. Today I am facing a new and of course VERY ODD problem. I created a test page and used some JQuery hide(), show(), slideToggle() effects in several elements. The work is, if anyone clicks a content, a hidden table, or div is shown. And if anyone again clicks it, it disappears again.

I am going to attach my file as zipped as you will need it. First open index.html in the attachment. You will see a right-column named ‘the syllabus’. Click any of the “First Term”, “Second Term” or third- a hidden div will be shown. But while happening so, look at the whole body closely, you will see that the page shakes off a bit and it moves a bit left (or maybe right). Why is this happening?

The same thing happened for the left column data tables too (Click “First Term” and so on in the left column to display the tables), I fixed them by lowing down the top and bottom padding of the table (th, td) to a great extent. But for the right column, lowing down the top and bottom padding makes the layout look bad. Again, I don’t understand why the shaky effect is taking place for top and bottom padding.

Note: I used 960 Grid System (960.gs) to create the layout

@ralph_m
@Paul_O_B
(Wanna mention these people for helping me in my previous problems)

2

Hi,

When the elements are collapsed the page is short and has no vertical scrollbar n the viewport. When you open an element it becomes taller than the viewport so the right vertical scrolllbar kicks in thus moving the layout to the left a little. This is just default behaviour.

You can set the scrollbar to be visible at all times if you want with:


html{overflow-y:scroll}

This means that whyen the layout reaches the viewport there will be no jog as the scrollbar is already in place.

Of course that gives an ugly scrollbar when none is needed.

3

I have understood. Thank you…