Topic: Just slide a div (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=27770" title="Pages that link to Topic: Just slide a div (Page 1 of 1)" rel="nofollow" >Topic: Just slide a div <span class="small">(Page 1 of 1)</span>\

 
butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 04-11-2006 21:25 Edit Quote

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 -

TwoD
Bipolar (III) Inmate

From: Sweden
Insane since: Aug 2004

IP logged posted posted 04-11-2006 21:42 Edit Quote

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

code:
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

DmS
Maniac (V) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

IP logged posted posted 04-11-2006 22:00 Edit Quote

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...}-

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 04-11-2006 23:35 Edit Quote

Sweet

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

I arrpreciates it!

- Butcher -

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 04-12-2006 03:50 Edit Quote

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/

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 04-12-2006 19:29 Edit Quote

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 -

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 04-12-2006 19:49 Edit Quote

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

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 04-13-2006 15:02 Edit Quote

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/

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 04-13-2006 18:15 Edit Quote

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 -

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 04-13-2006 18:52 Edit Quote

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/

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 04-14-2006 03:27 Edit Quote

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 -

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 04-14-2006 04:37 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu