begin process at 2012 05 29 08:01:17
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Detecter resolution d'ecran et charger un .css en fonction


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Detecter resolution d'ecran et charger un .css en fonction

samedi 22 novembre 2008 à 15:36:20 | Detecter resolution d'ecran et charger un .css en fonction

0zar4

Yop !

Alors voila j'ai une question, je suis actuelement entrain de développer mon site, j'ai de solides connaissances en HTML/CSS, j'attaque un peu de JAVASCRIPT et je suis un peu perdu. Je souhaiterai intégrés un code javascript qui me permetterai de detecter automatiquement la résolution d'ecran et charger un fichier .css en fonction.

Alors voila mon code JS actuel :
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [ Lien ]">
<html xmlns=" [ Lien ]" xml:lang="fr" >
   <head>
       <title>Titre de mon site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
    <SCRIPT LANGUAGE=Javascript SRC="fichiers.js"> </SCRIPT>
    <script>
      function loadBackground(){
      hauteur = screen.height;
      largeur = screen.width;
      var myBackgroundImage = "backgroundDefault.jpg"
      if(hauteur==1024 && largeur==1280){
        myBackgroundImage = "css/design_orange.png"
      }
      if(hauteur==600 && largeur==800){
        alert("test");
        myBackgroundImage = "css/design_orange_2.png"
      }
      window.document.getElementsByTagName("body")[0].style.backgroundImage = "url("+myBackgroundImage+")";
    }
  </script>

    </head>
<body>
mon texte...
</body>

<script>
  loadBackground();
</script>
</html>
[/code]

Comme vous le voyez suremet je sais détecter la resolution d'écran et charger une imae en fonction, seulement moi je voudrai charger un CSS, sauriez vous m'aider ?

Merci d'avance

samedi 22 novembre 2008 à 15:43:08 | Re : Detecter resolution d'ecran et charger un .css en fonction

0zar4

J'ai oublier de dire que j'ai déja essayer la méthode avec les pourcentages, elle marche mais je prefere utiliser la méthode ci-dessus qui pour ma part me permettera de faire un design exelent pour chaque resolutuion. Voila c'était juste une précision en vue de future réflexion a ce sujet.

Merci d'avance
samedi 22 novembre 2008 à 15:52:01 | Re : Detecter resolution d'ecran et charger un .css en fonction

Bul3

Membre Club
>>seulement moi je voudrai charger un CSS
ou alors adapter le css ?         balise_concerné.className="le css adapté"

ce n'est d'ailleurs en général pas une bonne idée ( il me semble, mais mon
avis ne vaut pas grand chose ! ) d'être obligé de tenir compte de la résolution
d'un écran de l'utilisateur...
perso, je ne navigue qu'avec une fenêtre réduite, dans des onglets,
       j'interdis tout redimensionnement... ( je ne dois pas être le seul )

