Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Craig Watson
Craig Watson
27,930 Points

Help converting some jQuery to JavaScript :)

Hi all :)

I'm just on with a little snippet of code that requires being JavaScript alone rather than containing jQuery.

Reason being I am working with a WordPress site and I need to use the window.onload JavaScript to run this little snippet before the document is loaded.

Here is the Code:

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

    if ( localStorage.asideWelcomeHidden == "True" ) {
         $(".aside-welcome").addClass("hidden");
    }
    $(".aside-welcome > .close").click( function() { 
    $(".aside-welcome").addClass("hidden");
        localStorage.asideWelcomeHidden = "True";
    });

});

As you can see above I cant run the JS in the normal way I would for wordpress using jQuery and JavaScript is not my strongest area to say the least :)

Any help will be greatly appreciated!

Craig

3 Answers

Kristian Terziev
Kristian Terziev
28,449 Points

Hello Craig,

Try this:

var aside_welcome = document.getElementsByClassName('aside-welcome')[0];

if ( localStorage.asideWelcomeHidden == "True" ) {
     aside_welcome.className += " hidden";
}

var close_button = document.getElementsByClassName('close')[0];

close_button.addEventListener("click", function() {
  aside_welcome.className += " hidden";
  localStorage.asideWelcomeHidden = "True";
});
Craig Watson
Craig Watson
27,930 Points

Hi Kristian :)

Thanks for helping out, I have had to try and move things around a little and manged to get it working with a test on codepen but when I put it into practice on the WordPress site it doens't work at all :S

Maybe you can spot something I'm doing wrong, here is my code again:

        <script type="text/javascript">

            var aside_welcome = document.getElementById("aside-welcome-main");
            var close_button = document.getElementById("aside-welcome-close");

            document.onload=function() {

                if ( localStorage.closeAsideWelcome == "True" ) {
                    aside_welcome.className += " hidden";
                }

            };

            close_button.addEventListener("click", function(e) {

                aside_welcome.className += " hidden";
                localStorage.setItem("closeAsideWelcome", "True");

            });

        </script>

I have been loading this in the head to run as soon as possible because the element in question kept flashing up then disapearing when the code finally ran from the footer in the normal WordPress way which was using jQuery syntax at the time.

I thought by running the code in the head and it JavaScript rather than jQuery, I would cut out the load time of jQuery and the page :S

Hope you can help lol

Craig

Craig Watson
Craig Watson
27,930 Points

I finally got there :) for any future reference below is the finished JS and HTML that the ode was related to.

JS

        <script type="text/javascript">

            window.onload = function () {

                var aside_welcome = document.getElementById("aside-welcome-main");

                if ( localStorage.closeAsideWelcome != "True" ) {

                        document.getElementById("aside-welcome-main").className = 
                            document.getElementById("aside-welcome-main").className.replace( /(?:^|\s)hidden(?!\S)/g , '' );

                        //aside_welcome.className += " hidden";
                }

            };

            // Event listner is in HTML attr on button
            function closeAsideWelcome(e) {

                var aside_welcome = document.getElementById("aside-welcome-main");

                aside_welcome.className += " hidden";
                localStorage.setItem("closeAsideWelcome", "True");

            };

        </script>

HTML

                    <div class="aside-welcome hidden" id="aside-welcome-main">

                        <button type="button" class="close" aria-label="Close" id="aside-welcome-close" onclick="closeAsideWelcome()"><span aria-hidden="true">&times;</span></button>

                        <h3>Welcome To DigiMouse</h3>
                        <p>DigiMouse is your hub of super easy access to helpful code and docs that have helped me learn and enjoy web design and development in the way I do today!</p>
                        <p>This is a super cool sidebar... SCROLL DOWN and gain access to all areas of the site from this sidebar and any extras I decide to through in on the way down.</p>

                    </div>

Craig

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

Hello Craig,

Is there a reason for the event listener to be outide of the onload function? Also it is posible that JavaScript is trying to get the elements by id before they actualy exist so add the first two lines insite it too. The other thing I can think of right now is the document.onload method might have a problem with the way that WordPress delivers the content so you might try using the window.onload.

Craig Watson
Craig Watson
27,930 Points

You are correct, I was trying to get an element by its Id before it even existed :)

I have it working now but still cannot get rid of the element flashing up on page loads :S

Craig

Craig Watson
Craig Watson
27,930 Points

I've just had a quick thought, I need to try the function out in reverse some how so that the element is display none by default and only displays if they HAVE NOT clicked the button ....

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

Thats exactly what you should do to solve the flashing problem.