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

Michaël Staudenmann m.staudenmann at gmail.com
Fri Oct 21 13:19:43 CEST 2005


Good idea, but no difference :(

I continue to search in this direction

reagards

Mike

2005/10/21, Arash Kaffamanesh <arash.kaffamanesh at pomegranate.de>:
> 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