Page 1 of 1

Would like some help with a possible script for a rollover

Posted: Wed Jun 13, 2007 6:38 pm
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>

Posted: Wed Jun 13, 2007 10:11 pm
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.

Posted: Wed Jun 13, 2007 10:41 pm
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...).

Posted: Wed Jun 13, 2007 11:45 pm
by Longhair
Good point. I usually would do that on the PHP end, but yes, you totally could do that with javascript.

Posted: Thu Jun 14, 2007 12:43 am
by Legolas_
Thank you for your suggestions, this works fine for my intents and purposes. Thank you longhair for the code.

Posted: Thu Jun 14, 2007 3:58 am
by blast
A Meteorite

Not everyone can upgrade to IE7. It is only available to Windows XP SP2, Windows Server 2003, and Vista.

Posted: Thu Jun 14, 2007 4:10 am
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. :)

Posted: Thu Jun 14, 2007 6:31 am
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.

Posted: Thu Jun 14, 2007 7:00 am
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)

Posted: Thu Jun 14, 2007 1:06 pm
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.

Posted: Thu Jun 14, 2007 4:23 pm
by Legolas_
Becareful with the Safari 3 Beta, it does have some glitches in the installer.