SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Content shakes off in use of JQuery effect

    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.

    My Page.zip

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I have understood. Thank you.....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •