Networking | Hardware | Software | Multimedia | System | Unix&Linux | MBA

Home>>Hardware>>How do you add a scrollbar on mouseover.

How do you add a scrollbar on mouseover.

carl_mcdade
03-18-2006, 05:11 PM
I am using the Dynamic Drive Marque II script. What I have been trying to do for a 3 days now is change it so that not only does it pause on mouseover but a scrollbar appears also. this is so the user can scroll to the news they want.

So far I have only succeeded in crashing the page or freezing the scrolling div. Has anyone done this or have any tips on how it can be done?

thanks
vwphillips
03-18-2006, 09:39 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (18-March-2006) http://www.vicsjavascripts.org.uk

// Functional Code - NO NEED to Change

var zxcOOPCnt=0;

function zxcInitMess(zxcid){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.messoop){
zxcobj.messoop=new zxcMessOOP(zxcobj);
zxcobj.messoop.scroll();
}
}

function zxcMessOOP(zxcid){
this.ref='zxcMessOOP'+zxcOOPCnt;
window[this.ref]=this;
this.obj=(zxcid);
this.obj.messoop=this;
this.scrollobj=this.obj.getElementsByTagName('DIV')[0];
this.scrollobj.style.top=(this.obj.offsetHeight)+'px';
this.max=this.scrollobj.offsetHeight-this.obj.offsetHeight;
this.to=null;
this.delay=100;
this.slider=this.obj.getElementsByTagName('DIV')[1];
if (this.slider){
zxcVertScrollBar(this.slider,this.scrollobj.offsetHeight);
this.slider.responce=this.sliderFun;
this.slider.scroll=this.scrollobj;
this.slider.pheight=this.obj.offsetHeight;
}
zxcOOPCnt++;
}

zxcMessOOP.prototype.sliderFun=function(zxcr){
this.scroll.style.top=(this.pheight-zxcr)+'px';
}

zxcMessOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}

zxcMessOOP.prototype.scroll=function(){
this.scrollobj.style.top=(parseInt(this.scrollobj.style.top)-1)+'px';
this.pos=parseInt(this.scrollobj.style.top);
if (this.pos<=-this.max){
this.scrollobj.style.top=(this.obj.offsetHeight)+'px';
}
this.setTimeOut("scroll();",this.delay);
}

function zxcStopSOOP(zxcobj){
clearTimeout(zxcobj.messoop.to);
var zxcpos=-(zxcobj.messoop.pos-zxcobj.messoop.obj.offsetHeight);
var zxcmax=zxcobj.messoop.max+zxcobj.messoop.obj.offsetHeight;
zxcobj.messoop.slider.slider.style.top=(zxcobj.messoop.slider.min+zxcobj.messoop.slider.travel*(zxcpos/zxcmax))+'px';
zxcobj.messoop.slider.style.visibility='visible';
}

function zxcStartSOOP(zxcobj){
zxcobj.messoop.slider.style.visibility='hidden';
zxcobj.messoop.scroll();
}

function zxcStopOOP(zxcobj){
zxcobj.style.overflow='auto';
zxcobj.messoop.scrollobj.style.width=(zxcobj.offsetWidth-20)+'px';
clearTimeout(zxcobj.messoop.to);
}

function zxcStartOOP(zxcobj){
zxcobj.style.overflow='hidden';
zxcobj.messoop.scrollobj.style.width=(zxcobj.offsetWidth)+'px';
zxcobj.messoop.scrollobj.style.top=(zxcobj.messoop.pos)+'px';
zxcobj.messoop.scroll();
}

//-->
</script>

</head>

<body onload="zxcInitMess('M2');zxcInitMess('M1');">
<div id="M1" style="position:relative;overflow:hidden;width:200px;height:100px;border:solid black 1px;background-color:#FFCC66;"
onmouseover="zxcStopSOOP(this); "
onmouseout="zxcStartSOOP(this); "
>
<div style="position:absolute;left:0px;top:0px;width:200px;background-color:#FFFFCC;">
0 Some Text<br>
1 Some Text<br>
2 Some Text<br>
3 Some Text<br>
4 Some Text<br>
5 Some Text<br>
6 Some Text<br>
7 Some Text<br>
9 Some Text<br>
<br>
<br>
</div>

