Java Script Timeouts -- Advanced

[davo666]

Hi, i have an onclick, highlight(change background which switches each time a different element is clicked (same element name)

BUT i would like to implement this on my contacts list

- one problem this list is updated once a second through ajax here is the javascript:

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;
}
};
}();


Is there any way to remenber if there were no clicks and format it the same -- i didnt write this

there is possibility of the actual <div> tag coming with vars from the backend - i wrote the ajax

thanks.

[Trinithis]

Here's a slightly improved version of your code:

var highlightLink = (function() {
	var active = null;
	var color = "#84dfc1";
	if(document.addEventListener) document.attachEvent("onunload", function(e){active=null;});
	return function(el) {
		if(active) active.style.backgroundColor = "";
		el.style.backgroundColor = color;
		active = el;
	};
})();

As for your question, please be more specific. I don't know what you are trying to achieve.

[jscheuer1]

Dude, what's up with your title?

Java Script Timeouts -- Advanced

There is no timeout in your code, and no mention of one in your post.

[davo666]

list is updated once a second through ajax

setInterval timeout...

and, being more specific, when i click a static (non timed ajax element)
it stays highlighted, but when i click an updating element it highlight for the rest of the second then goes back white...

thanks

[jscheuer1]

I see, so it is a vague (as far as any reasonable reader of this thread so far goes) update/interval/timeout from some other portion of your code. And, at that, sans markup. I can give you some general sorts of answers though, ones that should work, if you can incorporate any of them into your setup. If you were to have, say:

<div id="contact_1">Some data/text/other tags, etc.</div>

OK, something like that, if your highlight function does something to the object:

document.getElementById('contact_1')

by dynamically adding some style (basically like):

document.getElementById('contact_1').style.backgroundColor='white';

as the code you did give seems to indicate, and your update function replaces it with a similarly structured element with the same id, most browsers will lose the dynamically added style.

If however, you added another 'layer' to the markup:

<div id="c_1_h"><div id="contact_1">Some data/text/other tags, etc.</div></div>

You could add your style to "c_1_h" and replace "contact_1". Then the style (if it is relatively simple style, as it appears to be) would be maintained. Alternatively (without adding a 'layer' in the markup), you could replace only the child/children of "contact_1", leaving the division tag alone, that would preserve its highlighting.

Another way would be to highlight the element, not by adding style to it, but by adding a class designation (className) that has the highlight styles already available to it in the stylesheet. When replacing the element, you would have to check for this class name in the old element and duplicate it for the replacement element, if found.