Would like some help with a possible script for a rollover

External websites, for and about BZFlag
Forum rules
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_ » Wed Jun 13, 2007 6:38 pm

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>
Top
Longhair
Private First Class
Private First Class
Posts: 330
Joined: Tue Feb 08, 2005 6:06 pm
Location: Lancaster, PA
Contact:
Contact Longhair

Post by Longhair » Wed Jun 13, 2007 10:11 pm

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.
Top
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:
Contact A Meteorite

Post by A Meteorite » Wed Jun 13, 2007 10:41 pm

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
Top
Longhair
Private First Class
Private First Class
Posts: 330
Joined: Tue Feb 08, 2005 6:06 pm
Location: Lancaster, PA
Contact:
Contact Longhair

Post by Longhair » Wed Jun 13, 2007 11:45 pm

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

Post by Legolas_ » Thu Jun 14, 2007 12:43 am

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

Post by blast » Thu Jun 14, 2007 3:58 am

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
Top
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:
Contact A Meteorite

Post by A Meteorite » Thu Jun 14, 2007 4:10 am

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
Top
Enigma
Private First Class
Private First Class
Posts: 211
Joined: Sat Apr 23, 2005 3:13 am

Post by Enigma » Thu Jun 14, 2007 6:31 am

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.
Top
User avatar
strayer
Sergeant Major
Sergeant Major
Posts: 191
Joined: Sat May 24, 2003 3:54 pm
Location: Germany
Contact:
Contact strayer

Post by strayer » Thu Jun 14, 2007 7:00 am

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)
Top
Longhair
Private First Class
Private First Class
Posts: 330
Joined: Tue Feb 08, 2005 6:06 pm
Location: Lancaster, PA
Contact:
Contact Longhair

Post by Longhair » Thu Jun 14, 2007 1:06 pm

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.
Top
Legolas_
Private First Class
Private First Class
Posts: 513
Joined: Thu Jan 20, 2005 10:24 pm

Post by Legolas_ » Thu Jun 14, 2007 4:23 pm

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

Return to “Fansites”