onclick div bgcolor change

[shyne]

Hi

I just want to know how can I achieve this.

I want to change a div's bgcolor when it is clicked. Its a dynamic link that changes a iframe's content but the link page remains the same, but just for the end use to know which section they are viewing it would be nice to show a background color on the text link thats has been clicked.

Thanks alot.

[Veronica]

If you want the background color of the link to change color after it's clicked, this should work.

<a href="#" onClick="style.backgroundColor='#84DFC1';">link to change color</a>

If the link is within a div, and you want the entire div tochange color, this will work:

<div id="colorme" onClick="style.backgroundColor='#84DFC1';"><a href="#">link</a></div>

[shyne]

This works BUT when I click on another link then both links stay in same bgcolor, I mean if I have more than one link then when you click on any other link it should change the previously clicked div link's bgcolor back to normal.

any help????

thanks

[mwinter]

<a href="#" onClick="style.backgroundColor='#84DFC1';">link to change color</a>

One should not count on the style object, or indeed any element properties being accessible unqualified from event listeners. Always use the this operator.

The only identifiers one should expect to find is event (where the W3C event model is implemented) and any global.

This works BUT when I click on another link then both links stay in same bgcolor, I mean if I have more than one link then when you click on any other link it should change the previously clicked div link's bgcolor back to normal.

any help????

Keep a record of what element (if any) is active:

var highlightLink = function () {
        var active = null, colour = '#84DFC1';
        if (this.attachEvent) this.attachEvent('onunload', function () {
            active = null;
        });
        return function (element) {
            if ((active != element) && element.style) {
                if (active) active.style.backgroundColor = '';
                element.style.backgroundColor = colour;
                active = element;
            }
        };
    }();

Untested. Change colour variable value to the colour of your choice.

In place of the assignment suggested by Veronica, call the highlightLink function defined above. So, rather than

onclick="style.backgroundColor = '#84DFC1';"

use:

onclick="highlightLink(this);"

If you wanted to use different colours for different links, that's also possible, though a slight modification would be necessary.

Hope that helps

[shyne]

Thankz alot homie. works like a charm BUT I need another help from you or anyone that might know.

I have this function which puts a "now playing" graphic next to song title that is playing. I want to somehow incorporate the hightlight function() above in the script so that together with the "now playing" graphic it changes the bgcolor of the entire div row too. Now you see the way this function works is that you select a bunch of songs and then it gets saved in a playlist and it plays through your selection automatically without users clicking on each song. So as soon as one song is finished it moves the "now playing" graphic to next song (row), so same way I want bgcolor to change when song is changed to the next one. hope thats makes sense.

here is the fucntion that switches the "now playing" for current song playing and "null" for all other songs not being played.

<script language="JavaScript">
<!--
	if (top==self)
		location.href = "<?php echo"$baseaudios";?>/";

	var winTitles = new Array(<? echo "$string";?>);

	var highlightLink = function () {
		var active = null, colour = '#000';
		if (this.attachEvent) this.attachEvent('onunload', function () {
			active = null;
		});
		return function (element) {
			if ((active != element) && element.style) {
				if (active) active.style.backgroundColor = '';
				element.style.backgroundColor = colour;
				active = element;
			}
		};
	}();

	var songTitle = "";
	var reelGif  = "<?php echo"$baseaudios";?>/player/skins/images/nowplaying.gif";
	var clearGif = "<?php echo"$baseaudios";?>/player/skins/images/x.gif";
	var currPos = top.ListPosition - Math.floor(top.ListPosition/3);
	if (currPos==0)
		currPos = 1;
	var times = 1;
	timerID = setInterval("showBottomAd()",15000);

	function moveReel(pos){
		if (pos<1) pos = 1;
		if (currPos==0) currPos = 1;
		prevReel = eval("document.reel"+currPos);
		currReel = eval("document.reel"+pos);
		if (prevReel)
			prevReel.src = clearGif;
		if (currReel)
			currReel.src = reelGif;
		eval("document.poser"+ currPos +".scrollIntoView();");
		currPos = pos;
		songTitle = '"' + winTitles[pos-1][0] + '" - ' + winTitles[pos-1][1] + ' ---   ';
		clearInterval(timerID);
		timerID = setInterval("getCurrent()",10000);
	}

	function getCurrent() {
		moveReel(currPos);
	}

	function showBottomAd() {
//		document.admarker.scrollIntoView();
	}

// -->
</script>

<body onLoad="getCurrent();return false">

	$show = "
		<div class='musictr".($i & 1)."' style=\"width:387px;\" onclick=\"highlightLink(this);\">
		<div style=\"width:26px; float:left;\">&nbsp;$i.</div>
		<div style=\"float:left;\"><a class=\"nav\" href=\"#\" onClick=\"top.frames['controls'].setClipTo($i);return false\">".truncat ($sng[title], 30, '...')."</a><img name=\"poser$i\" src=\"$baseaudios/player/skins/images/null.gif\" width=\"1\" height=\"1\" alt=\"\"><img name=\"reel$i\" src=\"$baseaudios/player/skins/images/null.gif\" height=\"9\" alt=\"\"></div>
		<div style=\"float:right;\"><a href=\"$baseaudios/player/browser/showalbums.php?genre_id=$albums[genre]&album_id=$albums[album_id]\" target=\"music_browser\">$alb[album_name]</a>&nbsp;</div>
		</div>";

