Dynamic Ajax Content: Styling Selected/Active Link

[dmwhipp]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem: I have the links set in divs and would like the selected link have a different background & font color using CSS, but am not sure how to achieve that.

Here is my working sample page: http://www.floridaschoolbreakfast.or...eupsample.html. The dynamic ajax links are set in divs to achieve the desired menu appearance the client wants, but I cannot figure out how to make the selected div for dynamic content have a different appearance from the rest. Here is the relevant CSS I'm using so far:

/* HUDDLE UP MENU */

.huborder { width:100%; border-bottom:0px; width:960px; margin:0px auto; }
.hutabborder { border-right:1px solid #fff; }

.hutab { float:left; }
.hutab a:selected { color:#00ad4a; padding:8px 0px; background:#fff; }
.hutab a:link { color:#fff; padding:8px 0px; background:#00ad4a; }
.hutab a:visited { color: #fff; padding:8px 0px; background:#00ad4a; }
.hutab a:hover { color:#fff; background:#52c889; }

.hulink { display:block; padding:8px 0px; text-align:center; text-decoration:none; }

Thank you in advance for any assistance.
Deborah

[ddadmin]

The simplest way would be to style the :focus state of the menu's links, something like:

a.hulink:focus{
    background: green !important;
}

This should cause the selected menu item's background color to be green.

[dmwhipp]

Thank you - I was able to change the font and background color using onfocus in the stylesheet, but the new issue I'm having is when you refresh the page in IE (big surprise). On the sample page, I have the following coding which makes the Welcome message appear as default:

<script>
ajaxpage('hu-welcome.html', 'contentarea')
</script>

Now when I hit refresh, the tab most recently clicked (i.e. Contests, Activities, Recipes, etc.) remains the onfocus color (white background/green font), but the welcome message appears: http://www.floridaschoolbreakfast.or...eupsample.html

Can you think of any way to fix this?
Thanks,
Deborah

[styxlawyer]

Have you also noticed that when clicking any link on any page (which then opens in a new tab) the menu on the original page reverts to white text on green background?

[dmwhipp]

No... thanks for catching that! So somehow the new menu is interfering with the main site menu. Ugh.

[ddadmin]

Now when I hit refresh, the tab most recently clicked (i.e. Contests, Activities, Recipes, etc.) remains the onfocus color (white background/green font), but the welcome message appears: http://www.floridaschoolbreakfast.or...eupsample.html

Try explicitly setting focus on the first menu item when the page loads using JavaScript. Firstly, give your first menu item an ID attribute, ie:

<a id="hulink1" class="hulink" href="javascript:ajaxpage('/hu-welcome.html', 'contentarea');">Welcome!</a>

Then, following the menu markup, do something like the following with JavaScript:

<script>

document.getElementById('hulink1').focus()

</script>

I haven't tested to see if this overcomes the bug in IE, but worth a shot.

[dmwhipp]

Thanks... I gave it a try, but no luck: http://www.floridaschoolbreakfast.or...upsample2.html. I appreciate the assistance though

[dmwhipp]

Thanks again for pointing this out. I've been testing different tweaks to the stylesheet and think I have the main menu in the gray bar working correctly on all major browsers/devices now.

[ddadmin]

Try wrapping the code in a window.onload event:

window.onload = function(){
	document.getElementById('hulink1').focus()
}

[dmwhipp]

Still a no go: http://www.floridaschoolbreakfast.or...upsample2.html Can you take a look at the code and see if I placed it correctly? I added it to the body tag.
Thanks!