PDA

Click to See Complete Forum and Search --> : cross browser events with netscape 6

Knighttime
May 30th, 2002, 02:03 PM
my website uses sounds on mouseovers. this has been complicated by netscape 6. i can catch a mouseover event but can't pass a parameter to the function to select sound. Can't get any on demand sound to work either. anyone cracked it yet ?
Zvona
June 3rd, 2002, 02:58 AM
Could you post a part of your code? Currently, I can't figure out why your events aren't fired on NS6? I'll help you further when more details provided.
Knighttime
June 3rd, 2002, 07:33 AM
Below is Netscape's code that I am trying to modify. their mouseOver routine works fine. I'm trying to add a route into my routine playSound1 but can't pass it a value and can't get sound to work anyway. my existing code can be seen at www.knight-gkla. supanet.com/gerrys-page.htm

<script type="text/javascript" src="http://developer.netscape.com/evangelism/lib/js/ua.js">
</script>


<script type="text/javascript">
switch(navigator.family) {
case 'nn4':
document.layers['t2'].onmouseover=playSound1;
document.layers['t3'].onmouseover=mouseOver;
document.layers['t4'].onmouseover=mouseOver;
document.layers['t5'].onmouseover=mouseOver;
break;
case 'ie4':
document.all.t2.onmouseover=playSound1;
document.all.t3.onmouseover=mouseOver;
document.all.t4.onmouseover=mouseOver;
document.all.t5.onmouseover=mouseOver;
break;
case 'gecko':
document.getElementById('t2').addEventListener("mouseover",playSound1,true);
document.getElementById('t3').addEventListener("mouseover",mouseOver,true);
document.getElementById('t4').addEventListener("mouseover",mouseOver,true);
document.getElementById('t5').addEventListener("mouseover",mouseOver,true);
break;
}
// Event Handler
function mouseOver(e) {
switch(navigator.family) {
case 'nn4':
alert("mouse X position is.."+e.pageX);
break;
case 'ie4':
alert("mouse X position is.."+window.event.clientX);
break;
case 'gecko':
alert("mouse X position is.."+e.pageX);
break;
}
}
Zvona
June 4th, 2002, 01:50 AM
First of all, I advice you to write parsed code (with tabulator length 4). This'll make your code more legible to others. Second, you could initiliaze all the objects depending on browser after the document has loaded. Thus, you don't need to refer them anymore with switch(navigator.family)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1;" />
<script type="text/javascript">
window.onload = function init()
{
// define browsers (navigator.family)
// .
// .
// .

// define objects
switch (navigator.family)
{
case 'nn4':
oT2 = document.layers['t2'];
oT3 = document.layers['t3'];
oT4 = document.layers['t4'];
oT5 = document.layers['t5'];
break;

case 'ie4':
oT2 = document.all.t2;
oT3 = document.all.t3;
oT4 = document.all.t4;
oT5 = document.all.t5;

break;

case 'gecko':
oT2 = document.getElementById('t2');
oT3 = document.getElementById('t3');
oT4 = document.getElementById('t4');
oT5 = document.getElementById('t5');
break;
}

// gecko-based browsers also supports object.event
// instead of object.addEventListener()
oT2.onmouseover = playSound1;
oT3.onmouseover = mouseOver;
oT4.onmouseover = mouseOver;
oT5.onmouseover = mouseOver;

}

function mouseOver(e)
{
var iMouseX = 0;

switch(navigator.family)
{
case 'nn4':
iMouseX = e.pageX;
break;

case 'ie4':
iMouseX = window.event.clientX;
break;
case 'gecko':
iMouseX = e.pageX;
break;
}
alert("Mouse X position is.."+ iMouseX);
}
</script>
</head>
<body>
</body>
</html>

Now, I still didn't understand what parameters you should use with playSound() -function. If you need to find out, which object fired the function, use window.event.srcElement for IE and e.target for NS. If the user has selected the sound to be played, you can add an extra check function, which is executed with playSound -function.

Did this help at all?
Knighttime
June 4th, 2002, 09:26 AM
Thanks, given me some more scope to work with.
I can put a picture in a separate DIV but then I need to pass a variable from each mouseover event to indicate which picture was involved, rather than four different routines.
Also I can't get any sound anyway. this is what I'm using so far based on one by JavaScript Archive. Works fine until Netscape 6 even if I load the LiveAudio plugin.

