PDA

Click to See Complete Forum and Search --> : how do you scroll a layer or iframe by clicking an image?

ShrineDesigns
12-17-2002, 04:04 AM
wow my first question

how do you scroll a layer or iframe by clicking an image?

i'm helping someone out with a layout he want a layer or iframe that has no scrollbar and be able to scroll up and/or down it. i know this can be done for layers but i'm sure about the iframe.

thanks
swon
12-17-2002, 07:10 AM
Try this (IE >=5)and make some adjustments for other browsers:

<head>
<title></title>
<meta name="author" content="Swon">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="scroller" style="position:absolute;left:207;top:2;z-index:2;background:buttonface;border:2px groove #9F9F9F,#EFEFEF;visibility:show;height:24;">
<a href="javascript:;" onClick="scrollup()" onMouseout="stop()"><img src="images/scrollup.gif" width="15" height="15" border="1" alt="Scroll Up" style="border:1px outset #EFEFEF" onMouseOver="javascript:this.style.border='1px groove #EFEFEF'"onMouseOut="javascript:this.style.border='1px outset #EFEFEF'"></a>
<a href="javascript:;" onClick="scrolldown()"onMouseout="stop()"><img src="images/scrolldown.gif" width="15" height="15" border="1" alt="Scroll Down"style="border:1px outset #EFEFEF" onMouseOver="javascript:this.style.border='1px groove #EFEFEF'"onMouseOut="javascript:this.style.border='1px outset #EFEFEF'"></a><a href="javascript:;" onClick="defaultscroll()"><img src="images/scrolldefault.gif" width="15" height="15" border="1" alt="Ausgangsposition"style="border:1px outset #EFEFEF" onClick="javascript:this.style.border='1px groove #EFEFEF'"onMouseOut="javascript:this.style.border='1px outset #EFEFEF'"></a>

</div>
<br><br><br>
<div id="fenster" style="position:absolute;top:0;z-index:1;height:100%;">
Content<br><br>Content<br><br>Content<br><br>Content
<br><br>Content<br><br>Content<br><br>Content<br><br>
Content<br><br>Content<br><br>Content<br><br>Content
<br><br>Content<br><br>Content<br><br>Content<br>
<br>Content<br><br>Content<br><br>Content<br><br>
Content<br><br>Content<br><br>Content<br><br>Content<br><br>Content
<br><br>Content<br><br>Content<br><br></div>

<script language="JavaScript">
<!--
i=0;
a=0;
m=0;
var tid;
var tid2;
innerHeigh = document.body.clientHeight;
scrollHeigh = document.getElementById("fenster").offsetHeight-innerHeigh;
oftop = document.getElementById("fenster").offsetTop;


function scrollup(){

if(i<1000)
{i=i+10;a=a-5;}
document.getElementById("fenster").style.top = a;
tid = setTimeout("scrollup()",1);
if(a == -scrollHeigh){
clearTimeout(tid);i=0;a=0;}

}
function scrolldown(){

if(m<1000 && a < 0)
{m=m+10;a=a+5;}
document.getElementById("fenster").style.top = a;
tid = setTimeout("scrolldown()",1);
if(a == 0){
clearTimeout(tid);i=0;m=0;}

}

function stop()
{
clearTimeout(tid);
clearTimeout(tid2);

}
function defaultscroll()
{
clearTimeout(tid);
clearTimeout(tid2);
document.getElementById("fenster").style.top = 0;
a=0;
i=0;
}
//-->
</script>
</body>
</html>

regards

Swon
ShrineDesigns
12-18-2002, 02:06 AM
thanks dave clark and swon
ShrineDesigns
12-21-2002, 02:18 AM
how can i continuiously scroll an iframe with an onMouseOver event?

self.frames["iframeName"].scrollBy(+0,+20);
only scrolls down 20 pixels per mouse over
swon
12-21-2002, 07:26 AM
ShrineDesigns I guess thats your desired function:

<script language="JavaScript">
<!--
i=0;
function scrollit()
{
if(i<1000)
{i=i+1;}
self.frames["iframeName"].scrollBy(+0,+20);
tid = setTimeout("scrollit()",200);
}
function stopp()
{
clearTimeout(tid);
i=0;;
}
//-->
</script>
<noscript></noscript>
<body>
<a href="#" onclick="scrollit()" onMouseout="stopp()">scroll</a>
<iframe src="test.html" name="iframeName" width="500" height="100" scroll=yes>
</iframe>
</body>
ShrineDesigns
12-22-2002, 12:55 AM
thanks swon that works good