AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Navigation - Enlever la recherche rapide au clic sur Rechercher

    Partagez
    Nihil Scar Winspeare
    Messages : 3942

    le Ven 20 Mai 2016 - 13:07



    Supprimer la boite de Recherche rapide de la navigation



    Hello :)

    Bien qu'étant pratique, on veut parfois enlever la petite boite de recherche qui s'ouvre quand on clique sur "Rechercher", et ainsi arriver directement à la page de Recherche avancée ^-^

    Exemple


    Il s'agit de retirer cette petite box au clic sur "Rechercher" :

    Comment ça marche ?



    On va d'abord regarder comment Forumactif fait notre lien "Rechercher" actuel.
    J'ai récupéré le code grâce à l'inspecteur d'élément. Je vous conseille de jeter un coup d'oeil au tuto sur les Outils de débug par valtena_ethan.

    Le HTML ressemble à ça :
    Code:
    <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">
      <img id="i_icon_mini_search" src="URL-IMAGE" alt="Rechercher" title="Rechercher">Rechercher
    </a>

    La partie qui ouvre la boite de recherche rapide est celle ci :
    Code:
    onclick="showhide(document.getElementById('search_menu')); return false;"

    Notre lien a un attribut "onclick" avec une valeur qui lui dit de montrer / masquer la boite de recherche.

    Du coup, si vous avez bien suivi, il suffit d'enlever cet attribut onclick, et voilà, soucis réglé !

    Code


    PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

    Il faut vérifier que "Activer la gestion des codes Javascript" a bien "Oui" coché.

    Ensuite, on va créer un nouveau JS, avec un nom clair, par exemple "Barre de navigation - enlever boite de recherche" et cocher "Sur toutes les pages" car on veut que cela fonctionne partout. :ange:

    Code:
    /* NAVIGATION - ENLEVER LA BOX DE RECHERCHE RAPIDE */
    $(function(){
      $(".mainmenu[href='/search']").removeAttr("onclick");
    });

    Explications


    KESS-KI-FÉ-CE-CODE ?
    D'abord, on a ce petit bout de code qui dit au navigateur "Hey, pour ce qu'il y a dans ce bloc, attends que ma page soit prête pour que je la manipule"
    Code:
    $(function(){
      /* MON CODE QUI ATTEND ICI */
    });

    Ensuite on sélectionne les éléments avec la classe "mainmenu" avec le lien vers "/search" :
    Code:
    $(".mainmenu[href='/search']")

    Et on enlève l'attribut "onclick"
    Code:
    .removeAttr("onclick");

    Par simplicité, j'utilise jQuery, mais on pourrait le faire tout aussi simplement en js "simple". :toto: Vous pouvez lire le tuto de Yui à ce sujet :  ForumActif, JavaScript et jQuery : les bases générales

    En cas de soucis, je vous invite à aller poster dans "Problème avec mon code"




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Shaneliae
    FémininAge : 20Messages : 667

    le Jeu 26 Mai 2016 - 13:19

    Coucou Nihil !

    Encore un super tuto, et bien pratique surtout ! Personnellement je préfère arriver directement sur la page de recherche avancée ^^

    Par contre vers la fin de ton tuto tu as écris :
    @Nihil a écrit:"Hey, pour ce qu'il y a dans ce bloc, attent que ma page soit prête pour que je la manipule"
    A l'impératif on écrit attends ! Encore une étourderie (et une séance d'auto-flagellation :fouet: ) Bref j'ai directement corrigé ça et je déplace ^^

    PS : Merci pour les tags :hug2:



    Nihil Scar Winspeare
    Messages : 3942

    le Dim 5 Juin 2016 - 20:55

    Huhuhu, j'aurai du relire, c'est par ce que je modifie mes phrases en plein milieu parfois et... quand on a la tête dans le tuto parfois on ne voit plus, merci d'avoir corrigé ! *sort*

    Pareil que toi, je passe presque toujours par la recherche avancée :)
    Et puis j'ai remarqué que sur certains fow' la boite "Recherche rapide" était illisible à cause du thème, je me suis dit que ça pourrait ptet être utile pour eux :3




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Contenu sponsorisé

    Aujourd'hui à 7:05


      La date/heure actuelle est Dim 11 Déc 2016 - 7:05