11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Switch css automatique

Salut,
alors voila, ça fait un moment que j'essaye de faire quelque chose qui permettrai de selectionner automatiquement la feuille de style correspondant à la taille de l'écran (ou du navigateur) du visiteur.

Pour ça j'ai essayé avec la methode suivante, en appelant ce bout de code après avoir fait les test pour savoir quel feuille de style appeler, mais bon y'a rien qui change.

balise_css = document.getElementsByTagName("link");
balise_css[0].setAttribute("href","../includes/css/user2.css");


je suis aussi allé voir du coté de ce lien http://www.alistapart.com/articles/alternate/, mais cela nécessite le rechargement de la page, ce qui ne convient pas vraiment à mon cas.

Est-ce que j'essaye de faire quelque chose d'impossible ?
La solution se trouverai-elle avec Ajax si je veux faire ça sans recharger la page ?

Merci d'avance Smiley smile
Modifié par Xuor (16 Jun 2006 - 12:18)
Je ferais genre :


<...>
<head>
<...>
<link rel="stylesheet" href="800x600.css" type="text/css" title="800x600" />
<link rel="alternate stylesheet" href="1024x768.css" type="text/css" title="1024x768" />
<link rel="alternate stylesheet" href="1280x1024.css" type="text/css" title="1280x1024" />
</head>
<body>
<script type="text/javascript" src="setstylesheet.js"></script>
<...>


Et pour setstylesheet.js s'inspirer de :

var ww = navigator.userAgent.indexOf('MSIE') != -1 ? document.body.clientWidth : window.innerWidth;
var links = document.getElementsByTagName('link');
for(var n = 0; n < links.length; n++)
{
	if(links[n].getAttribute('rel').indexOf('style') != -1 && links[n].getAttribute('title'))
	{
		links[n].disabled = true;
		if(links[n].getAttribute('title') == '800x600' && ww < 800) links[n].disabled = false;
		else if(links[n].getAttribute('title') == '1024x768' && ww >= 800 && ww < 1024) links[n].disabled = false;
		else if(links[n].getAttribute('title') == '1280x1024' && ww >= 1024) links[n].disabled = false;
	}
}

Modifié par ds-network (15 Jun 2006 - 20:40)
Salut,
déjà merci pour le coup de main Smiley smile
seulement, il semblerait que le script tourne en boucle, sauf que je vois pas vraiment comment c'est possible, à moins qu'il recharge quand même la page, s'executant ainsi a l'infini a chaque fois que la page est chargé
Bonjour, je te propose d'aller faire un tour ici. C'est le script que j'utilisais auparavant pour ma page web et ca fonctionnait a merveille. Nul besoins de recharger la page puisque les feuilles de styles sont chargés au démarage. De plus la page possède un exemple pour t'assure que c'est réellement ce que tu cherches.
Bonjour,
Encore une autre possibilité possible :


var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', '...');
document.getElementsByTagName('head')[0].appendChild(link);
Salut,

alors je viens un peux d'essayer tout ça, et j'ai des résultats, pas pas très concluants quand même Smiley sweatdrop

en mettant ce que m'a passé sigmao à ma sauce, ça a donné ça 

<link rel="stylesheet" type="text/css" href="../includes/css/user_large.css" title="large" />
<link rel="alternate stylesheet" type="text/css" href="../includes/css/user.css" title="normal" />
<script type="text/javascript" src="../includes/js/styleswitch.js"></script>
<script language="JavaScript">
	// Detection du navigateur
	nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
	nc4 = (document.layers)? true:false;
	ie4 = (document.all)? true:false;
	// Instructions pour Netscape
	if (nc4 || nc6) {
		largeur = window.innerWidth;
	}
	// Instructions pour Internet Explorer
	if (ie4) {
		largeur = document.body.clientWidth;
	}
	if (largeur < 800) {
		setActiveStyleSheet('normal');
	}
	if (largeur > 800) {
		setActiveStyleSheet('large');
	}
</script>


résultat, je vois la bonne feuille de style ce mettre en place une fraction de seconde pendant le chargement de la page, puis plus rien, la page s'affiche sans style.

avec la methode da QentinC marche très bien sur FireFox, mais IE ne veux pas en entendre parler, il m'affiche direct la page sans style, en fait on dirais qu'il ne passe même pas dans les balises de script entre lesquelles ce trouve mon code, vu que quand je fait un alert rien ne ce passe.

<script language="JavaScript">
	alert('test');
	// Detection du navigateur
	nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
	nc4 = (document.layers)? true:false;
	ie4 = (document.all)? true:false;
	// Instructions pour Netscape
	if (nc4 || nc6) {
		largeur = window.innerWidth;
	}

	// Instructions pour Internet Explorer
	if (ie4) {
		largeur = document.body.clientWidth;
	}
	if (largeur < 800) {
		var link_css = document.createElement('link');
		link_css.setAttribute('rel', 'stylesheet');
		link_css.setAttribute('type', 'text/css');
		link_css.setAttribute('href', '../includes/css/user.css');
		document.getElementsByTagName('head')[0].appendChild(link_css);
	}
	if (largeur > 800) {
		var link_css = document.createElement('link');
		link_css.setAttribute('rel', 'stylesheet');
		link_css.setAttribute('type', 'text/css');
		link_css.setAttribute('href', '../includes/css/user_large.css');
		document.getElementsByTagName('head')[0].appendChild(link_css);
	}
