Online Shopping : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

22 of 57 people (39%) answered Yes
Recently 10 of 10 people (100%) answered Yes

Entry

How to make scrolls move slowly on mouseover but not go to a specific x,y & stop on mouseout?

Apr 7th, 2008 23:40
ha mo, Abolfazl Shirazi, Casch,


Abolfazl Shirazi :
Very good and perfect question you asked friend. The thing you want is 
very common in websites.
I tested this script in several text layers in this page in order that 
you know this will not work if the layer isn't big enough.
Try it :
<html>
<head>
<style type="text/css">
#divControl {position:absolute; left:120px; top:190px; width:250px; 
font-size:10pt; font-family:arial,helvetica,sans-serif; 
visibility:hidden;}
#divCont    {position:absolute; left:120px;top:250px; width:250px; 
height:150px; clip:rect(0px 250px 150px 0px);}
.clScroll   {position:absolute; font-size:10pt; font-
family:arial,helvetica,sans-serif; visibility:hidden;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && 
document.getElementById)?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !
this.opera5)?1:0;
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !
this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || 
this.ns6 || this.opera5)
	return this
}
var bw=lib_bwcheck()
timSpeed = 50
contHeight = 100
function makeScrollObj(obj,nest){
	nest=(!nest) ? "":'document.'+nest+'.'
	this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all
[obj]:bw.ns4?eval(nest+'document.'+obj):0;
  	this.css=bw.dom?document.getElementById(obj).style:bw.ie4?
document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
	this.height=bw.ns4?
this.css.document.height:this.el.offsetHeight
	this.top=b_gettop
	return this
}
var px = bw.ns4||window.opera?"":"px";
function b_gettop(){
	var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval
(this.css.pixelTop);
	return gleft;
}
var scrollTim = 1;
var active = 0;
function scroll(speed){
	clearTimeout(scrollTim)
	way = speed>0?1:0
	if ((!way && oScroll[active].top()>-oScroll
[active].height+contHeight) || (oScroll[active].top()<0 && way)){
		oScroll[active].css.top = (oScroll[active].top()+speed)
+px
		scrollTim = setTimeout("scroll("+speed+")",timSpeed)
	}
}
function noScroll(){
	clearTimeout(scrollTim)
}
function changeActive(num){
	oScroll[active].css.visibility = "hidden"
	active = num
	oScroll[active].css.top = 0+px
	oScroll[active].css.visibility = "visible"
}
function scrollInit(){
	oScroll = new Array()
	oScroll[0] = new makeScrollObj('divScroll1','divCont')
	oScroll[1] = new makeScrollObj('divScroll2','divCont')
	oScroll[2] = new makeScrollObj('divScroll3','divCont')
	oScroll[3] = new makeScrollObj('divScroll4','divCont')
	oScroll[0].css.left = 0+px
	oScroll[0].css.top = 0+px
	oScroll[0].css.visibility = "visible"
	oControl = new makeScrollObj('divControl')
	oControl.css.visibility = "visible"
}
onload = scrollInit;
</script>
</head>
<body>
<div id="divControl">
	<a href="#" onclick="changeActive(0); return false">Page 1</a>
	<a href="#" onclick="changeActive(1); return false">Page 2</a>
	<a href="#" onclick="changeActive(2); return false">Page 3</a>
	<a href="#" onclick="changeActive(3); return false">Page 4</a>
	<br><br>
	<a href="#" onmouseover="scroll(5)" onmouseout="noScroll()" 
onclick="return false">up</a>
	<a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()" 
onclick="return false">down</a>
</div>
<div id="divCont">
	<div id="divScroll1" class="clScroll">
		This is "page" 1, here you place some content.
		You should place more content then this
		or it won't scroll..blablablabl<br>
		<br>text text dummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy text text text dummy text text 
text dummy text <br>
	</div>
	<div id="divScroll2" class="clScroll">
		This is "page" 2...........
		<br>text textdummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy text text text dummy text text 
text dummy text <br>
		text text dummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy text text text dummy text text 
text dummy text <br>
		<br>text textdummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy text text text dummy text text 
text dummy text <br>
		text text dummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy text text text dummy text text 
text dummy text <br>
	</div>
	<div id="divScroll3" class="clScroll">
		This is "page" 3...........(can't scroll this one, to 
little content)
		<br>
	</div>
	<div id="divScroll4" class="clScroll">
		Page 4
		text text dummy texttext text dummy texttext text 
dummy text<br>
		<br>ext text dummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy texttext text dummy texttext text 
dummy text<br>
		<br>text text dummy texttext text dummy texttext text 
dummy text<br>
	</div>
</div>
</body>
</html>
Enjoy It !!!
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com