Scroll content when user hovers mouse on arrow

nerd99 · October 19, 2010

Hi,

I have a site that contains a content are that requires a scroll function. I want to use custom buttons/arrows that scroll the textarea when the user hovers the mouse over the buttons/arrows.

I found this on a site that does exactly what I need mine to do, only problem is that the script uses iframes.

var timer_id;
function scroll_iframe(frm,inc,dir) {
  if (timer_id) clearTimeout(timer_id);
  if (window.frames[frm]) {
    if (dir == "v") window.frames[frm].scrollBy(0, inc);
    else window.frames[frm].scrollBy(inc, 0);
    timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
  }
}

function stopScroll() { if (timer_id) clearTimeout(timer_id); }

Here is an example of a page I want to incorporate such a script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/main2.css" rel="stylesheet" type="text/css" />

</head>

<body id='index'>
<div id='outerDiv'>
<div id="bg">

	<div id="insect"></div>

	<div id="header"></div>	

	<div id='leftcontainer'>
		<div id="leftspacer"></div>
		<div id="title"><?php include('heading.php'); ?></div>	
		<div id="definition"><?php include('cp_definition.php'); ?></div>	
		<div id="sub_links" class='menu2'><?php include('cp_sub_links.php'); ?></div>
	</div>

	<div id='middle'>
	<div id="nav"><?php include('cp_links.php'); ?></div>

         <div id="content">


		<table align="left" border="0">
		<tr><td align='center' width='120' height='67'><orange class='orangelink'><a href='cp_listen_filmtv2.php'>+</a></orange></td>
		<td><h4><a href='cp_listen_filmtv2.php'>Add New Film/TV</a></h4></td></tr>
<?php

//Fetch list of films from the database

$result = mysqli_query($connection,"SELECT * FROM films ORDER BY id DESC")
or die(mysqli_error($connection));

while($row = mysqli_fetch_array($result)) {


/* Fetching profile */

$id = $row['id'];
$name = $row['name'];
$img = $row['img'];
$title1 = $row['title1'];
$title2 = $row['title2'];
$title3 = $row['title3'];
$video = $row['video'];

echo	"<tr>
	<td><a href='cp_listen_filmtv3.php?film=".$video."'><img src='".$img."' width='120' height='67'></a></td>
	<td><h4>".$name."</h4><h3>".$title1."</h3><h3>".$title2."</h3><h3>".$title3."</h3></td>
	</tr>";

}

?>

		</table>
		</div><!-- END Content -->		
	</div>

	<div id="tail"></div>

	<div id="bottom"></div>

	<div id="footer"><?php include('footer.php'); ?></div>


</div><!-- END bg -->
</div><!-- END outerDiv -->
</body>
</html>

THIS IS THE DIV I WANT TO BE ABLE TO SCROLL (taken from the page above)

			<div id="content">


		<table align="left" border="0">
		<tr><td align='center' width='120' height='67'><orange class='orangelink'><a href='cp_listen_filmtv2.php'>+</a></orange></td>
		<td><h4><a href='cp_listen_filmtv2.php'>Add New Film/TV</a></h4></td></tr>
<?php

//Fetch list of films from the database

$result = mysqli_query($connection,"SELECT * FROM films ORDER BY id DESC")
or die(mysqli_error($connection));

while($row = mysqli_fetch_array($result)) {


/* Fetching profile */

$id = $row['id'];
$name = $row['name'];
$img = $row['img'];
$title1 = $row['title1'];
$title2 = $row['title2'];
$title3 = $row['title3'];
$video = $row['video'];

echo	"<tr>
	<td><a href='cp_listen_filmtv3.php?film=".$video."'><img src='".$img."' width='120' height='67'></a></td>
	<td><h4>".$name."</h4><h3>".$title1."</h3><h3>".$title2."</h3><h3>".$title3."</h3></td>
	</tr>";

}

?>

		</table>
		</div><!-- END Content -->

Is anybody able to offer a suggestion as to how I should approach and implement this? Is there a simple fix for the script I have included above?

Thanks!

Sign In

Scroll content when user hovers mouse on arrow

Recommended Posts

nerd99

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information