...

View Full Version : Help with cross browser support



danielwarner
07-07-2006, 12:06 AM
Heres my problem, i have the code listed below which is used on the page http://www.extremealcohol.com/?id=brew ... the problem is, the code comes up top-dog on IE and Opera but doesnt work so well on FF or NS, infact it delays the dropdown instead of sliding and simply drops. If you repeat this more than once on FF or NS it also screws up and doesnt allocate room for the links.

What i need help with is, instead of re-writing this code is it possible for someone to help me by writing a small javascript in which of FF or NS is detected the drops work instantly and bypass the code, making the drop down less snazzy but more effective. As far as i can read from the code you may just need to set the div's display back to visible, but as you can tell this is dynamic drive free opensource code so i dont atchually know how to do this myself.

Thanks for your time/responses.

An example of the html code on my webpage:

<div class="mainDiv" state="1">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);"> Beer &amp; Ale </div>
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Introduction</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Starters</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Equiptment</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Lager Recipies</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Real Ale Recipies</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Stout Recipies</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Keg beer Recipies</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Beer Brewing FAQ</a></span><br />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Search Recipies</a></span><br />
</div>
</div>
</div>

The css used:

.mainDiv
{
width:160px;
}
.topItem
{
width:160px;
height:22px;
cursor:pointer;
background: #467BF2;
text-decoration: none;
color: white;
font-weight:bold;
font-family:"GOTHIC";
}
.dropMenu
{
background:#D9D9D9;
border-top:1px solid #467BF2;
border-left:1px solid #92B1F8;
border-right:1px solid #92B1F8;
border-bottom:1px solid #92B1F8;
}
.subMenu
{
display:none;
}
.subItem
{
padding-left:5px;
cursor:pointer;
font-weight:bold;
text-decoration:none;
color:black;
}
.subItem a
{
text-decoration:none;
color:black;
}
.subItemOver
{
cursor:pointer;
color:blue;
text-decoration:underline;
font-weight:bold;
padding-left:5px;
}
.subItemOver a
{
color:blue;
}
.drop
{
border-left:1px solid black;
border-right:1px solid black;
}

Javascript used

/************************************************************************
Author: Eric Simmons
Contact: info@jswitch.com
Website: http://www.jswitch.com
Version: 1.0 4/2005
Browser Target: Mozilla 6+/FireFox Netscape 6+, IE 5.0+
Type : XP style sliding dropdown menus (aka Switch Menu II on Dynamicdrive.com)
Note: Modification by Dynamicdrive.com to dynamically determine sub menus widths

v 1.0
XP style sliding Menu Bar
***********************************************************************/

var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; //this is the time between each call to slide
var DIV_HEIGHT = 22; //value irrelevant
var SUB_MENU_NUM =0;
var RE_INIT_OBJ = null;
var bMenu = document.getElementById("curMenu");
var MainDiv,SubDiv

//DD added code
document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')

function Init(objDiv)
{
if (TIMER_SLIDE == null)
{
SUB_MENU_NUM = 0;
MainDiv = objDiv.parentNode;
SubDiv = MainDiv.getElementsByTagName("DIV").item(0);
SubDiv.onclick = SetSlide;

OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);

document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code

for (i=0;i<OBJ_VIEW.childNodes.length;i++)
{
if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
{
SUB_MENU_NUM ++;
OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
}
}

NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state"));
}

}
function SetSlide()
{
if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
if (TIMER_SLIDE == null && this.parentNode == MainDiv)
TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
else
{
RE_INIT_OBJ = this;
setTimeout('ReInit()', 200);
}
}

function ReInit(obj)
{
Init(RE_INIT_OBJ);
TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
RE_INIT_OBJ = null;
}

function RunSlide()
{

if (OBJ_VIEW.getAttribute("state") == 0)
{

NEW_PIX_VAL += PIX_SLIDE;
OBJ_SLIDE.style.height = NEW_PIX_VAL;

if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
{
clearInterval(TIMER_SLIDE);
TIMER_SLIDE = null;
OBJ_VIEW.style.display = 'inline';
OBJ_VIEW.setAttribute("state","1")
MainDiv.setAttribute("state",NEW_PIX_VAL);
}
} else
{
OBJ_VIEW.style.display = 'none';
NEW_PIX_VAL -= PIX_SLIDE;
if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;
if (NEW_PIX_VAL <= 0)
{
NEW_PIX_VAL = 0;
OBJ_SLIDE.style.height = NEW_PIX_VAL
clearInterval(TIMER_SLIDE);
TIMER_SLIDE = null;
OBJ_VIEW.setAttribute("state","0")
MainDiv.setAttribute("state",NEW_PIX_VAL);
}
}
}

