PDA

View Full Version : Need help with mouse over scrolldown script

snuggles
10-24-2007, 01:18 PM
Hello everyone i'm new and I am having troubles with a script here is the code

</td>
</tr>
<tr>
<td height="215" width="792" colspan="3">
<p class="MsoNormal" align="justify">&nbsp;<p>&nbsp;</td>
</tr>
<tr>
<td height="855" width="553" rowspan="4">
&nbsp;</td>
<td height="29" width="187" align="center" valign="top">
<script>
var AMOUNT=5; /* distance to scroll for each time */
var TIME=35; /* milliseconds */
var timer=null;
function scrollIt(v)
{
var direction=v?1:-1;
var distance=AMOUNT*direction;
window.scrollBy(0,distance);
}
function down(v)
{
if(timer) { clearInterval(timer); timer=null; }
if(v)timer=setInterval("scrollIt(true)",TIME);
}
</script>
<a href="javascript:void(0)" onmouseout="down(false)" onmouseover="down(true)"><img border="0" src="images/gallery/ArrowUp.jpg" width="40" height="22"></a></td>
<td height="855" width="50" rowspan="4">
&nbsp;</td>
</tr>
<tr>
<td height="389" width="187" align="center" valign="bottom">
<iframe width="99%" height="99%" src="maintumb.htm" name="thumbs" align=left frameborder=0 hspace=0 vspace=0 name="I1" scrollbars="no"> </iframe>
</td>
</tr>
<tr>
<td height="39" width="187" align="center">
<img border="0" src="images/gallery/ArrowDown.jpg" width="40" height="22"></td>
</tr>
<tr>
<td height="419" width="187">
&nbsp;</td>


The script works yes it does it actually scrolls down on the page that the arrow button is on which i dont want. I want it to scroll down on my thumbnail page which the iframe is called "thumbs" the page name is actually callled "maintumbs.htm" I hope im making sense I dont want it to scroll down on the page that the arrow is on i want it to scroll down on a different page.
BillyGalbreath
10-24-2007, 07:36 PM
document.thumbs.scrollBy(0,distance);

If that doesn't work, then give the frame an ID:

<iframe width="99%" height="99%" src="maintumb.htm" name="thumbs" id="thumbs" align=left frameborder=0 hspace=0 vspace=0 name="I1" scrollbars="no"> </iframe>

Then set the JS line like this:

document.getElementById("thumbs").scrollBy(0,distance);

;)
snuggles
10-25-2007, 09:18 AM
unfortunately it gives me a runtime error

line: 52
error: object doesn't support this property or method

line 52: document.getElementById("thumbs").scrollBy(0,distance);
coothead
10-25-2007, 01:17 PM
Hi there snuggles,

I would suggest that you place the javascript in the head section of the document, rather than the body section. :agree:
This is the amended script...
<script type="text/javascript">
var amount=5; /* distance to scroll for each time */
var time=35; /* milliseconds */
var timer=null;
var v=true;
function scrollIt(v) {
direction=v?1:-1;
distance=amount*direction;
document.getElementById('thumbs').contentWindow.scrollBy(0,distance);
}
function down(v){
if(timer) {
clearInterval(timer);
timer=null;
}
if(v){
timer=setInterval("scrollIt(true)",time);
}
}
</script>
The iframe also needs id="thumbs"...
<iframe id="thumbs" src="maintumb.htm".......></iframe>
snuggles
10-25-2007, 01:41 PM
wooooooooooooohoooooooooooooooooooooo thx!
snuggles
10-25-2007, 01:52 PM
ok so that works thank you so much now when the person does the up arrow it is now configured to move thumbs upward... but now lol im trying to do it so when they mouseover the down arrow it scrolls downward.. So i did try it..it works but then it made the top arrow also scroll downwards. how do i stop that from going like that? do i have to rename the code for the down arrow?
coothead
10-25-2007, 01:53 PM
No problem, you're weeeeeeeeeeeeeeeelcome. :agree:
snuggles
10-25-2007, 03:36 PM
it works for the up arrow now im trying to get it for the down arrow but in the opposite diirection. Im having trouble because both are going the same direction
coothead
10-25-2007, 04:48 PM
Hi there snuggles,

have a look at this example...
http://mysite.orange.co.uk/azygous/snuggles.html
This is the code which you should be able to adapt for your page...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

<script type="text/javascript">
var amount=5; /* distance to scroll for each time */
var time=35; /* milliseconds */
var timer;
var test;
var inc=0;
var objd;
var obju;
var objt;
window.onload=function(){
objd=document.getElementById('down');
obju=document.getElementById('up');
objt=document.getElementById('thumbs');
objd.onmouseover=function(){
test=true;
scrolldown();
}
obju.onmouseover=function(){
test=false;
scrolldown();
}
}
function scrolldown() {
if(test==false){
amount=-5;
inc-=5;
}
else {
amount=5;
inc+=5;
}
objt.contentWindow.scrollBy(0,amount);
objd.onmouseout=function(){
clearTimeout(timer);
test=null;
return;
}
obju.onmouseout=function(){
clearTimeout(timer);
test=null;
return;
}

if(inc<5){
clearTimeout(timer);
test=null;
inc+=5;
amount=5;
return;
}
timer=setTimeout('scrolldown()',time);
}
</script>

