[opencms-dev] css menu problem (with htc file)

Arash Kaffamanesh arash.kaffamanesh at pomegranate.de
Fri Oct 21 13:07:40 CEST 2005


Hi,

Not sure, but OpenCms, Tomcat, shall be aware of this file type, perhaps
you could extend web.xml:

<mime-mapping>
        <extension>htc</extension>
        <mime-type>text/htc</mime-type>
</mime-mapping>

Perhaps, not sure :-) If succeeded please provide feedback.

Regards,
Arash

-----Original Message-----
From: opencms-dev-bounces at opencms.org
[mailto:opencms-dev-bounces at opencms.org] On Behalf Of Michaƫl
Staudenmann
Sent: Freitag, 21. Oktober 2005 12:21
To: opencms-dev at opencms.org
Subject: [opencms-dev] css menu problem (with htc file)


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>


_______________________________________________
This mail is send to you from the opencms-dev mailing list
To change your list options, or to unsubscribe from the list, please
visit http://mail.opencms.org/mailman/listinfo/opencms-dev




More information about the opencms-dev mailing list