JS slide

Hi guys,

I want to incorporate slide into my HTML page, but are unsure of how to do it..

Basically as it stands, I have a button on my webpage [well a whole series of buttons, for simplicity, consider one button], when you click on this button, I call a JS fucntion, which looks something like below, when you click on the button, the Iframe appears, when you click on the same button again, it disappears

Now the iFrame just appears, I want it to slide down, I've looked at jQuery, but find the quite difficult to follow, other JS stuff is equally baffling

Is there anyone who knows of some simple method which can just make my div tage magically slide up and down..?

Sorry for the convuluted speech, I've been at this for a good 8hours and not getting anywhere.

Thanks for your thoughs in advance.

What's so difficult about the jQuery syntax?

Let's say that you want to animate an image with an id value of myImage. It would be as simple as: and

Originally posted by Zein Nunna:
Hi guys,

I want to incorporate slide into my HTML page, but are unsure of how to do it..

Basically as it stands, I have a button on my webpage [well a whole series of buttons, for simplicity, consider one button], when you click on this button, I call a JS fucntion, which looks something like below, when you click on the button, the Iframe appears, when you click on the same button again, it disappears

function frame(url) { if (div.getAttribute('flag') == "false"){ var m_iframe = document.createElement("iframe"); m_iframe.setAttribute('id', "frameID_" + span); m_iframe.scrolling = "yes"; m_iframe.frameBorder = "0"; m_iframe.src = url; m_iframe.width="100%"; m_iframe.height="600px"; m_iframe.border="1px"; m_iframe.padding="0px"; m_iframe.margin="0px"; m_iframe.overflow="hidden"; div.setAttribute('flag', "true"); //adds iFrame to some div tag div1.style.display = "block"; else{ //remove Iframe //set div.setAttribute('flag', "false"); }

Now the iFrame just appears, I want it to slide down, I've looked at jQuery, but find the quite difficult to follow, other JS stuff is equally baffling

Is there anyone who knows of some simple method which can just make my div tage magically slide up and down..?

Sorry for the convuluted speech, I've been at this for a good 8hours and not getting anywhere.

Thanks for your thoughs in advance.

Dunno about simple, but if you set the location of your DIV using absolute positioniong..say the TOP attribute for instance, then you can make a timer that modifies that TOP value. For instance, you have TOP:100px; when you display the DIV. Then, setTimeout(funcName, time); that is recursive for X amount of times incrementally/decrementally changing the TOP value.

show DIV at object.style.top=x;
call delayed function to increment/decrement TOP:x;
keep calling decrement/increment function for set number of times keeping state value in global variable

clear as mud? of course this is a real thread killer if you plan on taking more than a second or so to adjust the DIV tag to the final destination.

Hi guys,

Well what I've done is below, doesnt seem to work...

The JS file is..

The HTML looks like

So simply, I add the iFrame, to the inner DIV, then change out div to "display:inline", then start adding height to the outer DIV incrementally - however it seems to ignore the DIV heights, and chooses to just use the iFrame height.

Any pointers, the pseado code sounds simple enough right??