Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Senior Member
    Join Date
    Nov 2012
    Posts
    107
    Member #
    33949
    Liked
    2 times

    Is the following code correct to call and enqueue a javascript in a child theme

    Hi, I read that I must place a call to javascript code, in my header.php file.

    I put the following code in my header.php file:to call the javascript code.

    I have renamed the javascript file: custom_script.js and put it in a folder named js, which is in the child theme folder called: wpbdemo folder.

    I have also tried placing the code in functions.php to call up the javascript code, but nothing seems to work.

    function my_scripts_method() {
    wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . "/js/custom_script.js
    array( 'query' )
    );
    }
    add action( 'wp_enqueue_scripts", 'my_scripts_method' );


    and this is the javascript code in custom_.script.js file., that I am trying to call up.

    <script>
    // Create Countdown
    var Countdown = {

    // Backbone-like structure
    $el: $('.countdown'),

    // Params
    countdown_interval: null,
    total_seconds : 0,

    // Initialize the countdown
    init: function() {

    // DOM
    this.$ = {
    hours : this.$el.find('.bloc-time.hours .figure'),
    minutes: this.$el.find('.bloc-time.min .figure'),
    seconds: this.$el.find('.bloc-time.sec .figure')
    };


    // Init countdown values
    this.values = {
    hours : this.$.hours.parent().attr('data-init-value'),
    minutes: this.$.minutes.parent().attr('data-init-value'),
    seconds: this.$.seconds.parent().attr('data-init-value'),
    };

    // Initialize total seconds
    this.total_seconds = this.values.hours * 60 * 60 + (this.values.minutes * 60) + this.values.seconds;


    // Animate countdown to the end
    this.count();
    },

    count: function() {

    var that = this,
    $hour_1 = this.$.hours.eq(0),
    $hour_2 = this.$.hours.eq(1),
    $min_1 = this.$.minutes.eq(0),
    $min_2 = this.$.minutes.eq(1),
    $sec_1 = this.$.seconds.eq(0),
    $sec_2 = this.$.seconds.eq(1);

    this.countdown_interval = setInterval(function() {


    if(that.total_seconds > 0) {


    --that.values.seconds;


    if(that.values.minutes >= 0 && that.values.seconds < 0) {


    that.values.seconds = 59;
    --that.values.minutes;
    }


    if(that.values.hours >= 0 && that.values.minutes < 0) {


    that.values.minutes = 59;
    --that.values.hours;
    }


    // Update DOM values
    // Hours
    that.checkHour(that.values.hours, $hour_1, $hour_2);


    // Minutes
    that.checkHour(that.values.minutes, $min_1, $min_2);


    // Seconds
    that.checkHour(that.values.seconds, $sec_1, $sec_2);


    --that.total_seconds;
    }
    else {
    clearInterval(that.countdown_interval);
    }
    }, 1000);
    },

    animateFigure: function($el, value) {

    var that = this,
    $top = $el.find('.top'),
    $bottom = $el.find('.bottom'),
    $back_top = $el.find('.top-back'),
    $back_bottom = $el.find('.bottom-back');


    // Before we begin, change the back value
    $back_top.find('span').html(value);


    // Also change the back bottom value
    $back_bottom.find('span').html(value);


    // Then animate
    TweenMax.to($top, 0.8, {
    rotationX : '-180deg',
    transformPerspective: 300,
    ease : Quart.easeOut,
    onComplete : function() {


    $top.html(value);


    $bottom.html(value);


    TweenMax.set($top, { rotationX: 0 });
    }
    });


    TweenMax.to($back_top, 0.8, {
    rotationX : 0,
    transformPerspective: 300,
    ease : Quart.easeOut,
    clearProps : 'all'
    });
    },

    checkHour: function(value, $el_1, $el_2) {

    var val_1 = value.toString().charAt(0),
    val_2 = value.toString().charAt(1),
    fig_1_value = $el_1.find('.top').html(),
    fig_2_value = $el_2.find('.top').html();


    if(value >= 10) {


    // Animate only if the figure has changed
    if(fig_1_value !== val_1) this.animateFigure($el_1, val_1);
    if(fig_2_value !== val_2) this.animateFigure($el_2, val_2);
    }
    else {


    // If we are under 10, replace first figure with 0
    if(fig_1_value !== '0') this.animateFigure($el_1, 0);
    if(fig_2_value !== val_1) this.animateFigure($el_2, val_1);
    }
    }
    };


    // Let's go !
    Countdown.init();
    </script>

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com