[opencms-dev] css menu problem (with htc file)
Michaël Staudenmann
m.staudenmann at gmail.com
Fri Oct 21 13:56:45 CEST 2005
Yes !
it's ok, i've a nice css scroll menu ;)
Thanks a lot
Mike
2005/10/21, Arash Kaffamanesh <arash.kaffamanesh at pomegranate.de>:
> Hi,
>
> I think Thomas März has the right solution:
>
> http://article.gmane.org/gmane.comp.cms.opencms.devel/17169/match=mimety
> pe+properties
>
> Add this line and restart your servlet container. htc=text/x-component
>
> Regards,
> Arash
>
> ______________________________________
> |arash kaffamanesh
>
> |
> |http://www.pomegranate.de
> |global portal & content management solutions
> |______________________________________
>
> -----Original Message-----
> From: Michaël Staudenmann [mailto:m.staudenmann at gmail.com]
> Sent: Freitag, 21. Oktober 2005 13:20
> To: Arash Kaffamanesh
> Cc: The OpenCms mailing list
> Subject: Re: [opencms-dev] css menu problem (with htc file)
>
>
> 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