PDA

View Full Version : 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/dynamicindex2/pagescroller.htm

but this only controls the same window.

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

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:


<!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:


<!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:


javascript:

in the href attributes of the buttons to:


javascript:void(0);

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


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

It should be:


<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...

:D

- 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/b230/Agent117/screen1.jpg

http://i20.photobucket.com/albums/b230/Agent117/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:


<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


</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

jscheuer1
06-29-2006, 10:46 AM
Image ready slices are a pain and when you need to edit them to add things, can be impossible to work with. Either redesign your page with the buttons as an integral part of the image ready scheme or, redesign without image ready (best) or, you can try this fix -

Get rid of this:


<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>

Then in the table cell, where the buttons belong, change this:


<td width="34" rowspan="3"><img src="images/new-webpage2_24.jpg" width="34" height="312"> </td>

to this:


<td width="34" rowspan="3" style="background-image:url('images/new-webpage2_24.jpg');width:34px;height:312px;text-align:center;">
<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"><br>
<a href="javascript:void(0);" onmouseover="myspeed=thespeed" onmouseout="myspeed=0">
<img src="images/images/scroll1_30.jpg" border="0"></a></td>

I can tell that it will work or at least be real close in IE. Other browsers, even IE, are hard to test without the actual images. If you need more help, I would need a link to the live page.

o0paradox0o
06-29-2006, 03:21 PM
Sounds good I'll give that a shot...

I can put buttons in there no problem...



I used photoshop cs2 to make the template, and do the slices...

do you have a suggestion as some better tool to use other then PS??


Thanx Once Again,

-o0paradox0o

ReBirth
01-31-2007, 09:25 AM
I've been looking all over the internet to find something like this and it's been a lifesaver, thanks jscheuer1 !

I do have one problem however, and I know it's a question to which you don't like to answer to on here...But I'm really struggling with it and in my (EXTREMELY) limited knowledge of this I can't figure it out...

I have two IFRAMES which I need scrollers for and obviously when I put i nthe second one then both ceases to work, so there's a conflict but I have no idea what to change to make it work...

I have changed the frontend in this bit on both to match the IFRAME ID's, but still no luck :


ifrm.scrollBy(0,myspeed)

I've tried various other things s well but no luck :( IF anyone has a spare minute could they maybe give me some advice please ?

Thanks :)

Evolver
04-30-2008, 03:52 AM
Hello,

I am working on a kiosk that needs to be editable by my client's web developer. I am using a static environment of XP/IE7 so i don't need to worry about other browsers etc.

What i have is an iframe with a menu that the client's guy can update by adding new menu buttons. I need to have 2 buttons on the parent page (up/down) that slide the menu up and down by a certain amount of pixels. The actions can only take place on the Press action because it is a touch screen and hovering is not an option. Pressing and holding is not an option either. I need it to slide, hopefully smoothly, to a set amount of pixels, say 100px up or down when someone presses on the buttons. I can't use anchors becuase i don't know how large it will get when the client edits it, and he won't be able to add them.

An example of what i would like to do is a combination of this coding and one of dyn-web's scripts but i can't get him to respond to any emails. I was hoping someone here could help me with this issue.

The scrolling "glide-OnClick" example is located here (http://www.dyn-web.com/code/scroll/images.php) as the second example down.

Any help would be appreciated.

Thanks!