Support for CSS Flyout Menu

OOPS...here is the link again...

http://www.bizmug.com/zencart/index.php?main_page=index&cPath=65

Hope you can help!
Thanks,
Chris

cevans73:

OOPS...here is the link again...

http://www.bizmug.com/zencart/index.php?main_page=index&cPath=65

Hope you can help!
Thanks,
Chris
I understand what you mean.
However, this is not possible with standard Zen Cart features, because it picks up the category tree dynamically.
You need custom programming for that.
Anyway, the link doesn't look bad, wouldn't worry too much about it.

Yeah, the only reason is that in IE, my wide subcategory pics are going side by side extending my page super wide....in Firefox, it is perfect, but all jacked up in IE....can you see that page in IE what I'm talking about? if so, do you know how to fix it? I had done some tweaking to get rid of the subcat text underneath the pics...but now in IE it's not right.....hmmmm

Thanks!
Chris

ckosloff:

Answer is yes, it does work.
I suggest that on top of the CSS you put this:
body {
behavior: url(includes/csshover.htc);
/* WinIE behavior call */}
instead of the standard body tag, to address bugs in IE6.
Read the thread for additional tips on CSS and other stuff.

Thank you kindly!

Hi all!
After one year working perfectly, i moved to an other server. Now, css flyout menu doesn´t work in ie, working good in firefox. csshover.htc is at /includes folder.
This is my css:

body { behavior:url(includes/csshover.htc);} /* WinIE behavior call /
div#nav-cat {float: left; width: 160px; margin: -1px 0 0 -1px;
background-color: #ce318c; font-weight:bold;}
div#nav-cat ul {margin: 0; padding: 0; width: 160px; background-color: #cc66cc;
/ border: 1px solid #AAA;/}
div#nav-cat ul.level2 {background-color: #cc66cc;}
div#nav-cat ul.level3 {background-color: #cc66cc;}
div#nav-cat ul.level4 {background-color: #cc66cc;}
div#nav-cat ul.level5 {background-color: #cc66cc;}
div#nav-cat ul.level6 {background-color: #cc66cc;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
margin-top: 5px; / change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues /
}
div#nav-cat li li {
margin: 0; / this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #CE318C;}
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat;
background-color: #cc66cc;}
div#nav-cat li.submenu:hover {background-color: #CE318C;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 140px; color: white;}
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}/
div#nav-cat>ul a {width: auto;}
div#nav-cat ul ul {position: absolute; top: 0; left: 160px;
display: none;}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;}

I´m running v.1.3.6. Why the files that worked perfectly on my old server doesn´t work now? Any ideas??

nevermind, i figure it out: needed to define de mime type .htc at new server...

tonibarcelona:

nevermind, i figure it out: needed to define de mime type .htc at new server...
Interesting, it's good to publish what you did to resolve, so we will be able to troubleshoot better.
Muy bien, hombre.

Muchas gracias !! :D

For those of you who are interested, there is a new version of csshover.htc. I implemented yesterday, and maybe goes faster than the original... At the web page of the author you can find it (csshover2.htc)

tonibarcelona:

Muchas gracias !! :D

For those of you who are interested, there is a new version of csshover.htc. I implemented yesterday, and maybe goes faster than the original... At the web page of the author you can find it (csshover2.htc)
Please post a link to that, I would like to test it.
Many users have reported problems with IE, let's see if that can help.
Thanks.

tonibarcelona:

nevermind, i figure it out: needed to define de mime type .htc at new server...

could you explain for a noob. i am having the same issue and cannot figure it out. Thanks.

Rhitty:

could you explain for a noob. i am having the same issue and cannot figure it out. Thanks.
OK, can't be simpler than this.
Your webhost should have a Control Panel with an icon for MIME types, just click on that and add .htc.
You can then google MIME types and .htc and read to your heart's content, but this simple fix should take care of it.
Check this out:
http://msdn.microsoft.com/en-us/library/ms531018%28VS.85%29.aspx

Me again.
It might also be that you need to add htc, without the dot, to your MIME types, check with your webhost.

Hi,

Is there someone that can help me with this problem http://englerogdemoner.no/index.php. part of the page is disappears when installing css flyout menu

Thanks :)

ckosloff:

Please post a link to that, I would like to test it.
Many users have reported problems with IE, let's see if that can help.
Thanks.

<attach event="ondocumentready" handler="parseStylesheets" /> <script> /** * Whatever:hover - V2.02.060206 - hover, active & focus * ------------------------------------------------------------ * (c) 2005 - Peter Nederlof * Peterned - <http://www.xs4all.nl/~peterned/> * License - <http://creativecommons.org/licenses/LGPL/2.1/> * * Whatever:hover is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 2.1 of the License, or (at your option) any later version. * * Whatever:hover is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * Credits and thanks to: * Arnoud Berendsen, Martin Reurings, Robert Hanson * * howto: body { behavior:url("csshover.htc"); } * ------------------------------------------------------------ */ var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i, currentSheet, doc = window.document, hoverEvents = [], activators = { onhover:{on:'onmouseover', off:'onmouseout'}, onactive:{on:'onmousedown', off:'onmouseup'}, onunknown:{on:'onfocus', off:'onblur'} } function parseStylesheets() { if(!/MSIE (5|6)/.test(navigator.userAgent)) return; window.attachEvent('onunload', unhookHoverEvents); var sheets = doc.styleSheets, l = sheets.length; for(var i=0; i<l; i++) parseStylesheet(sheets\[i]); } function parseStylesheet(sheet) { if(sheet.imports) { try { var imports = sheet.imports, l = imports.length; for(var i=0; i<l; i++) parseStylesheet(sheet.imports\[i]); } catch(securityException){} } try { var rules = (currentSheet = sheet).rules, l = rules.length; for(var j=0; j<l; j++) parseCSSRule(rules[j]); } catch(securityException){} } function parseCSSRule(rule) { var select = rule.selectorText, style = rule.style.cssText; if(!csshoverReg.test(select) || !style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/.([a-z0-9_-]on(hover|active|unknown))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover|active|unknown).$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/#([a-z0-9_-]+)/i).exec(select);
if(identify) {
var element = doc.getElementById(identify[1]);
return element? [element]:nodes;
}

var classname = (/.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(.|#|:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\b' + classname[1] + '\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}

return nodes;
}
</script>

Hi,

Is there someone that can someone please help me with this problem http://englerogdemoner.no/index.php. part of the page disappears when installing css flyout menu

Thanks :)

Prosone:

Hi,

Is there someone that can someone please help me with this problem http://englerogdemoner.no/index.php. part of the page disappears when installing css flyout menu

Thanks :)
I read your post but can't help you with the data you are giving me, it is very unusual that a page disappears.
Anyway, to prevent these issues, you should create a local site and test there.
Try uninstalling the mod, and get your site back up and running, we'll take it step by step.

