Blinka bakgrund

tjabba

Jag hittade det här scriptet:

<style type="text/css">
.blinka { color: blue; }
.blinkb { color: red; }
</style>
<script type="text/javascript">
blinktimes=7;
current=0;
window.onload=function(){
	blinkit();
}
function blinkit(){
	current++;
	document.getElementById('blinkers').className=new Array('blinkb','blinka')[current%2];
	if(current<blinktimes){
		setTimeout("blinkit()",200);
	}
}
</script>

...

<span id="blinkers" class="blinka">Linus Lerge</span>

Så den är ju okej. Men den använder sig ändå av globala variabler och den klarar inte av att få ett id tilldelat sig och sedan blinka det.

Här har vi min lilla funktion. Jag tänkte att när man dubbelklickar för att få upp den så ska den blinka till - bakgrundsfärgen alltså. Markerat i svart det intressanta.

function wireAdminBox() {
	var adminBox = document.getElementById("adminLogin");
	adminBox.temp = adminBox.innerHTML;
	adminBox.innerHTML = '';
	adminBox.addEventListener('dblclick', function() {
		if (this.className.indexOf("hidden") != -1) {
			this.className = '';
			this.innerHTML = this.temp;
			[b]var blinker = new blinkerClass();
			blinker.Pause(200);
			blinker.Id(this.id);
			blinker.Time(10);
			blinker.Blink();[/b]
		} else {
			this.className = 'hidden';
			this.innerHTML = '';
		}
			
	}, false);
}

sen har vi blinkaren - min funktionsklass om man kan säga det (den som jag skriver var blinker = new blinkerClass(); för att referera till):

function blinkerClass()
{
	var blinks = 6; //using keyword var within a function / class makes it private
	var pauseTime = 400; //in ms, int
	var current = 0; //int
	var id; //string
	
	this.Time = SetTime;
	this.Pause = SetPause;
	this.Id = SetId;
	
	this.Blink = BlinkElement;
	
	//set
	function SetPause(p)
	{
		pauseTime = p;
		return;
	}
	function SetTime(t)
	{
		pauseTime = t;
		return;
	}
	function SetId(Id)
	{
		id = Id;
		return;
	}
	
	function BlinkElement()
	{
		document.getElementById(id).style.backgroundColor = new Array('black', 'white')[current%2];
		if (current < blinks)
		{
				setTimeout("[b]this.BlinkElement();[/b]", pauseTime);
		}
		current++;
		return;
	}
}

men då funkar det självklart inte. Den klagar följande:
Error: this.BlinkElement is not a function
på setTimeout() då alltså. Så jag undrar om det finns något bra sätt att göra detta på? Någon som kan hjälpa mig?

echoSwe skrev:

Så jag undrar om det finns något bra sätt att göra detta på?

Jag e själv dålig på javascript men det låter som om att du skulle kunna lösa det hela med en animerad gif tycker jag!
Då skulle du kunna få samma effekt som cdon.com använder sig av när man lägger i en vara i deras kundvagn, men det kanske inte är vad du söker?! :)

Anledningen till att det inte fungerar, är sannolikt att du tappar referensen till objektet i.o.m. setTimeout(). En lösning kan vara att spara undan den globalt:

blinker = new blinkerClass(); // bort med [i]var[/i]

och sedan:

setTimeout("blinker.Blink()"...

Tack för svaret! Nu funkar det!

Jag har nu även gjort en blinkning som växlar värde i class attributet till min div samt en funktion som gradvis ökar opaciteten - en fadein funktion

Men finns det verkligen inget objektorienterat sätt att göra det på?

I firefox funkar det jättebra.
I opera får jag följande felmeddelande:

Event thread: dblclick
Error:
name: ReferenceError
message: Statement on line 38: Reference to undefined variable: blinkerClass
Backtrace:
  Line 38 of linked script [url]http://localhost/haf.se/wwwpub/javascript/common.js[/url]
    blinker = new blinkerClass();
  At unknown location
    [statement source code not available]