</head>
<body>

<div>


<img id="down" src="images/arrow_up.gif" width="40" height="22" alt="">


<iframe id="thumbs" src="text_example.html" width="360" height="300" scrolling="no"></iframe>


<img id="up" src="images/arrow_dn.gif" width="40" height="22" alt="">


</div>

</body>
</html>
Also note that the up/down images do not need to be enclosed with a elements
snuggles
10-26-2007, 11:41 AM
OMG thx so much you r the most briliant person!!! I'm sure you might already have a hint of what I am trying to do I was trying to create a web gallery and I didnt want a scroll bar they r disgusting..so thank you so much for helping me :D u r the best of the best!!!
coothead
10-26-2007, 12:10 PM
Hi there snuggles,
It's great to see that my efforts have brought you so much pleasure. :agree:
snuggles
10-29-2007, 03:58 PM
Ok so I'm bringing this back to life. I was trying to edit ur code coothead..yeah i know how amatuer im sure :D But in my gallery here I have two different sets of thumbnail galleries on the same page which are iFrames. the vertical one which goes up and down and I also have a horizontal one which are both on the same page. Yes I know strange probably but intriguing.

So I thought I could somewhat edit your old code and make it work to scroll left and right instead of up and down, and guess what it does scroll left and right. But now my vertical scrollbar does not scroll up and down anymore. maybe its trying to scroll left and right i dont know but its not scrolling up and down. pls help i will keep trying to work on it also


here is the coding to the horizontal thumbnail iFrame


<td height="458" width="459" rowspan="2" align="center" valign="top">
<iframe width="99%" height="21%" id="thumbsfull" src="thumbsfullbackground.htm" name="thumbsfull" align=left frameborder=0 hspace=0 vspace=0 name="I1" scrollbars="no"> </iframe>
</td>
<td height="35" width="43" align="center">
&nbsp;</td>

<td height="421" width="43" align="right" valign="top">
<img border="0" id="right" src="images/gallery/Arrowleft.jpg" width="22" height="40"></td>
<td height="419" width="43" align="left" valign="top">
<img border="0" id="left" src="images/gallery/ArrowRight.jpg" width="22" height="40"></td>
<td height="421" width="187">
&nbsp;</td>




<script type="text/javascript">
var amount=5; /* distance to scroll for each time */
var time=35; /* milliseconds */
var timer;
var test;
var inc=0;
var objd;
var obju;
var objt;
window.onload=function(){
objd=document.getElementById('down');
obju=document.getElementById('up');
objt=document.getElementById('thumbs');
objd.onmouseover=function(){
test=true;
scrolldown();
}
obju.onmouseover=function(){
test=false;
scrolldown();
}
}
function scrolldown() {
if(test==false){
amount=-5;
inc-=5;
}
else {
amount=5;
inc+=5;
}
objt.contentWindow.scrollBy(0,amount);
objd.onmouseout=function(){
clearTimeout(timer);
test=null;
return;
}
obju.onmouseout=function(){
clearTimeout(timer);
test=null;
return;
}

if(inc<5){
clearTimeout(timer);
test=null;
inc+=5;
amount=5;
return;
}
timer=setTimeout('scrolldown()',time);
}
</script>

<script type="text/javascript">
var amound=5; /* distance to scroll for each time */
var timd=35; /* milliseconds */
var timed;
var tesd;
var ind=0;
var objl;
var objr;
var objf;
window.onload=function(){
objl=document.getElementById('left');
objr=document.getElementById('right');
objf=document.getElementById('thumbsfull');
objl.onmouseover=function(){
tesd=true;
scrollleft();
}
objr.onmouseover=function(){
tesd=false;
scrollleft();
}
}
function scrollleft() {
if(tesd==false){
amound=-5;
ind-=5;
}
else {
amound=5;
ind+=5;
}
objf.contentWindow.scrollBy(amound,0);
objl.onmouseout=function(){
clearTimeout(timed);
tesd=null;
return;
}
objr.onmouseout=function(){
clearTimeout(timed);
tesd=null;
return;
}

if(ind<5){
clearTimeout(timed);
tesd=null;
ind+=5;
amound=5;
return;
}
timed=setTimeout('scrollleft()',timd);
}
</script>
snuggles
10-30-2007, 05:58 PM
still no luck with getting them both to work
coothead
10-30-2007, 09:44 PM
Hi there snuggles,

I do not think that iframes are the best way to go for your project. :disagree:

Have a look at this example...
http://mysite.orange.co.uk/azygous/snuggles1.html
You can also down load a zip file - (1,535kb), that contains all the relevant files, here...
http://mysite.orange.co.uk/achelous/snuggles.zip
snuggles
10-31-2007, 11:36 AM
thank you so much. Yeah i know that iframes is probably never the best solution for anything. I am already inputing some css into my website. :D its a start. I did get the iframes to work now both thumbnail bars work. but also thanks for the wonderful css gallery. Just since I right now already set up my whole gallery with the iframes.. it would of been a lot of work to redo it to css. but thank you so much :D