function ChangeStyle()
{
if (this.className == this.getAttribute("classOut"))
this.className = this.getAttribute("classOver");
else
this.className = this.getAttribute("classOut");
}

_Aerospace_Eng_
07-07-2006, 05:24 AM
Firefox requires that a unit be added to the value for the style.height. Try this

/************************************************************************
Author: Eric Simmons
Contact: info@jswitch.com
Website: http://www.jswitch.com
Version: 1.0 4/2005
Browser Target: Mozilla 6+/FireFox Netscape 6+, IE 5.0+
Type : XP style sliding dropdown menus (aka Switch Menu II on Dynamicdrive.com)
Note: Modification by Dynamicdrive.com to dynamically determine sub menus widths

v 1.0
XP style sliding Menu Bar
***********************************************************************/

var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; //this is the time between each call to slide
var DIV_HEIGHT = 22; //value irrelevant
var SUB_MENU_NUM =0;
var RE_INIT_OBJ = null;
var bMenu = document.getElementById("curMenu");
var MainDiv,SubDiv

//DD added code
document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')

function Init(objDiv)
{
if (TIMER_SLIDE == null)
{
SUB_MENU_NUM = 0;
MainDiv = objDiv.parentNode;
SubDiv = MainDiv.getElementsByTagName("DIV").item(0);
SubDiv.onclick = SetSlide;

OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);

document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight; //DD added code

for (i=0;i<OBJ_VIEW.childNodes.length;i++)
{
if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
{
SUB_MENU_NUM ++;
OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
}
}

NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state"));
}

}
function SetSlide()
{
if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
if (TIMER_SLIDE == null && this.parentNode == MainDiv)
TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
else
{
RE_INIT_OBJ = this;
setTimeout('ReInit()', 200);
}
}

function ReInit(obj)
{
Init(RE_INIT_OBJ);
TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
RE_INIT_OBJ = null;
}

function RunSlide()
{

if (OBJ_VIEW.getAttribute("state") == 0)
{

NEW_PIX_VAL += PIX_SLIDE;
OBJ_SLIDE.style.height = NEW_PIX_VAL+'px';

if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
{
clearInterval(TIMER_SLIDE);
TIMER_SLIDE = null;
OBJ_VIEW.style.display = 'inline';
OBJ_VIEW.setAttribute("state","1")
MainDiv.setAttribute("state",NEW_PIX_VAL);
}
} else
{
OBJ_VIEW.style.display = 'none';
NEW_PIX_VAL -= PIX_SLIDE;
if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL+'px';
if (NEW_PIX_VAL <= 0)
{
NEW_PIX_VAL = 0;
OBJ_SLIDE.style.height = NEW_PIX_VAL+'px'
clearInterval(TIMER_SLIDE);
TIMER_SLIDE = null;
OBJ_VIEW.setAttribute("state","0")
MainDiv.setAttribute("state",NEW_PIX_VAL);
}
}
}

function ChangeStyle()
{
if (this.className == this.getAttribute("classOut"))
this.className = this.getAttribute("classOver");
else
this.className = this.getAttribute("classOut");
}


TBH though, any script that requires you to make up your own attributes probably wasn't written too well.

felgall
07-07-2006, 05:30 AM
The classOut and classOver garbage in the HTML will probably cause a lot of browsers to totally screw up. You can't just invent your own attributes with HTML or XHTML, you are limited to the predefined ones if you want it to work properly. If you want to define your own then use XML. Of course it would be easier to just use a properly written Javascript that works properly with HTML rather than trying to break the rules.

_Aerospace_Eng_
07-07-2006, 05:45 AM
This one seems better written and follows doesn't 'break' the rules to work. http://www.jswitch.com/index.php?page=js/xpmenu/xpmenu

danielwarner
07-07-2006, 03:19 PM
Hey thanks for the new script, i'll implement it now. I never realised the author developed a fix for his script.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum