[Updated: 3Aug06] UVic's CSS/Javascript Dropdowns
We are now ending a development phase here at UVic (www.uvic.ca) and its come time that I share some stuff with the community. Some of our custom channels though make use of JavaScript and CSS that is provided through the layout. This is especially the case with the CSS dropdowns.
These dropdowns make use of Javascript, CSS and standard XHTML. They are easy to implement and as long as you have a Unique identifier for each dropdown, they should work without problems. Below is an image of what the dropdowns look like.
So here is how it works.
1. Include the following javascript at the top of your template. (Lord knows theres already enough there!)
var eventsettings = new Array();
function inittoggle(sectionid, open)
{
var divstring = ''+sectionid;
if(open==0)
{ var classname ='closed';
eventsettings[divstring]=0;
}
else
{ var classname ='open';
eventsettings[divstring]=1;
}
if(document.getElementById){
document.getElementById(divstring).className = classname;
}
}
function togglevisible(sectionid)
{
var divstring = ''+sectionid;
if(eventsettings[divstring]==1)
{ var classname ='closed';
eventsettings[divstring]=0;
}
else
{ var classname ='open';
eventsettings[divstring]=1;
}
if(document.getElementById){
document.getElementById(divstring).className = classname;
}
}
2. Now we need to take part of the CSS component, so include this in your CSS (there are a few extra styling things there too):
.closed h3, .open h3 {
font-size:105%;
padding: 0;
margin:0
}
.closed h4, .open h4 {
font-size:100%;
padding: 0;
margin:0
}
.closed a:link, .closed a:visited, .open div .closed a:link, .open div .closed a:visited, .open .open .closed a:link, .open .open .closed a:visited , .open .open .open .closed a:link, .open .open .open .closed a:visited{
font-weight:bold;
padding-left: 15px;
background: url(/uvic/portal/images/icons/arrow-bullet.gif) 3px 3px no-repeat;
}
.closed div, .open div.closed div{
display:none;
}
.open{
}
/*Drop downs up to 4 levels */
.open a:link, .open a:visited, .open .open a:link, .open .open a:visited, .open .open .open a:link, .open .open .open a:visited, .open .open .open .open a:link, .open .open .open .open a:visited{
font-weight:bold;
padding-left: 15px;
background: url(/uvic/portal/images/icons/arrow-bullet-down.gif) 3px 3px no-repeat;
}
.open div a:link, .open div a:visited, .open .open div a:link, .open .open div a:visited, .open .open .open div a:link, .open .open .open div a:visited, .open .open .open .open div a:link, .open .open .open .open div a:visited {
font-weight:normal;
background: none;
}
/*this is used to create an external link inline with the dropdown link. Used for the RSS channel*/
.closed a[target="_new"], .open a[target="_new"], .closed a[target="_blank"], .open a[target="_blank"]{
background:none;
padding:0;
}
.open div a[target="_new"], .open .open div a[target="_new"], .open .open .open div a[target="_new"], .open .open .open .open div a[target="_new"], .open div a[target="_blank"], .open .open div a[target="_blank"],.open .open .open div a[target="_blank"],.open .open .open .open div a[target="_blank"]
{
padding-right:15px;
background: url(/uvic/portal/images/icons/external.png) no-repeat right center;
}
.open div{
margin: 0;
padding: 2px 5px 5px 20px;
color: #000;
display:block;
}
.open img, .closed img{
padding: 0 0 0 2px;
border:none;
}
.open p{
padding:0;
margin:0;
}
3. Now just write the HTML using a unique identifier:
<div class="open" id="uniqueid">
<a name="uniqueid"></a><h4>
<a href="j4v4script:togglevisible('uniqueid');">Important News</a></h4>
<div>
<ul><li><a href="http://informed.uvic.ca/" target="_blank">Informed - UVic Systems</a></li>
<li><a href="http://elearning.uvic.ca/elearning/esgacad.html" target="_blank">Current ITNews</a></li>
<li><a href="http://www.cous.uvic.ca/cassnews/" target="_blank">CASS News</a></li>
<li><a href="http://helpdesk.uvic.ca/bulletins/oldnews.html" target="_blank">HelpDesk News</a></li>
<li><a href="http://web.uvic.ca/nova/news/" target="_blank">Project Nova News</a></li></ul>
</div>
</div>
<script type="text/j4v4script" language="J4v4-Script1.2">inittoggle('uniqueid',0); </script>
I think we are all smart enough to change j4v4script into what it should be.
So now you have dropdowns!
I'll tell you a little more. This code supports up to 4 levels of cascading. Users will see a flicker as the page loads but we think it looks cool in our portal because you can see the page loading rather than just sitting there twiddling you thumbs. These are fully accessable. If you don't have JS, then you still get the content. Search engines can still read all of it (not that there is one in the portal), and screen readers can still tab to all of the links. Users don't have to wait for the page to reload when they click on a drop down and that makes them more willing to use the dropdowns. And we can categorize and hine information easier. We have about 75 channels and we use these alot to compress the data so we don't scare the users:)
For more of a demo you can check out the same sort of thing at http://events.uvic.ca.
Cheers
Dave W.
***Edit: Changed the location of the "eventsettings" variable declaration. This should fix the problem with the init('x',1) double click issue. For those that don't know, you can set a dropdown init functions second parameter to 1 and the dropdown will load open.
- webmonkey's blog
- Login or register to post comments
Hack Your Knowledge
Recent blog posts
- LDI Queue Monitoring Script
- U of S Single Sign-on SSO Monitoring Script
- Lum IV - Perf problems and Paralled Deployment
- WebCT custom SSO Icon
- Examples using our AjaxRequests channel
- User-defined role and event trigger 101
- Silly question about lumdev itself
- See the XML nested-tables.xsl is processing
- Need Luminus version 3 or 4 for Installation
- Guest Login to IV?
Developer Links
Poll
- Login or register to post comments
- Older polls
Syndicate
Comments
Very nice
What files are we to modify with the above styles for your design to work?
Thanks.
Glad to hear it's working
Glad to hear it's working for you Ginny.
The files I edited where:
Javascript went in /js/util.js
and the stykles went into my style sheet (we don't use the cp one, but if you do then it's here: /media/org/jasig/portal/layout/tab-column/nested-tables/cp/skin/cp.css)
hope that helps.
Cheers
DAVE
Very cool... well, but...
Howdy,
The UVic portal is great! It's so great that I'm trying to use both your Channel Guide (got it installed no problem) and your CSS/JavaScript dropdowns. I'm suprized I haven't seen more sites using the dropdowns.
But, alas... I am kinda stuck. I'm not exactly a newbie, but I'm a bit rusty. Up until 6 months ago, I was living for 2 1/2 yrs in a mud-brick/grass roof house w/o electricity. But I digress.
I'm not really sure where to put the two bits (#1 & #2) to make the dropdowns work for the Channel Guide (and later for use w/other channels). We're using Luminis 3.3. I added #1 to blah/blah/nested-tables.xsl and #2 to the end of media/.../nested-tables/cp/cp.css, and restarted Luminis, but the dropdowns don't like me.
I do see the javascript functions when I look at the browser source of the page w/the Channel Guide channel. (I noticed that I don't see them when I look at the UVic source code of the Channel Guide channel.)
Where have I gone astray? Any help would be greatly appreciated.
Ginny Lee...Colorado School of Mines
Hmm, the portal elves have struck again
Hey, I got a nice suprize this morning...
Well I know I restarted (last Friday) just the luminis web server and I wasn't seeing the dropdowns in the Channel Guide channel. Then I *think* I restarted all of luminis and I wasn't seeing the dropdowns (hey, this was 2.5 whole days ago). Maybe, it was a browser cache thingie or the good ol portal elves who come in when yer sleeping and fix things all nice. (maybe they'll leave me some nice chocolate cookies too)
Next I'm going to try to get the nice little dropdown arrows like mentioned in #2 [(https://usource.uvic.ca)/uvic/portal/images/icons/arrow-bullet.gif & arrow-bullet-down.gif].
Oh, happy, happy, joy, joy all on a Monday morning.
Ginny Lee...Colorado School of Mines
Additional CSS
The below CSS for UL also pretty-fies things a bit...it sets (takes out the extra) vertical space between levels of list items, and sets the nice square bullets for each list item. I found this on/in UVic's site using the CSS Viewer part of the Web Developer FireFox extension.
ul{
list-style-image:url(http://yourschool.edu/images/bullet.gif);
list-style-type:square;
margin-bottom:0px;
margin-left:0.3em;
margin-top:0px;
padding-left:1.0em;
text-indent:0em;
}
Ginny Lee...Colorado School of Mines
A Note...
We're successfully using the dropdowns in conjunction with your Channel List Channel. We successfully implemented both in our development system and are testing it on our production system before going live.
Great stuff Dave! Thanks for sharing.
One note for users of this script that caught us...
When using the styles posted above, you need to have comparable images for the arrow-bullet.gif, arrow-bullet-down.gif and external.png in order for the dropdowns to look/work the same and to avoid a stream of errors in your logs. The dropodowns will still work, but they won't have the arrow bullets.
In our case, we grabbed the same images UVic was using (the colors worked within our color scheme) and uploaded them to our Luminis server and then altered the references to them in the stylesheet.
- Doug
----------------------------
Douglas Riga - RHCE,ACTC,CNA,Linux+ SME
Xavier University
Portal System Administrator
513-745-3237
rigad@xavier.edu