<div style="position:absolute;visibility:hidden;left:185px;top:0px;width:20px;height:100px;font-size:12px;background-color:red;" >
<div style="top:0px;left:0px;width:20px;height:15px;background-color:silver;" ></div>
<div style="top:20px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
<div style="top:0px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
</div>
</div>

</div>
<br>
<br>
<div id="M2" style="position:relative;overflow:hidden;width:200px;height:200px;border:solid black 1px;background-color:#FFCC66;"
onmouseover="zxcStopSOOP(this); "
onmouseout="zxcStartSOOP(this); "
>
<div style="position:absolute;left:0px;top:0px;width:200px;background-color:#FFFFCC;">
0 Some More Text<br>
1 Some More Text<br>
2 Some More Text<br>
3 Some More Text<br>
4 Some More Text<br>
5 Some More Text<br>
6 Some More Text<br>
7 Some More Text<br>
9 Some More Text<br>
10 Some More Text<br>
11 Some More Text<br>
12 Some More Text<br>
13 Some More Text<br>
14 Some More Text<br>
15 Some More Text<br>
16 Some More Text<br>
17 Some More Text<br>
19 Some More Text<br>
20 Some More Text<br>
21 Some More Text<br>
22 Some More Text<br>
23 Some More Text<br>
24 Some More Text<br>
25 Some More Text<br>
26 Some More Text<br>
27 Some More Text<br>
29 Some More Text<br>
<br>
<br>
</div>
<div style="position:absolute;visibility:hidden;left:185px;top:0px;width:20px;height:200px;font-size:12px;background-color:red;" >
<div style="top:0px;left:0px;width:20px;height:15px;background-color:silver;" ></div>
<div style="top:20px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
<div style="top:0px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
</div>
</div>


</div>
<script language="JavaScript" type="text/javascript">
<!--
// Scroll Bars (01-Mar-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Scoll Bars return a value relative to the Sroll Bar Slider position
// which can be used to control the value, position or other attributes of an elements.

// The Scroll Bar can include a slider and Left and Right Scroll Buttons.
// This Script addresses four types of Scroll Bars.
// 1) No Slider or Scroll Buttons.
// 2) Slider but no Scroll Buttons.
// 3) Slider and Right Scroll Button but no Left Scroll Button.
// 4) Slider and Left Scroll Button but no Right Scroll Button.
// 5) Slider, Right Scroll Buttons and Left Scroll Button.

// A value between 0 and a specified maximum
// relative to the clicked or Slider position
// is passed to a specified function as the first argument
// together with the Slide Bar object as the second argument.

// Application Notes

// Each type of Scroll Bar is intialised from a <BODY> or window onload event
// e.g. <BODY onload="zxcHoriScrollBar('HClickBar',2,'Demo',true);" >
// where
// parameter 0 = the unique ID name of the Bar (string)
// parameter 1 = the maximum value to be returned (digits)
// parameter 2 = the function to return the value to (string) (see: Applying External Function)
// parameter 3 = automatically set cursors (true or for no cursor, false or omitt )



// **** No Slider or Scroll Buttons.
//
// Bar is Defined in the HTML Code
// Horizontal Example HTML Code : <div id="HClickBar" style="width:150px;height:20px;background-color:red;"></div>
// Vertical Example HTML Code : <div id="VClickBar" style="width:20px;height:150px;background-color:red;"></div>
// The <DIV> style dictates the appearance of the Bar
// Clicking the bar will return a value, relative to the click position, to the specified function.


// **** Slider and Buttons
//
// The slider and buttons are defined as <DIV>s nested in the Bar <DIV>
// The first <DIV> is the slider
// The optional second and third <DIV>s are the scroll left and right buttons

