javascript per selezionare css in base a risoluzione schermo

joey.santiago

javascript per selezionare css in base a risoluzione schermo

ciao a tutti,

vorrei usare per un sito che sto facendo un semplice codice javascript per selezionare il css più adatto in base alla dimensione dello schermo dell'utente.

con Konqueror e firefox funziona tutto, ma con explorer non vedo assolutamente nulla, se utilizzo il codice javascript! Se invece commento il codice, vedo la pagina come mi aspetto... in pratica carica il foglio di stile in base alla dimensione dello schermo, scoperta tramite javascript, ma a quanto pare explorer non accetta il foglio di stile, o no so che altro combini!:x
qualcuno sa dirmi perché mai si comporti così?
questa è la pagina php dove chiamo il javascript:

<?php
include ('php/doctype.php');
include("php/DBVars.php");
?>
<title>titolo pagina</title>
<link rel="stylesheet" type="text/css" href="stile.php" />
<!-- <script language="javascript" src="choose_css.js"/> -->
    <noscript>
	<link rel="stylesheet" type="text/css" href="1024.php" />
    </noscript>
</head>

questo è il codice javascript (choose_css.js):

	if (screen.width <= 1920)  {
  	document.write("<link rel='stylesheet' type='text/css' href='1920.php' />");
	}
	if (screen.width <= 1680)  {
  	document.write("<link rel='stylesheet' type='text/css' href='1680.php' />");
	}
	if (screen.width <= 1440)  {
  	document.write("<link rel='stylesheet' type='text/css' href='1440.php' />");
	}
	if (screen.width <= 1280)  {
  	document.write("<link rel='stylesheet' type='text/css' href='1280.php' />");
	}
	if (screen.width <= 1024) {
  	document.write("<link rel='stylesheet' type='text/css' href='1280.php' />");
	}
	else document.write("<link rel='stylesheet' type='text/css' href='1024.php' />");

ed infine questi sono i css: stile.php:

<?php
header("Content-Type: text/css");
?>
body{
	color:#930;
	margin:0;
	font-size: 14px;
	font-family: verdana, sans-serif;
}
a img{
	border: none;
}
div#container{
	width:100%;
	height:160px;
	margin:0;
	float:left;
	background-color: white;
	position:absolute;
	bottom:0;
}
div#container img{
	float:left;
	padding-top:2.5em;
	width: 250px;
}
div#container p{
	color:black;
	clear:left;
	font-size: 0.8em;
	text-align: center;
	padding: 1.5em 0 0 0;
	letter-spacing:0.2em;
}
div#container ul{
	padding:0;
	margin:0;
	width:50%;
	float:right;
	margin-top: 4em;
	list-style:none;
	border-bottom:1px solid black;
}
div#container ul li{
	/*position:relative; rende la lista drop down verticale...*/
	margin:0;
	padding:0;
	float:left;
	border-left:1px solid black;
}
div#container ul li a{
	padding:0 0.5em;
	text-decoration:none;
	color:black;
}
div#container ul li#noLink{
	padding:0 0.5em;
	color:black;
}
div#container ul li#noLink:hover{
	color:#930;
	cursor:pointer;
	margin-bottom:-1px;
	border-bottom:1px solid white;
}
div#container ul li a:hover{
	color:#930;
}
div#container ul ul{
	position:absolute;
	top:7em;
	right:0;
	padding:1.3em 0;
	display:none;
	border:none;
	font-size:0.7em;
}
div#container ul ul li{
	font-weight:normal;
	border:none;
}
div#container ul li:hover ul{
	margin:0;
	padding:1.3em 0;
	display:block;
}

e questo, di esempio, 1024.php:

<?php
header("Content-Type: text/css");
$num = rand(1,9);
$img = "mbq_".$num.".jpg";
?>
body{
	background: #fff url('immagini/1024/<?php echo $img;?>') no-repeat fixed top left;
	width:1020px;
}

grazie infinite per l'aiuto...

joey.santiago

dopo averci perso l'intero giorno, ho risolto con un metodo semplicissimo... un po' sporco, ma funzionante:
ho inserito l'immagine di sfondo in un div:

<div>
<?
$num = rand(1,9);
$img = "mbq_".$num.".jpg";
echo ("<img src='immagini/1920/".$img."' id='background'/>");
?>
</div>

e con css ho dato all'immagine (notare che è l'immagine più grossa che avevo a disposizione!) larghezza 100%:

img#background{
	width:100%;
	z-index:-10;
}

lo z-index serve a mettere l'immagine in secondo piano rispetto al footer, simulando uno sfondo...

funziona!

jeeves

Bah, quello che hai scritto al primo post:

[html]<?php
include ('php/doctype.php');
include("php/DBVars.php");
?>
<title>titolo pagina</title>
<link rel="stylesheet" type="text/css" href="stile.php" />

<noscript>
<link rel="stylesheet" type="text/css" href="1024.php" />
</noscript>
</head>[/html]

Va sostituito con:

[html]<?php
include('php/doctype.php');
include('php/DBVars.php');
?>
<title>titolo pagina</title>
<script language="javascript" src="choose_css.js"></script>
</head>[/html]