11540 sujets

JavaScript, DOM et API Web HTML5

Chargement css apres detection taille ecran

Bonsoir et félicitation pour votre site(joli design)

je vous expose mon pb en citant dabord un sujet clos:

sunnmagic a écrit :
Je sais qu'en javascript, c'est possible, mais cela redirige simplement l'internaute sur une autre page, ce qui ne me convient pas du tout.


Ben non, ça ne redirige pas forcément l'internaute sur une autre page.
Tu peux par exemple détecter la largeur de la fenêtre du navigateur (et pas la résolution d'écran...), et appliquer une classe à l'élément body en fonction de cette largeur.
Bien sûr, on fera attention au rendu sans Javascript. cligne

Sinon, pour mémoire, à l'avenir on pourra peut-être utiliser les media queries pour ce genre de choses.

C'est justement sur quoi je bute tériblement, jaimerais pouvoir détecter la taille de lécran, et charger un css en fonction.Ce changement de css me permet juste de changer l'image background de mon header pour un design adapté. Jusqu'ici j'y arrive en detectant la résolution .. J'ai essayé le script de Kevin Hale(http://particletree.com/features/dynamic-resolution-dependent-layouts/) mais il bug avec mon template(yootheme) .Le systeme fonctionne , le css se charge selon la taille de l'ecran mais la mise en forme est extremement perturbé et je ne sais pourquoi.

Pourriez vous me conseiller ou auriez vous un script a tester?
Sinon et jarete de vous embéter Smiley langue ,si je ne parvient pas a faire la manip,

puis-je faire des rapport de proportion entre résolution et taille? je sais bien que non
mais peut etre qu'il peut yavoir des approximations?

bonne journnée à vous,

Jessicat




Voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Merci d'avance.
Bonjour,
jessicatte a écrit :
Pourriez vous me conseiller ou auriez vous un script a tester?
Sinon et jarete de vous embéter Smiley langue ,si je ne parvient pas a faire la manip,
S'il s'agit juste de changer l'image de fond tu peux utiliser ceci : 
<script type="text/javascript">
<!--
  if(screen.width < 801) document.body.style.backgroundImage="url('img/bg_800.jpg')";
  else if(screen.width < 1025) document.body.style.backgroundImage="url('img/bg_1024.jpg')";
    else if(screen.width < 1281) document.body.style.backgroundImage="url('img/bg_1280.jpg')";
      else if(screen.width < 1601) document.body.style.backgroundImage="url('img/bg_1600.jpg')";
        else document.body.style.backgroundImage="url('img/bg_2000.jpg')";
//-->
</script>


jessicatte a écrit :
puis-je faire des rapport de proportion entre résolution et taille? je sais bien que non mais peut etre qu'il peut yavoir des approximations?
Tu veux dire, en utilisant des pourcentages au lieux d'unités fixes comme le px ? C'est tout à fait possible, mais attention à bien prendre en compte le cas des très grands écrans sur lesquels un texte sur de trop grandes lignes devient particulièrement difficile à lire. Pour ce cas ci, il faudra veiller à utiliser max-width et une valeur en unité fixe.
Salut,

Laurie-Anne a écrit :
Mais les media queries sont-elles supportées par tous les navigateurs ?
Non... d'où l'idée de dégradation gracieuse. Smiley cligne
Une recherche rapide sur une simulation des media queries avec JavaScript me donne:
http://www.protofunc.com/scripts/jquery/mediaqueries/

Peut-être quelque chose d'intéressant à explorer: Media Queries en natif pour les navigateurs qui le supportent, et rustine JS pour d'autres. Attention, je recommande pas forcément de le faire en production. Smiley cligne
Laurie-Anne a écrit :
Bonjour,
S'il s'agit juste de changer l'image de fond tu peux utiliser ceci : 
<script type="text/javascript">
<!--
  if(screen.width < 801) document.body.style.backgroundImage="url('img/bg_800.jpg')";
  else if(screen.width < 1025) document.body.style.backgroundImage="url('img/bg_1024.jpg')";
    else if(screen.width < 1281) document.body.style.backgroundImage="url('img/bg_1280.jpg')";
      else if(screen.width < 1601) document.body.style.backgroundImage="url('img/bg_1600.jpg')";
        else document.body.style.backgroundImage="url('img/bg_2000.jpg')";
//-->
</script>


Tu veux dire, en utilisant des pourcentages au lieux d'unités fixes comme le px ? C'est tout à fait possible, mais attention à bien prendre en compte le cas des très grands écrans sur lesquels un texte sur de trop grandes lignes devient particulièrement difficile à lire. Pour ce cas ci, il faudra veiller à utiliser max-width et une valeur en unité fixe.



Bonjour et merci pour toutes ces réponses rapide,
J'ai essayer le code si dessus déjà mais l'image ne veux pas rester dans le header et j'ai un background sur toute la page, alors que je place le code dans l'endroit concerné, entre <div headerbar> et <div>.Les templates yootheme sont un peu complexes je trouve.. En fait je passe par un css pour placer mes image, j'ai dans une de mes feuille de style un
#headerbarr
background-image : mon image .

Si je ne trouve pas de solution pour changer de css selon la taille de l'écran,
j'aimerais feinté en faisant des comparaisons entre résolution et taille écran(puisque j'arrive a changer de css selon résolution).Il est très important pour moi de rester en px et non en % .Je sais que beaucoup de gens prône le %, mais moi pour mon design ca n'est pas possible, mon image header est un mélange de photos , de dessin et de texte, les % font des étirements vraiment tout pas beau je trouve, mais ca reste que mon avis.Bref, puisque j'arrive a changer de css selon résolution, j'aimerais essayer d'établir des rapports, meme approximatif entre les deux:
ex: une resolution de 1280 par 1024 à généralement une taille d'écran de tant,
1920par1080 a généralement une taille écran de tant. Je sais qu'il n'y a pas de rapport direct entre résolution et taille, mais je pense que c'est rare une resolution 1920par1080 sur un 17pouce par ex. Sinon pour juger la taille de l'écran je ne sais si je peut me basé sur les "pouce", qu'en pensez-vous?Sinon, connaissez vous un site qui recenserait ou qui établirait des rapports moyen resolution/taille ecran?

