Would like some help with a possible script for a rollover

External websites, for and about BZFlag
Post Reply
Legolas_
Private First Class
Private First Class
Posts: 513
Joined: Thu Jan 20, 2005 10:24 pm

Would like some help with a possible script for a rollover

Post by Legolas_ »

Hey guys.

I have a list of links on a website that say day 1, day 2, etc. and would like to be able to get a paragraph show on a rollover of that link.

Here is the code for the list:

Code: Select all

<ul>
						<li><a>Day 1</a></li>
						<li><a>Day 2</a></li>
						<li><a>Day 3</a></li>
						<li><a>Day 4</a></li>
						<li><a>Day 5</a></li>
						<li><a>Day 6</a></li>
						<li><a>Day 7</a></li>
						<li><a>Day 8</a></li>
						<li><a>Day 9</a></li>
						<li><a>Day 10</a></li>
						<li><a>Day 11</a></li>
						<li><a>Day 12</a></li>
						<li><a>Day 13</a></li>
						<li><a>Day 14</a></li>
						<li><a>Day 15</a></li>
						<li><a>Day 16</a></li>
						<li><a>Day 17</a></li>
						<li><a>Day 18</a></li>
						<li><a>Day 19</a></li>
					</ul>
Longhair
Private First Class
Private First Class
Posts: 330
Joined: Tue Feb 08, 2005 6:06 pm
Location: Lancaster, PA
Contact:

Post by Longhair »

This would be dead easy if it wasn't for Internet Explorer 6 and older IEs. All you'd have to do is put this in your stylesheet:

Code: Select all

li {height:1.3em;display:block; overflow:hidden}
li:hover {height: auto;}
But since you have to worry about people using IE6, try to adapt the following:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<head>
	<title>Hover Test</title>
	<style type="text/css">
	li {height:1.3em; /* or whatever height will only show the first line */
		display:block;
		overflow:hidden;
		}
	</style>
	<script type="text/javascript">
	function showLI(id)
	{
	document.getElementById(id).style.height = "auto";
	}
	function hideLI(id)
	{
	document.getElementById(id).style.height = "1.3em";
	}
	</script>
	
</head>
<body>
<ul>
<li id="day1" onmouseover="showLI('day1');" onmouseout="hideLI('day1');"><a>Day 1</a><p>Some text for this day</p></li>
</ul>
</body>
Just give each li it's own id, and pass that id to the onmouseover/out event handlers. Your viewer, of course, needs to have javascript enabled to use this.

I think that there is a way to do this with just pure CSS, but it's easier to just javascript until the day IE6 usage is rare enough that you don't care if IE6 users can see your page. As far as I know, IE6 is still the most commonly used browser.
User avatar
A Meteorite
Private First Class
Private First Class
Posts: 1786
Joined: Thu Apr 28, 2005 12:56 am
Location: California, U.S.
Contact:

Post by A Meteorite »

Longhair
A better way would be to have JS that loops through all li tags in a specific ul class, adding the onmouseover and onmouseout events. That way you would not have to hardcode the events to each element.

Legolas_
I would also consider dropping support for IE6 fully and use the all CSS way. It is much cleaner, and would help encourage people to upgrade to IE7 (ick!), Firefox, or another alternative browser (Opera, Safari, etc...).
Image
Owner @ BZFX
Core Admin @ CAN

Email me: bzmet…@gmail.com
Longhair
Private First Class
Private First Class
Posts: 330
Joined: Tue Feb 08, 2005 6:06 pm
Location: Lancaster, PA
Contact:

Post by Longhair »

Good point. I usually would do that on the PHP end, but yes, you totally could do that with javascript.
Legolas_
Private First Class
Private First Class
Posts: 513
Joined: Thu Jan 20, 2005 10:24 pm

Post by Legolas_ »

Thank you for your suggestions, this works fine for my intents and purposes. Thank you longhair for the code.
User avatar
blast
General
General
Posts: 4931
Joined: Fri Mar 21, 2003 3:49 pm
Location: playing.cxx
Contact:

Post by blast »

A Meteorite

Not everyone can upgrade to IE7. It is only available to Windows XP SP2, Windows Server 2003, and Vista.
"In addition to knowing the secrets of the Universe, I can assure you that I am also quite potty trained." -Koenma (Yu Yu Hakusho)

Image
User avatar
A Meteorite
Private First Class
Private First Class
Posts: 1786
Joined: Thu Apr 28, 2005 12:56 am
Location: California, U.S.
Contact:

Post by A Meteorite »

blast wrote:A Meteorite
Not everyone can upgrade to IE7. It is only available to Windows XP SP2, Windows Server 2003, and Vista.
True, thus encouraging upgrading your OS or to an alternative browser. :)
Image
Owner @ BZFX
Core Admin @ CAN

Email me: bzmet…@gmail.com
Enigma
Private First Class
Private First Class
Posts: 212
Joined: Sat Apr 23, 2005 3:13 am

Post by Enigma »

A Meteorite wrote:
blast wrote:A Meteorite
Not everyone can upgrade to IE7. It is only available to Windows XP SP2, Windows Server 2003, and Vista.
True, thus encouraging upgrading your OS or to an alternative browser. :)

Speaking of browsers, Safari was just released for Windows Vista and Windows XP, if anyone is interested.
User avatar
strayer
Sergeant Major
Sergeant Major
Posts: 191
Joined: Sat May 24, 2003 3:54 pm
Location: Germany
Contact:

Post by strayer »

Enigma:
Safari for Windows...very nice, but as long as it is a beta with the amazing high number of security leaks it has now, you should keep your hands off it ;o)
A pessimist is an optimist with experience... ;o)
Longhair
Private First Class
Private First Class
Posts: 330
Joined: Tue Feb 08, 2005 6:06 pm
Location: Lancaster, PA
Contact:

Post by Longhair »

Honestly, much as I howl about IE, I can't expect people to switch. Especially by making a site that doesn't work on IE.

Many of the people who use IE are people who just double click on the nice friendly icon on their desktop that says "Internet". If your design doesn't work on IE, these people won't blame Microsoft, they'll blame YOU. After all, every other website out there works on IE. Most people have no concept of a W3C standard, and figure that the WWW should just use the MS standards since they have the largest market share. Sure, these people need to be educated, but making a website that doesn't work on IE won't solve the problem.

For the rest, there are actually some sorta real reasons to use IE - even version 6. For example, if you're an IT person for a company with more than a dozen or so computers, my understanding is that there are very easy ways of pushing updates out to all the computers in the company at once. Firefox has something like this, but to a busy IT person, why do the extra work? This was the case in the place where my wife works, until she and whole bunch of other people in the company started howling about IE until the IT guys listened. (one of the IT guys is also her father which helps) They now have Firefox. Does Opera or the upcoming Safari have any corporate network friendly features?

As somebody else brought up, IE7 isn't available to everyone using Windows either. For the computers in my family, we have 3 computers with Windows on one of the partitions. I bought them off of ebay, and they are not valid copies of Windows. So no IE7 for me. Oh, my wife's computer has Windows on it too, but I haven't checked if I can put IE7 on there since she always uses the Ubuntu side. Hasn't booted Windows since she bought it.
Legolas_
Private First Class
Private First Class
Posts: 513
Joined: Thu Jan 20, 2005 10:24 pm

Post by Legolas_ »

Becareful with the Safari 3 Beta, it does have some glitches in the installer.
Post Reply