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

jQuery Discussion :

Intégrer un patch pour Ipad pour un menu déroulant en rollover


Sujet :

jQuery

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    200
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 200
    Points : 66
    Points
    66
    Par défaut Intégrer un patch pour Ipad pour un menu déroulant en rollover
    Bonjour !

    J'ai trouvé ce script qui a l'air de fonctionner selon les retours que je vois par-ci par-là sur le net : http://blog.0100.tv/2010/05/fixing-t...padiphoneipod/

    Mais je ne sais pas comment l'intégrer dans ce menu déroulant, dont voici le code :
    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    // JavaScript Document
    $(document).ready(function() {
    //On Hover Over
    function megaHoverOver(){
        $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
        (function($) {
            //Function to calculate total width of all ul's
            jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
                $(this).find("ul").each(function() { //for each ul...
                    rowWidth += $(this).width(); //Add each ul's width together
                });
            };
        })(jQuery); 
     
        if ( $(this).find(".row").length > 0 ) { //If row exists...
     
            var biggestRow = 0;	
     
            $(this).find(".row").each(function() {	//for each row...
                $(this).calcSubWidth(); //Call function to calculate width of all ul's
                //Find biggest row
                if(rowWidth > biggestRow) {
                    biggestRow = rowWidth;
                }
            });
     
            $(this).find(".sub").css({'width' :biggestRow}); //Set width
            $(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin
     
        } else { //If row does not exist...
     
            $(this).calcSubWidth();  //Call function to calculate width of all ul's
            $(this).find(".sub").css({'width' : rowWidth}); //Set Width
     
        }
    }
    //On Hover Out
    function megaHoverOut(){
      $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
          $(this).hide();  //after fading, hide it
      });
    }
     
    var config = {
         sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
         interval: 100, // number = milliseconds for onMouseOver polling interval
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
         timeout: 300, // number = milliseconds delay before onMouseOut
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)
    };
     
    $("ul#menu li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
    $("ul#menu li").hoverIntent(config);
    });
    J'ai effectué plusieurs tentatives sans succès
    Le but du jeu est que lors de la consultation du site dans l'iPad, le hover fonctionne au clic sur un des éléments du menu.
    Pour précision, c'est un menu déroulant qui fonctionne très bien (sauf sur Ipad). Il "déroule" les sous-menus au survol de la souris (partout sauf sur les tablettes)

    J'espère que ma demande est claire...
    Merci d'avance !

  2. #2
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    200
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 200
    Points : 66
    Points
    66
    Par défaut
    bonjour,

    Personne n'a d'idée ? Ou je me suis peut-être mal expliqué.... ?

    Voici le code (patch) à intégrer, selon les recomandations du site qui fournit ce patch, il faut le mettre dans $(document).ready mais où... ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    //ipad and iphone fix
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
        $(".menu li a").click(function(){
            //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
            //strange
        });
    }
    merci ^^

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 983
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 983
    Points : 44 173
    Points
    44 173
    Par défaut
    Bonsoir,
    il faut le mettre dans $(document).ready mais où... ?
    il est des fois où essayer ne coûte rien...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // JavaScript Document
    $(document).ready(function () {
      //ipad and iphone fix
      if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
        $(".menu li a").click(function () {
          //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
          //strange
        });
      }
      //On Hover Over
      function megaHoverOver() {
      // la suite ...
    par exemple.

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    200
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 200
    Points : 66
    Points
    66
    Par défaut
    Bonjour,

    Je reviens après une (longue) absence...
    Merci de ta réponse noSmoking, mais concernant ce code, tu te doutes bien que j'ai essayé ceci et que ça ne marche pas. C'est la raison pour laquelle j'ai créé ce sujet.
    D'ailleurs je le disais dans mon premier post ^^

    Ma demande tient toujours, quelqu'un comprend ce qui ne va pas ?
    Apparemment, ce "patch" est super selon les commentaires de là où je l'ai trouvé. Mais comment le faire fonctionner ?

    Pour l'historique de ma demande, voir le premier post svp.

    merci

Discussions similaires

  1. Conseils pour développez pour IPAD et IPHONE
    Par QAYS dans le forum Apple
    Réponses: 0
    Dernier message: 09/06/2010, 09h51
  2. Réponses: 7
    Dernier message: 17/05/2006, 14h49
  3. [MFC] probleme pour griser un sous menu
    Par barthelv dans le forum MFC
    Réponses: 3
    Dernier message: 03/04/2006, 11h41
  4. [PHP-JS] besoin d'aide pour menu déroulant avec lien
    Par Damarus dans le forum Langage
    Réponses: 3
    Dernier message: 06/10/2005, 18h43
  5. Aide pour modification d'un menu dynamique
    Par GarGamel55 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/09/2005, 18h29

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