Login   Register  
Icontem

File: Scroll_mouse_key.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Michele Prigigallo  >  Scroll Content  >  Scroll_mouse_key.html  >  Download  
File: Scroll_mouse_key.html
Role: Example script
Content type: text/plain
Description: Example
Class: Scroll Content
Scroll elements with keys or mouse jQuery plug-in
Author: By
Last change: this file is a example to see how the class can work
Date: 2012-01-16 05:46
Size: 5,570 bytes
 

Contents

Class file image Download 
<!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 &uarr;</b> and  <b>&darr;</b>,  <b>Pag&uarr;</b> and <b>Pag&darr;</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"> &or; </div>
		<div id="sot"> &and;  </div>
	</div><!--barra-->

</div><!-- box -->






</body>
</html>