// Horizontal Example HTML Code :
// <div id="HSlider3" style="position:absolute;overflow:hidden;left:-30px;top:105px;width:150px;height:15px;background-color:red;" >
// <div style="top:0px;width:15px;height:20px;background-color:silver;" ></div>
// <div style="left:0px;top:0px;width:15px;height:20px;background-color:gray;" ></div>
// <div style="left:20px;top:0px;width:15px;height:20px;background-color:gray;" ></div>
// </div>
//
// The scroll left or scroll right function of the buttons is assigned dependent on the style left of the <DIV>
// The 'left:0px;' button is assigned as the sroll right button and postioned at the left of the bar.
// The 'left:20px;' button is assigned as the sroll left button and postioned at the right of the bar.
// Note that the X(left) positions of the slider and buttons are reassigned during initilisation.

// Vertical Example HTML Code :
// <div id="VSlider3" style="position:absolute;overflow:hidden;left:125px;top:-0px;width:15px;height:120px;background-color:red;" >
// <div style="left:0px;width:20px;height:15px;background-color:silver;" ></div>
// <div style="top:0px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
// <div style="top:20px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
// </div>
// The scroll up or down right function of the buttons is assigned dependent on the style top of the <DIV>
// The 'left:0px;' button is assigned as the sroll down button and postioned at the top of the bar.
// The 'left:20px;' button is assigned as the sroll up button and postioned at the bottom of the bar.
// Note that the Y(top) positions of the slider and buttons are reassigned during initilisation.

// Applying External Function

// A value between 0 and the specified maximum value
// relative to the clicked or Slider position
// are passed to a specified function as the first argument
// together with the Slide Bar object as the second argument.

// The slider object has two properties which may be of particular use in the function
// .bar = the Scroll Bar object;
// .bartype = the Scroll Bar type 'horizontal' or 'vertical';


// To exercise full control of the slider from an external functions
// the slider object, travel, current position and minimum position parameters are required
// These are available as the Scroll Bar parameters:
// where ScrollBarObject is document.getElementById('ScrollBarID')
// slider object = ScrollBarObject.slider (object)
// slider X position = ScrollBarObject.xpos (digits) (Horizontal Scroll Bar)
// slider Y position = ScrollBarObject.ypos (digits) (Vertical Scroll Bar)
// slider travel = ScrollBarObject.travel (digits)
// slider minimum position = ScrollBarObject.min (digits)

// There may be as many applications as required on a page.


// Functional Code


var zxcDragX,zxcDragY,zxcMseX,zxcMseY,zxcObj,zxcDir,zxcTO;
var zxcSX=0;
var zxcSY=0;
var zxcCursor='pointer';
if (document.all){ zxcCursor='hand'; }


// Required for Vertical
function zxcVertScrollBar(zxcid,zxcmag,zxcfunction,zxccur){
var zxcs=zxcid;
if (typeof(zxcs)=='string'){ zxcs=document.getElementById(zxcid); }
zxcs.responce=window[zxcfunction];
zxcs.mag=zxcmag;
zxcs.min=0;
var zxcdivs=zxcs.getElementsByTagName('DIV');
if (!zxcdivs[0]){
zxcs.style.cursor=zxcCursor;
zxcs.onclick=function(event){ zxcVBarClick(event,this); }
return;
}
// following statements in this function are required for the slider and buttons
var zxcsl=zxcdivs[0];
zxcs.max=zxcs.offsetHeight-zxcsl.offsetHeight;
var zxcslS=zxcsl.style;
zxcslS.position='absolute';
zxcslS.top='0px';
if (zxccur){ zxcslS.cursor='n-resize'; }
zxcsl.sb=zxcs;
zxcsl.bar=zxcs;
zxcsl.bartype='vertical';
zxcsl.onmousedown=function(event){zxcVMseDSlide(event,this); }
zxcsl.mag=zxcmag;
for (var zxc0=1;zxc0<zxcdivs.length;zxc0++){
var zxcbut=zxcdivs[zxc0];
var zxcbutS=zxcbut.style;
zxcbutS.position='absolute';
if (zxccur){ zxcbutS.cursor=zxcCursor; }
zxcbut.sl=zxcsl;
zxcbut.sb=zxcs;
zxcbut.onmouseup=function(){clearTimeout(zxcTO); }
if (zxcbut.offsetTop>0){
zxcbutS.top=(zxcs.offsetHeight-zxcbut.offsetHeight)+'px';
zxcbut.onmousedown=function(){zxcVMseDBut(this,+1); }
zxcs.max-=zxcbut.offsetHeight;
}
else {
zxcbutS.top='0px';
zxcbut.onmousedown=function(){zxcVMseDBut(this,-1); }
zxcs.min=zxcbut.offsetHeight;
zxcslS.top=zxcs.min+'px';
}
}
zxcs.ypos=zxcs.min;
zxcs.slider=zxcsl;
zxcs.travel=zxcs.max-zxcs.min;
}

