webForumDet fria alternativet

Skärmupplösning.

JavaScriptur Javascript

15 svar · 813 visningar · startad av nilleonline

Medlem sedan sep. 2006119 inlägg
Frågan#1

Jag vill använda olika stilmallar beroende på om användaren har större eller mindre än 1024 i skärmupplösning. Vad jag upfattade det som går det tyvärr inte att göra med asp, så det får göras med javascript. Men då har jag ett problem. Jag hade tänkt använda något script liknande detta:

if (parseInt(navigator.appVersion) >= 3){
	if (navigator.appName == "Netscape"){
		tools=java.awt.Toolkit.getDefaultToolkit();
		screen=tools.getScreenSize();
	}
	w=screen.width;
	if(w == 800){
		document.write("<link rel=stylesheet href=\"res800.css\" type=\"text/css\">");
	} else if(w == 1024){
		document.write("<link rel=stylesheet href=\"res1024.css\" type=\"text/css\">");
	} else {
		document.write("<link rel=stylesheet href=\"resother.css\" type=\"text/css\">");
	}
}

Men problemet med det scriptet är att jag använder xhtml där inte document.write fungerar. Hur löser jag det på någon annat sätt eller har ni tipps på andra bättre scripts?

Medlem sedan dec. 20025 483 inlägg
#2

Document.write fungerar utmärkt med XHTML. Lägg

function getStyleSheetFromResolution()
{
	if (parseInt(navigator.appVersion) >= 3){
		if (navigator.appName == "Netscape"){
			tools=java.awt.Toolkit.getDefaultToolkit();
			screen=tools.getScreenSize();
		}
		w=screen.width;
		if(w == 800){
			document.write("<link rel=stylesheet href=\"res800.css\" type=\"text/css\"/>");
		} else if(w == 1024){
		document.write("<link rel=stylesheet href=\"res1024.css\" type=\"text/css\"/>");
		} else {
			document.write("<link rel=stylesheet href=\"resother.css\" type=\"text/css\"/>");
		}
	}
}

...i en fil med exempelvis namnet scripts.js. Sedan

...
<head>
 <script type="text/javascript" src="scripts.js"></script>
 <script type="text/javascript">
  //<![CDATA[
  getStyleSheetFromResolution();
  //]]>
 </script>
</head>

Huruvida syftet eller metoden är bra är nog flera villiga att diskutera.

Medlem sedan sep. 2006119 inlägg
#3

Det gör det väll inte när man skickar xhtml som man ska. Jag skickar det inte som vanlig html.

Medlem sedan dec. 20025 483 inlägg
#4

Varför skulle inte det fungera?

Är du säker på att du inte skickar det som "vanlig html"?

Medlem sedan sep. 2006119 inlägg
#5

Ingen aning. Är inte så inne på javascript, men jag hade problem med script förut som använde document.write i xhtml. Men jag få helt enkelt testa och återkomma om det inte fungerar.

Medlem sedan juni 20014 421 inlägg
#6

Det är bättre att använda som funktioner som createElement/createElementNS.

Ett annat alternativ är att länka in en php-sida som genererar stilmallen och tar upplösningen som en query-string.

Men det hade varit ännu bättre om du gjorde så att designen kunde anpassa sig efter storleken på sidan direkt, då många liksom jag inte surfar med läsaren maximerad.

Medlem sedan sep. 2006119 inlägg
#7

Peter S skrev:

Document.write fungerar utmärkt med XHTML. Lägg

function getStyleSheetFromResolution()
{
	if (parseInt(navigator.appVersion) >= 3){
		if (navigator.appName == "Netscape"){
			tools=java.awt.Toolkit.getDefaultToolkit();
			screen=tools.getScreenSize();
		}
		w=screen.width;
		if(w == 800){
			document.write("<link rel=stylesheet href=\"res800.css\" type=\"text/css\"/>");
		} else if(w == 1024){
		document.write("<link rel=stylesheet href=\"res1024.css\" type=\"text/css\"/>");
		} else {
			document.write("<link rel=stylesheet href=\"resother.css\" type=\"text/css\"/>");
		}
	}
}

...i en fil med exempelvis namnet scripts.js. Sedan

...
<head>
 <script type="text/javascript" src="scripts.js"></script>
 <script type="text/javascript">
  //<![CDATA[
  getStyleSheetFromResolution();
  //]]>
 </script>
</head>

Huruvida syftet eller metoden är bra är nog flera villiga att diskutera.

Jag får det inte att fungera i vanlig html ens. Fattar inte vad som är fel. Både html,css och javascript filen ligger i samma mapp.

Medlem sedan dec. 20025 483 inlägg
#8

