Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 24, 2015 at 3:02 pm #417081
    WP Turned UP

    Hello. I have an element I’m adding to Enfold, using HTML, CSS and some custom JavaScript. I have everything but the JS in place and working. My site is still in local development.

    How would I go about adding the following JS to the Enfold Child theme? Right now, the child theme Functions.php is at it’s defaults.

    var svg = document.getElementById(‘menu’),
    items = svg.querySelectorAll(‘.item’),
    trigger = document.getElementById(‘trigger’),
    label = trigger.querySelectorAll(‘#label’)[0],
    open = true,
    angle = 45;

    //set up event handler
    trigger.addEventListener(‘click’, toggleMenu, false);
    // svg.style.pointerEvents = “none”;

    //toggle menu when trigger is clicked
    function toggleMenu(event) {
    if (!event) var event = window.event;
    event.stopPropagation();
    open = !open;
    if (open) {
    var tl = new TimelineLite();
    tl.to(items, 0.2, {scale:1, ease:Back.easeOut.config(4)}, 0.05);
    for(var i=0; i<items.length; i++){
    tl.to(items[i], 0.7, {rotation:-i*angle + “deg”, ease:Bounce.easeOut}, 0.35);
    }
    label.innerHTML = “-“;
    svg.style.pointerEvents = “auto”;
    } else {
    var tl = new TimelineLite();
    for(var i=0; i<items.length; i++){
    tl.to(items[i], 0.3, {rotation: 0, ease:Circ.easeOut}, 0.05);
    }
    tl.to(items, .3, {scale:0, ease:Back.easeIn}, 0.3);
    label.innerHTML = “+”;
    svg.style.pointerEvents = “none”;
    }

    }

    svg.onclick = function (e) {
    e.stopPropagation();
    }
    //close the nav when document is clicked
    document.onclick = function () {
    open = false;
    var tl = new TimelineLite();
    for(var i=0; i<items.length; i++){
    tl.to(items[i], 0.3, {rotation: 0, ease:Circ.easeOut}, 0.05);
    }
    tl.to(items, .3, {scale:0, ease:Back.easeIn}, 0.3);
    label.innerHTML = “+”;
    svg.style.pointerEvents = “none”;
    };

    Thank you,
    Ryan

    March 24, 2015 at 3:07 pm #417092
    Yigit

    Hi rlogan2334!

    Please add your code to bottom of avia.js file and then add following code to Functions.php file of your child theme

    function wp_change_aviajs() {
   wp_dequeue_script( 'avia-default' );
   wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}
add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );

    Cheers!
    Yigit

    March 24, 2015 at 3:27 pm #417105
    WP Turned UP

    Thanks for the quick reply. I keep getting the following error when I try to save the Child function.php

    Parse error: syntax error, unexpected ‘{‘ in D:\InstantWP_4.4.2 – Enfold – Sandbox\iwpserver\htdocs\wordpress\wp-content\themes\enfold-child\functions.php on line 8

    Current function.php
    <?php

    /*
    * Add your own functions here. You can also copy some of the theme functions into this file.
    * WordPress will use those functions instead of the original functions then.
    */

    function wp_change_aviajs() {
    wp_dequeue_script( ‘avia-default’ );
    wp_enqueue_script( ‘avia-default-child’, get_stylesheet_directory_uri().’/js/avia.js’, array(‘jquery’), 2, true );
    }

    add_action( ‘wp_print_scripts’, ‘wp_change_aviajs’, 100 );

    March 24, 2015 at 3:30 pm #417107
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately please?

    Cheers!
    Yigit

    March 24, 2015 at 3:32 pm #417109
    WP Turned UP

    I’m developing this locally at the moment. If need be, I can reproduce this site online later today.

    All I did was paste in the code your provided. I’ve never touched the Child function.php until this morning.

    March 24, 2015 at 3:36 pm #417111
    Yigit

    Hey!

    Have you placed your modified inside wp-content\themes\enfold-child\js folder?

    Regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.