ckosloff:

Me again.
It might also be that you need to add htc, without the dot, to your MIME types, check with your webhost.

i appreciate your assistance. my server company states that the mime htc is there but my flyouts still do not work in i.e.. Any help would make me happy as i have spent countless hours fidgeting with this.

thanks

EDIT: i even copied cswoods css directly to my site and it still did not work :(

deserted:

Thanks for that, I actually found the answer before I checked back here :)

also I was able to set it just for the CSS flyout menu, using the following in the stylesheet_categories_menu CSS sheet

#nav-cat ul:hover li:hover a:hover {color: #ffffff;
}

This is almost exactly what I need.  How would I make the text white in non-hover mode for just the flyout css category box?

Thanks!

JGraphics:

This is almost exactly what I need. How would I make the text white in non-hover mode for just the flyout css category box?

Thanks!
All these issues can be resolved by the use of a free Firefox extension called Web Developer.
There is something similar for IE, but I don't use it.
In the Web Dev toolbar, select Information --> Display Element Information and click on the desired element, Web Dev displays what it is and then you can manipulate it via CSS.
In this case the element is h3 #categoriescssHeading .leftBoxHeading.
You can use either the main stylesheet in your custom template folder or the categoriescss stylesheet and set the font value to ffffff.
However, this question is very strange, because the box title does not hover, and is usually set to white.

Rhitty:

i appreciate your assistance. my server company states that the mime htc is there but my flyouts still do not work in i.e.. Any help would make me happy as i have spent countless hours fidgeting with this.

thanks

EDIT: i even copied cswoods css directly to my site and it still did not work :(
IE7 does not need htc, it is only for IE6.
Does your site work in IE7?