positioning IFRAME with JavaScript

X

Xero

hello,

how do you position an <iframe> element using JavaScript, say 200 pixels
from the top and 0 pixels from the right?

thanks.

Xero
 
F

Fred

I use a lot of iFrames but I also use them within tables so I don't have a
problem with positioning. Take a look at
http://www.all-inclusive-hotels.co.uk/ and you will see that the search box
is an iFrame within a table.
If you don't use tables then probably better to look at one of the
Javascript forums.
 
X

Xero

thanks for replying, but i mean repositioning the <iframe> element by
clicking on a hyperlink with JavaScript ...

i know by 'positioning' many of you think of placing the <iframe> on the
page and leave it there, but i actually mean positioning the <iframe> to
different positions on the page by clicking on different hyperlinks.

sorry for being ambiguous ... and thanks again.
 
T

Tom Miller

thanks for replying said:
clicking on a hyperlink with JavaScript ...

i know by 'positioning' many of you think of placing the <iframe> on the
page and leave it there, but i actually mean positioning the <iframe> to
different positions on the page by clicking on different hyperlinks.
Xero,
I believe there is some javascript code that does something like that at:
www.javascriptsource.com It calls it the "drag and drop" menu. Its under
the "navigation" topic at the top of the page. There is another snipet of
code there that mentions something about allowing the user to set the
parameters for where they want the menu to display on the page. The
drop/drag code looks something like this:
-------------------------------snip--------------------------------------------------

<!-- TWO STEPS TO INSTALL DRAG AND DROP MENU:



1. Copy the coding into the HEAD of your HTML document

2. Add the last code into the BODY of your HTML document -->



<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->



<HEAD>



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original: ScriptBreaker -->

<!-- Web Site: http://www.ScriptBreaker.com -->

<!-- Begin

<style>

..move

{

width:100%;

background-color:#99CCFF;

border-bottom:1px solid blue;

font-size:14px;

font-family:vardana;

font-color:"#33CCAA";

text-align:center;

}

..info

{

width:100%;

background-color:#99CCFF;

border-top:1px solid blue;

font-size:13px;

font-family:vardana;

font-color:"#33CCAA";

}

..panel

{

width:150;

position:absolute;

border:1px solid blue;

left:350;

top:200;

font-size:13px;

font-family:vardana;

}

..panel a:visited{color:blue;}

..panel a{text-decoration:none;color:blue}

..panel a:hover{text-decoration:none;}



#panel a.visited{

text-decoration:none;

}

..menu

{

width:100%;

background-color:lightyellow;

font-size:13px;

font-family:vardana;

}

</style>



<SCRIPT LANGUAGE="JavaScript">



N = (document.all) ? 0 : 1;

var ob;

var over = false;



function MD(e) {

if (over)

{

if (N) {

ob = document.getElementById("panel");

X=e.layerX;

Y=e.layerY;

return false;

}

else {

ob = document.getElementById("panel");

ob = ob.style;

X=event.offsetX;

Y=event.offsetY;





}

}

}



function MM(e) {

if (ob) {

if (N) {

ob.style.top = e.pageY-Y;

ob.style.left = e.pageX-X;



}

else {

ob.pixelLeft = event.clientX-X + document.body.scrollLeft;

ob.pixelTop = event.clientY-Y + document.body.scrollTop;

return false;

}

}

}



function MU() {

ob = null;

}



if (N) {

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

}



document.onmousedown = MD;

document.onmousemove = MM;

document.onmouseup = MU;



</script>



// End -->

</HEAD>



<!-- STEP TWO: Copy this code into the BODY of your HTML document -->



<BODY>



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original: ScriptBreaker -->

<!-- Web Site: http://www.ScriptBreaker.com -->

<!-- Begin

<div id="panel" class="panel" >

<script language="JavaScript">

function getArray(id)

{

var splitarray = link[id].split("|");

return splitarray;

}



function info(i,obj,col)

{



sublink = getArray(i);

infobar = document.getElementById("infob");

infobar.innerHTML = "<img src='pointer2.gif'> "+sublink[2];

obj.style.backgroundColor=col;

}



function endi(obj,col)

{

obj.style.backgroundColor=col;

infobar = document.getElementById("infob");

infobar.innerHTML = "<img src='pointer2.gif'> <br>";

}



var link = new Array();

link[0] = ". HOME|http://javascriptsource.com |Visit my homepage";

link[1] = ". JavaScipts|http://www.javascripts.com|Free JavaScripts";

link[2] = ". My links|http://www.webdeveloper.com |Visit my links";

link[3] = ". HOME|http://javascriptsource.com |Visit my homepage";

link[4] = ". JavaScript |http://www.javascript.com|Free JavaScripts";

link[5] = ". My links|http://www.webdeveloper.com |Visit my links";



document.write("<div class='move' onmouseover='over=true;'
onmouseout='over=false;' style='cursor:move'><font color=red><b>JavaScript
Source</b></font></div><div class='menu'><br></div>");

for(i=0;i<link.length;i++)

{

sublink = getArray(i);

document.write("<a href='"+sublink[1]+"'><div class='menu'
onmouseover=\"info("+i+",this,'gold')\"
onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'> "+ sublink[0]
+"</div></a>");

}

document.write("<div class='menu'><br></div><div class='info' id='infob'
name='infob'><img src='pointer2.gif'> <br></div>");

</script>

</div>





<!-- end Source -->

// End -->





<p><center>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>



<!-- Script Size: 4.20 KB -->
-------------------------------------------------snip-------------------------


Tom
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top