Hover Reveals Text

swwack91

macrumors 6502a
Original poster
Jan 28, 2007
735
23
New Jersey
Hi all,

I'm trying to put together a very simple website and only have a basic working knowledge of DreamWeaver and HTML... but I want to figure this out and I'm hoping y'all can help!

I'm trying to have a list of titles down one column. When you hover over one of those projects, it reveals a paragraph elsewhere on the page describing it. I want all of the descriptions to be in the exact same place. If they could fade in and fade out, that would be EVEN BETTER.

Where would I even begin?
 

lucasgladding

macrumors 6502
Feb 16, 2007
319
1
Waterloo, Ontario
Hi all,

I'm trying to put together a very simple website and only have a basic working knowledge of DreamWeaver and HTML... but I want to figure this out and I'm hoping y'all can help!

I'm trying to have a list of titles down one column. When you hover over one of those projects, it reveals a paragraph elsewhere on the page describing it. I want all of the descriptions to be in the exact same place. If they could fade in and fade out, that would be EVEN BETTER.

Where would I even begin?
I would use jQuery. You would register a hover event for the link, then update the description using a load event, probably using the "rel" attribute on the link for the URL. Off the top of my head, something like this:

Code:
$(function(){
  $("#titles a").hover(function(){
    var descriptionURL = $(this).attr("rel");
    $("#description").load(descriptionURL);
  });
});
The descriptions could then be stored in separate files, with those filenames being used for the "rel" attribute in the links.

I haven't checked anything, so someone please correct me if I'm mistaken on anything. There are several ways to do this, so you might get several answers.

Note that you need to include jQuery in your header.

PS: You'll want to familiarize yourself with jQuery if you're doing this kind of thing often. I suspect you'll have questions, so let me know if you want me to whip up a quick example and I'll see what I can do.
 

kemo

macrumors 6502a
Oct 29, 2008
735
110
ProtonVPN
How about to use both: the CSS version and jQuery one to keep it working for both, the users with JS enabled and disabled :)
 

lucasgladding

macrumors 6502
Feb 16, 2007
319
1
Waterloo, Ontario
How about to use both: the CSS version and jQuery one to keep it working for both, the users with JS enabled and disabled :)
Assuming the OP is still reading this, I'm not sure whether CSS can be used without some very messy code (including the HTML description inside the element being hovered and doing some absolute positioning on the description to make it appear where you want on the page).

For something that degrades well, I would link to another page that appears in a new window. When javascript is disabled, that link will be used.

IMHO, degrading gracefully isn't always necessary, and this strikes me as one such situation.
 

kemo

macrumors 6502a
Oct 29, 2008
735
110
ProtonVPN
Assuming the OP is still reading this, I'm not sure whether CSS can be used without some very messy code (including the HTML description inside the element being hovered and doing some absolute positioning on the description to make it appear where you want on the page).

For something that degrades well, I would link to another page that appears in a new window. When javascript is disabled, that link will be used.

IMHO, degrading gracefully isn't always necessary, and this strikes me as one such situation.
Well, once the paragraphs would be some direct childs of hovered items then I guess it doesnt have to be a messy code just easy: li:hover p {display:block;} statement, anyway jQuery would be the best way to go probably.. and linking to another page is a good approach because once we start talking about touch devices - there is no hover event - just click :)active), right ?:)