// Required for Vertical - No Slider
function zxcVBarClick(event,zxcobj){
zxcMse(event);
zxcobj.responce(zxcobj.mag*(zxcMseY-zxcPos(zxcobj)[1])/zxcobj.offsetHeight,zxcobj);
}

// Required for Vertical Slider
function zxcVMseDSlide(event,obj){
document.onmousemove=function(event){zxcVDragSlide(event);}
document.onmouseup=function(event){zxcVMseUpSlide(event);}
document.onselectstart=function(event){window.event.returnValue=false; }
zxcObj=obj;
zxcMse(event);
zxcDragY=zxcMseY-zxcObj.offsetTop;
zxcObj.sb.ypos=parseInt(zxcObj.style.top);
}

// Required for Vertical Slider
function zxcVDragSlide(event) {
zxcMse(event);
if (zxcObj.sb.ypos>=zxcObj.sb.min&&zxcObj.sb.ypos<=zxcObj.sb.max){
zxcObj.style.top=(zxcMseY-zxcDragY)+'px';
zxcObj.sb.ypos=parseInt(zxcObj.style.top);
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj);
}
else { zxcVMseUpSlide(); }
}

// Required for Vertical Slider
function zxcVMseUpSlide(){
if (zxcObj.sl){ return; }
document.onmousemove=null;
document.onselectstart=null;
zxcDragX=-1; zxcDragY=-1;
if (zxcObj.sb.ypos<zxcObj.sb.min){ zxcObj.style.top=zxcObj.sb.min+'px'; zxcObj.sb.ypos=zxcObj.sb.min; }
if (zxcObj.sb.ypos>zxcObj.sb.max){ zxcObj.style.top=zxcObj.sb.max+'px'; zxcObj.sb.ypos=zxcObj.sb.max; }
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj);
}

// Required for Vertical Buttons
function zxcVMseDBut(zxcobj,zxcdir){
if (zxcobj){ zxcObj=zxcobj; zxcDir=zxcdir; }
if (zxcObj.sb.ypos>=zxcObj.sb.min&&zxcObj.sb.ypos<=zxcObj.sb.max){
zxcObj.sl.style.top=(zxcObj.sb.ypos+=zxcDir)+'px';
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj.sl);
zxcDir*=1.05;
zxcTO=setTimeout('zxcVMseDBut()',100);
}
else {
if (zxcObj.sb.ypos<zxcObj.sb.min){ zxcObj.sl.style.top=(zxcObj.sb.min)+'px'; zxcObj.sb.ypos=zxcObj.sb.min; }
if (zxcObj.sb.ypos>zxcObj.sb.max){ zxcObj.sl.style.top=(zxcObj.sb.max)+'px'; zxcObj.sb.ypos=zxcObj.sb.max; }
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj.sl);
}
}

// Required for all Horizontal and Vertical Functions
function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ zxcDocS(); zxcMseX=event.clientX+zxcSX; zxcMseY=event.clientY+zxcSY; }
else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
}

// Required for all Horizontal and Vertical Functions
function zxcDocS(){
if (!document.body.scrollTop){ zxcSX=document.documentElement.scrollLeft; zxcSY=document.documentElement.scrollTop; }
else { zxcSX=document.body.scrollLeft; zxcSY=document.body.scrollTop; }
}

// Required for all Horizontal and Vertical Functions
function zxcPos(zxc){
zxcObjLeft=zxc.offsetLeft;
zxcObjTop=zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}


//-->
</script>
</body>

