PDA

View Full Version : Adding feature to dynamic ajax content



ebbinger_413
04-11-2009, 06:13 AM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

Let me start by explaining how I implimented this script...



<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="vertical-align: top;">
<div class="adNav">
<a href="javascript:ajaxpage('ad/page_1.htm', 'contentarea');"><p class="adPage">Monster Game PC</p></a>
<a href="javascript:ajaxpage('ad/page_2.htm', 'contentarea');"><p class="adPage">Custom Game PC</p></a>
<a href="javascript:ajaxpage('ad/page_3.htm', 'contentarea');"><p class="adPage">Media PC</p></a>
<a href="javascript:ajaxpage('ad/page_4.htm', 'contentarea');"><p class="adPage">Budget Computer</p></a>
<a href="javascript:ajaxpage('ad/page_5.htm', 'contentarea');"><p class="adPage">Budget Computer</p></a>
<a href="javascript:ajaxpage('ad/page_6.htm', 'contentarea');"><p class="adPage">Other Sales</p></a>
</div>
</td>
<td style="vertical-align: top; height: 300px; width: 840px;">
<div id="contentarea">
<p align="center"></p>
</div>
</td>
</tr>
</table>


The menu consists of a table column that has a div inside which contains all of the links. Now i have paragraph tags inside the links that i set a class to show it off as a button. I know this is "proper" coding but it did what i wanted to and i couldn't figure out any easier way to get the whole box area to be clickable instead of just the text.

Now the content area is just a simple div same as in the demo script which has the content loaded from external pages as linked to the menu links.

All other code (the javascript) is identical to the demo script on dd's page.

What i need is that when a user clicks a link for the button to remain highlighted so that they know what page they have loaded. When they select a different link "unhighlight" the other page link and highlight the newly loaded page link. I will be using css to do the "highlighting" by simply chaning the paragraph tag's background color...so if it is easier to simply change the background color instead of the whole class...that would work for me too.