Sinon pour les media querries ca ne semble pas de mon tout petit niveau bien que super intéressant..

Jessicat
jessicatte a écrit :
J'ai essayer le code si dessus

Sans le comprendre, si je ne m'abuse?

jessicatte a écrit :
Sinon pour les media querries ca ne semble pas de mon tout petit niveau

Auquel cas il n'y a aucune solution flexible qui soit de ton niveau. La solution simple consistera donc à faire un design de largeur fixe, et voilà. Attention à ne pas viser une largeur trop importante (pour référence, 760px max pour un site compatible en 800x600, 980px max en 1024x768).

Bonne continuation. Smiley smile
Florent V. a écrit :

Sans le comprendre, si je ne m'abuse?


Auquel cas il n'y a aucune solution flexible qui soit de ton niveau. La solution simple consistera donc à faire un design de largeur fixe, et voilà. Attention à ne pas viser une largeur trop importante (pour référence, 760px max pour un site compatible en 800x600, 980px max en 1024x768).

Bonne continuation. Smiley smile


Non sans le comprendre c'est évident, c'est aussi pour ca que je fais appel à vos lumières.

Pour les media querries, je ne demande qu' à comprendre mais j'avais cru comprendre aussi que vous déconseillez en production et que se n'était pas encore totalement compatible..

Tout mon site est fluide jusqu'ici et je ne voudrais pas avoir une largeur fixe.

Pour le code de Laurie-anne, je ne sais si on peut l'adapter à ma situation, à savoir
juste changer l'image de mon header et non un background sur toute la page.

" J'ai essayer le code si dessus déjà mais l'image ne veux pas rester dans le header et j'ai un background sur toute la page, alors que je place le code dans l'endroit concerné, entre <div headerbar> et <div>"

Peut etre aussi que je mis prend mal et qui faudrait stipuler des dimensions, je ne sais pas. Je joins mon code actuel pour changer de css selon la résolution, J'ai écrit dedans l'endroit ou jai tester le code de Laurie .en espérant ne pas prendre trop de place :

?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>

<jdoc:include type="head" />



<script type="text/javascript" >

// JavaScript Document
if (screen.width < 1024) {
document.write('<link rel=stylesheet type="text/css" href="templates/yoo_symphony/css/1.css">');
}
if (screen.width >= 1024) {
document.write('<link rel=stylesheet type="text/css" href="templates/yoo_symphony/css/2.css">');
}
if (screen.width >= 1280) {
document.write('<link rel=stylesheet type="text/css" href="templates/yoo_symphony/css/3.css">');
}
if (screen.width >= 1600) {
document.write('<link rel=stylesheet type="text/css" href="templates/yoo_symphony/css/4.css">');
}


</SCRIPT>

</head>

<body id="page" class="yoopage <?php echo $this->params->get('columns'); ?> <?php echo $this->params->get('itemcolor'); ?> <?php echo $this->params->get('toolscolor'); ?>">

<?php if($this->countModules('absolute')) : ?>
<div id="absolute">
<jdoc:include type="yoomodules" name="absolute" />
</div>
<?php endif; ?>

<div id="page-header">
<div class="page-header-1">
<div class="page-header-2">
<div class="page-header-3">
<div class="wrapper">

<div id="header">

<div id="toolbar">

</div>

<div id="headerbar">


CEST ICI QUE JAI TESTER LE CODE DE LAURIE ANNE

</div>








Jessicat
Modifié par jessicatte (01 Dec 2009 - 19:36)
Bonsoir,

Pour que le changement de background ne s'applique qu'à ton div "headerbar" et non pas à toute ta page, tu dois/peux reprendre le code de Laurie-Anne et y remplacer les "body" par des "getElementById('headerbar')". Ainsi:
if(screen.width < 801) document.getElementById('headerbar').style.backgroundImage="url('img/bg_800.jpg')";

etc.
Sujet clos
Aller à