Please help with changing colour

[lingo5]

Hi,

I have created amenu with several buttons that chane colour on rollover.

Whay I want to do is to set the colour of the button to the rollover colour oce it has been click...ie. when a user clicks on "home" I want the button to stay red when the home page is displayed.....

I hopr I have explained it properly. Here is the code for my buttons:

 

   
<td width="672" height="35"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="middle" ><a href="index.php" class="menulinks"> INICIO</a></td>
          <td valign="middle"><a href="servicios.php" class="menulinks"> SERVICIOS </a></td>
          <td valign="middle"><a href="clientes.php" class="menulinks"> NOSOTROS </a></td>
          <td valign="middle"><a href="links.php" class="menulinks"> ESTRUCTURA </a></td>
          <td valign="middle"><a href="contactar.php" class="menulinks"> NEWSROOM </a></td>
          <td valign="middle"><a href="novedades.php" class="menulinks2"> SOPORTE </a></td>
        </tr>
      </table></td>

[Zane]

This effect can only be done in Javascript.. and a better way would be to use the Javascript framework jQuery

Then you could make this effect in one line... or two

 

Keep in mind that you'll need to have a CSS class for these clicked buttons.

$("a.menulinks").click(function() {
     $(this).addClass("clicked");
});

[joe92]

and a better one way would be to use the Javascript framework jQuery

 

This is easy without having to use jQuery. Lingo5, if you have the CSS class of menulinks2 set already then you would just need to add the following function to your script (if not, then make a class ready of menulinks2).

 

Function:

function changeclass(change){
change.className = 'menulinks2';
}

 

And alter the html <a> tags used to include an onclick event like so.

 

Html:

<a href="index.php" class="menulinks" onclick="changeclass(this);"> INICIO</a>

 

That should sort it

[Buddski]

Looking at the original code. Each link click will actually change to a new page, effectively making the onclick commands ineffective.

What you will have to do is create an "onload" function the detects the actual page you are on, cross references it to the menu structure and adds a new class (or however you want to do it) to the appropriate A tag.

 

Something like this (this is a jQuery implementation)

$(document).ready(function() {
var u = window.location.pathname;
var page = u.substring(u.lastIndexOf('/') + 1);
$('a.menulinks').each(function() {
	if ($(this).attr('href') == page) {
		$(this).addClass('selected');
		return;
	}
});
});

 

This is totally untested and off the top of my head

 

[lingo5]

Tanks all for your replies.

I am a newbie, so I have decided to try joe92`s solution first.

So...I have added this code to the head section of my page:

 

<script>
function changeclass(change)
{	
change.className = 'menulinkon';
}
</script>

 

I have created the menulinkon class in my CSS styles.

Then I have added this code to my button:

 

<a href="index.php" class="menulinks" onclick="changeclass(this);"> INICIO</a>

 

...it doews something weird on click but the colour stays the same...any ideas?

 

Thanks for your patience

[lingo5]

sorry the post as been moved...any ideas what I'm doing wrong?.

Thanks

[Buddski]

Can you show us the appropriate CSS classes?

Also is the menu the same on all the pages and is it hard-coded into each page?

[lingo5]

Hi,

the menu is the same for every page.

 

This is the CSS class for the off status:

 

.menulinks {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
text-decoration: none;
font-weight: normal;
background-color: #949494;
text-align: center;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #FFF;
height: 35px;
width: 112px;
vertical-align: middle;
line-height: 35px;
display: block;
}

 

this is for the rollover status

 

A.menulinks:hover {
text-decoration: none;
background-color: #007CB1;
height: 35px;
width: 112px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: dotted;
border-bottom-style: none;
border-left-style: none;
color: #FFF;
text-align: center;
vertical-align: middle;
display: block;
border-right-color: #FFF;
}

and this is for the onclick status:

 

.clicked {
text-decoration: none;
background-color: #007CB1;
height: 35px;
width: 112px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: dotted;
border-bottom-style: none;
border-left-style: none;
color: #FFF;
text-align: center;
vertical-align: middle;
display: block;
border-right-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 35px;
}

Thanks

[lingo5]

I have tried evrything but the button only changes colour when clicked, bu it doesn't stay that colour.

Any ideas?

Thanks

[lingo5]

I have finally solved this using PHP.

[Zane]

I have finally solved this using PHP.

 

Why not explain just exactly how you did that?

You have been given plenty of answers of how to do this, with jQuery/Javascript.. mixed with some CSS.

Now how on earth did you fix it using PHP?

 

Everyone gave you a decent solution as well.. and to flat out say

"Even though I ignored your advice, I still managed to fix it using a completely different method"

is pretty ignorant and rude, in my opinion.  Why even start a topic?

[lingo5]

WOW Zane...settle down I am not rude...I'm just busy at work just like evrybody else...

 

This is how I solved it using php:

 

First I check the name of the actual page:

 

<?php 
$checkit = $_SERVER['PHP_SELF']; 
?>

 

Then I do this to print each button

 

<td valign="middle"><?php echo '<a href="index.php"'; 
if(strstr($checkit,"index.php")) echo ' class="clicked"'; 
else echo ' class="menulinks"';
echo '>INICIO</a>'; ?></td>

 

..and it works!!!

[Zane]

Ok, I see what you did now. 

I supposed that's a good approach... it would keep you from setting sessions and/or GET variables... and best of all, no JS.

 

 

 

I'm settled, I guess I shouldn't have used the word rude, as you weren't. 

I was only trying to point out that an OP needs to post his/her solution before leaving.

Mainly because others out there might have the same problem, come to this thread and leave disappointed.

 

Glad you got it solved and working.

[lingo5]

No problem Zane....thanks all for your help !!!