<script type="text/javascript"><!--
// Preload and play audio files with event handler (MouseOver sound)

var aySound = new Array();
// Below: source for sound files to be preloaded
aySound[0] = "concorde.wav";
aySound[1] = "concordetakeoff.wav";
aySound[2] = "hovercraft.wav";
aySound[3] = "sonar.wav";
aySound[4] = "rocketcountdown.wav";

// DO NOT edit below this line
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) {
document.write(whSound);
if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>
Knighttime
June 9th, 2002, 03:02 AM
The following code does everything except play on demand with netscape 6. The Quicktime object loads ok (because it will autostart) and there are no errors generated. However there's no sound either.
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1;" />
<script type="text/javascript" src="http://developer.netscape.com/evangelism/lib/js/ua.js">
</script>
<script type="text/javascript"><!--
window.onload = function init()
{
// define objects
switch (navigator.family)
{
case 'nn4':
oT2 = document.layers['t2'];
oT3 = document.layers['t3'];
oT4 = document.layers['t4'];
oT5 = document.layers['t5'];
break;

case 'ie4':
oT2 = document.all.t2;
oT3 = document.all.t3;
oT4 = document.all.t4;
oT5 = document.all.t5;

break;

case 'gecko':
oT2 = document.getElementById('t2');
oT3 = document.getElementById('t3');
oT4 = document.getElementById('t4');
oT5 = document.getElementById('t5');
break;
}

// gecko-based browsers also supports object.event
// instead of object.addEventListener()
oT2.onmouseover = playSound;
oT3.onmouseover = mouseOver;
oT4.onmouseover = mouseOver;
oT5.onmouseover = mouseOver;
}

function mouseOver(e)
{
var iMouseX = 0;

switch(navigator.family)
{
case 'nn4':
iMouseX = e.pageX;
break;

case 'ie4':
iMouseX = window.event.clientX;
break;
case 'gecko':
iMouseX = e.pageX;
break;
}
alert("Mouse X position is.."+ iMouseX);
}
//-->
</script>
<script type="text/javascript"><!--
function playSound() {
switch(navigator.family)
{
case 'nn4':
if (navigator.mimeTypes["audio/x-wav"].enabledPlugin.name == "LiveAudio")
document.firstSound.play(false);
break;

case 'ie4':
firstSound.run();
break;
case 'gecko':
document.secondSound.play;
break;
}
}
//-->
</script>
</head>
<body>
<TABLE WIDTH="700" BORDER="0" CELLSPACING="2" CELLPADDING="5">
<TR>
<TD WIDTH="170" ALIGN="center" VALIGN="top" BGCOLOR="#64BD03">
<div id='t2' style="position:absolute" >
<IMG src="concordesunrise.jpg" width=170 height=139 alt="Concorde at sunrise">
</div>
</TD>
<TD WIDTH="170" ALIGN="center" VALIGN="top" BGCOLOR="#64BD03">
<div id='t3' style="position:absolute" >
</div>
</TD>
<TD WIDTH="170" ALIGN="center" VALIGN="top" BGCOLOR="#64BD03">
<div id='t4' style="position:absolute" >
</div>
</TD>
<TD WIDTH="170" ALIGN="center" VALIGN="top" BGCOLOR="#64BD03">
<div id='t5' style="position:absolute" >
</div>
</TD>
</TR>
</table>
<DIV id='first'>
<object id="firstSound" width="0" height="0" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<param name="FileName" value="concorde.wav">
<param name="PlayCount" value="1">
<param name="AutoStart" value="0">
<param name="ShowControls" value="0">
<param name="ShowDisplay" value="0">
<embed name="firstSound" src="concorde.wav" hidden="true" loop="false" autostart="false" MASTERSOUND>
</embed>
</object>
</div>
<DIV id='second'>
<OBJECT id="secondSound" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="6" HEIGHT="6" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="concordetakeoff.wav">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="false">
<EMBED name="secondSound" SRC="concordetakeoff.wav" AUTOPLAY="false" CONTROLLER="false" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>
</DIV>
</body>
</html>