|
| |
User Groups : Forums : SiteExperts :
Dynamic HTML
:  |  Javascript/DHTML and Dots Per Inch
We have a sidebar w/pop-out menus that work on all resolutions with 96 dpi.
Since we converted our site to utilize the google mini, we had to alter our script to load an external javascript/DHTML file, for our pop-out menu to work. I loaded the javascript and DHTML in an external file, instead of loading it inside of the Google Mini stylesheet. That allowed the side bar to pop-up correctly. (The sidebar sub-menu is located in the external files.)
Now the pop-out menu on a 1600 x 1220 resolution, 120 dpi is showing the sidebar text and pop-out menus text scrunched together and floating in the wrong spot.
Does anyone have any solutions for dealing with display and dpi?
Is there something wrong w/the code? I have included the code below.
/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
(I added a vertical offset to suit my needs.)
***********************************************/
var about=new Array()
about[0]='<a class="qxdropmenudiv" href=" http://www.websiteurl.com/1.asp ">Link1 </a>'
about[1]='<a class="qxdropmenudiv" href=" http://www.websiteurl.com/2.asp ">Link2</a>'
about[2]='<a class="qxdropmenudiv" href=" http://www.websiteurl.com/3.asp";>Link3</a>'
about[3]='<a class="qxdropmenudiv" href=" http://www.websiteurl.com/4.asp ">Link4</a>'
about[4]='<a class="qxdropmenudiv" href=" http://www.websiteurl.com/5.asp ">Link5</a>'
var disappeardelay=200
var horizontaloffset=-46
var vertoffset=-180
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="qxdropmenudiv" style="visibility:hidden;width: 160px" 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
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-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
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){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
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("qxdropmenudiv") : qxdropmenudiv
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")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+vertoffset+"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)
}
Here is a call to the file (It is located in a div with an absolute position.):
<script type="text/javascript" src="http://www.website.com/sidebar_about.js";></script>
<ul class="qxnavlist"><li onMouseover="dropdownmenu(this, event, about, '140px')" onMouseout="delayhidemenu()"><a class="sidemenu" href="http://www.website.com/";>Link<xsl:call-template name="nbsp"/>A</a></li></ul>
Thanks Started By Godel on Sep 13, 2006 at 8:04:51 AM | | | 2 Response(s) | Reply |
| Earlier Replies | Replies 2 to 2 of 2 | Later Replies | | | Holophrastic on Sep 13, 2006 at 8:36:30 PM (# 2) build your layouts properly - consider that any piece of text can be any size, and that the window can be any size. Then it won't matter.
Alternatively, specify your font sizes in absolute units.
| | Earlier Replies | Replies 2 to 2 of 2 | Later Replies |
To respond to a discussion, you must first logon.
If you are not registered, please register yourself to become a member of the SiteExperts.community.
|
