Positivt blir negativt

[adji]

Jag har ett litet script som beter sig underligt, enligt mig

 

if (document.getElementById && document.getElementById(id))
{
var el = document.getElementById(id); 
}


curr_hojd = el.offsetHeight;

ny_hojd = (curr_hojd - 5)

 

Låt oss säga att att curr_hojd resulterar i 10, då resulterar ny_hojd i 15, inte 5. Någon som kan förklara varför?

 

[inlägget ändrat 2006-05-15 09:49:51 av daniel@senap]

[Mr Andersson]

Har du verifierat att curr_hojd verkligen innehåller 10, tex med alert(curr_hojd)?

 

 

 

[adji]

Jo jag har testat så att curr_hojd kommer ut så det stämmer.

Problemet ligger i att jag kör detta i en loop (eller en timeout egentligen), och lagret (som det handlar om) växer istället för att krympa.

 

[adji]

Har du verifierat att curr_hojd verkligen innehåller 10, tex med alert(curr_hojd)?

 

Lås oss säga att curr_hojd är undefined, är det då logiskt/korrekt att få ett posetivt värde vid substration?

Det som ter sig underligt är ju i så fall att lagret i sig fortsätter öka i den intervall jag kör,

 

undefined - 5 

 

borde ju i sådant fall att curr_hojd är underfined vara konstant varje gång loopen körs?

 

[HeT]

Hej!

 

Antingen borde du få NaN eller så borde du få -5 om undefined räknas som null... tror jag.

 

Men det är inte så att du har en variabel som är -5 och att du sedan kör curr_hojd - variabel... I så fall blir det ju 15.

 

Håller med om att det verkar konstigt. Kanske blir lättare att felsöka om du lägger upp mer kod...

/Tjo

H

 

[adji]

Här kommer hela funktionen, jag har för vana att kommentera på engelska tyvärr(?) så ni får ha överseende.

 

function doljLager(id,width,height,speed,opacityTar)
{
// fakey speed convert to ensure int value
var speeda = +speed

// fetch layer
//var el = document.getElementById(id);
if (document.getElementById && document.getElementById(id))
{
	var el = document.getElementById(id); 
}

// get current size of layer
h_size1 = el.offsetHeight;
v_size1 = el.offsetWidth;



// get size of screen
if (self.innerWidth)
{
	var frameWidth = self.innerWidth;
	var frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
	var frameWidth = document.documentElement.clientWidth;
	var frameHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
	var frameWidth = document.body.clientWidth;
	var frameHeight = document.body.clientHeight;
}



var widthStepper = Math.round((width/100) *speeda);
var heightStepper = Math.round((height/100) *speeda);



// the loop de loop
if (h_size1 > 50 || v_size1 > 50)
{
	//centers the layer
	if(!navigator.appName.match("Microsoft"))
	{
		var topPos = ((frameHeight/2) - (h_size1/2)) + window.pageYOffset;

	}else{
		if (document.documentElement && document.documentElement.scrollTop)
		{
			//theTop = document.documentElement.scrollTop;
			var topPos = ((frameHeight/2) - (h_size1/2)) + document.documentElement.scrollTop;
		}else{
			//theTop = document.body.scrollTop
			var topPos = ((frameHeight/2) - (h_size1/2)) + document.body.scrollTop;
		}	
	}


	var leftPos = ((frameWidth/2) - (v_size1/2));

	// ensures us that the layer doesnt cover the cats
	if(topPos< 200) { topPos = 210; }

	// and here we place the layer
	el.style.top = topPos + "px";
	el.style.left = leftPos + "px";

	// här blir det knas!

	if(h_size1 > height)
	{
		// updates the height of the layer
		el.style.height = (h_size1-5)+"px";
	}
	if(v_size1 > width)
	{
		// updates the width of the layer
		el.style.width = (v_size1-5)+"px";
	}


	//dont animate opacity in Explorer, just set it
	if(!navigator.appName.match("Microsoft"))
	{
		if(el.style.opacity > 0)
		{
			var opacity = ((el.style.opacity*10) - 1)/10
			el.style.opacity=opacity
		}
	}

	// defines a timeout to get that sweet animated effect
	w = setTimeout("doljLager('" + id + "','" + width + "','" + height + "', '" + speed +"','" + opacityTar + "')", 1);

}else{
	// clear the timeout when target size is set
	clearTimeout(w)
}
}

 

Saken är den att jag från början gjorde koden för att expandera lager, sedan när jag bara tänka "vända på den" för att minimera lagren så ville det sig inte och lagret bara växer med 5px i taget istället.

 

[HeT]

Kan inte se några direkt fel vid en första hastig titt. Borde ju inte kunna räkna fel när det ser ut så där tycker jag. Men jag är inte riktigt med var alla hakar börjar och slutar nu. Måste jobba lite men försöker kolla noggrannare senare... ikväll i värsta fall...

/Tjo

H

 

[adji]

Tack HeT! Uppskattas verkligen

 

[HeT]

Hej!

 

Nu har jag testat din funktion.... och den beter sig nog ungefär som den ska för mig... tror jag...

Provade det hela genom att ha en div med height: 200px och width: 200px och bad den minska det hela till 40x40 px genom att kalla på funktionen via en knapp. Och min div minskar snällt i storlek. Det var väl det som var tänkt att hända. Däremot så var det inte så kul att ha en alert med, speciellt inte som jag hade blablabla som text i diven för då kommer aldrig width minska tillräckligt mycket i IE så att clearTimeouten går.. Men annars tycker jag det funkade.

 

