webForumDet fria alternativet

Javascript som slår ut varandra

6 svar · 377 visningar · startad av oskob

oskobMedlem sedan maj 20021 513 inlägg
#1

Hej och hå!
Sitter och jobbar med en sida och har ett litet javascript för att göra en snittsig liten animation med menyn, men såfort jag slänger in en png-fix för internet explorer så slutar den att fungera.
Funkar dock i FF både med och utan pngfixen.

menu.js

firstTime = true;
friction = 6;

function fixlinks() {

document.getElementById('menulink1').href = "#";
document.getElementById('menulink2').href = "#";
document.getElementById('menulink3').href = "#";
//alert(document.getElementById('menuitem1').anchor);
}

function highlight(target, action) {

	if ( target == 'menuitem1' ) {
		pic = 'portfolio';
	}else if ( target == 'menuitem2' ) {
		pic = 'about';
	}else if ( target == 'menuitem3' ) {
		pic = 'exit';
	}

	if ( action == 1 ) {
		document.getElementById(target).src = "/img/" + pic + "Hi.png";
	}else if ( action == 2 ) {
		document.getElementById(target).src = "/img/" + pic + ".png";
	}
	
}

function selectItem(selP) {
	
	if ( firstTime == true ) {
		if ( selected == '' ) {
			aniMenu(selP, -25, 0, "yes");
			firstTime = false;
		}else if( selected != selP ) {
			aniMenu(selP, -25, 0, "yes");
			aniMenu(selected, 0, -25, "no");
			firstTime = false;
		}
		
	}

}

function aniMenu(p, prevPos, finalPos, redirect) {

		nextPos = (finalPos - prevPos) / friction;
		nextPos += prevPos;
		document.getElementById(p).style.top = Math.round(nextPos) + "px";
		
		prevPos = nextPos;
	
		
		if ( parseInt(document.getElementById(p).style.top) != finalPos ) {
			window.setTimeout("aniMenu('"+p+"', "+prevPos+", "+ finalPos+", '" + redirect + "')", 1);
		}else if (redirect == "yes") {
			selected = p;
			window.setTimeout("setUrl('" + p + "')", 100);
		}
	
}

function setUrl(p) {
	
	if ( p == 'menuitem1' ) {
		window.location  = "/portfolio/";
	}else if ( p == 'menuitem2' ) {
		window.location = "/about/";
	}else if ( p == 'menuitem3' ) {
		window.location = "/exit/";
	}
}

pngfix.js


// Correctly handle PNG transparency in Win IE 5.5 or higher.
// [url]http://homepage.ntlworld.com/bobosola[/url]. Updated 02-March-2004

function correctPNG() 
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }
window.attachEvent("onload", correctPNG);

Och jag laddar in dem såhär:

\<script type="text/javascript" src="/js/menu.js"\>\</script\>
\<script type="text/javascript" src="/js/pngfix.js"\>\</script\>

Båda scripten fungerar ensamma men såfort jag lägger in båda samtidigt så vill inte explorer längre.

Kan någon förstå varför? Är det något som krockar?

dapperMedlem sedan sep. 200568 inlägg
#2

Problemet med pngfix.js, är att efter att den har körts, så finns inget bildobjekt, och inget src. Den ersätts helt med en span som kör Microsofts DirectX Image Transform, vilket genererar en bild med det src som den hämtar ut från din image.

Det går att fixa, men jag är inte säker på hur snabbt det skulle köra. (Inte testat DX i internet explorer, så kan inte säga man veta hur snabb den är)

dapperMedlem sedan sep. 200568 inlägg
#3

Lekt lite med den, inte den finaste lösningen, men det fungerar utan problem.. Och borde vara rätt lätt att förstå. Får ursäkta att kommentarerna är på engelska.. Lite bättre på det än svenska. :)

Hope it sheds some light.

nitro2k01Medlem sedan aug. 20037 630 inlägg
#4

Den png-fixare du har är otroligt ful. Bland annat för att den ändrar koden även för andra webbläsare än IE, (Tex firefox och Opera) som ju faktiskt har stöd för PNG med transparens.
Jag rekommenderar: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html som även borde funka med dit andra script.

oskobMedlem sedan maj 20021 513 inlägg
#5

Jag läser ju givetvis bara in raden om användaren kör explorer med <!--[if IE5.5 eller hur det där. Det är inte med i koden för jag testade om det skulle försöra för FF också :)

Men nu vet jag vad problemet är!

oskobMedlem sedan maj 20021 513 inlägg
#6

Testar ditt script nu dapper, men det är en rad som jag inte förstår:
element.src = "empty.gif";
varför kan man inte bara setta den till "" ?

R: Och jag fick problem med mouse over. När den byter bilden så blir det ju en vanlig PNG igen och därmed försvinner transparansen, så jag la in så den körde funktionen igen efter varje bildbyte men nu blinkar alla bilder till i blått (så som de är utan pngfixen) såfort jag för musen över någon knapp.
Tråkigt att behöva falla tillbaks på gamla sunkiga giffar bara för att explorer har sunkat till det.

R2:

Nej men fasen nu fungerar det!
När jag lagade länken till empty.gif så slutade den blinka sådär vid mouseover.
Tack dapper för hjälpen!

oskobMedlem sedan maj 20021 513 inlägg
#7

Och en till liten sak.
Hur gör jag om jag vill få bakgrunder i div:ar att få transparans? Nu söker den ju bara igenom img-elementen.

Genererad på 376 ms · cache AV · v20260730165559-full.f96bc7eb