Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Javascript och doctype problem

Diver Girl

Startad av Diver Girl,
i Webbutveckling

Rekommendera Poster

Diver Girl

Diver Girl

Postad
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Diver Girl

Diver Girl

Postad
  • Trådskapare
Postad

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.

 

 

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
Diver Girl

Diver Girl

Postad
  • Trådskapare
Postad

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!

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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]

 

Länk till kommentar
Dela på andra webbplatser
Diver Girl

Diver Girl

Postad
  • Trådskapare
Postad

:):):)

 

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 :)

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad
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]

 

Länk till kommentar
Dela på andra webbplatser
  • 9 months later...

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...