SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    over there
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question div sliding in from 'display: hidden;' state

    Currently, I'm using the following code to have some divs on my site show and hide from the content (not just toggling visibility):

    Code:
    function showHide(id) { 
    
    	if (document.getElementById) { 
    
    		obj = document.getElementById(id);
    
    			if (obj.style.display == "none") {
    	 			obj.style.display = ""; 
    			} 
    
    			else {
    				obj.style.display = "none"; 
    			} 
    	} 
    }
    Code:
    <div style="display: none; width: 90%;" class="wt" id="wtNews"> 
    	BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
    </div>  
    	
    <p><a href="#" onclick="showHide('wtNews'); return(false);">show/hide</a></p>
    What I want to do is have the div appear as if it is sliding in, instead of just appearing (similar to WindowsXP effect). If this isn't possible, is it possible to just "slide" the content that's below the div down by setting the height of the div to 0, set it to display but not visible, and then use js to gradually increase it's height, and then display?

    Thanks for any help!

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi buckeye, Welcome to SitePoint Forums!

    There are several different possibilities. Is your page online, so we can see the html structure?

    Using 'display:none' instead of 'visibility:hidden' makes this harder to do. Using 'display' is nice because the browser takes care of reflowing the html elements for you. But now you want to have some control over the appearance of this 'reflow' - "sliding in" instead of just appearing.

    But I can't actually make any suggestions until I can see the html structure and layout of your page.

    For slide implementation ideas, have a look at the function xSlideTo() which is part of the X Library.

  3. #3
    SitePoint Member
    Join Date
    Jan 2004
    Location
    over there
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would just point you to the page, but I'm working on it and nothing's uploaded yet.

    I've decided on just making the space for the div slide open, and then the div appears. I'm trying to go about it by having a table with 2 cells, the left one being something small like 10% wide, and then the right cell will hold the div that will display later.

    First, the table will push down the regular content. I was thinking of having some element (I guess a div, located in the left table cell) increase its height by using code based off the xSlideTo function, then I'd call the div to display. Basically, I just want to create an animated resize function.

    I looked around x.js, but didn't find anything that did this. I think I remember CBE having this functionality, but I couldn't find the example on cross-browser.com again.

    So, would you suggest this method, and could you point me in the direction of what code to use? Thanks again!

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the CBE animated resize demo you're thinking about.

    Sorry I haven't made any other suggestions. To be honest, I would not use tables for layout.

  5. #5
    SitePoint Member
    Join Date
    Jan 2004
    Location
    over there
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Hopefully I'll have some time to implement the code this week. I'll post the code if I feel someone else might be interested in it.


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
  •