/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Dec 17.2002

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

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@swonDec 17.2002 — 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
Copy linkTweet thisAlerts:
@ShrineDesignsauthorDec 18.2002 — thanks dave clark and swon
Copy linkTweet thisAlerts:
@ShrineDesignsauthorDec 21.2002 — 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
Copy linkTweet thisAlerts:
@swonDec 21.2002 — 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>
Copy linkTweet thisAlerts:
@ShrineDesignsauthorDec 22.2002 — thanks swon that works good
×

Success!

Help @ShrineDesigns spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...