CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

aide pour un programme simple avec JQuery

thaarn
thaarn
Niveau 1
31 mars 2021 à 10:26:45

Voila je doit faire un petit programme avec le quel mon site affiche ou cache une image et un <p> quand la largeur de l écrant est plus grand que la hauteur ( sur téléphone en général )et inversément quand la auteur est plus grande que la largeur affiche un<p> et affiche une autre image avec la fonction resize () .

je sais que je doit utiliser .hide() et .show() et if et else mais je block.

mon html:
<!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/style.css"> <script src="../js/jquery.js" ></script> <script src="../js/main.js"></script> <meta name="viewport" content="width = device - width , initial - scale =1.0"> <title>site de knapen arnaud</title> </head> <header> <nav> <ul> <li><a href="index.html"> aceuille</a></li> <li><a class="active" href="orientation.html"> orientation</a></li> <li><a href="cacher_montrer.html">cacher et montrer</a></li> </ul> </nav> </header> <body> <img id="image" src="../img/paysage.jpg"> <img id="pimage" src="../img/p_paysage.jpg"> <p id="p1">veuiller passez en paysage</p> </body> </html>

mon code Jquery:

//part 1 //
$(document).ready(function(){
  $(".hide").click(function(){
    $("#image1").hide();
  });
  $(".show").click(function(){
    $("#image1").show();
  });
//part 2//

$(window).resize( function(){

  var height = $(window).height();
  var width = $(window).width(); 

 // if(width>height) {
    // Landscape
    
    $("#image").show();
    $("#pimage").hide();
    $("#p1").hide();
  } 
  else {
    // Portrait
    
    $("#landscape").hide(function(){
        $("#image").hide();
        $("#pimage").show();
        $("#p1").show();
    });
  }
}).resize();



});
wouh_pinaise_
wouh_pinaise_
Niveau 6
31 mars 2021 à 13:57:58

Quel est le problème : le script n'est pas du tout chargé ou il ne fait pas ce que tu souhaites ?

Un conseil : ajouter des console.log dans ta méthode de resize pour débugger et voir si tu passes bien dedans. Par exemple avant de faire la définition de tes variables height et width :

console.log($(window).height(), $(window).width());

Le mieux est d'utiliser le debugger du navigateur (F12 + Débogueur + recherche du fichier + mettre un point d'arrêt dans la méthode ), mais pour ce cas simple, le console.log fera l'affaire.

Petite remarque : je crois que la manière dont tu écris l'évènement de redimensionnement est dépréciée : ne sera plus géré avec de nouvelles versions de jquery : https://github.com/jquery/jquery-migrate/blob/main/warnings.md#jqmigrate-jqueryfnclick-event-shorthand-is-deprecated
Si je ne dis pas de bêtise, il faut désormais l'écrire de cette manière :

    $(window).on('resize', function() {
     ...
    });

Et sinon à tester, mais je crois que tu as des morceaux de code en trop (l'event hide du landscape et l'appel en trop du resize). :hap:


//part 2 //

 $(window).on('resize', function() {
     if($(window).width() > $(window).height()) {
         $("#image").show();
         $("#pimage").hide();
         $("#p1").hide();
     } else {
        $("#image").hide();
        $("#pimage").show();
        $("#p1").show();
     }
  });
thaarn
thaarn
Niveau 1
31 mars 2021 à 15:29:58

le script fait une partie , quand la fênetre et plus est plus grande en longeur que la auteur j'ai ma petite image qui part mais pas l'inverse et on vois les 2 images alors que des que j'ouvre la page on ne doit voir que la petite image et un <p> qui demande de mettre e landscape / faire en sorte que la hauteur soir plus petit que la largeur .

Sous forums
  • Aide à l'achat Mac
  • Macintosh
  • Création de Jeux
  • Programmation
  • Création de sites web
  • Linux
  • Internet
  • Steam Deck
  • Hardware
La vidéo du moment