Changing Color of Active Link on AJAX script

[backyard]

I'm using the AJAX script I found on these forums to load a page without refreshing the whole page and it works well. Now, I'm trying to change the color of the active link and I'm not having any luck. I wanted to see if someone could point me in the write direction.

 

http://www.phpfreaks.com/forums/index.php/topic,115581.0.html

 

Here's a snip from the html file.

 

<style type="text/css">
.textcell a:active {color: black;}

table.navtable {
border-width: 1px;
border-style: solid;
border-color: #6699CC;
background-color: #020B32;
border-spacing: 11px;
width: 140px;
margin: 0px 0px 0px 20px;
} 

table.navtable td {
border-width: 0px 7px 1px 7px;
border-color: #020B32 #020B32 #8EC3E6 #020B32;
border-style:  solid solid groove solid;
padding: 1px;
}

div#textcell{
color: white;
font-size: 10px;
font-weight: 600;
position: relative;
height: auto;
width: auto;
bottom: 5px;

}

<table class="navtable">

				<tr><td><a href="javascript:MyAjaxRequest('main', '?L=tour.tour&type=test')"><div id="textcell">Start</div></a></td></tr>
</table>
</style>

[deadimp]

I've just tested this on Firefox, so I'm not sure about IE, but it ought to work.

Just create a style element using Javascript and append it to the document body.

Example:

var body=document.body;
var extra=document.createElement("style");
extra.innerHTML="a { color: #000; }"; //There are probably other attributes of a <style> tag, but you can use this
body.appendChild(extra); //This will place it at the end of the document's body

 

Wait... Are you only trying to change the color for that one active link?

[backyard]

Thanks for the help. Actually, I have a series of 8 navigation links I'm trying to change the color of. Heck, I'll do what's ever easiest to show people where they're navigating to like add an image next to the text, move the text up or left a bit. I tried the script you gave me and it didn't seem to work for me. Did I need to just put it in the html file within a script tag or did I need to do something else?

 

Thanks

[deadimp]

How do you want them to change in relation to the user's input? You want one to be selected and the other deselected?

[backyard]

Yes, so...

 

Link1

Link2

Link3

Link4

 

someone clicks on Link4, the AJAX script brings up the page so then they'll be left with

 

Link1

Link2

Link3

Link4 <-- Bold, different color; along with the displayed page from link4

[deadimp]

The easiest way to dynamically highglight a selected link is to store the currently highlighted link, and on a change, deselect the current link and set the current link to that new one. Whenever a link is selected, just add a class name to it so it has those different properties in CSS, and when deselected, remove the class.

The best way to do the whole selection thing is to have the links work on 'onclick', so that they have access to themselves as 'this', whereas using the javascript protocol with href will not give them that access.

Example:

<style>
a { ... }
a.sel {
font-weight: bold;
background: ...;
}
</style>
<a href='#' onclick='select(this,"something")'>Something</a><br>
<a href='#' onclick='select(this,"else")'>Else</a><br>
<a href='#' onclick='select(this,"another")'>And another thing</a><br>
<script language='javascript'>
var sel=null;
function select(obj,page) {
//Set the previously selected one back to normal
if (sel) sel.className=sel.className.replace(" sel",""); //Replace it - I'm not sure how well this'll do in Firefox... Maybe you ought to look into something like jQuery to see how to manipulate classes better
//Set the currently selected one to selected
sel=obj;
sel.className+=" sel";
//And now do some Ajax stuff according to the page variable
}
</script>

 

As for when the main page loads, to select the default page, the best thing to do would be to have PHP, when you're generating the links, have the default one selected (with class='sel'), give it some sort of unique id (like id='link_sel'), and then call your select function like this:

select(document.getElementById("link_sel","page");

 

EDIT: Looking back over some of this, I'm still unsure about the whole class manipulation thing... Be sure to google that.

[backyard]

<a href="javascript:MyAjaxRequest('main', '?L=tour.tour&type=start')" onclick='select(this,"Getting Started")'><div id="textcell">Getting Started</div></a>

 

Above is what I have for the link. Is this correct?

 

Also, do I need to put anything for the a {...} to make it work?

[deadimp]

No, you need to keep the href attribute blank (with a '#' so it uses the hand cursor) so that it doesn't change pages. You put your Ajax request in the section I commented in select(). For example, if your page urls are different enough, just have the second argument of the function contain the url stuff, such as "?L=tour.tour&type=start".

The ... is just there as a placeholder. You put your styling information there.

 

EDIT: I made a syntax error in my previous post. It should be:

select(document.getElementById("link_sel"),"page");

[backyard]

Hi, thanks for the help. I'm a bit confused on what goes where. I have

 

<a href='#' onclick='select("MyAjaxRequest('main', '?L=tour.tour&type=start')","something")'>Something</a>

 

Also, how do you add the special characters is it like php where you change ' to \'.

 

Also, do I need to change anything in here.

 

 if (sel) sel.className=sel.className.replace(" sel","");

[deadimp]

What you need to do is combine the functionality between select() and MyAjaxRequest(). For example, have one link as 'select(this,"main")', where the second argument is used to determine what should be sent to MyAjaxRequest(). If you need more arguments, simply add them.

Remember that the code I gave you was more or less of a template. It's up to you to specialize it. As far as the className thing goes, I really can't say I know. I'll test it out some.

 

EDIT: I looked around a little, and it seems the best way to remove a class name is to pad className with spaces on both sides, and the use replace to take out the class you're looking for.