Just nu i M3-nätverket
Jump to content

Javascript och doctype problem


Diver Girl

Recommended Posts

Hej

Jag har ett javascript som ska visa och dölja divar.

Scriptet fungerar alldelse utmärkt så det är inte där problemet ligger, men jag upptäcker att det fungerar olika i IE6 och FF.

 

Och har efter många och långa tester kommit underfund med att det är doctype som ställer till det för mig.

 

Doctype som jag använder:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 

Och så raderna jag vill ska fungera:

<ul>
<li><a href="javascript:show1('Mini');" onclick="hideAll();show1('Mini');">Mini</a></li>
<li><a href="javascript:show1('Maxi');" onclick="hideAll();show1('Maxi');">Maxi</a></li>  

 </ul><br /></div>
<div id="Mini" style='display:none;'>Visar Mini-div
</div>
<div id="Maxi" style='display:none;'>
Visar Maxi-div</div>

 

Dessa rader fungerar alltså i FF men inte i IE.

Om jag i Mini-diven ändrar till display:block, fungerar det fint i båda browsers. Men jag vill att båda divarna ska vara gömda när sidan laddas.

 

Om jag använder doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

fungerar det både i FF och IE.

Vill dock inte ändra till denna doctype eftersom det tar bort vissa finesser jag har på min sida.

 

Kan någon förklara vad skillnaden är och hur jag ska komma runt problemet?

 

Tack på förhand!

 

 

 

 

 

[inlägget ändrat 2007-01-19 00:00:49 av Diver Girl]

[inlägget ändrat 2007-01-19 00:03:48 av Diver Girl]

Link to comment
Share on other sites

Hej och tack för snabbt svar!

 

Nej, den doctype förändrade ingenting.

Resultatet är precis detsamma, fungerar fint i FF men inte i IE.

 

 

 

Link to comment
Share on other sites

Kan du posta koden för dina javscriptfunktioner, det är väldigt svårt att gissa sig till hur du skrivit dessa.

 

Link to comment
Share on other sites

Visst kan jag det, men eftersom jag vet att scriptet fungerar så tyckte jag inledningsvis inte det var nödvändigt att ta med det.

Det här scriptet har jag hittat på ett antal ställen och använder i min test:

 

function reDo(){ window.location.reload() }
window.onresize = reDo;


//Define global variables
var what = null;
var newbrowser = true;
var check = false;

function init(){
if (document.layers) {
	layerRef="document.layers";
	styleSwitch="";
	visibleVar="block";
	screenSize = window.innerWidth;
	what ="ns4";
}else if(document.all){
	layerRef="document.all";
	styleSwitch=".style";
	visibleVar="show";
	screenSize = document.body.clientWidth + 18;
	what ="ie";
}else if(document.getElementById){
	layerRef="document.getElementByID";
	styleSwitch=".style";
	visibleVar="block";
	what="moz";
}else{
	what="none";
	newbrowser = false;
}

check = true;
}

// Turns the layers on and off
function show1(layerName){
if(check){
	if (what =="none"){
	return;
}
else if (what == "moz"){
	document.getElementById(layerName).style.display="block";
}
else{
	eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.display="block"');
}
}
else {// alert ("Please wait for the page to finish loading.");
return;
}
}

function hideLayer(layerName){
if(check){
	if (what =="none"){
		return;
		}
		else if (what == "moz"){
			document.getElementById(layerName).style.display="none";
		}
		else{
			eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.display="none"');
		}
			}
			else {// alert ("Please wait for the page to finish loading.");
			return;
			}
}


function hideAll(){
       hideLayer('Mini');
	hideLayer('Maxi');

}

 

Som sagt, scriptet fungerar alldeles utmärkt i både IE och FF om jag väljer en annan doctype än den jag har valt.

 

Tack på förhand!

 

Link to comment
Share on other sites

Ok, jag ser fel i din javascript redan nu men jag måste iväg till kontoret nu så jag återkommer om nån timme.

 

Link to comment
Share on other sites

Så, nu är jag tillbaka.

Till att börja med hade du behandlat alla IE-läsare som om de var IE4 och använde därmed en lastgammal objektmodell för dessa. Alla nya läsare hanterar samma metod för att komma åt element, så jag tog bort hela din browsercheck, den behövs inte i det här fallet. Dessutom tog jag bort HideLayer eftersom allt kan göras i en funktion, som jag nu döpt till ToggleDisplay, som tar en extra parameter som avgör om lagret skall visas eller döljas.

Hela init-funktionen tog jag bort och nedanstående gör precis det du vill, och fungerar förstås med xhtml-doctype.

 

[log]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function ToggleDisplay(layerName,blHide){
o=document.getElementById(layerName);
if (o) document.getElementById(layerName).style.display=(blHide)?"none":"block";
}

function hideAll(){
ToggleDisplay('Mini',true);
ToggleDisplay('Maxi',true);
}
//-->
</SCRIPT></head>

<body>

<ul>
<li style="cursor:pointer;" onclick="hideAll();ToggleDisplay('Mini',false);">Mini</li>
<li style="cursor:pointer;" onclick="hideAll();ToggleDisplay('Maxi',false);">Maxi</li>
</ul><br />
<div id="Mini" style='display:none;'>Visar Mini-div</div>
<div id="Maxi" style='display:none;'>Visar Maxi-div</div>
</body>
</html>

[/log]

 

Link to comment
Share on other sites

:):):)

 

Ha, helt fantastiskt!!

Givetvis fungerar det alldeles perfekt!

 

Asch, så är det när man hittar script för att gå den "snabba" vägen.

 

Tack snälla för dina snabba svar och ditt engagemang!

Och jag kan lättad gå vidare i mitt projekt!

 

En liten följdfråga:

Kan man på nåt sätt efter att ha tagit fram en div, få den att gömmas igen genom att klicka på samma länk?

Inget viktigt, men känns som en bra funktion.

 

Tack än en gång!

En glad Diver Girl :)

 

Link to comment
Share on other sites

Kan man på nåt sätt efter att ha tagit fram en div, få den att gömmas igen genom att klicka på samma länk?

Jo, fast följande exempel förutsätt att ditt upplägg är som ditt exempel. Annars kan det behöva anpassas:

[log]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// Turns the layers on and off
var oToHide;
function ToggleDisplay(layerName,HideNotToggle){
o=document.getElementById(layerName);
if (o) {
	sState=o.style.display;
	if (HideNotToggle) 
		o.style.display='none';
	else {
		if (oToHide) oToHide.style.display='none';
		o.style.display=(sState=='block')?'none':'block';
		oToHide=(sState=='none')?o:null;
	}
}
}
//-->
</SCRIPT></head>

<body>

<ul>
<li style="cursor:pointer;" onclick="ToggleDisplay('Mini',false);">Mini</li>
<li style="cursor:pointer;" onclick="ToggleDisplay('Maxi',false);">Maxi</li>
</ul><br />
<div id="Mini" style='display:none;'>Visar Mini-div</div>
<div id="Maxi" style='display:none;'>Visar Maxi-div</div>
</body>
</html>

[/log]

 

Link to comment
Share on other sites

  • 9 months later...

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...