...

View Full Version : Script conflict



guerillaRADIO
07-28-2002, 03:13 AM
dear CF crew,
i'm coming from malaysia and i've nothing knowledge in programming. i've one problem here. i try to put Hover-up and 3-state Hightlight menu effect script (i've take from Dynamic Drive site) to my website (one page), but it doesn't work.i try to study their faq section regarding to java script conflit, but still doesn't work. i don't know how to 're-write' the script. pls help me.....:confused:

joh6nn
07-28-2002, 08:10 AM
sure. just need to see the code you're working with is all.

guerillaRADIO
07-29-2002, 03:32 AM
dear joh6nn,
thanks alot for your reply. here my site html code:

***************************************
<html>
<head>
<title>DHTML Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">

//Hover-up Menu Bar: By Dynamicdrive.com
//Credit must stay intact for use
//Visit http://www.dynamicdrive.com for this script and more

//CSS stylesheet for menu bar
//Customize background color (#FFF2BF) and link color (black):
var cssdefinition='<style>\n.menuitems{\nborder:2.5px solid #FFF2BF;\n}\n\n.menuitems a{\ntext-decoration:none;\ncolor:black;\n}\n<\/style>'

//No need to edit beyond here
if (document.all||document.getElementById)
document.write(cssdefinition)

function over_effect(e,state, bgcolor){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
else{
while(source4.tagName!="DIV"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
}
}
}

</script>
<style>
.menulines{
border:2.5px solid #F0F0F0;
}

.menulines a{
text-decoration:none;
color:black;
}
</style>

<script language="JavaScript1.2">