</script>


De plus avec cette methode quelque chose me tracasse : si l'utilisateur a deactivé javascript (y'en a vraiment qui le font ça ?), bah du coup y'a plus de style, vu que la balise est entièrement générée par le javascript.
Exemple

Testé sous Firefox, Opera et Internet Explorer. Sous Internet Explorer, je dois rafraichir pour que ça fonctionne Smiley sweatdrop

( j'avais pas testé le code que j'avais laissé au dessus et j'y avais laissé quelques fautes mais l'idée y étais Smiley confused j'ai corrigé )
Modifié par ds-network (15 Jun 2006 - 20:43)
a écrit :
avec la methode da QentinC marche très bien sur FireFox, mais IE ne veux pas en entendre parler, il m'affiche direct la page sans style, en fait on dirais
qu'il ne passe même pas dans les balises de script entre lesquelles ce trouve mon code, vu que quand je fait un alert rien ne ce passe.


Alors le débugger est désactivé et il y a une erreur de syntaxe, je ne vois pas d'autre possibilité. Firefox n'affiche rien dans sa console, par hasard ?
En tout cas cette méthode fonctionne pour l'inclsuion dynamique de scripts js, je ne vois pas pourquoi ça ne marcherait pas avec les feuilles CSS.

a écrit :
De plus avec cette methode quelque chose me tracasse : si l'utilisateur a deactivé javascript (y'en a vraiment qui le font ça ?), bah du coup y'a plus de
style, vu que la balise est entièrement générée par le javascript.


J'y ai pensé un peu tard, mais il y a une solution : tu mets une balise <link> par défaut en dur, et grâce à disabled, tu peux la désactiver après coup si js est actif ...
Alors je viens de refaire avec la methode de ds-network, d'abord en copiant les bout de code dans ma page, toujours le même problème, ça marche pas sur IE.
Alors je suis reparti d'une page vierge, et j'ai remis tout les élément un à un, au final le resultat est identique niveau codage, sauf que ça marche Smiley eek
des fois j'ai vraiment du mal a compdre IE Smiley confus

Bon, demain j'essaye de faire fonctionner tout ça sur tout le site, et je vous en donne des nouvelles.
Bonjour,
Xuor a écrit :
Alors je viens de refaire avec la methode de ds-network, d'abord en copiant les bout de code dans ma page, toujours le même problème, ça marche pas sur IE.
Alors je suis reparti d'une page vierge, et j'ai remis tout les élément un à un, au final le resultat est identique niveau codage, sauf que ça marche Smiley eek
des fois j'ai vraiment du mal a compdre IE Smiley confus

Bon, demain j'essaye de faire fonctionner tout ça sur tout le site, et je vous en donne des nouvelles.

Tu as du mettre une entête avec un doctype XHTML et dans ce cas pour IE6 c'est 
document.documentElement.clientWidth
pour obtenir la largeur de la fenêtre et de plus, nécessite de recharger la page. Voilà comment je consoit le script pour que ça marche sur IE5+ et NS6+. Pour IE la feuille de style est activée en fin de chargement de la page :
function initIE()
	{
	D=document
	ww=!D.documentElement.clientWidth?D.body.clientWidth:D.documentElement.clientWidth //quirk IE6 
	setstyle()
	}

function setstyle()
{
	var links = document.getElementsByTagName('link');
	for(var n = 0; n < links.length; n++)
	{
		if(links[n].getAttribute('rel').indexOf('style') != -1 && links[n].getAttribute('title'))
		{
			links[n].disabled = true;
			if(links[n].getAttribute('title') == '800x600' && ww < 800) links[n].disabled = false;
			else if(links[n].getAttribute('title') == '1024x768' && ww >= 800 && ww < 1024) links[n].disabled = false;
			else if(links[n].getAttribute('title') == '1280x1024' && ww >= 1024) links[n].disabled = false;
		}
	}
}
if(window.Event)// tous sauf IE
{
	ww=innerWidth;setstyle()
}
else window.attachEvent("onload",initIE)

Un conseil : laisse tomber document.layers, c'est vraiment plus dans le coups
Modifié par chmel (16 Jun 2006 - 12:08)
Salut !
Bon ben voila, ce matin j'ai repris avec le code de ds-network, puisque c celui que j'avais réussi a faire fonctionner hier, et ça a marché du premier coup sans problème, je sais pas d'ou pouvais venir le problème hier, peut être des histoires de cache je sais pas ...

Enfin bref, merci beaucoup à tous Smiley smile
En effet ça marche avec IE même avec un doctype XHTML strict parce que l'appel du script se fait dans le body. J'aime bien comprendre et ça va me simplifier d'autres scripts.
Merci ds-network
Modifié par chmel (16 Jun 2006 - 14:16)
Sujet clos
Aller à