IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

image selon la largeur de la page


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Homme Profil pro
    particulier
    Inscrit en
    Décembre 2017
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : particulier

    Informations forums :
    Inscription : Décembre 2017
    Messages : 105
    Par défaut image selon la largeur de la page
    Bonjour

    Merci de votre aide

    J'utilise une fonction en javascript qui me retouren la taille de ma page web et je veux faire un test selon la largeur de la page pour afficher une image ou une autre

    Mon code m'affiche bien la taille de la page
    mais le if en php ne fonctionne pas car il me retoiurne toujours tata quelq que soit la valeur de la taille de la fenètre

    je pense que la variable ne me retourne pas un nombre mais une chaîne de caractère

    J'ai galéré pour trouver la solution mais je n'y arrive pas

    Merci de vos conseils et de votre aide

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    ?>  
    <?php $var_resol="0";?>
    <!--  emplacement d'image flip entraine les modif de 	.interieur_titre_book {
    		display:none; et de .cadre_book  cadre_std   padding-top: 46%;-->
    <?php
    function resol()
    {
    $resol='<script type="text/javascript">
                   document.write(""+window.innerWidth+"");
    </script>';
    return $resol;
    }
    $var_resol=resol();
    echo $var_resol;
    echo $screen = $var_resol;
    if ($screen > 1280) {echo "toto";}
    else {
    echo "tata";   
    }
     
     
    ?>
    J'ai essayé des variantes

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    echo $var_resol;
    echo $screen = $var_resol;
    $resolscreen=1280;
    if ($screen > $resolscreen) { echo "toto"; }
    }
    ou encore
    mais le test se fait mal

    Merci du coup de mains

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Je pense que tu as un souci de chronologie ...

    php s'exécute coté serveur, javascript coté client
    tu ne peux pas demander à javascript de retourner ta largeur de page dans une variable php au chargement pour la réinjecter.

    Fais le en pur JS en sniffant la largeur de page et en modifiant le src de ton image en js
    ou alors en css avec les medias queries...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé
    Homme Profil pro
    particulier
    Inscrit en
    Décembre 2017
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : particulier

    Informations forums :
    Inscription : Décembre 2017
    Messages : 105
    Par défaut
    Merci Spacefrog

    Mais je ne pige pas

    Je récupère bien la valeur de la taille de l'écran coté client en java et j'affiche bien une bvariable en php

    Pour suivre vos conseils et être plus cali j'ai séparé le code le java (grand débutant) et le php

    j'ai bien une valeur php coté serveur qui s'affiche donc je dois pouvoir la comparer et la manipuler

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <script>
     
    function resol()
    {
    $resol='<script type="text/javascript">';
                   document.write(""+window.innerWidth+"");
     
     
     
    return $resol;
    }
     
    $var_resol=resol();
     
    </script>
    <?php
     
     
    echo $var_resol;
    echo $screen = $var_resol;
    echo $resolscreen="1280";
    if ($screen > $resolscreen) { echo "toto"; }
    else { echo "tata";   
    }

  4. #4
    Membre confirmé
    Homme Profil pro
    particulier
    Inscrit en
    Décembre 2017
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : particulier

    Informations forums :
    Inscription : Décembre 2017
    Messages : 105
    Par défaut
    Auitant pour moi je ne récupère pas la vavaleur de la varaible en php

    J evais chercher mais je ne connais pas le JS

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Il faut comprendre la chronologie d'execution et les flux ...

    Au chargement de la page :
    ton serveur php génère le code html js qu'il envoie au client .
    Le client reçoit le code et l'interpète (ici pas de flux arrière, le client ne renvoie pas de flux au php (sauf à faire un rechargement de page ou un ajax...)

    donc ce code ci:
    function resol()
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    {
    $resol='<script type="text/javascript">';
                   document.write(""+window.innerWidth+"");
     
     
     
    return $resol;
    }
    (au passage il manque la balise fermant du script js)
    ne fait que te retourner en php un string

    coté client en js il te suffit de récupérer ta largeur de page ... puis d'affecter conditionnellement le src d'une image sur ta page
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre expérimenté
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 458
    Par défaut
    Bonjour.
    Je ne réponds pas vraiment à la question mais, d'une manière générale, il n'y a pas besoin de JS pour charger une image ou une autre selon la largeur de la page ou plus exactement de la fenêtre : L'attribut HTML srcset fait bien le job.

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    @domi65 On en apprend encore après toutes ces années ^^, je ne connaissais pas le srcset.

    ça rejoint un peu les media queries css mais en HTML ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Réponses: 12
    Dernier message: 06/11/2015, 14h27
  2. [WD-2007] Ajustement d'une image à la largeur de la page
    Par Golard dans le forum VBA Word
    Réponses: 3
    Dernier message: 26/11/2013, 16h32
  3. Image sur toute la largeur de la page dans un texte double colonne
    Par rabbi_jaccob dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 6
    Dernier message: 24/04/2009, 09h01
  4. Image décalée d'un pixel selon la longueur de la page
    Par Maitrekou dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 13/10/2008, 10h49
  5. Réponses: 2
    Dernier message: 23/06/2004, 13h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo