Help with javascript/drop down menu

[LissaE]

I've added chrome drop down menu to my site and thought it all went swimmingly, did just what it was supposed to do in firefox as well as internet explorer...except now I have hit a peculiar glitch lol

In Internet Explorer the product pages refuse to load, IE aborts it....it works fine *everywhere* else in all browsers except this page....and I am stumped lol soon as I removed the menu code the page loaded

This is my code here:

<div id="menuBack">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a style="border-left: 1px solid #DADADA;" href="http://www.havendesignz.com">Home</a></li>
<li><a href="http://www.havendesignz.com/store/" rel="dropmenu1">Shopping</a></li>
<li><a href="#" rel="dropmenu2">Community</a></li>
<li><a href="#" rel="dropmenu3">Blogs/Yahoo Groups</a></li>    
<li><a href="#" rel="dropmenu4">Web Design</a></li>
<li><a href="#" rel="dropmenu5">Advertising</a></li>
<li><a href="#" rel="dropmenu6">PSP/Graphics Stuff</a></li>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><span style="color:#0E7C9D;">My Cart:</span> 
    <?php echo sizeof($_SESSION['cart']->get_products()); ?>&nbsp;items&nbsp;-
     <?php $header_cart = $currencies->format($_SESSION['cart']->show_total());  
    echo $header_cart;
    ?></a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.havendesignz.com/store/">Store Home</a>
<a href="http://www.havendesignz.com/store/contact_us">Contact Us</a>
<?php if ($_SESSION['customer_id']) { ?>
<a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
<a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>
<?php } } ?>
<a href="http://www.havendesignz.com/store/specials_and_discounts">Specials/Discounts</a>
<a href="https://www.havendesignz.com/helpdesk/">Help Desk/FAQ</a>
<a href="https://www.havendesignz.com/store/account">My Account</a>
<a href="http://www.havendesignz.com/store/wishlists_manager">My Wishlist </a>
<a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<a href="http://groups.yahoo.com/group/hdds-newsletter/" target="_blank">Newsletter Subscribe</a>
<a href="http://www.havendesignz.com/designer_application/upload_form.php" target="_blank">Designer Application</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.havendesignz.com/forum/">Forum</a>
<a href="http://www.havendesignz.com/gallery/">Gallery</a>
<a href="#" onclick="javascript:window.open('http://www.havendesignz.com/chat/index.html','java','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=740, height=600');">Live Chat</a>
<a href="http://www.havendesignz.com/guestbook/gbook.php">Guestbook</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.havendesignz.com/store-blog/">Store News</a>
<a href="http://www.lissaedesignz.com/" target="_blank">LissaE Designz</a>
<a href="http://tech.groups.yahoo.com/group/Scrapz_n_Stuff/" target="_blank">Scrapz N Stuff</a>
</div>

<!--4th drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv">
<a href="http://www.havendesignz.com/portfolio.php">Portfolio</a>
<a href="http://www.havendesignz.com/web_design/upload_form.php">Request Quote</a>
</div>


<!--5th drop down menu -->                                                
<div id="dropmenu5" class="dropmenudiv" style="width: 175px;">
<a href="http://www.havendesignz.com/topsites/">Scrapbooking Topsites</a>
<a href="https://www.havendesignz.com/affiliates/?req=newaccount&amp;pid=1">Affiliate Program</a>
</div>

<!--6th drop down menu -->                                                   
<div id="dropmenu6" class="dropmenudiv" style="width: 150px;">
<a href="http://www.havendesignz.com/glitters.php">Glitter Tiles</a>
<a href="http://www.havendesignz.com/backgrounds.php">Background Tiles</a>
<a href="http://www.havendesignz.com/tubes.php">Tubes &amp; Mists</a>
<a href="http://www.havendesignz.com/tutorials.php">Tutorials</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>

The script I used is here: http://www.dynamicdrive.com/dynamici...rome/index.htm

And Microsoft says this about aborted pages (which was what lead me to remove the menu to see if it caused it lol):

This problem occurs because a child container HTML element contains script that tries to modify the parent container element of the child container. The script tries to modify the parent container element by using either the innerHTML method or the appendChild method.

For example, this problem may occur if a DIV element is a child container in a BODY element, and a SCRIPT block in the DIV element tries to modify the BODY element that is a parent container for the DIV element.

http://support.microsoft.com/kb/927917

I really don't understand why it only does this on one page type...can anyone help? I have removed the bottom script block from the menu from the store temporarily until I can get it fixed lol

[kobra]

Might be simpler if you look at those available
http://www.zen-cart.com/index.php?ma...roducts_id=479
http://www.zen-cart.com/index.php?ma...roducts_id=532

[LissaE]

I thought about that, but I wanted one to go across my whole site, not just the store....I am thinking there might be a conflict with another mod installed, and I'm trying lots of different things from searches as well lol

[kobra]

but I wanted one to go across my whole site, not just the store.

You have your site set to 950px and I do not see the issue you describe????
what is just the store? versus you whole site???

[LissaE]

Yes across the site, I don't mean I wanted it across the entire width, sorry for the confusion lol

You don't see the issue because I have removed the section of code creating it, if no one using IE can load the product pages no sales so until I can fix it I have removed it

To be specific, the aborted load error ONLY happens on the product info pages and ONLY happens in IE, Firefox loads it all just fine and the piece of code that seems to be conflicting is this piece:

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

I have had a custom wishlist mod recently installed and am waiting on the developer's reply to see if it's possibly a conflict with the js used for that mod on the product info pages...until then I am stumped, nothing I have tried is working

[LissaE]

Just an update on this...after disabling one thing at a time, I have found that it is Fuel Slimbox that is conflicting, as soon as I disable that addon everything else works....I have the slimbox on other sections of my site and it doesn't cause this to happen so I need to find out what the difference is lol

[LissaE]

I searched through the slimbox support thread and came across a post where someone had another script that caused the ie page abort error, and it was tracked down to the other script... "The problem is caused by another mod inadvertently closing the DOM early and then slimbox needs to write to it (=kaboom)"

That person managed to tweak the other code to stop that, but I don't know javascript at all lol any chance someone who does can take a look at this script for me?

//** Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)

//** Updated: July 14th 06' to v2.0
    //1) Ability to "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align".
    //2) Added an optional "swipe down" transitional effect for revealing the drop down menus.
    //3) Support for multiple Chrome menus on the same page.

//** Updated: Nov 14th 06' to v2.01- added iframe shim technique

//** Updated: July 23rd, 08 to v2.4
    //1) Main menu items now remain "selected" (CSS class "selected" applied) when user moves mouse into corresponding drop down menu. 
    //2) Adds ability to specify arbitrary HTML that gets added to the end of each menu item that carries a drop down menu (ie: a down arrow image).
    //3) All event handlers added to the menu are now unobstrusive, allowing you to define your own "onmouseover" or "onclick" events on the menu items.
    //4) Fixed elusive JS error in FF that sometimes occurs when mouse quickly moves between main menu items and drop down menus

//** Updated: Oct 29th, 08 to v2.5 (only .js file modified from v2.4)
    //1) Added ability to customize reveal animation speed (# of steps)
    //2) Menu now works in IE8 beta2 (a valid doctype at the top of the page is required)

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 2], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 0, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(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;
},

css:function(el, targetclass, action){
    var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
    if (action=="check")
        return needle.test(el.className)
    else if (action=="remove")
        el.className=el.className.replace(needle, "")
    else if (action=="add" && !needle.test(el.className))
        el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
    if (this.enablereveal[0]){
        if (!dropmenu._trueheight || dropmenu._trueheight<10)
            dropmenu._trueheight=dropmenu.offsetHeight
        clearTimeout(this.revealtimers[dropmenu.id])
        dropmenu.style.height=dropmenu._curheight=0
        dropmenu.style.overflow="hidden"
        dropmenu.style.visibility="visible"
        this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
    }
    else{
        dropmenu.style.visibility="visible"
    }
    this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
    var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
    if (curH<maxH){
        var newH=Math.min(curH, maxH)
        dropmenu.style.height=newH+"px"
        dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
    }
    else{ //if done revealing menu
        dropmenu.style.height="auto"
        dropmenu.style.overflow="hidden"
        clearInterval(this.revealtimers[dropmenu.id])
    }
},

clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
        var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
        var dropmenuW=this.dropmenuobj.offsetWidth
        if (windowedge-this.dropmenuobj.x < dropmenuW)  //move menu to the left?
            edgeoffset=dropmenuW-obj.offsetWidth
    }
    else{
        var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
        var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
        var dropmenuH=this.dropmenuobj._trueheight
        if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
            edgeoffset=dropmenuH+obj.offsetHeight
            if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
                edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
        }
    }
    return edgeoffset
},

dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
        this.hidemenu() //hide menu
    this.clearhidemenu()
    this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
    this.asscmenuitem=obj //reference associated menu item
    this.showmenu(this.dropmenuobj, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
    if (this.iframeshimadded){
        if (this.dropmenuobj.style.visibility=="visible"){
            this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
            this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
            this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
            this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
            this.shimobject.style.display="block"
        }
    }
},

hideshim:function(){
    if (this.iframeshimadded)
        this.shimobject.style.display='none'
},

isContained:function(m, e){
    var e=window.event || e
    var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
    while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
    if (c==m)
        return true
    else
        return false
},

dynamichide:function(m, e){
    if (!this.isContained(m, e)){
        this.delayhidemenu()
    }
},

delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
    this.css(this.asscmenuitem, "selected", "remove")
    this.dropmenuobj.style.visibility='hidden'
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
    this.hideshim()
},

clearhidemenu:function(){
    if (this.delayhide!="undefined")
        clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false);
    else if (target.attachEvent)
        target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
    if (!this.domsupport)
        return
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    for (var ids=0; ids<arguments.length; ids++){
        var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
        for (var i=0; i<menuitems.length; i++){
            if (menuitems[i].getAttribute("rel")){
                var relvalue=menuitems[i].getAttribute("rel")
                var asscdropdownmenu=document.getElementById(relvalue)
                this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
                this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
                this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
                try{
                    menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
                }catch(e){}
                this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
                    if (!cssdropdown.isContained(this, e)){
                        var evtobj=window.event || e
                        cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
                    }
                }, "mouseover")
                this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
                this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
            }
        } //end inner for
    } //end outer for
    if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
        document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
        this.shimobject=document.getElementById("iframeshim") //reference iframe object
        this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
        this.iframeshimadded=true
    }
} //end startchrome

} 

If it's not fixable then I will just leave the slimbox disabled, I would like to use both though lol

[zepher]

Hi, where do you place the PHP code for the chromemenu? It's a good menu system & I'm wondering how to best integrate it into zen-cart. Does the code from the custom menu go into the tpl_header.php file or does it go into the tpl_ezpages_bar_header.php file or something else. Also where did you insert the stylesheet and javascript links?
--->
<link rel="stylesheet" type="text/css" href="http://mysite.com/cart/menu/chrometheme/chromestyle3.css" />

<script type="text/javascript" src="http://mysite.com/cart/menu/chromejs/chrome.js">

The chromemenu is a good option, just not exactly sure how to best integrate it into zen cart and where to put the link info from the HTML file....

Thanks!

[LissaE]

This was a while ago and on my old site which is no longer active...and I no longer have any of the files to reference directly to lol

Best I can remember I followed instructions in the zen cart docs (docs/read_me_jscript.html and docs/readme_css_system.html) and had the js and css files in my template folders so they loaded automatically, and the menu code in the tpl_header.php in my template common folder...sorry I can't be of more help:)

[zepher]

Thanks for the help. Guess I should read the manual more. Kind of a guy thing I think....

I see the javascript files that are placed in the /jscript directory are loaded automatically and I should be able to get the chromemenu dropdown to work fine ---->

---Zen-Cart Doc---docs/read_me_jscript.html---->

Any file in the includes/templates/{template_directory}/jscript/ directory with the following filename format will be loaded globally on every page of your shop:
jscript_{unique_name}.js
(where {unique_name} can be anything you want)


Effectively, the file will be loaded as if you had inserted the following into an HTML page:

<script language="javascript" src="includes/templates/{template_directory}/jscript/jscript_{unique_name}.js"></script>

---->
So, the chromemenu javascript code would be->
--->

<script type="text/javascript" src="http://mysite.com/cart/includes/templates/{template_directory}/jscript/chrome.js">

----> and then place all the CSS code from /chrometheme/chromestyle3.css into the stylesheet.css file

After that, place all the menu code into the header.....

Finally, give it a try and see how it works.