JS Slide

[williamZanelli]

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.

 

William

 

[corbin]

If you can't figure out how to do something that simple in jQuery, you probably aren't going to be able to easily write it your self x.x.  I would either figure out how to use jQuery or Mootools or something similar, or I would find something through Google.  Atleast some script to base it off of so you have an idea where to start.  (A framework like jQuery or mootools would probably be over kill for this since it would add like 70KB overhead and some client side parsing.)

[williamZanelli]

Well I've done the following...

 

doesnt seem to work...

 

The JS file is..

//create the iFrame,
  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="400px";
  m_iframe.border="1px";
  m_iframe.padding="0px";
  m_iframe.margin="0px";
  m_iframe.overflow="hidden";

//Div is inner div - dentonted in HTML as id="div"
//1DIV is outer div - denoted as div1Var

div.appendChild(m_iframe);
   div1.style.top = "0px";
div1.style.display = "inline";


while (setHeight < 600){
	setTimeout ('toggleUp()', 500);
	 setHeight = setHeight + 75;
	// alert ( "setHeight hieght  = " + setHeight);
}

 

The HTML looks like

 

	
<div id="div1var" style="border:thick #99FF99; display:none; top:0px;">
<div id="div" flag="false"> </div>
</div>
	    

 

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??

 

William