...

View Full Version : accessing iframe elements doesn't work



drdre
03-07-2005, 01:33 AM
i have problems accessing an id of an iframe from its parent object. although i know how this works i just doesn't work.

when i'm accessing the id by scrollframename.document.getElementById('scroll').style.left =- speed*i+"px" it works... although this is the very same isn't it?

the problem is: i'm doing an image scrolling script and want the image to scroll right and left but when it scrolls left and then i click on the right, the image starts scrolling from the beginne and not from the position it was before :( i think this has got something to with the variable that i cannot access directly...

can anyone help me?

parent.html


<html>
<head>
<title>title</title>

<style type="text/css" media="screen"><!--
#stage { visibility: visible; position: absolute; top: 150px; left: 150px; width: 649px; height: 312px }
#nav { visibility: visible; position: absolute; top: 261px; left: 808px; width: 100px; height: 100px }
--></style>

<script type="text/javascript">

var update = 20
var speed = 6
var i = 0
var j = 0

var iframe = document.getElementById('scrollframename');
var scrollobj = iframe.document.getElementById('scroll');

function moveleft() {
i++

if (window.rightvar) {
stopscroll()
}

scrollobj.style.left =- speed*i+"px"
leftvar = setTimeout("moveleft()",update)
}

function moveright() {
j++

if (window.leftvar) {
stopscroll()
}

scrollobj.style.left =+ speed*j+"px"
rightvar = setTimeout("moveright()",update)
}

function stopscroll() {
// STOPSCROLL
if (window.leftvar)
clearTimeout(leftvar)
if (window.rightvar)
clearTimeout(rightvar)
}

</script>
</head>

<body bgcolor="#ffffff">
<div id="stage">
<iframe id="scrollframeid" name="scrollframename" src="scrollframe.html" width="649" height="312" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" allowtransparency="true"></iframe>
</div>
<div id="nav">
<a href="javascript:moveleft()">left</a>
<a href="javascript:moveright()">right</a>
</div>
</body>
</html>

scrollframe.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<style type="text/css" media="screen"><!--
#scroll { visibility: visible; position: absolute; top: 0; left: 0; width: 3245px; height: 312px }
--></style>
</head>

<body bgcolor="#ffffff">
<div id="scroll">
<img src="1.jpg" alt="" width="649" height="312" border="0"><img src="2.jpg" alt="" width="649" height="312" border="0"><img src="3.jpg" alt="" width="649" height="312" border="0"><img src="4.jpg" alt="" width="649" height="312" border="0"><img src="5.jpg" alt="" width="649" height="312" border="0"></div>
</body>
</html>

glenngv
03-07-2005, 02:28 AM
The left property includes the unit so you need to parseInt it to remove the px.

scrollobj.style.left = parseInt(scrollobj.style.left) + (speed*j) + "px";

drdre
03-07-2005, 02:43 AM
thanks a lot! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum