Forums

uberjo

(Perhaps I should first put forward that I am more a designer than a programmerâ€” although I was pretty adept on my ZX81 back in the day...)

I have created a site where the <li> menu loads .html pages into an iframe.
Accordingly, the entire site is contained on one "home.html") page.

I have styled the <li> links so that I have:
#Nav ul
#Nav ul li
#Nav ul li a
#Nav ul li a:link; #Nav ul li a:visited
#Nav ul li a:hover

So far, everything is looking good.
NOW, I'm trying to add code so that I have a "current" state defined. This way, the user can visually see what they have clicked on and what has subsequently been loaded into the 'iframe'.

Is it possible to define a .current state when using 'iframes' ... because in home.html I can't define any of the <li> tags as <current>...?

Any ideas?
THANKS

chriscoyier

I think if I was in this situation I would attempt to do the adding/removing of the "current" class with jQuery.

Like:

$(#Nav ul li a).click(function() {
    $(#Nav ul li).removeClass(\"current));
    $(this).parent().addClass(\"current\");
});

I didn't test it... but that should do the trick I'm thinking.

uberjo

Thanks for getting back to me on this:

Um, I'm not really sure what jQuery is. I gather I don't need to know if I just cut and paste the code.
BUt then, where (and how) do I define what the style is for "current" ?

Would an a:focus work? I tried to fiddle with a:active and a:focus but only got it to work in FF and not in Safari.

chriscoyier

To add styling for the current class, just make sure there is something in your CSS for it:

li.current {
   background-color: red;
}

To use jQuery, you'll need to add it on your page (just Google it, download the latest version, and include it in a script tag in your header). The best place to get started might be just watch the Intro to jQuery video:

http://css-tricks.com/videos/css-tricks-video-20.php

What is interesting here... is I'm not sure if you'd need to include that jQuery and get it functioning on "iframe" page, or outside page.

koewnet

Is there any particular reason you would need to use iframes? I'm mostly concerned about the accessibility, and it's also not good for SEO nor usability. There's an old article about it on 456Bereastreet.com.

uberjo

I know frames have their problems but I thought inline frame (iframes) were less cumbersome.
I'm trying to create a really simple site. Clearly, I am not chosing the best option.

Perhaps you have a better suggestion than my iframe solution?

I've posted it here:
http://joellecraven.ca/iframes/main.html
I didn't upload the .mov file but you hit the links on the side menu, an html page (containing only an .mov) loads on the left side (the iframe)

I really appreciate the posts helping me out.

koewnet

I'm trying to create a really simple site. Clearly, I am not chosing the best option.

You want a really simple site? Drop the iframes. I've never been on a site with iframes that wasn't tricky to use (read/view and so on...), that's also why I'm trying to stay away from them.

uberjo

uh - and just load separate html pages for each link.
I guess I could do that...
I just liked the iframes keeping it all contained.
But clearly you have strong anti- iframe experience