jQuery functions only work on homepage

Tony Garand asked
php jquery
via

My issue is that only one of my functions works throughout the site the rest only work on the home page.

I am pretty sure I used the wp_enqueue_scripts correctly as well as get_template_directory_uri()

Here is my jsfiddle with everything working 100% https://jsfiddle.net/TonyTheOnly/dwf1x3eu/

Any Help is greatly appreciated and thank you for your time.

Here is my full functions.php:

<?php

function paramo_script_enqueue() {

wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/paramo.css', array(), '1.0.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/paramo.js', array('jquery'), '1.0.0', true);

}

add_action('wp_enqueue_scripts', 'paramo_script_enqueue');
function paramo_theme_setup() {

add_theme_support('menus');

register_nav_menu('primary', 'Primary Header Navigation');
register_nav_menu('secondary', 'Footer Navigation');   
}

add_action('init', 'paramo_theme_setup');
add_theme_support('custom-header');


function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Full.js file

    jQuery.noConflict();

jQuery(document).ready(function () {
    'use strict';

    jQuery(".burger-nav").on("click", function () {
        jQuery("nav ul").toggleClass("open");
    });

    jQuery('.toggles span').click(function () {
        jQuery(".toggles span").removeClass("active");
        jQuery(this).addClass("active");
    });

    jQuery(".spanish").on("click", function () {
        jQuery(".englishNav").hide();
        jQuery(".spanishNav").show();

    });

    jQuery(".english").on("click", function () {
        jQuery(".englishNav").show();
        jQuery(".spanishNav").hide();
    });
    jQuery(".spanish").on("click", function () {
        jQuery(".englishText").hide();
        jQuery(".spanishText").show();
    });

    jQuery(".english").on("click", function () {
        jQuery(".englishText").show();
        jQuery(".spanishText").hide();
    });
});

full header

    <!doctype html>
<html>
    <head>
         <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Paramo Galeria</title>
        <?php wp_head(); ?>

    </head>

    <body <?php body_class( $awesome_classes ); ?>>
        <section>
        <div class="topBar">

<img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
        <div class="topBarMiddle">
            <span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>
          <div class="topBarRight">  
            <nav>
            <a class="burger-nav"></a>
                <ul class="englishNav">
                    <li><a href="http://localhost:8888/ParamoGaleria/home">Home</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/artists">Artists</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Exhibitions</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/offsite">Offsite</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/shop">Shop</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/contact"> Contact</a></li>
                    <li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
                </ul>
                <ul class="spanishNav">
                    <li><a href="http://localhost:8888/ParamoGaleria/home">Home</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/artists">Artistsio</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Exhibitions</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/offsite">Offsite</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/shop">Shop</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/contact"> Contact</a></li>
                    <li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
                </ul>
            </nav>
          </div>
        </div>
        </section>

index

<?php get_header(); ?>

<?php 

if( have_posts() ):

while( have_posts() ): the_post(); ?>


<p><?php the_content(); ?></p>



<?php endwhile;

endif;

?>

<?php get_footer(); ?>


Answer
via

Replace this line:

<img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">

with the following, to fix the invalid / and dimensions.

<img src="<?php header_image();?>" height="120" width="100" alt="" class="siteLogo" />

Replace this markup:

<span class="spanish">español</span> | <span class="english">english</span>

with the following:

<span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>

Change your JavaScript to the following:

jQuery.noConflict();

jQuery(document).ready(function($) {
  'use strict';

  // You can use the shorter `$` inside the function,
  // even in noConflict mode. `.ready()` passes `$` to you.

  var $toggles = $('.topBar .toggles > span');
  var $uls = $('.topBar nav > ul');

  $toggles.on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    var $this = $(this);

    $toggles.removeClass('active');
    $uls.removeClass('open').hide();

    $this.addClass('active');
    $($this.data('target')).addClass('open').show();
  });
});
Share This
Posted in: