1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to add the java Script to my Word Press Top Navigation Menu?

Discussion in 'Content Management System' started by 236286, Mar 17, 2015.

  1. 236286

    236286 New Member

    Joined:
    Mar 17, 2015
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    How to add the js to my wp theme? I do not understand




    cuz i need to add this JavaScript to my Top Navigation WP Menu
     
  2. 236286

    236286 New Member

    Joined:
    Mar 17, 2015
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    The Javascript part is:

    Code:
              // initialize Masonry
              var $container = $('#masonryContainer');
    
              $container.multipleFilterMasonry({
                itemSelector: '.challenge',
                filtersGroupSelector:'.filters'
              });
    
    The filtersGroupSelector is the container into which the script search for checkboxes. For every input[type=checkbox] found, it will be attached an onclick event that will trigger the filtering. The value of checkboxes will be matched on the class of every masonry elements.

    The html fiter part is:
    HTML:
    
              <div class="btn-toolbar filters">
                <div data-toggle="buttons" class="btn-group">
                  <label class="btn btn-default">
                    <input type="checkbox" value="Matematica" >
                    Matematica
                  </label>
                  <label class="btn btn-default">
                    <input type="checkbox" value="Scienza" >
                    Scienza
                  </label>
                  <label class="btn btn-default">
                    <input type="checkbox" value="Letteratura" >
                    Letteratura
                  </label>
                </div>
                <div data-toggle="buttons" class="btn-group">
                  <label class="btn btn-default">
                    <input type="checkbox" value="mine" >
                    Mine
                  </label>
                </div>
              </div>
            
    ... and the masonry items...
    
    
              <div id="masonryContainer" class="row" >
                <div class="Letteratura challenge col-lg-3 col-md-4 col-sm-6 col-xs-12 mine" >
                  <h3>Calcolo del Pi Greco</h3>
                </div>
                <div class="Matematica Scienza challenge col-lg-3 col-md-4 col-sm-6 col-xs-12 mine" >
                  <h3>Quadratura cerchio</h3>
                </div>
    
                ...
    
              </div>
     
  3. mialuzzatto

    mialuzzatto New Member

    Joined:
    Aug 5, 2015
    Messages:
    122
    Likes Received:
    4
    Trophy Points:
    0
    Occupation:
    Work at https://www.idevelopersquare.com
    Location:
    Waltham, MA, USA
    Home Page:
  4. alia123

    alia123 New Member

    Joined:
    Jan 8, 2016
    Messages:
    65
    Likes Received:
    4
    Trophy Points:
    0
    Hey,
    Add a custom menu item, link it to nowhere or anywhere. Find out the menu item ID (every item has one), and then target that ID with jQuery.
    Code:
    $("#menu-item-num").on("click", function(e){ 
          e.preventDefault();
          // olark code here
    });
    
    This way, every time a user clicks on that menu-item the script above will be triggered. You can enqueue the jquery script via functions.php.
     

Share This Page