Varför säger if-en att jag måste minska till minst 50x50 innan clearTimeout? Åkte dit på den första gången när jag bara minskade height till 100. Kommer ju liksom inte ur det då... Vore bättre om den kände av värdena jag vill sluta på.

 

Men som sagt annars rullade det... Har jag fattat allt fel?

/Tjo

H

 

[inlägget ändrat 2006-05-15 19:28:06 av HeT]

[adji]

Varför säger if-en att jag måste minska till minst 50x50 innan clearTimeout? Åkte dit på den första gången när jag bara minskade height till 100. Kommer ju liksom inte ur det då... Vore bättre om den kände av värdena jag vill sluta på.

 

Oj det var smuts från lite försök till debug. Har aldrig tänkt på att innehållet kan ställa till det, ska testa vidare. Tack för hjälpen.

 

[adji]

Jag får det fortfarande inte att funka,

lagret bara växer när jag kallar på funktionen, jag har snart inget hår kvar på huvudet...

 

[HeT]

Men hur sjutton gör du då???

 

Jag använde din javascriptfunktion och lade till följande på en sida och tutade...

 

<input type="button" onclick="doljLager('test' , 40, 40, 500, null);">

<div id="test" style="background-color: yellow; width: 200px; height: 200px;"> BLA BLA BLA BAL</div>

 

Om jag dessutom absolutpositionerar diven så hamnar den snällt och fint centrerad på sidan.

Vad gör jag som inte du gör?

/H

 

 

[Micke_skane]

Jag testade även det och det fungerar fint både i IE och FF.

 

Vad gör jag som inte du gör?

Pratar fint med din dator så ni är vänner

 

jag har snart inget hår kvar på huvudet...

Har du testat enbart med denna funktionen på en sida?

Alltså inget annat som "stör".

 

[inlägget ändrat 2006-05-16 11:13:25 av Micke_skane]

[HeT]

Har du testat enbart med denna funktionen på en sida?

Ja naturligtvis... PROVA!

 

Pratar fint med din dator så ni är vänner

Hmmm... Vid speciellt högtidliga tillfällen brukar jag nog ösa rätt mycket grova uttryck över den... trots att man vet att den egentligen bara gör som man säger åt den och att det egentligen alltid är ens eget fel... Fast det är klart ganska ofta är det ju Microsofts fel också...

Men jag putsar på den ibland också... och det har hänt att jag matat den med kaffe... fast inte den här... det var den gamla...

 

 

/Tjo

H

 

[Micke_skane]

Ja naturligtvis... PROVA!

Att du hade gjort det var rätt klart

Men frågan var till han som snart inte hade nått hår på huvudet.

 

trots att man vet att den egentligen bara gör som man säger åt den och att det egentligen alltid är ens eget fel

Ja, det är väl bara att inse att så är det

 

 

[HeT]

Jo men jag menade bara att du har antagligen har rätt... som så många gånger förut. Att det antagligen är nåt annat som stör ut det för den tunnhårige... Kanske jag också borde ha kunnat tänka ut...

/H

 

[Micke_skane]

Det är en riktigt klassiker att skriva saker till varandra kan uppfattas helt olika. Man läser samma sak men uppfattar det helt olika.

 

Det är lugnt

 

Kanske jag också borde ha kunnat tänka ut

Även Ingmar Stenmark ramlade...

 

[adji]

Jag använde din javascriptfunktion och lade till följande på en sida och tutade...

 

<input type="button" onclick="doljLager('test' , 40, 40, 500, null);">

<div id="test" style="background-color: yellow; width: 200px; height: 200px;"> BLA BLA BLA BAL</div>

 

Om jag dessutom absolutpositionerar diven så hamnar den snällt och fint centrerad på sidan.

Vad gör jag som inte du gör?

 

Nu testade jag att plocka loss endast detta på en egen sida, då funkar det. Nu blir man ju ännu mer fundersam...

 

[Micke_skane]

Nu blir man ju ännu mer fundersam...

Varför då

Nu vet du ju att den funktionen fungerar så nu är det bara att stoppa in det andra materialet igen, bit för bit, och se när det blir fel.

 

Gammal hederlig felsökning

 

[adji]

OK nu har jag "löst" det.

 

Lägger jag padding på lagret i med css så skiter sig alltihopa och den börjar expandera. Så _logiskt_ (ehum ironi) var det.

 

Kan ju förstå det bitvis eftersom offsetHeight mäter den egentliga höjden, inklusive padding, borders etc.

 

Men att den växer tycker jag ändå är knas.

 

[HeT]

Hej!

Nej, det är väl helt logiskt, tror jag.

Med offsetHeight får du, som du säger, ut den totala höjden med padding och allt. Om du då har en padding: 5px och i din funktion sätter om style.height = offsetHeight -5 så blir ju det style.height + style.paddingTop + style.paddingBottom - 5 , vilket betyder att du ökar height med 5...

J-ligt dåligt förklarat kanske men det är nog så det blir tänker jag...

 

[EDIT] Om du vill få det att funka med padding måste du med andra ord räkna bort paddingen också height = offsetHeight - paddingTop-paddingBottom -minskningsvärde

 

Och borders då naturligtvis... eller få fram höjden på något annat sätt...

/H

[inlägget ändrat 2006-05-17 10:50:55 av HeT]