Results 1 to 3 of 3

Thread: Animate by i d changing - good idea/bad idea?

  1. #1
    Join Date
    May 2010

    Animate by i d changing - good idea/bad idea?

    I'm not sure about whether or not I should do this. Consider a 3 column format consisting of left, center and right.

    I see multiple (yet certainly and easily finite) ways of displaying this page in various 2 column formats by hiding specific divs. It would seem natural, and elegant to animate the divs between formats as necessary to do screen "transitions" in an ajax driven website. The easiest way I could think to do this would be to reassign CSS via class or ID.

    Has anyone run into any prepackaged jquery libs that do this? If I can save myself the time to write one, that would be peachy!

    For example:

    To go from a 3 column format to a 2 column format with a left menu, the center column taking a fixed width, and no right column, I want to just change the IDs for each of the columns from 3col_left, 3col_mid, 3col_right to 2col_lmenu_left, 2col_lmenu_center, 2col_lmenu_right and hit a function and have the function animate from the old dimensions to the new dimensions.

    If no one's come across something like this, can anyone forsee any pitfalls when writing it? Anything I'd need to keep in mind?

  2. #2
    Join Date
    Jul 2008
    urbana, il
    ID's aren't actually supposed to be re-assigned, so use classes instead.

    if you do it in css, do it in css.
    simply add/remove classes to body, and code your css like:

    body.3col  #col1  { width: 10%; }
    body.2col  #col3  { width: 0%; }
    fake css, but hopefully you get my point: <body>'s class turns on/off entire sets of css rules as needed.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

  3. #3
    Join Date
    May 2010
    Fair enough. Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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