</html>
carl_mcdade
03-19-2006, 02:49 AM
whoa! the good news is that this works better in ie than in firefox where as if was the reverse with the other script. The bad news is that the script is a real test of my js abilities.

But it works!! so thank you!!
carl_mcdade
03-19-2006, 02:46 PM
No dice. I could not get the code to initiate. Using onload in the body tag nor a free standing window onload worked. Works fine by itself on the page but in a crowded page with other javascripts it just freezes.
carl_mcdade
03-19-2006, 04:00 PM
If have manged to get a regular scroll to appear but I can't turn off the scroll properly the div just scrolls off the page.

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- ?Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"

}

function initializemarquee(scrollme){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (scrollme == 'TRUE' || window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee=document.getElementById("marqueecontainer")
cross_marquee.style.top=0
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="auto"
return true
}

setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)

}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>
vwphillips
03-19-2006, 05:26 PM
but in a crowded page with other javascripts it just freezes.

please supply an example
jscheuer1
03-19-2006, 06:48 PM
Here is a modified version of the script and markup. There are changes to the script and the markup, particularly the mouseover and mouseout events. The script has added initialization and position tracking. The markup has an added division and style branching for IE vs. all others. You can easily see the mouse event additions:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#marqueecontainer {
position: relative;
width: 200px; /*marquee width in px*/
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- ?Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* modified in codingforums.com for mouseover scroll and better Opera degrading
* by jscheuer1
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
var notover=1, cmst=0

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
if(notover){
cmst=parseInt(cross_marquee.style.top)*-1
//cmst=cmst<0?cmst*-1:cmst
}
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
document.getElementById('inmarquee').style.width=cross_marquee.offsetWidth-20+'px'
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight-6+"px"
cross_marquee.style.overflow="auto"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>
</head>
<body>
<div id="marqueecontainer" onMouseover="notover=0;cross_marquee.style.top=0;cross_marquee.style.height=marqueeheight-6+'px';cross_marquee.style.overflow='auto';cross_marquee.style.overflowX='hidden';copyspeed=pausespeed;if(cmst>0){cross_marquee.scrollTop=cmst};" onMouseout="if(!window.opera){notover=1;cross_marquee.style.height='';cross_marquee.style.overflow='';copyspeed=marqueespeed}">
<div id="vmarquee" style="position: absolute; width:99%!important;width: 101%;">
<div id="inmarquee">
<!--YOUR SCROLL CONTENT HERE-->

<p style="margin-top: 0"><b><a href=http://codingforums.com/archive/index.php/"http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
<a href=http://codingforums.com/archive/index.php/"http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.</p>
<p><b><a href=http://codingforums.com/archive/index.php/"http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b><a href=http://codingforums.com/archive/index.php/"http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href=http://codingforums.com/archive/index.php/"http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>

<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
</div>
</body>
</html>
vwphillips
03-19-2006, 09:13 PM
Hi John

that as far as I got

can only restart auto scroll from the initial start position.

which is why I went for custom scroll bar,

which I have tried on a page with a number of other JSs and works for me.
jscheuer1
03-19-2006, 11:24 PM
Hey Vic,

I didn't think that was an issue but, it can be made to return to its position when the scrollbar appeared easily enough. I figured I should try out your solution though first (which I hadn't done before). I think most issues of conflict with other scripts on a given page could be resolved using the more modern methods of adding to onload (as the original script does fairly well) rather than as an attribute/event in the body tag. Anyways, here are updated mouseover/out events for my version:

<div id="marqueecontainer" onMouseover="if(notover){temp=cross_marquee.style.top};notover=0;cross_marquee.style.top=0;cross_marquee.style.height=marqueeheight-6+'px';cross_marquee.style.overflow='auto';cross_marquee.style.overflowX='hidden';copyspeed=pausespeed;if(cmst>0){cross_marquee.scrollTop=cmst};" onMouseout="if(!window.opera){notover=1;cross_marquee.style.height='';cross_marquee.style.overflow='';copyspeed=marqueespeed;cross_marquee.style.top=temp}">

