Weiterleitung je nach Auflösung

DjMG

DjMG

Erfahrenes Mitglied
Guten Morgen

Ich hätte gerne folgendes realisiert, aber da ich leider mit JS unfirm bin,
muss ich mal hier fragen:

Ich hab zwei .css Dateien - 1 für die Auflösung 1024x768 und eine für die con 1280x1024.
Jetzt soll das Script die Bildschirmauflösung des Surfers auslesen,
und dann auf die richtige .css Datei weiterleiten.

Hat jemand eine Lösung ?

Vielen Dank schon mal im Voraus !

Lg
DjMG
 
Hi !

hab mich da mal durchgearbeitet, funktioniert aber leider nicht _ganz_:

es gibt mal die resolution.js =

Code: 
function checkBrowserWidth()

{

var theWidth = getBrowserWidth();

if (theWidth > 800)

{

setStylesheet("1280x1024");



setColumnHeights();

}

else

{

setStylesheet("1024x768");



setColumnHeights("auto");

}



return true;

}

 

 

 

function getBrowserWidth()

{

if (window.innerWidth)

{

return window.innerWidth;

}

else if (document.documentElement && document.documentElement.clientWidth != 0)

{

return document.documentElement.clientWidth;

}

else if (document.body)

{

return document.body.clientWidth;

}



return 0;

}

 

 

 

function setColumnHeights(auto)

{

var theFeature2 = document.getElementById("feature2Inner");

var theFeature3 = document.getElementById("feature3Inner");

var theFeature4 = document.getElementById("feature4Inner");

var theHeight = "auto";

if (!auto)

{

theHeight = parseInt(theFeature2.scrollHeight);

if (theFeature3 && theFeature3.scrollHeight > theHeight)

{

theHeight = parseInt(theFeature3.scrollHeight);

}

if (theFeature4 && theFeature4.scrollHeight > theHeight)

{

theHeight = parseInt(theFeature4.scrollHeight);

}

theHeight += "px";

}

theFeature2.style.height = theHeight;

theFeature3.style.height = theHeight;

theFeature4.style.height = theHeight;



return true;

}

 

 

 

function setStylesheet(styleTitle)

{

var currTag;

if (document.getElementsByTagName)

{

for (var i = 0; (currTag = document.getElementsByTagName("link")[i]); i++)

{

if (currTag.getAttribute("rel").indexOf("style") != -1 && currTag.getAttribute("title"))

{

currTag.disabled = true;

if(currTag.getAttribute("title") == styleTitle)

{

currTag.disabled = false;

}

}

}

}



return true;

}

und dann noch eine init.js =

Code: 
checkBrowserWidth();

window.onresize = checkBrowserWidth;

und den quelltext hab ich so =

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="1024x768.css" title="1024x768" />
<link rel="alternate stylesheet" type="text/css" href="1280x1024.css" title="1280x1024" />
<script type="text/javascript" src="resolution.js"></script>
<script language="javascript" type="text/javascript" src="switch.js"></script>
</head>
<body>
....
<script type="text/javascript" src="init.js"></script>
</body>


also: wenn ich auf 1280x1024 den bildschirm umstell, dann klappts, aber wenn
ich ihn auf normal 1024x768 lasse, dann zeigt er mirs verschoben an. also so
wie in version 1280x1024.


Sieht jemand einen Fehler ?
Kann man was weglassen ?

Vielen vielen Dank für jegliche Hilfe

Lg
DjMG
 
lol

habs mir selbst gelöst - Fehler war:

resolution.js=
Code: 
function checkBrowserWidth()

{

var theWidth = getBrowserWidth();

if (theWidth > 1100)

{

setStylesheet("1280x1024");



setColumnHeights();

}

else

{

setStylesheet("1024x768");



setColumnHeights("auto");

}



return true;

}


vorher war ja 800 - und 1024 ist ja auch größer als 800 und
deswegen hat er für alle beide ein stylesheet geladen.

JUHU es KLAPPT.


Kann man das unten in resolution rauslöschen

Lg
DjMG
 
hab auch noch ne zweite Lösung gefunden *gg*

Code: 
<script language="JavaScript" type="text/javascript">
<!--
if (screen.width <= 800)
 document.write('<link rel="stylesheet" href="-.css" type="text/css">'); 
if (screen.width > 800 && screen.width < 1024)
 document.write('<link rel="stylesheet" href="1024x768.css" type="text/css">');
if (screen.width >= 1024)
 document.write('<link rel="stylesheet" href="1024x768.css" type="text/css">');
 
if (screen.width > 1024)
 document.write('<link rel="stylesheet" href="1280x1024.css" type="text/css">');
 
//-->
</script>

für alle die auch sowas suchen !

Lg
DjMG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück