Scroll bar buttons to control Iframe?

**o0paradox0o** · 06-27-2006, 11:43 PM

I have a webpage I'm working on which has an iframe in it..

I want to put scroll bar buttons outside the iframe (to the right of it) to control it...

How can this be achieved?

You have a similar script here:

http://www.dynamicdrive.com/dynamici...gescroller.htm

but this only controls the same window.

How could this script be modified to allow control of an iframe?

Any help would be appreciated...

Yours,

-o0paradox0o

================================================

**jscheuer1** · 06-28-2006, 04:35 AM

You cannot access a file from another domain for this because control of iframe content is limited to the top page's domain. If both pages are on the same domain (or both are local), this will work:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Iframe Scroller - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div style="position:relative;width:340px;height:300px;">
<iframe name="bob" src="whatever.htm" width="300" height="300" scrolling="no" frameborder="0"></iframe>

<div id="staticbuttons" style="position:absolute;bottom:0;right:0">
<a href="javascript:void(0);" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="arrows_up.gif" border="0"></a><br>
<a href="javascript:void(0);" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="arrows_dn.gif" border="0"></a>
</div></div>
<script type="text/javascript">

//Iframe Scroller script - loosely adapted from:
//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//adapted by jscheuer1 in http://www.dynamicdrive.com/forums
//This credit MUST stay intact for use

var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)

var myspeed=0  //Set for initial scrolling, if desired (ex:3), otherwise 0

/////////////////Stop Editing///////////////
function scrollwindow(){
bob.scrollBy(0,myspeed)
}

function initializeIT(){
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById)
setInterval("initializeIT()",20)

</script>
</body>
</html>

**jscheuer1** · 06-28-2006, 05:33 AM

Ooops, you can actually control an off site page with this scheme but, you need to put the off site page in another iframe on (in the above example) whatever.htm. If you want/need to go this route, whatever.htm could look like so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
</head>
<body>
<iframe src="http://someotherdomain.com/somepage.htm" width="300" height="9000" scrolling="no" frameborder="0"></iframe>
</body>
</html>

**o0paradox0o** · 06-28-2006, 11:38 AM

ty for the assistance... however I note a curious defect when using this script and viewing the page through Firefox..

It works fine.. However,...

If you click one of the (up / down)buttons.. it produces an error..

Any idea how to fix that?

It's not a huge issue... but It would be preferable that it diden't happen

Thanx again for your time..

-o0paradox0o

**jscheuer1** · 06-28-2006, 08:20 PM

That's an error left over from the original script and I discovered another. To fix the one that you are talking about, change both instances of:

Code:

javascript:

in the href attributes of the buttons to:

Code:

javascript:void(0);

The error I found was just a typo and didn't seem to affect anything. Where I had:

Code:

<div style="position:relative;width:340px;height300px;">

It should be:

Code:

<div style="position:relative;width:340px;height:300px;">

I will go back and change these in my previous post.

**o0paradox0o** · 06-29-2006, 01:03 AM

Yeah I noticed that typo.. no biggie.. dreamweaver highlighted it for me.... so i knew what was up..

Thanks for the de-bug...

and once again thanks for all your help...

- o0paradox0o

Kudos,.. and good luck to you...

**o0paradox0o** · 06-29-2006, 01:31 AM

Crap... I have another problem now.....

Seems we are not out of the wood-work just yet...

The div with the buttons in it seems to work fine in 1024 x 768...

But when i'm viewing in 1280 x 1024 it's off the left... Which probably means it's off in 800x600 too... : sigh :

Uggg,... theres gotta be an easier way... lol

Maybe theres a way to code them directly inline in the page.. like make slices for buttons in PS on the margin around the iframe.... and then place the code around them??? Is that feasable?

What should I do?!

thanks..

-o0paradox0o

**o0paradox0o** · 06-29-2006, 01:50 AM

Figured you might like to see what your helping with

and in here you can see the probelm i'm having...

http://i20.photobucket.com/albums/b2...17/screen1.jpg

http://i20.photobucket.com/albums/b2...17/screen2.jpg

Compare the 1st to the 2nd

::sigh::

-o0paradox0o

**jscheuer1** · 06-29-2006, 04:39 AM

That really shouldn't be a problem if you are using a similar markup to my demo:

HTML Code:

<div style="position:relative;width:340px;height:300px;">
<iframe name="bob" src="whatever.htm" width="300" height="300" scrolling="no" frameborder="0"></iframe>

<div id="staticbuttons" style="position:absolute;bottom:0;right:0">
<a href="javascript:void(0);" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="arrows_up.gif" border="0"></a><br>
<a href="javascript:void(0);" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="arrows_dn.gif" border="0"></a>
</div></div>

Notice how the container division encompasses both the arrows and the iframe and is relatively positioned. The iframe is static (no declared position property) so falls within the container as long as the container is big enough for it. The arrows are absolute position in relation to the bottom and right edges of the container, which is wider than the iframe to account for the width of the arrow buttons.

**o0paradox0o** · 06-29-2006, 08:10 AM

Heres my code... maybe i'm missing something...

I'm an artist by trade not a coder

lol

