Add new attachment

Only authorized users are allowed to upload new attachments.

This page (revision-50) was last changed on 01-May-2012 14:39 by 195.248.173.67  

This page was created on 15-Jun-2004 00:11 by DirkFrederickx

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Difference between version and

At line 1 added 4 lines
The [BrushedTemplate] uses a menu at the top of the screen with drop down boxes.
Since this was implemented by using .css stuff, you can also use dropdowns
in the body of your pages. With some care.
\\--[DF|DirkFrederickx], Jun 2004
At line 2 changed one line
under construction
! Usage
At line 8 added 2 lines
Write the menu as a list and enclose it in {{{%%dropDownList}}} tags.
Nested sublist are used to contain the drop down menu items.
At line 11 added 230 lines
{{{
%%dropDownList
* Item 1
** subitem 1
** subitem 2
* [Item2|BrushedTemplateDropDownMenu]
** [Recent Changes]
** [WikiEtiquette]
** [Page Index]
* [Item3|Main]
** item [1]
** item [2]
** item [3]
%%
}}}
Here is the result:
%%dropDownList
* Item 1
** subitem 1
** subitem 2
* [Item2|BrushedTemplateDropDownMenu]
** [Recent Changes]
** [WikiEtiquette]
** [Page Index]
* [Item3|Main]
** item [1]
** item [2]
** item [3]
%%
End of the menu
! How does it work
The .css was inspired by several articles on the web; mainly
Suckerfish Dropdowns at [http://www.alistapart.com/articles/dropdowns/]
by [Patrick Griffiths|http://www.alistapart.com/authors/patrickgriffiths]
and the drop down menu examples by David Lindquist on [http://www.gazingus.org]
helped me a lot.
In order to get it running also on IE and Opera, I had to stretch it a bit.
With some support of javascript, the hidden drop down menus should appear when you hover
the mouse over the buttons of the menu. Note how the positioning of the
menu on the screen is different for Opera, IE and the other browser.
Another tricky part of this feature is related to the way JSPWiki generates nested lists.
Unfortunately, the nested {{<ul>}} tags are actually not nested inside the
parent {{<li>}}. This is handled in both the javascript and the css.
What you need to do:
* add following .css to ''template/<Your[WikiTemplate]>/jspwiki.css'' [1]
* add some javascript to your .js file to have a fix for .css hover in ie and opera [2]
[#1]__CSS Stylesheet additions__
{{{
.dropDownList
{ margin: 0;
padding: 0.5em 0 0.5em 0;
font-size: x-small;
}
.dropDownList > ul
{ position: relative;
}
.dropDownList ul
{ margin: 0;
padding: 0;
}
.dropDownList ul li
{ margin: 0;
padding: 0.5em;
display: inline;
list-style: none;
}
.dropDownList ul li.dropDownListFocus
{ font-weight: bold;
}
.dropDownList ul ul li
{ display: block;
font-weight: normal;
margin: 0;
padding: 0.5em;
}
.dropDownList ul ul
{ visibility: hidden;
position: absolute;
left: 0;
top: 1.25em;
z-index: 9999; /* always visible, on top */
margin: 0;
padding: 0;
background: white;
border: 1px solid #cccccc;
}
}}}
[#2]__Javascript support routines__
{{{
// 005. enableTopMenu DF / May 2004
// CSS based, 'suckerfish dropdowns' and David Linquists dropdown menu
//
// <div class="dropDownList" >
// <ul>
// <li>menu-item
// <ul>dropdown stuff </ul>
// </li>
//
// or
//
// <div id="topMenu" class="dropDownList" >
// <ul>
// <li>menu-item</li>
// <ul>dropdown stuff </ul>
//
//
// called after loading the page
// look for all <DIV class="dropDownList">
//var previousLI = null ; /* already defined */
var dropdownBase;
function enableTopMenu()
{
if (!document.createElement) return;
// find a <div id="topMenu" class="dropDownList"> element
var divArr = document.getElementsByTagName("div");
if (! divArr) return;
for (var i=0; i<divArr.length; i++)
{
if ( divArr[i].className == "dropDownList" )
{
dropDownBase = divArr[i].offsetLeft;
//alert(dropDownBase);
for (var j=0; j<divArr[i].childNodes.length; j++)
{
previousLI = null;
enableTopMenu1(divArr[i].childNodes[j]);
}
}
}
}
function enableTopMenu1(node)
{
if (node.nodeName == "LI") previousLI = node;
if ( (node.nodeName == "UL") && (previousLI) )
{
enableTopMenu2(previousLI,node);
previousLI = null;
return;
}
if (node.hasChildNodes)
{
for (var i=0; i<node.childNodes.length; i++)
{
enableTopMenu1(node.childNodes[i]);
}
}
}
function enableTopMenu2(li, ul)
{
//alert("left:"+li.offsetLeft+" top:"+li.offsetTop+" lineHeight:"+li.offsetHeight);
var base = dropDownBase;
if (window.opera)
{ /* need some dirty trick : base=0 for the floating searchbox -- blub */
li.onmouseover= function()
{
if (base==0) ul.style.top = li.offsetTop /*+ li.offsetHeight*/ + "px";
if (base!=0) ul.style.left = li.offsetLeft - dropDownBase + "px";
ul.style.visibility = "visible";
}
} else if (IE5)
{ /* plopperdeplop */
li.onmouseover= function()
{
ul.style.top = li.offsetTop + li.offsetHeight*3/4 + "px";
ul.style.left = li.offsetLeft - dropDownBase + "px";
ul.style.visibility = "visible";
}
} else {
li.onmouseover= function()
{
ul.style.top = li.offsetTop + li.offsetHeight + "px" ;
ul.style.left = li.offsetLeft + "px";
ul.style.visibility = "visible";
}
}
li.onmouseout = function() { ul.style.visibility = "hidden"; }
ul.onmouseover= function() { ul.style.visibility = "visible"; }
ul.onmouseout = function() { ul.style.visibility = "hidden"; }
}
}}}
In the default jspwiki template, the window onload function is defined in {{search_highlight.js}},\\
You'll need to extend it with a call to the {{enableTopMenu}} function.
{{{
function runOnLoad
{
googleSearchHighlight();
enableTopMenu();
}
window.onload = runOnLoad;
}}}
!Example
See also [BrushedTemplate]
Version Date Modified Size Author Changes ... Change note
50 01-May-2012 14:39 5.891 kB 195.248.173.67 to previous
49 01-May-2012 11:11 5.876 kB 195.248.173.67 to previous | to last
48 04-Jul-2011 20:02 5.891 kB Harry Metske to previous | to last removed dirt
47 04-Jul-2011 09:31 5.934 kB 208.75.10.242 to previous | to last
46 25-Dec-2007 21:29 5.891 kB HarryMetske to previous | to last removed dirt
45 25-Dec-2007 20:00 5.901 kB Basc4Tlich to previous | to last trricact
44 08-Nov-2007 15:29 5.891 kB JanneJalkanen to previous | to last
43 08-Nov-2007 12:30 5.904 kB 202.70.201.34 to previous | to last
42 12-Oct-2007 21:19 5.891 kB JanneJalkanen to previous | to last
41 12-Oct-2007 20:18 5.917 kB 208.109.123.121 to previous | to last
« This page (revision-50) was last changed on 01-May-2012 14:39 by 195.248.173.67