//3-state Highlight menu effect script: By Dynamicdrive.com
//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="756" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="756" height="97" valign="middle" bgcolor="#99FFFF" align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="+3">saja-saja
test &lt;-------&gt; cubaan</font></td>
</tr>
</table>
<table width="756" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="756" height="52" valign="top" bgcolor="#CCCCFF">&nbsp;<!--Customize menu dimension, initial menu color (#FFF2BF) and hover color (#FFE271) -->

<div style="background-color:#FFF2BF;width:80%;height:23px;padding-top:5px" onMouseover="over_effect(event,'outset','#FFE271')" onMouseout="over_effect(event,'solid','#FFF2BF')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')">
<font face="Arial" size="2">

<span><b>Great links </b></span>
<span class="menuitems"><a href="http://javascriptkit.com">JavaScript Kit</a></span>
<span class="menuitems"><a href="http://freewarejava.com">Freewarejava.com</a></span>
<span class="menuitems"><a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">Webmaster Help Forum</a></span>
<span class="menuitems"><a href="http://www.flamingtext.com">Flaming Text</a></span>
<span class="menuitems"><a href="http://www.thefreesite.com">The Free Site</a></span>

</font>
</div></td>
</tr>
</table>
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="490" valign="top">&nbsp;<table border="0" width="200" cellspacing="0" cellpadding="0" onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0">

<tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Main Menu</b></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://wsabstract.com">Website Abstraction</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com">Freewarejava.com</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">Webmaster Help Forum</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.slashdot.com">SlashDot</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.msnbc.com">MSNBC.com</a> </font></td></tr>

</table></td>
</tr>
</table>
</body>
</html>

***************************************************
the "3-state Highlight menu effect" script can work properly but "Hover-up Menu Bar" doesn't work. i don't know how to put body onload event handler.



regards

Mrs G
07-29-2002, 07:36 PM
See if this is how it should work

I think the problem was the 5 lines with the class name menuitems instead of menulines



<html>
<head>
<title>DHTML Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">

//Hover-up Menu Bar: By Dynamicdrive.com
//Credit must stay intact for use
//Visit http://www.dynamicdrive.com for this script and more

//CSS stylesheet for menu bar
//Customize background color (#FFF2BF) and link color (black):
var cssdefinition='<style>\n.menuitems{\nborder:2.5px solid #FFF2BF;\n}\n\n.menuitems a{\ntext-decoration:none;\ncolor:black;\n}\n<\/style>'

//No need to edit beyond here
if (document.all||document.getElementById)
document.write(cssdefinition)

function over_effect(e,state, bgcolor){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
else{
while(source4.tagName!="DIV"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
}
}
}

</script>
<style>
.menulines{
border:2.5px solid #F0F0F0;
}

.menulines a{
text-decoration:none;
color:black;
}
</style>

<script language="JavaScript1.2">

//3-state Highlight menu effect script: By Dynamicdrive.com
//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="756" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="756" height="97" valign="middle" bgcolor="#99FFFF" align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="+3">saja-saja
test &lt;-------&gt; cubaan</font></td>
</tr>
</table>
<table width="756" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="756" height="52" valign="top" bgcolor="#CCCCFF"> <!--Customize menu dimension, initial menu color (#FFF2BF) and hover color (#FFE271) -->

<div style="background-color:#FFF2BF;width:80%;height:23px;padding-top:5px" onMouseover="over_effect(event,'outset','#FFE271')" onMouseout="over_effect(event,'solid','#FFF2BF')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')">
<font face="Arial" size="2">

<span><b>Great links </b></span>
<span class="menulines"><a href="http://javascriptkit.com">JavaScript Kit</a></span>
<span class="menulines"><a href="http://freewarejava.com">Freewarejava.com</a></span>
<span class="menulines"><a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">Webmaster Help Forum</a></span>
<span class="menulines"><a href="http://www.flamingtext.com">Flaming Text</a></span>
<span class="menulines"><a href="http://www.thefreesite.com">The Free Site</a></span>

</font>
</div></td>
</tr>
</table>
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="490" valign="top"> <table border="0" width="200" cellspacing="0" cellpadding="0" onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0">

<tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Main Menu</b></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://wsabstract.com">Website Abstraction</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com">Freewarejava.com</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">Webmaster Help Forum</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.slashdot.com">SlashDot</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.msnbc.com">MSNBC.com</a> </font></td></tr>

</table></td>
</tr>
</table>
</body>
</html>

speedracer
07-29-2002, 08:09 PM
this is cross posted. http://www.codingforums.com/showthread.php?s=&threadid=2844 please do not cross post. :(

Mrs G
07-29-2002, 09:05 PM
My last reply was right to a point but I did not see that there was two scripts.


There was two functions with the same name this is where the problem was.

I have renamed one to over_effect2

<html>
<head>
<title>DHTML Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">

//Hover-up Menu Bar: By Dynamicdrive.com
//Credit must stay intact for use
//Visit http://www.dynamicdrive.com for this script and more

//CSS stylesheet for menu bar
//Customize background color (#FFF2BF) and link color (black):
var cssdefinition='<style>\n.menuitems{\nborder:2.5px solid #FFF2BF;\n}\n\n.menuitems a{\ntext-decoration:none;\ncolor:black;\n}\n<\/style>'

//No need to edit beyond here
if (document.all||document.getElementById)
document.write(cssdefinition)

function over_effect2(e,state, bgcolor){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
else{
while(source4.tagName!="DIV"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
}
}
}

</script>
<style>
.menulines{
border:2.5px solid #F0F0F0;
}

.menulines a{
text-decoration:none;
color:black;
}
</style>

<script language="JavaScript1.2">

//3-state Highlight menu effect script: By Dynamicdrive.com
//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="756" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="756" height="97" valign="middle" bgcolor="#99FFFF" align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="+3">saja-saja
test &lt;-------&gt; cubaan</font></td>
</tr>
</table>
<table width="756" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="756" height="52" valign="top" bgcolor="#CCCCFF"> <!--Customize menu dimension, initial menu color (#FFF2BF) and hover color (#FFE271) -->

<div style="background-color:#FFF2BF;width:80%;height:23px;padding-top:5px" onMouseover="over_effect2(event,'outset','#FFE271')" onMouseout="over_effect2(event,'solid','#FFF2BF')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')">
<font face="Arial" size="2">

<span><b>Great links </b></span>
<span class="menuitems"><a href="http://javascriptkit.com">JavaScript Kit</a></span>
<span class="menuitems"><a href="http://freewarejava.com">Freewarejava.com</a></span>
<span class="menuitems"><a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">Webmaster Help Forum</a></span>
<span class="menuitems"><a href="http://www.flamingtext.com">Flaming Text</a></span>
<span class="menuitems"><a href="http://www.thefreesite.com">The Free Site</a></span>

</font>
</div></td>
</tr>
</table>
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="490" valign="top"> <table border="0" width="200" cellspacing="0" cellpadding="0" onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0">

<tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Main Menu</b></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://wsabstract.com">Website Abstraction</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com">Freewarejava.com</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">Webmaster Help Forum</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.slashdot.com">SlashDot</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.msnbc.com">MSNBC.com</a> </font></td></tr>

</table></td>
</tr>
</table>
</body>
</html>

Mrs G
07-29-2002, 09:56 PM
Speedracer explain Cross Post

All I did was reply to this one



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum