Click to See Complete Forum and Search --> : Active links...
adam_fake
04-21-2008, 03:43 PM
There's plenty of sites that do this and i'm sure its pretty easy but can someone point me in the right direction?
There's an example on this site http://carlogiovani.com/
I want to get the link working so when you select the page you want, it loads that page but (in this case) underlines the link of the page that is being viewed.
jessnoonyes
04-21-2008, 03:47 PM
Well it looks like when you select a link it loads a different page with images. But to get the underline you just add a bit of CSS
a:active { text-decoration: underline; }
adam_fake
04-21-2008, 03:53 PM
yeah - i had a feeling it would be the 'active' tag but for some reason it wasn't working - i shall double check my code.
dtm32236
04-21-2008, 03:56 PM
that's not what 'active' does.
a link is 'active' as when the mouse is clicked and held down. As soon as you release the mouse, the link is not active anymore.
in order to keep them underlined, you'll probably have to use some JavaScript that would trigger some CSS code. I'd probably have a separate css file, and list all the link titles in them. then make them all text-decoration:underline. then when you click one, some JS will trigger the appropriate CSS class. does that make sense?
anyway, to get other pages to load in yours, i would check out iFrames (google it).
adam_fake
04-21-2008, 04:02 PM
yeah - thats why i was doubting the 'active' tag as i could achieve it. You're right, it doesn't work.
As far as the way the page loads, i'm not that bothered about its functionality, i was more after the 'Link' effect.
Any idea on on the JS?
dtm32236
04-21-2008, 04:06 PM
I don't really know - i'm not great with JS, but something like this:
<a href="blue.html" class="blue" onclick="document.write(<style type=text/javascript>.blue{text-decoration:hover;}</style>) return false">blue site</a>
does that make sense? I'm not sure if that's how it would work, but maybe you can see where I'm going with this.
nclick="document.write(<style type=text/javascript>.blue{text-decoration:hover;}</style> maybe this stuff would have to be in an external .js file with a function that does this.
adam_fake
04-21-2008, 04:12 PM
thats great - i'll have a play around with it. Thanks for your help!
dtm32236
04-21-2008, 04:17 PM
cool... good luck with it.
come back here with any questions or ideas you're tinkering with.
adam_fake
04-21-2008, 04:33 PM
I found this which mentions the JS method but i'm curious to know how to do it using CSS
http://www.sitepoint.com/article/dynamic-menu-javascript
adam_fake
04-21-2008, 05:01 PM
and i guess my next question would be how to achieve it to all links without have to apply a 'class' to each individual <a href> tag. Could it be done by simple applying the attributes of the 'class' to a particular DIV?
I.E. any link thats added via a CMS into the menu would automatically make use of the 'current page/link' class?
If that makes sense...
Declan1991
04-21-2008, 05:12 PM
There is another way of doing it. If you put an id on the body tag, you can target each link.