now you will notice inside the function I have the HIGHLIGHT function included but i don't know what else to do after that.

Thanks alot

[shyne]

anyone~~~!!!!! pleasee

[mwinter]

I have this function which puts a "now playing" graphic next to song title that is playing. I want to somehow incorporate the hightlight function() above in the script so that together with the "now playing" graphic it changes the bgcolor of the entire div row too.

Just call the function when the row is changed. Pass a reference to the element you want highlighted: if it's a div element, pass it as the argument instead of the this operator.

<script language="JavaScript">
<!--

The language attribute has long been deprecated in favour of the type attribute. Using markup comments to "hide" scripts (and embedded style sheets) is equally out-of-date.

<script type="text/javascript">

if (top==self)
    location.href = "<?php echo"$baseaudios";?>/";

There should be no need to place a variable in double quotes like that if all you are going to do is send it to the output stream: it will be converted to a string automatically, anyway.

var winTitles = new Array(<? echo "$string";?>);

The same comment as a above applies here, too (and probably elsewhere).

It's a good habit to always use the long form of PHP code marker: <?php

var songTitle = "";

In scripts, there's no need to initialise variables if there's no real value to give them. Moreover, this variable doesn't seem to be used outside of the moveReel function, in which case it may be better off as a local variable.

function moveReel(pos){
    if (pos<1) pos = 1;
    if (currPos==0) currPos = 1;
    prevReel = eval("document.reel"+currPos);
    currReel = eval("document.reel"+pos);

There isn't any need to use the eval function for something trivial like this: use bracket notation to construct the property name, instead. In addition, don't access images as properties of the document object, but use the images collection:

prevReel = document.images['reel' + currPos];
currReel = document.images['reel' + pos];

eval("document.poser"+ currPos +".scrollIntoView();");

Here, again:

document.images['poser' + currPos].scrollIntoView();

However, you should feature-test for that method before calling it as I doubt it's universally supported:

var poserImage = document.images['poser' + currPos];
if (poserImage && poserImage.scrollIntoView) poserImage.scrollIntoView();

I don't know what the image is supposed to represent, so you may be able to think of a better variable name than I can.

<body onLoad="getCurrent();return false">

Remove the return statement. It does nothing, there.

$show = "
    <div class='musictr".($i & 1)."' style=\"width:387px;\" onclick=\"highlightLink(this);\">
    <div style=\"width:26px; float:left;\">&nbsp;$i.</div>
    <div style=\"float:left;\"><a class=\"nav\" href=\"#\" onClick=\"top.frames['controls'].setClipTo($i);return false\">".truncat ($sng[title], 30, '...')."</a><img name=\"poser$i\" src=\"$baseaudios/player/skins/images/null.gif\" width=\"1\" height=\"1\" alt=\"\"><img name=\"reel$i\" src=\"$baseaudios/player/skins/images/null.gif\" height=\"9\" alt=\"\"></div>
    <div style=\"float:right;\"><a href=\"$baseaudios/player/browser/showalbums.php?genre_id=$albums[genre]&album_id=$albums[album_id]\" target=\"music_browser\">$alb[album_name]</a>&nbsp;</div>
    </div>"; 

This looks suspiciously like an attempt at a table layout using div elements to me. If the data is tabular - each row and column has contents that are somehow related - use a table!

[shyne]

Hi Mike
Thanks for the corrections there. i did make the corrections and they work fine.

But I am still waiting for someone to help me as to how can I achieve the changing the row color when song changes to next song. This is what exactly happens:
Suppose I have three songs in my playlist.

1. Song1 (now playing)
2. Song 2
3. Song 3

now as soon as Song1 ends it automatically goes to next song and starts playing it and the now playing graphic also shifts to next song like this:

1. Song1
2. Song 2 (now playing)
3. Song 3

Now what I want is to combine the now playing effect with a bgcolor change, so that when the songs changes to next song whether clicked by user or automatically it changes the bgcolor to #000. Hope that simplyfies it a bit. I want the same effect as now playing applied to the entire main div to change bgcolor.
There is definitly something else thats need to be done other than just including the highlight function in the main div, since that only works when you click on a song but doesn't work when the song automatically changes to next song. And thats what I am looking for

Thanks for any help.

[mwinter]

But I am still waiting for someone to help me as to how can I achieve the changing the row color when song changes to next song.

I told you what to do in the first paragraph of my previous response: call the highlightLink function (which is now probably an inappropriate name), passing a reference to the element you want highlighted.

Presumably currReel is the image that represents the new song, therefore you would pass a reference to it or, more likely, a parent or ancestor. These can be obtained using the parentNode property of the image. One could use a loop to find the right element, but I don't know how the document is structured - you've never posted a link to a demonstration thus far.

[jenz]

I was trying to take the code from above (quoted below, before my editing) and modify it so that one of the associated divs would have the class applied by default.

var highlightLink = function () {
var active = null, colour = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = colour;
active = element;
}
};
}();

I tried applying the style to the div I want active (id="subview1") and making the style set in the javascript as !important (via a few methods of attempt). I may have done this incorrectly, or there may be a more proper way of accomplishing this, however my result was the desired id always being selected whether the others are active or not.

Any help with this is most appreciated ... and thank you for reading.