I IE7 fungerar det för mig. I FF, däremot, fick jag göra följande justering:

navigator.appName == "Netscape" && !document.getElementById
Medlem sedan juni 2003771 inlägg
#9

Du kan ju kolla här
Adressen slutar sedan med 800.html, 1024.html eller 1280.html beroende av användarens upplösning.
Man hinner dock aldrig se scriptet då man ju slussas vidare direkt.
Du har det nedan, har använt det till min sida i ett par år nu.

<script language="JavaScript" type="text/javascript">
<!--
if (screen.width>1200)  //Här länkar du till den sida som man ska komma till om skärmupplösningen är större än 1024 pixlar bred.
{window.location="1280.html";}
else if ((screen.width==1024) && (screen.height==768)) //Här länkar du till den sida som man ska komma till om skärmupplösningen är 1024x768.
{window.location="1024.html";}
else if ((screen.width==800) && (screen.height==600)) //Här länkar du till den sida som man ska komma till om skärmupplösningen är 800x600.
{window.location="800.html";}
else if (screen.width<800)
{
	window.location="liten_upplosning.html"; //Här länkar du till den sida som man ska komma till om skärmupplösningen är mindre än 800 pixlar bred.
}
else
	window.location="1280.html";    //Här länkar du till den sida som man ska komma till om skärmupplösningen är okänd.
	
//-->
</script>
Medlem sedan sep. 2006119 inlägg
#10

Yes nu fungerar det! Tack peter! Det fungerade även i xhtml. Synd att de bara går att göra i javascript så inte alla kan ta del av funktionen. Men jag får lägga narrow css:en i en <noscript>.

Medlem sedan dec. 20025 483 inlägg
#11

Kanon! :bire

Glöm inte att markera det svar som löste problemet.

Medlem sedan sep. 2006119 inlägg
#12

bossse skrev:

Du kan ju kolla här
Adressen slutar sedan med 800.html, 1024.html eller 1280.html beroende av användarens upplösning.
Man hinner dock aldrig se scriptet då man ju slussas vidare direkt.
Du har det nedan, har använt det till min sida i ett par år nu.

<script language="JavaScript" type="text/javascript">
<!--
if (screen.width>1200)  //Här länkar du till den sida som man ska komma till om skärmupplösningen är större än 1024 pixlar bred.
{window.location="1280.html";}
else if ((screen.width==1024) && (screen.height==768)) //Här länkar du till den sida som man ska komma till om skärmupplösningen är 1024x768.
{window.location="1024.html";}
else if ((screen.width==800) && (screen.height==600)) //Här länkar du till den sida som man ska komma till om skärmupplösningen är 800x600.
{window.location="800.html";}
else if (screen.width<800)
{
	window.location="liten_upplosning.html"; //Här länkar du till den sida som man ska komma till om skärmupplösningen är mindre än 800 pixlar bred.
}
else
	window.location="1280.html";    //Här länkar du till den sida som man ska komma till om skärmupplösningen är okänd.
	
//-->
</script>

Du borde istället använda dig av min metod då det är grymt mycket bättre att bara byta stilmallarna. Jag skulle aldrig använda sidor med likadant innehåll då det inte gillas av google.

Medlem sedan juni 20014 421 inlägg
#13

Du skulle använda dig av en annan metod nille, det är grymt mycket bättre att låta sidan anpassa sin storlek mha css och inte js.

Medlem sedan sep. 2006119 inlägg
#14

colione skrev:

Du skulle använda dig av en annan metod nille, det är grymt mycket bättre att låta sidan anpassa sin storlek mha css och inte js.

Vad är fördelen med det förutom att folket med javascript inaktiverat förlorar den funktionen. Att göra den i % kommer bli grymt jobbigt med massor av problem, och jag vill inte använda tabeller. Men när display:table fungerar fullt ut så skippar jag javascriptet!

Medlem sedan sep. 2006119 inlägg
#15

Jag komm på att min lösning inte fungerar eftersom <noscript> inte är tillåtet innom head. Om jag bara länkar in css filen på vanligt sätt, vilken css mall prioriteras då? Den i javascriptet eller den vanligt länkade? Om jag inte kommer ihåg fel ska vanligt länkade stilmallar prioriteras framför dem sim är länkade med @import. Så det kanske är ett sätt att länka stilmallen för de som inte har javascript med @import? Men vågar jag lita på att alla läsare gör samma prioritering?

Medlem sedan nov. 2002830 inlägg
#16

Det har att göra med placering.

Det är hela tiden den stilmallen som ligger länkad längst ner som har sista tolkningen av samma element som tidigare deklarerats på.

135 ms totalt · 3 externa anrop · v20260731065814-full.4bcf49fe
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)