How to add javascript codes?

  • PODxt

    (@podxt)


    11 years ago

    Hi, I spent 8 hours now reading everything I could find on javascript and wordpress, but everything I read was either incomplete or paradoxal with other tutorials.

    I’m trying to add a scroll to top arrow link and image on all my pages. I’m using the 2013 theme with a child theme for testing purpose located here: \wp-content\themes\twentythirteen-child

    In this folder I have a folder called js which contains 3 files:
    scrollup.js
    scrollup.css
    arrow.png

    Here is scrollup.js content:

    $(document).ready(function(){ 

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        }); 

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

 });

    scrollup.css content:

    .scrollup {
	width: 40px;
    height: 40px;
    opacity: 0.3;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background: url('arrow.png') no-repeat;
}

.scrollup:hover {
	opacity: 1;
}

    I added to my functions.php file, which is located in my twentythirteen-child folder:

    <?php

function my_scripts_method() {
wp_register_script('scrollup', get_stylesheet_directory_uri() . '/js/scrollup.js', array('jquery'),'', true);
wp_enqueue_script('scrollup');
}

add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

<?php
function wpb_adding_styles() {
wp_register_style('scrollup', get_stylesheet_directory_uri() . '/js/scrollup.css');
wp_enqueue_style('scrollup');
}

add_action( 'wp_enqueue_styles', 'wpb_adding_styles' );
?>

    And last but not least, I added this html code in one of my pages to create the scroll to top link:

    <a href="#" class="scrollup">Scroll</a>

    I’ll find a way to implement this link in every page of the site later, right now I’m just focusing on one page. And I can’t get it to work at all. Nothing happens.

    What am I doing wrong here?? I’m going crazy here.
    Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)
  • Endlyss

    (@akel-res)

    I was in the same position as you once.
    My solution came with how I had my javascript.

    instead of
    $(document).ready(function(){

    use
    jQuery( document ).ready(function( $ ) {

    Hope that helps. if not, lemme know.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi, I spent 8 hours now reading everything I could find on javascript and wordpress, but everything I read was either incomplete or paradoxal with other tutorials.

    Did you see this codex page https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script ?

    Specifically this part:

    The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

    https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

    Nothing happens.

    You really ought to be using a browser developer tool like Firebug to see what’s going on with your JavaScript (check the “console” tab). Or you could just view your page’s source code to see if your JS or CSS files are being loaded at all.
    If you are doing all of that then you need to convey to us what exactly doesn’t work, rather than, “Nothing happens”.

    Thread Starter PODxt

    (@podxt)

    @endlyss
    Thanks for the suggestion, I just tried that but the script is still not triggered. I really don’t get it.

    Thread Starter PODxt

    (@podxt)

    @andrew Nevins
    I’m no expert, and I gave as much informations as I could.

    I tried to decipher the source page, and it doesn’t seem to trigger my css or js.

    The console tab? I don’t even know what this is. I cheched that and it mentionned : Event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

    I can’t even tell if this is related to my problem here.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link your page?

    Endlyss

    (@akel-res)

    @podxt
    Sorry that my solution did not help.

    I could provide an alternative to what you are trying to do?
    I take it you are making a back-to-top button with an animated scroll.

    The HTML

    <a href="javascript:void(0);" class="scrollup">Scroll</a>

    The Javascript (put this just before the end body tag in the footer.php)

    jQuery(document).ready(function ($) {
	$(".scrollup").click(function () {
		$("body").animate({ scrollTop: "0px" });
	});
});

    And then of course whatever CSS you wanna add to it.
    If you place all of the above code (excluding CSS) in the footer.php just before the end body tag, then you should be able to see it on all pages as well.

    Thread Starter PODxt

    (@podxt)

    @andrew Nevins
    I’m working offline so I don’t have anything online for now. I’m trying to set up a dummy website for testing purpose but it will take some days (weeks?) for my internet provider to activate my ftp and SQL accounts as these is a free service so there’s no real customer support. Once everything is up and running, I’ll put the link here.

    I noticed that the js was actually loaded into the source page, right before another js also triggering JQuery. The 2nd js comes from the WP 2013 theme. But I can’t find any trace of my css file (scrollup.css).

    I also noticed that the warning I got in the console tab “Event.returnValue is deprecated. Please use the standard event.preventDefault() instead.” disappeared when I removed my code from the footer (so the js is not triggered).

    @endlyss
    Thanks for the help, I just did what you suggested, the script is loading in the source page, there’s no warning from Chrome in the Console tab but, still no sign from my CSS! I used the exact same css as in my first post. I only removed “.scrollup:hover {” as it doesn’t seem to work (I think I read you needed to use js to use the hover option).

    Thread Starter PODxt

    (@podxt)

    I ran some more tests and I got the script to work by:
    – changing class to id for the css and putting the css code in my main css
    – and just adding the following code to the footer

    <?php
wp_enqueue_script( 'scrollup', get_stylesheet_directory_uri() . '/js/scrollup.js', array( 'jquery' ), '',  true );
?>

    Is there a reason why it doesn’t work with “class”? Using class instead of id wouldn’t let the custom css to load.

    And more importantly, why is it useless to use wp_register_script() and add_action() ?? I thought these were required when adding js scripts to wordpress!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to add javascript codes?’ is closed to new replies.