HTML Code:

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/on1_10.jpg','images/on1_11.jpg','images/on1_12.jpg','images/on1_13.jpg','images/on1_14.jpg','images/on1_15.jpg')">
<!-- ImageReady Slices (new webpage2.psd) -->
<table id="Table_01" width="1051" height="860" align="center" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="16">
			<img src="images/new-webpage2_01.jpg" width="1023" height="20" alt=""></td>
		<td width="28">
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td width="134" rowspan="17">
			<img src="images/new-webpage2_02.jpg" width="134" height="839" alt=""></td>
		<td colspan="14">
			<img src="images/new-webpage2_03.jpg" width="740" height="65" alt=""></td>
		<td width="149" rowspan="17">
			<img src="images/new-webpage2_04.jpg" width="149" height="839" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="65" alt=""></td>
	</tr>
	<tr>
		<td colspan="9" rowspan="2">
			<img src="images/new-webpage2_05.jpg" width="289" height="29" alt=""></td>
		<td colspan="5">
			<img src="images/new-webpage2_06.jpg" width="451" height="15" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td width="3" rowspan="2">
			<img src="images/new-webpage2_07.jpg" width="3" height="20" alt=""></td>
		<td colspan="4" rowspan="2">
			<iframe id="clock" name="clock" src="clock.html" frameborder="0" width="448" height="20" scrolling="no" >Sorry, Your Browser Does Not Support IFrames</iframe></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/new-webpage2_09.jpg" width="289" height="6" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">			<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/on1_10.jpg',1)"><img src="images/new-webpage2_10.jpg" alt="Home" name="Home" width="72" height="30" border="0"></a></td>
		<td width="62">			<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('News','','images/on1_11.jpg',1)"><img src="images/new-webpage2_11.jpg" alt="News" name="News" width="62" height="30" border="0"></a></td>
		<td width="77">			<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','images/on1_12.jpg',1)"><img src="images/new-webpage2_12.jpg" alt="Gallery" name="Gallery" width="77" height="30" border="0"></a></td>
		<td colspan="4">			<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Resume','','images/on1_13.jpg',1)"><img src="images/new-webpage2_13.jpg" alt="Resume" name="Resume" width="75" height="30" border="0"></a></td>
		<td colspan="3">			<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bio','','images/on1_14.jpg',1)"><img src="images/new-webpage2_14.jpg" alt="Bio" name="Bio" width="44" height="30" border="0"></a></td>
		<td width="80">			<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/on1_15.jpg',1)"><img src="images/new-webpage2_15.jpg" alt="Contact" name="Contact" width="80" height="30" border="0"></a></td>
		<td colspan="2">
			<img src="images/new-webpage2_16.jpg" width="330" height="30" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/new-webpage2_17.jpg" width="239" height="100" alt=""></td>
		<td colspan="8">
			<img src="images/new-webpage2_18.jpg" width="501" height="100" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="100" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/new-webpage2_19.jpg" width="239" height="22" alt=""></td>
		<td colspan="8" rowspan="2">
			<img src="images/new-webpage2_20.jpg" width="501" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="2">
			<img src="images/new-webpage2_21.jpg" width="239" height="8" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td width="34" rowspan="3">
			<img src="images/new-webpage2_22.jpg" width="34" height="312" alt=""></td>
		<td colspan="6" rowspan="3">
			<iframe id="ifrm" name="ifrm" src="main2.html" frameborder="0" width="433" height="312" scrolling="no" >Sorry, Your Browser Does Not Support IFrames</iframe></td>
		<td width="34" rowspan="3"><img src="images/new-webpage2_24.jpg" width="34" height="312"> </td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td width="20">
			<img src="images/new-webpage2_25.jpg" width="20" height="299" alt=""></td>
		<td colspan="4">
			<iframe id="lftifrm" name="lftifrm" src="left.html" frameborder="0" width="198" height="299" scrolling="no" >Sorry, Your Browser Does Not Support IFrames</iframe></td>
		<td width="21">
			<img src="images/new-webpage2_27.jpg" width="21" height="299" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="299" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="2">
			<img src="images/new-webpage2_28.jpg" width="239" height="11" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="2">
			<img src="images/new-webpage2_29.jpg" width="501" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/new-webpage2_30.jpg" width="239" height="19" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="2">
			<img src="images/new-webpage2_31.jpg" width="239" height="140" alt=""></td>
		<td colspan="8">
			<img src="images/new-webpage2_32.jpg" width="501" height="116" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="116" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/new-webpage2_33.jpg" width="501" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="14">
			<img src="images/new-webpage2_34.jpg" width="740" height="31" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="31" alt=""></td>
	</tr>
	<tr>
		<td colspan="14">
			<img src="images/new-webpage2_35.jpg" width="740" height="79" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="79" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="134" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="20" height="1" alt=""></td>
		<td width="52">
			<img src="images/spacer.gif" width="52" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="62" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="77" height="1" alt=""></td>
		<td width="7">
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td width="13">
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td width="3">
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td width="38">
			<img src="images/spacer.gif" width="38" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="80" height="1" alt=""></td>
		<td width="296">
			<img src="images/spacer.gif" width="296" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="149" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
<div id="staticbuttons" style="position:absolute; bottom:0; right:0; left: 840px; top: 369px; width: 36px; height: 114px;">
<a href="javascript:void(0);" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0">
<img src="images/images/scroll1_28.jpg" border="0"></a><br>
<img src="images/images/scroll1_29.jpg">
<a href="javascript:void(0);" onmouseover="myspeed=thespeed" onmouseout="myspeed=0">
<img src="images/images/scroll1_30.jpg" border="0"></a>
</div>
<script type="text/javascript">

//Iframe Scroller script - loosely adapted from:
//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//adapted by jscheuer1 in http://www.dynamicdrive.com/forums
//This credit MUST stay intact for use

var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)

var myspeed=0  //Set for initial scrolling, if desired (ex:3), otherwise 0

/////////////////Stop Editing///////////////
function scrollwindow(){
ifrm.scrollBy(0,myspeed)
}

function initializeIT(){
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById)
setInterval("initializeIT()",20)

</script>
</body>
</html>

Does this provide any insight?

thanx..

-o0paradox0o

Thread: Scroll bar buttons to control Iframe?

Thread Tools

Search Thread

Scroll bar buttons to control Iframe?

Bookmarks

Bookmarks

Posting Permissions