Topic: Just slide a div

I have a div that gets displayed inline when a function is called and is then set to display=none after a given amount of time. My boss wants me to find a way to have the div slide in instead of just showing up. Just for clarity sake, when the div slides in, it needs to slide in from the top of the page (oof screen) and and push the rest of the content down as it does so. This doesn't seem like it should be a big deal, but I don't seem to be able to find a beginner type article or tutorial to read to get me started on moving a div a pixel or 2 at a time so it looks to be sliding.

Thanks in advance for any help.

- Butcher -

A simple way to move a div and then hide it would be to create a function like this:

function moveDiv(id){
 var div=document.getElementById(id)
 var newpos=parseInt(div.style.top)+2+"px"
 if(newpos<600){  // Here you put the value it should move to
  setTimeout("moveDiv("+id+")",100) // Tweak the time to get a smooth movement.
 }
 else{
   setTimeout("functionToHideDiv()",1000)
 }
}

Just remember to give your div a top value of -height or less by default, or the script won't know from where to move it.

Don't know how this will work out with inline though.

/TwoD

take a look here, http://www.dmsproject.com/test/team24/projprocess.html a lot o slidin 'n hidin goin on
Done a while back and based on some scripts from http://www.quirksmode.org/ -> DHTML -> Micro API and some help from this friendly community. Mr.Max among others.

Fell free to use without abuse
/D

{cell 260} {Blog}
-{"Theories without facts are just religions...?}-

Sweet

Thanks guys, that gives me good starting points of working code that I can understand and build from.

I arrpreciates it!

- Butcher -

Here are some AJAX-y links. You probably know them already but just in case:

http://script.aculo.us/
http://prototype.conio.net/
http://openrico.org/rico/home.page
http://moofx.mad4milk.net/

Steve

Thanks for the links. I hadn't been to any of those sites save for the last one.


DmS

I borrowed the javascript from your site and was able to bend a few of the functions into what I needed and it works very nicely.... Thanks! Oh, and the credits will be with the code.

Now I'm having one other problem that I've done quite a bit of Googling about and found nothing. I was hoping maybe somebody here has found a fix for it. The page I'm building has a Flash movie embedded in a div on the page. At certain intervals the Flash calls a javascript function that slides the div that the movie is in down a few hundred pixels to make room for another div sliding in from the top. The sliding up and down all works beautifully and looks good in IE and Opera. In Firefox though it causes a terrible flicker of the movie all over the page. My boss just wants me to exclude the sliding stuff from FF but I figured if anybody new any fixes for this I would try them first.

Thanks again all.

- Butcher -

I was aboutn to push submit on the openrico link but see it in steve's. I'm going to go bookmark steve's list now

cool stuff DmS

Only one thought comes to mind, and it might be a long shot. Flash has a "wmode" parameter. This is often used to enable dHTML menu items to render on top of a Flash movie (which otherwise defaults to a z index above everything else), but it might help in this case. The wmode "opaque" is said to be less processor intensive than "transparent".
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_12701

That being said, some Googling indicates there are some FireFox issues, so do some research.

BTW - with the new IE there are significant issues with embedding interactive Flash content. Best bet so far seems to be Geoff Stearn's FlashObject which uses a VERY clean JavaScript. Has the ability to pass wmode as a parameter:
http://blog.deconcept.com/flashobject/

I messed with the wmode parameter but it had no effect on the flicker in Firefox. On the other hand, I am having problems with flash's z-index in other places trying to get elements to display above a flash, so I will look into it from that perspective now. I have to say though that in my googling efforts on wmode before there's not a lot of indepth info on it out there.

Thanks all

- Butcher -

wmode opaque will definitely help with the z index. Sorry it didn't hep the FireFox flicker issue.
If your Flash content has any interactivity, use FlashObject if you can. Things are going to be messy for a while when the new IE is widely distributed. FlashObject has many advantages but fixing that issue is probably going to be what matters the most for general developers working with Flash content.

That, and the fact that it's by far the best way I have encountered to add indexable content to a page with Flash content.

http://blog.deconcept.com/flashobject/

Thanks Steve

I put the wmode tag in and it did help the z-index problems in IE but didn't seem to help in FF or Opera. Is this what you've generally found to be the case or am I still doing something wrong?

- Butcher -

Hmmm.

I'm sorry to say I don't routinely test in Opera, so I don't have an answer for that one.
I'm pretty sure I have found it to work with Mac FF.