pthompson2002
08-28-2002, 03:51 PM
I have a scrolling message bar that, when the user 'mouseovers' on the text, it stops scrolling and allows the user to click to see the more detailed message.
the messages shows perfectly underneath the scroller but when the mouse is over the actual message it stops the scroller from carrying on scrolling. I don't know why it is doing it, I don't have any mouseovers in the div telling it to stop.
Here is the code, if any of you people want to run it to see what I'm going on about.
cheers Pete
------------------------
<%@ Language=VBScript %>
<%
Dim cn ' Connection
Dim rsBroadcast ' Table Broadcast Recordset
Dim SQLBroadcast ' Broadcast SQL Query
Dim iStat ' Value for the default selected item
Dim i ' Length of Array
Dim j ' Used to iterate through the arrays
'Define the queries
SQLBroadcast = "SELECT Title, Message FROM Broadcast"
'Define the Connection and Recordset Objects
Set cn = server.CreateObject("ADODB.Connection")
set rsBroadcast = server.CreateObject("ADODB.Recordset")
set rsCount = server.CreateObject("ADODB.Recordset")
cn.Open "DSN=fastcont;UID=fcontdba;PWD=harare"
'Open the Recordsets using the open connection
rsBroadcast.Open SQLBroadcast, cn
'Make sure Recordset is at the first record
rsBroadcast.MoveFirst
%>
<HTML>
<HEAD>
<Style type="text/css">
<!-- format and size the DIV tag -->
.myDivStyle {
position:absolute;
width:500px; height:200px;
}
a{
text-decoration: none;
}
</Style>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE="JavaScript">
<!-- //Begin Hide
//slider's width
var swidth=500
//slider's height
var sheight=72
//slider's speed
var sspeed=2
//Create the Array
var messages = new Array();
//Populate the Array
<%
i = 0
do while NOT rsBroadcast.EOF
%>
messages[<%=i%>] = new Array(2); // always 2
messages[<%=i%>][0] = "<%=rsBroadcast("Title")%>" // Title from Broadcast table
messages[<%=i%>][1] = "<%=rsBroadcast("Message")%>" // Message from Broadcast table
<%
i = i + 1
rsBroadcast.MoveNext
Loop
%>
//This is a bug fix for NS6. It makes the scroller continue scrolling
//when the cursor is over the message DIV
//function moveScroller(){
//sspeed=2;
//}
//document.getElementById("N6MsgDiv").addEventListener
//("mouseover",moveScroller,false)
// On click show message for title in div
function showMsg(whichMsg){
var headerDiv
var displayDiv
//this if statement is a bug fix for the problems with displaying the message
//for the last element in the array
if (whichMsg == -1) {
headerDiv = messages[whichMsg+<%=i%>][0] // Pump in the message text
displayDiv = messages[whichMsg+<%=i%>][1]
} else {
headerDiv = messages[whichMsg][0]
displayDiv = messages[whichMsg][1]
}
//Display the message in div/layer tags
if (document.all) {//IE
msgDiv.innerHTML = '<h3>'+ headerDiv +'</h3>'+ displayDiv
}
else if (document.layers) {//NS4
document.ns4Msg.document.ns4Msg2.document.write('<h3>'+ headerDiv +'</h3>'+ displayDiv);
document.ns4Msg.document.ns4Msg2.document.close();
}
else if (document.getElementById&&!document.all){//If NS6
rng = document.createRange();
el = document.getElementById("N6MsgDiv");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment('<h3>'+ headerDiv +'</h3>'+ displayDiv);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}
}
//------------------Functionality for Scroller/Slider---------------------//
if (messages.length>1)
i=1
else
i=0
function start(){
if (document.all){
ieslider1.style.top=sheight
iemarquee(ieslider1)
}
else if (document.layers){
document.ns4slider.document.ns4slider1.top=sheight
document.ns4slider.document.ns4slider1.visibility='show'
ns4marquee(document.ns4slider.document.ns4slider1)
}
else if (document.getElementById&&!document.all){
document.getElementById('ns6slider1').style.top=sheight
ns6marquee(document.getElementById('ns6slider1'))
}
}
function iemarquee(whichdiv){
iediv=eval(whichdiv)
if (iediv.style.pixelTop>0&&iediv.style.pixelTop<=sspeed){
iediv.style.pixelTop=0
setTimeout("iemarquee(iediv)",100)
}
if (iediv.style.pixelTop>=sheight*-1){
iediv.style.pixelTop-=sspeed
setTimeout("iemarquee(iediv)",100)
}
else {
iediv.style.pixelTop=sheight
iediv.innerHTML=messages[i][0]
if (i==messages.length-1)
i=0
else
i++
}
}
function ns4marquee(whichlayer){
ns4layer=eval(whichlayer)
if (ns4layer.top>0&&ns4layer.top<=sspeed){
ns4layer.top=0
setTimeout("ns4marquee(ns4layer)",100)
}
if (ns4layer.top>=sheight*-1){
ns4layer.top-=sspeed
setTimeout("ns4marquee(ns4layer)",100)
}
else {
ns4layer.top=sheight
ns4layer.document.write('<a href="javascript:showMsg(i-1)"><font color=orange>'+messages[i][0]+'</font></a>')
ns4layer.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}
function ns6marquee(whichdiv){
ns6div=eval(whichdiv)
if (parseInt(ns6div.style.top)>0&&parseInt(ns6div.style.top)<=sspeed){
ns6div.style.top=0
setTimeout("ns6marquee(ns6div)",100)
}
if (parseInt(ns6div.style.top)>=sheight*-1){
ns6div.style.top=parseInt(ns6div.style.top)-sspeed
setTimeout("ns6marquee(ns6div)",100)
}else {
ns6div.style.top=sheight
ns6div.innerHTML=messages[i][0]
if (i==messages.length-1)
i=0
else
i++
}
}
// End Hide -->
</SCRIPT>
</HEAD>
<BODY onLoad="start()">
<span style="borderWidth:1; borderColor:red; width:350; height:72; background:navy;">
<script language="JavaScript">
if (document.layers) {//if NS4 display the BCMC Message Header
document.write('<table width=500 border=0><tr><td bgcolor=red><font color=white><center>BCMC Broadcast Message</center></font></td></tr></table>');
}
</script>
<ilayer id="ns4slider" width="&{swidth};" height="&{sheight};">
<layer id="ns4slider1" height="&{sheight};" onmouseover="sspeed=0;" onmouseout="sspeed=2;">
<script language="JavaScript">
if (document.layers) {
document.write('<a href="javascript:showMsg(i-1)"><font color=orange>'+messages[0][0]+'</font></a>')
document.write('</layer></ilayer>');
}
//If IE
if (document.all){
document.write('<table width=500 border=0><tr><td bgcolor=red><font color=white><center>BCMC Broadcast Message</center></font></td></tr></table>');
document.writeln('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);border:1 solid red;" onmouseover="sspeed=0;" onmouseout="sspeed=2">')
document.writeln('<div id="ieslider1" onclick="showMsg(i-1)" style="color:orange; position:relative;width:'+swidth+'; cursor: hand;pointer;">')
document.write(messages[0][0])
document.writeln('</div></div>')
document.write('<div id="msgDiv" class="myDivStyle"></div>');
}
//If NS6
if(document.getElementById&&!document.all){
document.write('<table width=500 border=0><tr><td bgcolor=red><font color=white><center>BCMC Broadcast Message</center></font></td></tr></table>');
document.writeln('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);border:1px solid red; background: navy;">')
document.writeln('<div id="ns6slider1" onclick="showMsg(i-1)" style="color:orange; position:relative;width:'+swidth+'; cursor: pointer;">')
document.write(messages[0][0])
document.writeln('</div></div>')
}
</script>
<%
rsBroadcast.Close
set rsBroadcast = Nothing
cn.Close
set cn = Nothing
%>
</span>
<script language="javascript">
//positioning where the message is displayed in NS4 and NS6
if (document.layers) {
document.write('<ilayer id="ns4Msg"><layer id="ns4Msg2" width=500 height=700></layer></ilayer>');
}
else if(document.getElementById&&!document.all){
document.write('<div id="N6MsgDiv"></div>');
}
</script>
</div>
</BODY>
</HTML>
the messages shows perfectly underneath the scroller but when the mouse is over the actual message it stops the scroller from carrying on scrolling. I don't know why it is doing it, I don't have any mouseovers in the div telling it to stop.
Here is the code, if any of you people want to run it to see what I'm going on about.
cheers Pete
------------------------
<%@ Language=VBScript %>
<%
Dim cn ' Connection
Dim rsBroadcast ' Table Broadcast Recordset
Dim SQLBroadcast ' Broadcast SQL Query
Dim iStat ' Value for the default selected item
Dim i ' Length of Array
Dim j ' Used to iterate through the arrays
'Define the queries
SQLBroadcast = "SELECT Title, Message FROM Broadcast"
'Define the Connection and Recordset Objects
Set cn = server.CreateObject("ADODB.Connection")
set rsBroadcast = server.CreateObject("ADODB.Recordset")
set rsCount = server.CreateObject("ADODB.Recordset")
cn.Open "DSN=fastcont;UID=fcontdba;PWD=harare"
'Open the Recordsets using the open connection
rsBroadcast.Open SQLBroadcast, cn
'Make sure Recordset is at the first record
rsBroadcast.MoveFirst
%>
<HTML>
<HEAD>
<Style type="text/css">
<!-- format and size the DIV tag -->
.myDivStyle {
position:absolute;
width:500px; height:200px;
}
a{
text-decoration: none;
}
</Style>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE="JavaScript">
<!-- //Begin Hide
//slider's width
var swidth=500
//slider's height
var sheight=72
//slider's speed
var sspeed=2
//Create the Array
var messages = new Array();
//Populate the Array
<%
i = 0
do while NOT rsBroadcast.EOF
%>
messages[<%=i%>] = new Array(2); // always 2
messages[<%=i%>][0] = "<%=rsBroadcast("Title")%>" // Title from Broadcast table
messages[<%=i%>][1] = "<%=rsBroadcast("Message")%>" // Message from Broadcast table
<%
i = i + 1
rsBroadcast.MoveNext
Loop
%>
//This is a bug fix for NS6. It makes the scroller continue scrolling
//when the cursor is over the message DIV
//function moveScroller(){
//sspeed=2;
//}
//document.getElementById("N6MsgDiv").addEventListener
//("mouseover",moveScroller,false)
// On click show message for title in div
function showMsg(whichMsg){
var headerDiv
var displayDiv
//this if statement is a bug fix for the problems with displaying the message
//for the last element in the array
if (whichMsg == -1) {
headerDiv = messages[whichMsg+<%=i%>][0] // Pump in the message text
displayDiv = messages[whichMsg+<%=i%>][1]
} else {
headerDiv = messages[whichMsg][0]
displayDiv = messages[whichMsg][1]
}
//Display the message in div/layer tags
if (document.all) {//IE
msgDiv.innerHTML = '<h3>'+ headerDiv +'</h3>'+ displayDiv
}
else if (document.layers) {//NS4
document.ns4Msg.document.ns4Msg2.document.write('<h3>'+ headerDiv +'</h3>'+ displayDiv);
document.ns4Msg.document.ns4Msg2.document.close();
}
else if (document.getElementById&&!document.all){//If NS6
rng = document.createRange();
el = document.getElementById("N6MsgDiv");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment('<h3>'+ headerDiv +'</h3>'+ displayDiv);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}
}
//------------------Functionality for Scroller/Slider---------------------//
if (messages.length>1)
i=1
else
i=0
function start(){
if (document.all){
ieslider1.style.top=sheight
iemarquee(ieslider1)
}
else if (document.layers){
document.ns4slider.document.ns4slider1.top=sheight
document.ns4slider.document.ns4slider1.visibility='show'
ns4marquee(document.ns4slider.document.ns4slider1)
}
else if (document.getElementById&&!document.all){
document.getElementById('ns6slider1').style.top=sheight
ns6marquee(document.getElementById('ns6slider1'))
}
}
function iemarquee(whichdiv){
iediv=eval(whichdiv)
if (iediv.style.pixelTop>0&&iediv.style.pixelTop<=sspeed){
iediv.style.pixelTop=0
setTimeout("iemarquee(iediv)",100)
}
if (iediv.style.pixelTop>=sheight*-1){
iediv.style.pixelTop-=sspeed
setTimeout("iemarquee(iediv)",100)
}
else {
iediv.style.pixelTop=sheight
iediv.innerHTML=messages[i][0]
if (i==messages.length-1)
i=0
else
i++
}
}
function ns4marquee(whichlayer){
ns4layer=eval(whichlayer)
if (ns4layer.top>0&&ns4layer.top<=sspeed){
ns4layer.top=0
setTimeout("ns4marquee(ns4layer)",100)
}
if (ns4layer.top>=sheight*-1){
ns4layer.top-=sspeed
setTimeout("ns4marquee(ns4layer)",100)
}
else {
ns4layer.top=sheight
ns4layer.document.write('<a href="javascript:showMsg(i-1)"><font color=orange>'+messages[i][0]+'</font></a>')
ns4layer.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}
function ns6marquee(whichdiv){
ns6div=eval(whichdiv)
if (parseInt(ns6div.style.top)>0&&parseInt(ns6div.style.top)<=sspeed){
ns6div.style.top=0
setTimeout("ns6marquee(ns6div)",100)
}
if (parseInt(ns6div.style.top)>=sheight*-1){
ns6div.style.top=parseInt(ns6div.style.top)-sspeed
setTimeout("ns6marquee(ns6div)",100)
}else {
ns6div.style.top=sheight
ns6div.innerHTML=messages[i][0]
if (i==messages.length-1)
i=0
else
i++
}
}
// End Hide -->
</SCRIPT>
</HEAD>
<BODY onLoad="start()">
<span style="borderWidth:1; borderColor:red; width:350; height:72; background:navy;">
<script language="JavaScript">
if (document.layers) {//if NS4 display the BCMC Message Header
document.write('<table width=500 border=0><tr><td bgcolor=red><font color=white><center>BCMC Broadcast Message</center></font></td></tr></table>');
}
</script>
<ilayer id="ns4slider" width="&{swidth};" height="&{sheight};">
<layer id="ns4slider1" height="&{sheight};" onmouseover="sspeed=0;" onmouseout="sspeed=2;">
<script language="JavaScript">
if (document.layers) {
document.write('<a href="javascript:showMsg(i-1)"><font color=orange>'+messages[0][0]+'</font></a>')
document.write('</layer></ilayer>');
}
//If IE
if (document.all){
document.write('<table width=500 border=0><tr><td bgcolor=red><font color=white><center>BCMC Broadcast Message</center></font></td></tr></table>');
document.writeln('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);border:1 solid red;" onmouseover="sspeed=0;" onmouseout="sspeed=2">')
document.writeln('<div id="ieslider1" onclick="showMsg(i-1)" style="color:orange; position:relative;width:'+swidth+'; cursor: hand;pointer;">')
document.write(messages[0][0])
document.writeln('</div></div>')
document.write('<div id="msgDiv" class="myDivStyle"></div>');
}
//If NS6
if(document.getElementById&&!document.all){
document.write('<table width=500 border=0><tr><td bgcolor=red><font color=white><center>BCMC Broadcast Message</center></font></td></tr></table>');
document.writeln('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);border:1px solid red; background: navy;">')
document.writeln('<div id="ns6slider1" onclick="showMsg(i-1)" style="color:orange; position:relative;width:'+swidth+'; cursor: pointer;">')
document.write(messages[0][0])
document.writeln('</div></div>')
}
</script>
<%
rsBroadcast.Close
set rsBroadcast = Nothing
cn.Close
set cn = Nothing
%>
</span>
<script language="javascript">
//positioning where the message is displayed in NS4 and NS6
if (document.layers) {
document.write('<ilayer id="ns4Msg"><layer id="ns4Msg2" width=500 height=700></layer></ilayer>');
}
else if(document.getElementById&&!document.all){
document.write('<div id="N6MsgDiv"></div>');
}
</script>
</div>
</BODY>
</HTML>