PDA

View Full Version : Help with AnyLink CSS menu positioning



Spinethetic
02-04-2006, 09:14 PM
Script: http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm
Demo: http://therevolutionist.net.tc (mouseover the "More >>" option under the Multimedia header)

The positioning is offset from where I expected it to be; which would be the top right corner of the popup menu being just 2px below the left edge of the "M" in "More >>"

see attachment screenshot

Best Regards
~Spine :)

jscheuer1
02-04-2006, 09:34 PM
Looks fine in FF mode, in IE mode I see the problem. Check (in the script and markup) for unnecessary line breaks anywhere that could be causing that if they were interpreted literally and/or spaces before line breaks. Optionally, find the positioning code in the script and have it adjust the top positioning upward about 20px for IE only.

Spinethetic
02-04-2006, 09:58 PM
I dont know where those points are in the script:


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)
}

jscheuer1
02-04-2006, 11:20 PM
Now, you've gotten me looking more closely at your page, I see that there is no script credit on it for the anylink script, see DD's terms of use (http://www.dynamicdrive.com/notice.htm). I also notice that in FF, although the drop down works OK, the page itself, from the login on down is left aligned when I think you want it centered. This is probably because it is a frameset and the page filling that frame is left aligned. IE often will center a left aligned page into the frame but FF retains page formatting when displaying in a frame, so center the content page and that should take care of that (a much bigger problem than your initial question). OK, once you take care of that and the credit issue. In the script, this is where the top positioning is determined:


dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

Just add to it, like so:


var ieAdj=iecompattest().filters? 20 : 0
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight-ieAdj+"px"

The number 20 is just a guess, you can figure out the exact number via trial and error.

Spinethetic
02-05-2006, 02:24 AM
The js is copied into a sitewide .js file and the credit is not in there as of yet because I plan on making the credit with a URL to the script's page on the different scripts in the file.

jscheuer1
02-05-2006, 03:44 AM
The js is copied into a sitewide .js file and the credit is not in there as of yet because I plan on making the credit with a URL to the script's page on the different scripts in the file.

Huh? Regardless, the credit is to appear on each page that uses the script.

ddadmin
02-05-2006, 04:12 AM
Thanks John for reiterating the usage terms. It's really very simple- the credit notice must appear within the page's source for any page that the script appears on.

Spinethetic
02-06-2006, 05:28 PM
I never intended not to follow the terms of use. Anyway the above script worked so far as moving the position up the page closer to where it should be but it is still a few pixels offset from the left but it'll do the job anyway unless its just a quickie fix.