Cordialement

         [mon Site] [M'écrireBul         

samedi 22 novembre 2008 à 16:23:47 | Re : Detecter resolution d'ecran et charger un .css en fonction

0zar4

non je voudrai charger un fichier css celon la resolution d'ecran et pas adapter celui que j'ai deja.

Merci de ta reponse
samedi 22 novembre 2008 à 16:42:25 | Re : Detecter resolution d'ecran et charger un .css en fonction

Bul3

Membre Club

moins simple....

_ possible en javascript.... avec IE, mais pas avec les autres navigateurs je pense.
_ en interaction avec le serveur, mais dommage de faire un aller-retour pour ça.
( appel page.php avec paramètre=résolution, qui renvoie ce qu'il faut )
je ne vois pas de réponses satisfaisantes à brule-pourpoint...

faut y penser un peu, si ça se trouve c'est bête comme chou !

mais en quoi modifier cela pourrait-il gêner ?

          [mon Site] [M'écrireBul         

samedi 22 novembre 2008 à 16:49:03 | Re : Detecter resolution d'ecran et charger un .css en fonction

0zar4

Bah disont que si je reste avec mon desgin, si je change de resolution, mon design en lui même est correct, mais mes balise texte et menu ne le sont pas, elle sont toute décalé et ne sont correcte qu'avec un affichage 1024X1280. Et ce même avec les pourcentage comme valeur.

mon CSS :

body
{

   width: 100%;
   height: 80%;
   margin: auto;
   background-image: url("css/design_orange.png");
   background-color: black;
   background-position: top center;

   background-repeat: no-repeat;
}

div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}


ul
{
   width: 100%;
   position: absolute;
   left: 9%;
   top: 5%;
   font-family: "Segoe UI", Comic Sans MS, arial, arial black;
   font-size: 17px;
   list-style-type: none;

}


p
{
   background-color: orange;
   border: 1px solid black;
      width: 38%;
   border: 1px solid black;
   text-align: justify;
   padding: 12px; /* Marge intérieure de 12px */
   font-size: 14px;
   font-family: "Comic Sans MS";
   position: absolute;
   left: 30%;
   top: 22%;
}


h1
{
   font-style: italic;
   font-family: "Arial Black", Arial, Verdana, serif;
   text-align: center;
}
blockquote p
{
   text-align: justify;
   text-indent: 25px;
}

img.centered {
   display: block;
   margin-left: auto;
   margin-right: auto }

samedi 22 novembre 2008 à 17:32:05 | Re : Detecter resolution d'ecran et charger un .css en fonction

kazma

Administrateur CodeS-SourceS
essai avec screen.height et screen.width
exemple d'utilisation

<html>
 <head>
<script>
function resolution(){
alert(screen.width+'x'+screen.height)
}
</script>
</head>
<body>
<button onclick="resolution()">appui</button>
</body>
</html>
samedi 22 novembre 2008 à 17:37:30 | Re : Detecter resolution d'ecran et charger un .css en fonction

0zar4

Merci mais ton script ne sert qu'a detecter la resolution d'ecran de l'internaut, j'aais deja mis cette fonction dans mon script, ce que je cherche maintenant c'est changer de fichier .css en fonction de la resolution d'ecran du visiteur.

merci de ta reponse
samedi 22 novembre 2008 à 17:50:28 | Re : Detecter resolution d'ecran et charger un .css en fonction

kazma

Administrateur CodeS-SourceS
et de cette facon a tu essayer

<script type="text/javascript" language="javascript">
document.write("<link rel='stylesheet' href='repertoire/monfichier.css' type='text/css'>");
}
</script>

bien evidement tu adapte par des conditions selon la resolution (sa va en faire des conditions)
samedi 22 novembre 2008 à 18:58:15 | Re : Detecter resolution d'ecran et charger un .css en fonction

0zar4

Nan ça ne fonctionne pas, voici le codage que j'ai fait :

    <script>
function resolution(){
hauteur = screen.height;
      largeur = screen.width;
      if(hauteur==1024 && largeur==1280){
      document.write("<link rel='stylesheet' href='800x600.css' type='text/css'>');
  </script>

1 2

Cette discussion est classée dans : fonction, code, charger, css, mybackgroundimage


Répondre à ce message

Sujets en rapport avec ce message

Insertion de code [ par vince1415 ] Bonjour, J'ai un script en javascript qui se trouve dans un fichier et je voudrai pouvoir l'éxécuter depuis une fonction. pour charger une source on f inserer une fonction javascript dans une page css [ par medas918 ] [code=js] alert("bonjour le site est en construction") // fonction de conversion en hexadécimal var hexa = "0123465789ABCDEF"; fu Code php fonction js .... possible ?? [ par abdinfo6 ] Bonjour j'ai cetet fonction et j'aimerais qu'elle soit valide. Elle se déclenche sur un évenenement onclick : function verif() { var cli = document. fonction cache montre avec slide [ par thejoker31200 ] Bonjour j'ai amélioré un bout de code pour afficher et cacher du texte avec effet de slide (affichage progressif) sans le slide ca fonctionne avec le Appeler une fonction PHP avec setInterval [ par ramk ] Bonjour , je voudrais appeler une fonction PHP avec setInterval.Mes connaissances sont insuffisantes , je viens de commencé le JavaScript...J'ai beauc problème placement d'une div dans une boucle php (fonction ajax) [ par testyo ] Bonjour à tous , J'ai un fichier php qui génère un tableau à la fin de chaque ligne j'ai créé des boutons (+) et (-) qui affiche et masque des détail code source de la fonction focus [ par salma5 ] Bonjour, je cherche un code source qui me permet de sélectionner un élément dans un formulaire (exactement comme la fonction focus()) je ne peux pas u Mise en forme tableau javascript [ par bridierb ] Bonjour, J'ai créé un tableau d'entiers sous javascript auquel j"ai ajouté une fonction inverse. Cette fonction m'affiche bien mon tableau inversé mai Fonction qui ne fonctionne que par onclick [ par etu54 ] Bonjour a tous, Voila mon probleme sur lequel je me casse la tete depuis quelques heures est en rapport avec une biblioteque que j'ai trouver sur le répéter fonction [ par JackNUMBER ] Bonjour ! Je débute en JS et j'aimerai votre aide pour "automatiser" une fonction. J'ai une série de variable portant le même préfixe : [code=js]$var


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,608 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales