Support for CSS Flyout Menu

[ckosloff]

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/libr...18(VS.85).aspx

[ckosloff]

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

[Prosone]

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

[tonibarcelona]

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>

[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 :)

[ckosloff]

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.

[Rhitty]

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

[JGraphics]

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!

[ckosloff]

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.

[ckosloff]

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?