<!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>Scroll click</title>
<style type="text/css">
h1{ font-size:24px; color:rgb(50,50,250); margin-left: 31px;}
p{margin:5px;}
.nota{color:rgb(220,80,0)}
/* ... */
#box{ position:relative; margin:50px auto; width:260px; height:202px; overflow:hidden; background: #F0F;}
#divo{ position: absolute; top:0; left:0; width:250px; height:200px; overflow: hidden; background: #999; z-index:2; }
.content{ width:235px; padding:5px; background:#00FF99; margin:0;}
#barra{ position:absolute; top:0; right:0; width:20px; height:200px; background:#FFF; border:1px solid; z-index:2; }
#sop{ position:absolute; top:0; right:0; width:18px; height:18px; border:1px solid; text-align:center; cursor:pointer; }
#sot{ position:absolute; bottom:0; right:0; width:18px; height:18px; border:1px solid; text-align:center; cursor:pointer;}
#sop:hover, #sot:hover{ background:yellow;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="Scroll_mouse_key.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
// Call class methods
ScrollMouseKey.scorriMouse(); // scroll the content by mouse
ScrollMouseKey.scorriKey(); // scroll the content by keyboard
}); // chiude ready
</script>
</head>
<body>
<h1> Scroll content by mouse and keyboard </h1>
<p class='nota'>
Class to scroll the content inside a element with mouse (mouseover) as well keyboard: <b>arrows ↑</b> and <b>↓</b>, <b>Pag↑</b> and <b>Pag↓</b>, <b>Start</b> and <b>End</b> </p>
<p>
<b>You need jQuery library</b> (the latest version is always the best choose). Take care to set the elements as you can see here. The div <q>box</q> is the box parent. You can change the element names in the class where you will see <b>CONFIG</b>. You can set also the scroll-speed; there are two speed: variable <b>vel1</b> set the speed from top to bottom and <b>vel2</b> set the speed from bottom to top. <br />
Scrolling by mouse and keyboard are indipendent. You can choose, for example, only one method or both (see the call to the class).
</p>
<div id="box">
<div id="divo">
<div class="content">
Start <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br />
Molte volte per comodità di linguaggio usiamo dire "olio d'oliva" intendendo "l'olio extravergine d'oliva". E' lo stesso motivo per cui abbiamo dato questo nome al nostro E' lo stesso motivo per cui abbiamo dato questo nome al nostro nome al nostro nome al nostro nome al nostro <br /><br />
END
</div><!--content-->
</div><!--divo-->
<div id="barra">
<div id="sop"> ∨ </div>
<div id="sot"> ∧ </div>
</div><!--barra-->
</div><!-- box -->
</body>
</html>
|
Download
