PDA

View Full Version : AnyLink Drop Down Menu



Johnnymushio
07-20-2005, 10:05 PM
Script --> http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
Does a website have to be online to enable this code to work? I am currently working on my site offline and preview it in IE6 and AOL 7.0. When I click the link that I want the drop down menu to appear, it just goes to the
(a href = "#") link, and does not display the drop down box. I do not understand why it will not work! I can get all of the other codes on this site to work... :mad:

jscheuer1
07-21-2005, 01:51 AM
No, and there is no href="#" or anything that would link to '#' in the demo/installation of this script so, I'd say you changed something, not certain what.

Johnnymushio
07-21-2005, 01:54 AM
In the demo, it linked to "default.htm". When I clicked the link to make a drop menu appear, instead of a menu appearing, it went to the site "default.htm". I changed "default.htm" to "#" so it would stay on the same page, either way, it did not work.

John (Thats my name too.)

jscheuer1
07-21-2005, 04:11 AM
Does the demo here on Dynamic Drive work for you? If so, we need to see your code, if not, turn on javascript in your browser. Also, when viewing loacally are you getting a message bar warning?

Johnnymushio
07-21-2005, 09:31 PM
Yeah, the demo on this site works for me. All of my other JavaScrips on my site work, except the AnyLink Drop Down Menu.

Here is every bit of code in my head section. Below this code is the link I set up. Maybe some codes are interfering with eachother?

<head>
<title>Japan Town - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Japan, Japanese, Nihongo, Chat, Pen Pal's, Study, Learn, English, Johnnymushio, Japan Town, Benkyou, Eigo, Web, Message Board, Words & Phrases, Emoticons, Forum, America, Slang, Information">
<meta name="description" content="Your one stop source for all of your Japan needs since 2005.">
<STYLE TYPE="text/css">
<!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
--></STYLE>
<style type="text/css">
<!--
BODY{
scrollbar-face-color:#BB0000;
scrollbar-arrow-color:white;
scrollbar-track-color:'';
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
</style>
<script type="text/javascript">

/***********************************************
* Highlight Table Cells Script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}

</script>

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #CCCCCC;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='Home'
menu1[1]='<a href="Japan Town - News.htm">News</a>'
menu1[2]='<a href="Japan Town - Poll.htm">Poll</a>'
menu1[3]='<a href="Japan Town - Updates">Updates</a>'

var menuwidth='165px' //default menu width
var menubgcolor='#BB0000' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

</head>

Here is the link I set up.
<td valign="middle" bgcolor="#BB0000"><div align="center"><strong><a href="Index.htm#" onClick="return dropdownmenu(this, event, menu1, '')" onMouseout="delayhidemenu()"><font color="#FFFFFF">Main</font></a></strong></div></td>

John

jscheuer1
07-22-2005, 09:15 AM
I didn't realize you were running other scripts on the page! Here's the prize for that:

.

Aside from the tutorial above, which usually is the solution when the problem is two different scripts, you may need to consult:

http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=0&TOshow=allshow#refcon

Which explains how two scripts on the same page may not use the same set of variable names, id names, etc. This is especially important if the problem is two copies of the same script on a page but, can come into play with two different scripts when the first step won't fix it.

One other approach that works in both situations, if adaptable to one (or more) of the scripts, is to put one script in a borderless iframe. It will look like it is on the same page but, since it really is on a separate page, conflicts are no longer an issue.

Johnnymushio
07-22-2005, 04:54 PM
Well you dont have to answer this if you don't want to. The tutorial says to put the onload stuff for all the scripts into the body tag, but the drop down menu has no "body onload=" or "window.onload=". So, I can't have this script on my site with other scripts?