[opencms-dev] css menu problem (with htc file)
Michaël Staudenmann
m.staudenmann at gmail.com
Fri Oct 21 12:20:33 CEST 2005
Hi all,
I've integrated a css scroll menu in a jsp page, but I can't used this
menu with internet explorer 6.0 (no problem with FireFox 1.0). I've
tested without OpenCMS (with a simple html file) and it
functioned?!... After many research a think Open CMS can't used .htc
file (this file make scroll effect). Why I can't use .htc file in
OpenCMS ?
Thanks a lot for your help
Mike the little French guy
Notes: here is .jsp and .htc file:
//--------------------------------------------------------- index.jsp
-------------------------------------------------------//
<%@page buffer="none" session="false" import="java.util.*,
org.opencms.frontend.templateone.*" %><%
// initialize action element to access the API
CmsTemplateStyleSheet cms = new CmsTemplateStyleSheet(pageContext,
request, response);
String img = cms.link("/sites/default/TestMenu/dropmenu.gif");
String htc = cms.link("/sites/default/TestMenu/csshover.htc");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project 6</title>
<style type="text/css">
body {
background: #EEE;
color: #000;
behavior: url('<%= htc %>');
} /* WinIE behavior call */
h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
#main {
background-image: url('<%= img %>');
color: #FF0000;
margin-left: 7em;
padding: 1px 0 1px 5%;
border-left: 1px solid;
}
div#nav {
float: left;
width: 7em;
margin: -1px 0 0 -1px;
background: #F00;}
div#nav ul {
margin: 0;
padding: 0;
width: 7em;
background: white;
border: 1px solid #AAA;
}
div#nav li {
position: relative;
list-style: none;
margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {
display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration:
none; width: 6.5em;
}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
</head>
<body>
<h1>Adipiscing Rhubarb</h1>
<img src="<%= img %>" height="100" width="100" />
<div id="nav">
<ul class="level1">
<li><a href="/">Home</a></li>
<li class="submenu"><a href="/services/">Services</a>
<ul class="level2">
<li><a href="/services/strategy/">Strategy</a></li>
<li><a href="/services/optimize/">Optimization</a></li>
<li><a href="/services/guidance/">Guidance</a></li>
<li><a href="/services/training/">Training</a></li>
</ul>
</li>
<li><a href="/events/">Events</a></li>
<li class="submenu"><a href="/pubs/">Publications</a>
<ul class="level2">
<li><a href="/pubs/articles/">Articles</a></li>
<li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
<ul class="level3">
<li><a href="/pubs/tuts/html/">HTML</a></li>
<li><a href="/pubs/tuts/css/">CSS</a></li>
<li><a href="/pubs/tuts/svg/">SVG</a></li>
<li><a href="/pubs/tuts/xml/">XML</a></li>
</ul>
</li>
<li><a href="/pubs/wpapers/">White Papers</a></li>
<li><a href="/pubs/comment/">Commentary</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<div id="main">
<p>txt</p>
</div>
</body>
</html>
//--------------------------------------------- csshover.htc
-----------------------------------------------------------//
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.00.031224 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2003 - Peter Nederlof
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var CSSBuffer, doc = window.document;
function parseStylesheets() {
var rules, sheet, sheets = doc.styleSheets;
var bufferIndex = sheets.length;
var head = doc.getElementsByTagName('head')[0];
var buffer = doc.createElement('style');
buffer.setAttribute('media', 'screen');
buffer.setAttribute('type', 'text/css');
head.appendChild(buffer);
CSSBuffer = sheets[bufferIndex];
for(var i=0; i<sheets.length -1; i++) {
sheet = sheets[i];
if(!sheet.media || sheet.media == 'screen') {
rules = sheet.rules;
for(var j=0; j<rules.length; j++) {
parseCSSRule(rules[j]);
}
}
}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!select || !style || select.indexOf(':hover') < 0) return;
var newSelect = select.replace(/\:hover/g, '.onHover');
CSSBuffer.addRule(newSelect, style);
var affected = select.replace(/\:hover.*$/g, '');
var elements = getElementsBySelect(affected);
for(var i=0; i<elements.length; i++) {
if(elements[i].nodeName == 'A') continue;
new HoverElement(elements[i]);
}
}
/**
* HoverElement
* -------------------------
* applies the hover
*/
function HoverElement(element) {
if(element.isHoverElement) return;
element.isHoverElement = true;
element.attachEvent('onmouseover',
function() { element.className += ' onHover'; });
element.attachEvent('onmouseout',
function() { element.className =
element.className.replace(/onHover/g, ''); });
}
/**
* domFinder
* -----------------------------------
* returns list of elements based on css selector
*/
function getElementsBySelect(rule) {
var nodeList = [doc], sets = rule.split(' ');
for(var i=0; i<sets.length; i++) {
nodeList = domFinder.filterNodes(sets[i], nodeList);
} return nodeList;
}
var domFinder = {
findNodes:function(tag, docs) {
var res, nodes = [];
for(var i=0; i<docs.length; i++) {
res = docs[i].getElementsByTagName(tag);
for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
} return nodes;
},
filterNodes:function(select, docs) {
var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
if(!s) return this.findNodes(select, docs);
nodes = this.findNodes((rule = select.split(s))[0], docs);
atr = (s == '#')? 'id':'className';
for(var i=0; i<nodes.length; i++) {
if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[i][atr]))
filtered[filtered.length] = nodes[i];
} return filtered;
}
}
</script>
More information about the opencms-dev
mailing list