PDA

View Full Version : Any link drop down help



Jon101
04-17-2008, 04:21 PM
1) Script Title: AnyLink CSS Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/anylinkcss.htm

3) Describe problem: cant get it to work... here's my code:


<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Web Developement','','/images/nav/webdev_over.jpg',1)" "dropdownmenu(this, event, 'anylinkmenu1'" onClick="return clickreturnvalue()">

<img src="/images/nav/webdev.jpg" name="Web Developement" width="190" height="32" border="0"></a>
<div id="anylinkmenu1" class="anylinkcss">

<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div></td>

I'm trying to get it to work with an image swap as well - what am i missing?

Thanks!
Jon

Nile
04-17-2008, 04:32 PM
Try this:


<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Web Developement','','/images/nav/webdev_over.jpg',1);dropdownmenu(this, event, 'anylinkmenu1')" onClick="return clickreturnvalue()">

<img src="/images/nav/webdev.jpg" name="Web Developement" width="190" height="32" border="0"></a>
<div id="anylinkmenu1" class="anylinkcss">

<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div></td>

Jon101
04-17-2008, 04:39 PM
That works... but still one problem..

It wont revert back to the original image after the "Mouse Out"

Nile
04-17-2008, 04:40 PM
Can I see your javascript please?

Jon101
04-17-2008, 04:42 PM
Sure..


var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)

/////No further editting needed

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

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){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
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=ie5 && !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 topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function dropdownmenu(obj, e, dropmenuID){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
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 ((ie5||ns6) && !enableanchorlink) 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 (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
}

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

its from DD, i didnt change anything.

Thanks for the help!

Nile
04-17-2008, 04:45 PM
I mean the javascript that holds your MM functions.

Jon101
04-17-2008, 04:46 PM
Oh, let me check.. i just did it in dreamweaver with the rollover icon...

Nile
04-17-2008, 04:50 PM
Alright, post the code here when you've found it.

Jon101
04-17-2008, 04:53 PM
Im having a hard time finding it... theres a good amount of JS on the page.

Jon101
04-17-2008, 04:54 PM
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Im pretty sure thats it..

Nile
04-17-2008, 04:59 PM
Hmm, thats some confusing javascript.
I'm sorry that I can't help with this. But glad to help with your other problem.
Nile

Jon101
04-17-2008, 05:09 PM
I think its something within the code, not the JS because i have an image next to it, without a drop down and its working fine.

Jon101
04-17-2008, 05:31 PM
Does something look wrong with this code, that im missing?


<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('web developement','','/images/nav/webdev_over.jpg',1);dropdownmenu(this, event, 'anylinkmenu1')"><img name="web developement" border="0" src="/images/nav/webdev.jpg"></a>
<div id="anylinkmenu1" class="anylinkcss">

<a href="#">Web Hosting</a>
<a href="#">Web Site Design</a>
<a href="#">Custom Applications</a>
<a href="#">E-Commerce</a>
<a href="#">CMS</a>

I cant get this image roll out to work.

Thanks!

Nile
04-17-2008, 05:45 PM
Well, you don't end your div, you may end it later in the code, but thats the only thing that hits me...

Jon101
04-17-2008, 05:51 PM
it ends, i just didnt copy the </div> tag

very weird... driving me nuts! :)

Nile
04-17-2008, 05:54 PM
Can I see a link to your page? That may be helpful.

Jon101
04-17-2008, 05:59 PM
http://www.buildnclick.com/indexnewnav.html
Also, the drop down is elevating my images.

Thanks for the help!

Nile
04-17-2008, 06:02 PM
Well, which image is the effect suppose to happen on?

Jon101
04-17-2008, 06:05 PM
On the navigation, where it says Web Developent, etc.

The first 2 have the drop down effect and will not roll out on mouse out to the original image, and are both elevated.

They should work like "Networking" does, but have the drop down menu... if that makes sense.

Nile
04-17-2008, 06:18 PM
Hmm, thats really weird. Sorry I can't help you. Maybe someone other on the forums could fish it out for you.

Jon101
04-17-2008, 06:21 PM
Ok, thanks for your help!

I appreciate it very much!

Anyone else?

:D

Jon101
04-19-2008, 05:53 PM
Any one else have any clue as to why the images will not roll back over to the original one after the mouse out?

This is very important!


Thank you so much!
Jon

jscheuer1
04-20-2008, 05:03 AM
I've taken up this issue in your other thread:

http://www.dynamicdrive.com/forums/showthread.php?t=31655

See my post in it (#2). After testing (somewhat) it appears that the solution outlined there will work in this particular case. Please ask any follow up questions in that thread, as I am closing this one.