I'm not entirely happy (with mine) though as, if you scroll and then mouseout, you end up in the spot you originally paused at when you resume. I don't like either of our versions due to the large gap between iterations of the content. I think I already modified this script, or one like it, to scroll continuously with no large gaps. I'll have a look and see.
jscheuer1
03-20-2006, 12:02 AM
Yes, I had a version of a vertical scroller with no gaps, it uses two identical scrolling divisions which follow each other. In IE only, a scrollbar can be made to appear onmouseover pause which works seamlessly with the scrolling engine, others can live without it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<title>Continuous Content Vertical Marquee - Demo w/IE mouseover pause scrolling</title>
</head>
<body>
<script type="text/javascript">
/*
Cross browser Marquee II- ?Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content and IE scrollbar on pause.
Credit MUST stay intact for legal use.
*/

//Specify the marquee's width (in pixels)
var marqueewidth="200px"
//Specify the marquee's height
var marqueeheight="150px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=1000
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1
//Specify Break characters for IE as the two iterations
//of the marquee, if text, will be too close together in IE
var iebreak='<p></p>'

//Specify the marquee's content
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<font face="Verdana">Thank you for visiting <a href=http://codingforums.com/archive/index.php/"http://www.dynamicdrive.com">Dynamic Drive.</a></p><p>If you find this script useful, please consider linking to us by <a href=http://codingforums.com/archive/index.php/"../link.htm">clicking here.</a></p><p>Visit our partner <a href=http://codingforums.com/archive/index.php/"http://javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials.</font></p>'


////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
var actualheight=''
var cross_marquee, cross_marquee2, ns_marquee

function populate(){
if (iedom){
var lb=document.getElementById&&!document.all? '' : iebreak
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '8px' : parseInt(marqueeheight)+8+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent+lb
actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)+8))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight+8)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)+8))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden;" onMouseover="copyspeed=pausespeed;if(this.filters)this.style.overflow=\'auto\'" onMouseout="copyspeed=marqueespeed;this.style.overflow=\'hidden\'">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:90%;">')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:90%;z-index:100;background:white;">')
write('</div></div>')

}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}
</script>
</body>
</html>
vwphillips
03-20-2006, 08:58 AM
to the large gap between iterations of the content

that is tast, currently set to the parent height, and easily customised

I normally accept that the on load event is down to the user preference but believe there is some other problem with 'theother' scripts'
jscheuer1
03-20-2006, 02:27 PM
Where does it mention parent height, or where do you enter that adjustment? Oh, and this may be easily fixed as well but, in Opera, using the scrollbar highlights text in the scrolling division.

The original script dealt with Opera problems by making it a manual scroller with permanent browser/system scrollbars. My first mod in this thread got rid of the horizontal bar for Opera, my second achieves true marquee like scrolling in Opera but, no scrollbar onmouseover pause, that only works in IE.

I agree with it being the user's preference as to how to handle onload, I only mentioned that in connection with the OP's problem (apparently script conflicts). Sorry, I should have directed that to him/her. At the time though, I was looking at the issue from your perspective.
 

TOP

•Hyperthreading hurts s
•HP sharpens blade PC l
•Apple goes for Quad po
•Itanium gets scaled do

For more info

•HP sharpens blade PC l
•Hyperthreading hurts s
•can not call click() i
•script does not work o
•smart menu 
•write to an html file 
•FireFox doesn't recogn
•Changing e.keyCode (e.
•Clearing a range creat
•UPDATE: My mouse over 

News Archive

•onChange Help 
•beforeload? vs onload.
•Problem with document.
•decreasing my javascri
•Problem with \\ and \ 
•how to stop scrolling?
•Change Label Text Colo
•Can I forward a page b
•2 javascript functions
•Validating a textbox 

Related stories:

•For loop issue!!!
•weird getAttribute() in Moz
•Firefox probelms with arrays, mystry to me!
•Does IE not allow Array inheritence?
•A little help with javascript IF/THEN
•help me to resolve this checkbox problem
•Is VBScript "invisible"?
•does anyone use Venkman?
•How can I use "enter" to submit a form in a frame using javascript?

Copyright@2004-2005 www.zzcoke.com All Right Reserved

advanced web statistics