PDA

View Full Version : Dynamic Ajax Content: Styling Selected/Active Link


dmwhipp
06-03-2015, 11:44 AM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.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.org/huddleupsample.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
06-03-2015, 05:54 PM
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
06-03-2015, 06:43 PM
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.org/huddleupsample.html

Can you think of any way to fix this?
Thanks,
Deborah
styxlawyer
06-03-2015, 07:21 PM
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
06-03-2015, 07:32 PM
No... thanks for catching that! So somehow the new menu is interfering with the main site menu. Ugh.
ddadmin
06-03-2015, 08:06 PM
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.org/huddleupsample.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
06-04-2015, 02:17 AM
Thanks... I gave it a try, but no luck: http://www.floridaschoolbreakfast.org/huddleupsample2.html. I appreciate the assistance though :)
dmwhipp
06-04-2015, 02:27 AM
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
06-04-2015, 09:07 AM
Try wrapping the code in a window.onload event:


window.onload = function(){
document.getElementById('hulink1').focus()
}
dmwhipp
06-04-2015, 02:54 PM
Still a no go: http://www.floridaschoolbreakfast.org/huddleupsample2.html Can you take a look at the code and see if I placed it correctly? I added it to the body tag.
Thanks!
ddadmin
06-04-2015, 06:01 PM
The code you have currently is incorrect:


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

Revert that back to just <body>, and further down, change:


<script>
document.getElementById('hulink1').focus()
</script>

to:


<script>
window.onload = function(){
document.getElementById('hulink1').focus()
}
</script>
dmwhipp
06-04-2015, 06:43 PM
It's working! It did add a dotted border in IE and blue outline in Chrome, but I added the style outline;none; to that element and it removed that. Thanks for you expertise and patience!
Deborah
ddadmin
06-04-2015, 07:34 PM
You're welcome :)