You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@lenya.apache.org by Thorsten Scherler <th...@juntadeandalucia.es> on 2004/02/25 18:43:26 UTC
CSS and a wee bit JScript
Hello group,
I followed the discussion about the jscript menu. I use on my personal
web page a combination of CSS and jscript. Maybe this would be an
alternative to the exiting jscript approach. You can see it in action @
http://www.target-x.de/start.html. If you want I will try to make it
work for lenya.
e.g. If you press "Suche":
<a href="#top" onMouseUp="showHideTable('tbl1','a');return true;" style="color: black;"><img id="a" src="pix/collapse.png" title="schließen" alt="GET" border="0" width="16">Suche</a>
The table that is show/hide:
<table id="tbl1" style="display: none" />
The Jscript:
<!--
function showHideTable(theTable,theImg)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
document.getElementById(theImg).src='pix/collapse.png';
}
else
{
document.getElementById(theTable).style.display = 'none';
document.getElementById(theImg).src='pix/expand.png';
}
}
function showHideAllTable(theTable,theImg)
{
document.getElementById(theTable).style.display = 'none';
document.getElementById(theImg).src='pix/expand.png';
}
//-->
King regards
</thorsten>
--
"Erare humanum est", Seneca
Thorsten Scherler
Tfno: 955 062 627
Email: thorsten.scherler.ext@juntadeandalucia.es
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org
Re: CSS and a wee bit JScript
Posted by "Scherler, Thorsten" <th...@apache.org>.
Gregor J. Rothfuss wrote:
> David Pinelo wrote:
>
>> Hi Thorsten,
>>
>> I've test your page using Mozilla, Konqueror... and it works!! :D :D :D.
>> It will be great (the menu.js of the RC doesn't work on my Konqueror
>> 3.1... I know, I'm a little bit "exigente" (I don't know the word in
>> english ... ;)
>
The english word is "demanding" ;-). ...but *no*! Any browser should
display the menu IMO. ...and even if the debian version is buggy. LOL.
>
> any menu that
>
> *works on modern browsers
I wrote that script while I was looking for a job in spain and tested it
with Mozilla, IE, Opera, and some other browsers. It *should* be 100%
compatible with modern browser.
> *ideally floats while you scroll
Did you saw the page? Does it? It is not like the existing script! It
will "push" the page down! ...but I could made that it will get hided,
after you have choosen a sub point. ...even better I will made it
customizable. ;-)
> *is valid html
The script is valid html and conform to W3C CSS.
> *takes accessibility into account
To what do you refer with accessibility?
>
> is an improvement. the menu is one of the oldest parts of lenya and
> could certainly do with some refactoring. for instance, the current one
> is embarassingly hardcoded to require 4 menus..
:) I know it since I know wyona ;-)
>
> -gregor
>
>
--
<thorsten>
<name>Thorsten Scherler</name>
<country>Spain</country>
<@mail> thorsten@apache.org</...@mail>
<@cocoon-WIKI>
http://wiki.cocoondev.org/Wiki.jsp?page=Scherler</...@cocoon-WIKI>
<http>http://www.target-x.de</http>
</thorsten>
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org
Re: CSS and a wee bit JScript
Posted by Thorsten Scherler <th...@juntadeandalucia.es>.
Doug Chestnut wrote:
>Here is the menu.xsl that I am using for my publications navigation menu
>(add the css and javascript to your page2xhtml.xsl):
>...
>
>
+1
I tried the menu with Mozilla, IE and Opera. It seems to work fine.
IMO it is more like the one we had. So I am voting for this one!
In regards to XUL we can use the menu of Doug as fallback in case we
have some weird browser (like IE) LOL.
King regards
--
"Erare humanum est", Seneca
Thorsten Scherler
Tfno: 955 062 627
Email: thorsten.scherler.ext@juntadeandalucia.es
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org
Re: CSS and a wee bit JScript
Posted by Doug Chestnut <dh...@virginia.edu>.
Here is the menu.xsl that I am using for my publications navigation menu
(add the css and javascript to your page2xhtml.xsl):
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:nav="http://apache.org/cocoon/lenya/navigation/1.0"
xmlns="http://www.w3.org/1999/xhtml"
exclude-result-prefixes="nav"
>
<xsl:template match="nav:site">
<div id="menu"><ul id="navmenu">
<!-- Static link -->
<li><a href="http://www.lib.virginia.edu">UVa Library Home</a></li>
<xsl:apply-templates select="nav:node"/>
</ul></div>
</xsl:template>
<xsl:template match="nav:node">
<xsl:choose>
<!--if last menu item at top level-->
<xsl:when test="not(ancestor::nav:node) and
not(following-sibling::nav:node)">
<li id="last"><div>
<xsl:call-template name="item"/>
</div>
<xsl:if test="nav:node">
<ul class="subnav"><xsl:apply-templates select="nav:node"/></ul>
</xsl:if>
</li>
</xsl:when>
<!--first sub menu item-->
<xsl:when test="ancestor::nav:node and
not(preceding-sibling::nav:node)">
<li id="firstsub"><div>
<xsl:call-template name="item"/>
</div>
<xsl:if test="nav:node">
<ul class="subnav"><xsl:apply-templates select="nav:node"/></ul>
</xsl:if>
</li>
</xsl:when>
<xsl:otherwise>
<li><div>
<xsl:call-template name="item"/>
</div>
<xsl:if test="nav:node">
<ul class="subnav"><xsl:apply-templates select="nav:node"/></ul>
</xsl:if>
</li>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="item">
<xsl:choose>
<xsl:when test="@current = 'true'">
<xsl:call-template name="item-selected"/>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="item-default"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="item-default">
<a href="{@href}"><xsl:apply-templates select="nav:label"/></a>
</xsl:template>
<xsl:template name="item-selected">
<xsl:apply-templates select="nav:label"/>
</xsl:template>
<xsl:template match="nav:label">
<xsl:value-of select="."/>
</xsl:template>
<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
----- Original Message -----
From: "Michael Wechner" <mi...@wyona.com>
To: "Lenya Users List" <le...@cocoon.apache.org>
Sent: Wednesday, February 25, 2004 5:08 PM
Subject: Re: CSS and a wee bit JScript
> Doug Chestnut wrote:
>
> >
> >It is all css (except a few hacks for odd browsers) and best of all it
> >doesn't use tables (Just a plain old unordered list for the sake of
> >accessibility).
> >
> >
>
> cool. Would you mind posting the XSLTs? ;-)
>
> Michi
>
> >--Doug
> >
> >
> >----- Original Message -----
> >From: "Gregor J. Rothfuss" <gr...@apache.org>
> >To: "Lenya Users List" <le...@cocoon.apache.org>
> >Sent: Wednesday, February 25, 2004 1:33 PM
> >Subject: Re: CSS and a wee bit JScript
> >
> >
> >
> >
> >>David Pinelo wrote:
> >>
> >>
> >>
> >>>Hi Thorsten,
> >>>
> >>>I've test your page using Mozilla, Konqueror... and it works!! :D :D
:D.
> >>>It will be great (the menu.js of the RC doesn't work on my Konqueror
> >>>
> >>>
> >3.1... I
> >
> >
> >>>know, I'm a little bit "exigente" (I don't know the word in english ...
> >>>
> >>>
> >;)
> >
> >
> >>any menu that
> >>
> >>*works on modern browsers
> >>*ideally floats while you scroll
> >>*is valid html
> >>*takes accessibility into account
> >>
> >>is an improvement. the menu is one of the oldest parts of lenya and
> >>could certainly do with some refactoring. for instance, the current one
> >>is embarassingly hardcoded to require 4 menus..
> >>
> >>-gregor
> >>
> >>
> >>--
> >>Gregor J. Rothfuss
> >>Wyona Inc. - Open Source Content Management - Apache Lenya
> >>http://wyona.com http://cocoon.apache.org/lenya
> >>gregor.rothfuss@wyona.com gregor@apache.org
> >>
> >>---------------------------------------------------------------------
> >>To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
> >>For additional commands, e-mail: lenya-user-help@cocoon.apache.org
> >>
> >>
> >>
> >>
> >
> >
> >---------------------------------------------------------------------
> >To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
> >For additional commands, e-mail: lenya-user-help@cocoon.apache.org
> >
> >
> >
> >
>
>
> --
> Michael Wechner
> Wyona Inc. - Open Source Content Management - Apache Lenya
> http://www.wyona.com http://cocoon.apache.org/lenya/
> michael.wechner@wyona.com michi@apache.org
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
> For additional commands, e-mail: lenya-user-help@cocoon.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org
Re: CSS and a wee bit JScript
Posted by Michael Wechner <mi...@wyona.com>.
Doug Chestnut wrote:
>
>It is all css (except a few hacks for odd browsers) and best of all it
>doesn't use tables (Just a plain old unordered list for the sake of
>accessibility).
>
>
cool. Would you mind posting the XSLTs? ;-)
Michi
>--Doug
>
>
>----- Original Message -----
>From: "Gregor J. Rothfuss" <gr...@apache.org>
>To: "Lenya Users List" <le...@cocoon.apache.org>
>Sent: Wednesday, February 25, 2004 1:33 PM
>Subject: Re: CSS and a wee bit JScript
>
>
>
>
>>David Pinelo wrote:
>>
>>
>>
>>>Hi Thorsten,
>>>
>>>I've test your page using Mozilla, Konqueror... and it works!! :D :D :D.
>>>It will be great (the menu.js of the RC doesn't work on my Konqueror
>>>
>>>
>3.1... I
>
>
>>>know, I'm a little bit "exigente" (I don't know the word in english ...
>>>
>>>
>;)
>
>
>>any menu that
>>
>>*works on modern browsers
>>*ideally floats while you scroll
>>*is valid html
>>*takes accessibility into account
>>
>>is an improvement. the menu is one of the oldest parts of lenya and
>>could certainly do with some refactoring. for instance, the current one
>>is embarassingly hardcoded to require 4 menus..
>>
>>-gregor
>>
>>
>>--
>>Gregor J. Rothfuss
>>Wyona Inc. - Open Source Content Management - Apache Lenya
>>http://wyona.com http://cocoon.apache.org/lenya
>>gregor.rothfuss@wyona.com gregor@apache.org
>>
>>---------------------------------------------------------------------
>>To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
>>For additional commands, e-mail: lenya-user-help@cocoon.apache.org
>>
>>
>>
>>
>
>
>---------------------------------------------------------------------
>To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
>For additional commands, e-mail: lenya-user-help@cocoon.apache.org
>
>
>
>
--
Michael Wechner
Wyona Inc. - Open Source Content Management - Apache Lenya
http://www.wyona.com http://cocoon.apache.org/lenya/
michael.wechner@wyona.com michi@apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org
Re: CSS and a wee bit JScript
Posted by Doug Chestnut <dh...@virginia.edu>.
This is the menu that I have been using in my publication:
*****html*****:
<ul id="navmenu">
<li><a href="/">UVa Library Home</a></li>
<li><div><a href="/lab/features.html">Lab Features</a></div>
<ul class="subnav">
<li id="firstsub"><a href="/lab/standards.html">Standards-based Web
Sites</a></li>
<li><a href="/lab/map.html">Map of Library Locations</a></li>
</ul>
</li>
<li><a href="/lab/comments/">Comments</a></li>
<li><a href="/questions.html">Questions</a></li>
<li id="last"><a href="http://virgo.lib.virgiia.edu">VIRGO</a></li>
</ul>
*****css*****:
/* DROP MENUS */
ul#navmenu {
height: 1.4em;
position: relative;
margin: -6px 0 0 -12px;
padding: 0;
font-size: 11px;
list-style: none;
white-space: nowrap;
}
ul#navmenu li {
float: left;
position:relative;
width: 6em;
height: 1.4em;
background-color: #FFFFEA;
padding: 0px 12px 0px 4px;
margin: 0;
border-top: 1px solid #963;
border-right: 0px solid #963;
border-bottom: 1px solid #963;
border-left: 1px solid #963;
text-align: left;
}
/* ie 5 mac & win hacks \*/
ul#navmenu li {
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
}
html > body ul#navmenu li {
width: auto;
}
/* end hacks */
ul#navmenu a {
font-weight: bold;
color: #036;
text-decoration: none;
margin: 0;
padding: 0px 8px 2px 4px;
}
ul#navmenu li a:hover {
text-decoration: underline;
}
ul#navmenu li#last {
border-right: 1px solid #963;
}
ul#navmenu li ul {
display: none;
position: absolute;
top: 105%; /* value for ie5 */
left: -1.5em; /* value for ie5 */
padding: 0;
margin: 0;
font-weight: normal;
list-style: none;
}
/* hack to hide from IE 5 mac & 5-6 \*/
ul#navmenu li ul {
voice-family: "\"}\"";
voice-family: inherit;
left: -0.1em;
}
html > body ul#navmenu li ul {
left: -0.1em;
}
/*end hacks */
ul#navmenu li ul li {
display: block;
float: none;
margin: 0;
padding: 2px 4px 2px 4px;
background-color: #FFFFEA;
border-top: 0;
border-right: 1px solid #963;
border-left: 1px solid #963;
border-bottom: 1px solid #963;
white-space: normal;
height: auto;
width: 17em;
}
ul#navmenu li ul li a {
display: block;
color: #036;
text-decoration: none;
height: 12px;
margin: 0;
padding: 0;
}
ul#navmenu li ul li a:hover {
text-decoration: underline;
}
#navmenu li:hover ul, #navmenu li.over ul {
display: block;
margin: 0;
}
*****javascript*****:
//hack for CSS dropmenus in IE5x
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navmenu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+="over";
}
node.onmouseout=function() {
this.className=this.className.replace("over", "");
}
}
}
}
}
window.onload=startList;
****end****
It is all css (except a few hacks for odd browsers) and best of all it
doesn't use tables (Just a plain old unordered list for the sake of
accessibility).
--Doug
----- Original Message -----
From: "Gregor J. Rothfuss" <gr...@apache.org>
To: "Lenya Users List" <le...@cocoon.apache.org>
Sent: Wednesday, February 25, 2004 1:33 PM
Subject: Re: CSS and a wee bit JScript
> David Pinelo wrote:
>
> > Hi Thorsten,
> >
> > I've test your page using Mozilla, Konqueror... and it works!! :D :D :D.
> > It will be great (the menu.js of the RC doesn't work on my Konqueror
3.1... I
> > know, I'm a little bit "exigente" (I don't know the word in english ...
;)
>
> any menu that
>
> *works on modern browsers
> *ideally floats while you scroll
> *is valid html
> *takes accessibility into account
>
> is an improvement. the menu is one of the oldest parts of lenya and
> could certainly do with some refactoring. for instance, the current one
> is embarassingly hardcoded to require 4 menus..
>
> -gregor
>
>
> --
> Gregor J. Rothfuss
> Wyona Inc. - Open Source Content Management - Apache Lenya
> http://wyona.com http://cocoon.apache.org/lenya
> gregor.rothfuss@wyona.com gregor@apache.org
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
> For additional commands, e-mail: lenya-user-help@cocoon.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org
Re: CSS and a wee bit JScript
Posted by "Gregor J. Rothfuss" <gr...@apache.org>.
David Pinelo wrote:
> Hi Thorsten,
>
> I've test your page using Mozilla, Konqueror... and it works!! :D :D :D.
> It will be great (the menu.js of the RC doesn't work on my Konqueror 3.1... I
> know, I'm a little bit "exigente" (I don't know the word in english ... ;)
any menu that
*works on modern browsers
*ideally floats while you scroll
*is valid html
*takes accessibility into account
is an improvement. the menu is one of the oldest parts of lenya and
could certainly do with some refactoring. for instance, the current one
is embarassingly hardcoded to require 4 menus..
-gregor
--
Gregor J. Rothfuss
Wyona Inc. - Open Source Content Management - Apache Lenya
http://wyona.com http://cocoon.apache.org/lenya
gregor.rothfuss@wyona.com gregor@apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org
Re: CSS and a wee bit JScript
Posted by David Pinelo <da...@juntadeandalucia.es>.
Hi Thorsten,
I've test your page using Mozilla, Konqueror... and it works!! :D :D :D.
It will be great (the menu.js of the RC doesn't work on my Konqueror 3.1... I
know, I'm a little bit "exigente" (I don't know the word in english ... ;)
Thanks!
El Miércoles, 25 de Febrero de 2004 18:43, Thorsten Scherler escribió:
> Hello group,
> I followed the discussion about the jscript menu. I use on my personal
> web page a combination of CSS and jscript. Maybe this would be an
> alternative to the exiting jscript approach. You can see it in action @
> http://www.target-x.de/start.html. If you want I will try to make it
> work for lenya.
>
> e.g. If you press "Suche":
>
> <a href="#top" onMouseUp="showHideTable('tbl1','a');return true;"
> style="color: black;"><img id="a" src="pix/collapse.png" title="schließen"
> alt="GET" border="0" width="16">Suche</a>
>
>
> The table that is show/hide:
>
> <table id="tbl1" style="display: none" />
>
> The Jscript:
> <!--
>
> function showHideTable(theTable,theImg)
> {
> if (document.getElementById(theTable).style.display == 'none')
> {
> document.getElementById(theTable).style.display = 'block';
> document.getElementById(theImg).src='pix/collapse.png';
> }
> else
> {
> document.getElementById(theTable).style.display = 'none';
> document.getElementById(theImg).src='pix/expand.png';
>
> }
> }
> function showHideAllTable(theTable,theImg)
> {
> document.getElementById(theTable).style.display = 'none';
> document.getElementById(theImg).src='pix/expand.png';
> }
> //-->
>
> King regards
> </thorsten>
---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-user-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-user-help@cocoon.apache.org