PDA

View Full Version : Scrollable iFrame left-to-right



Guillaumeb
05-07-2006, 02:02 PM
Hi

I have found ecellent stuff over here . I've been using Dynamic drive for a while now

Right now I am particularly interested in the photo viewer scripts

I would like to display my albums thru an iframe but in a chronological order.

Right now my page are located at photos.guillaumeb.com (http://photos.guillaumeb.com), the paged is iframed from the homepage (http://www.guillaumb.com). i have put some <<< previous next>>> links to browse all the albums.

Now i would like to replace this browsing by something similar to the scrollable iframe we find here:
http://dynamicdrive.com/dynamicindex17/iframescroll.htm

instead of "up" and "down" i would have something like "newer" "older" with the page scrolling from left to right.

I have not found a way to tweak this script. Can anyone link me to a horizontal scrolling iframe?

Thanks a lot and keep up the good work!

jscheuer1
05-07-2006, 05:42 PM
Example top page:


<!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">
</head>
<body>
<!-- Scrollable iframe script- By Dynamic Drive -->
<!-- For original full source code and more DHTML scripts, visit http://www.dynamicdrive.com -->
<!-- This credit MUST stay intact for use -->
<!-- Modified in http://www.dynamicdrive.com/forums by jscheuer1 for right/left action -->
<iframe id="datamain" src="external.htm" width="300" height="23" frameborder="1" scrolling="no"></iframe>

<layer visibility=hide>
<div style="width:300px;" align="center">
<div style="float:left;"><a style="text-decoration:none;" href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">< <u>Left</u></a></div><div style="float:right;"><a style="text-decoration:none;" href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0"><u>Right</u> ></a></div> | <div style="clear:both;"></div>
</div>
</layer>
<!-- End Scrollable iframe -->
</body>
</html>

Example external.htm:


<!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>
<nobr id="content">A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. A long unbroken train of text and/or images. </nobr>
<!--DO NOT REMOVE BELOW SCRIPT. IT SHOULD ALWAYS APPEAR AT THE VERY END OF YOUR CONTENT-->

<script type="text/javascript">


//Scrollable content III- By http://www.dynamicdrive.com
//Modified here by jscheuer1 in http://www.dynamicdrive.com/forums
//for right/left action

var speed, currentpos=curpos1=0,alt=1,curpos2=-1

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var cent=document.getElementById('content').offsetWidth/2

function scrollwindow(){
temp=window.pageXOffset? window.pageXOffset : iecompattest().scrollLeft
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp

window.scrollBy(speed, 0)
}
onload=function(){
window.scrollBy(cent,0);
setInterval("initialize()",10);
}

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

Guillaumeb
05-07-2006, 08:38 PM
Thanks you so much this was precisely what I wanted. Gonna implement it right now:)