how do I add this Javascript to my wordpress site?

Question

I have something put together on codepen that I want to add to my wordpress site. I am currently developing locally and I can't seem to get the javascript to work. Yes, I read on the codex that you have to register and then enqueue the script. That doesnt work for me....unless I'm missing something. I even tried just putting the script in my header, but that didnt work either. I'm a bit lost and would appreciate some help....its working in codepen fine.

what I want to add: http://codepen.io/figaro/pen/jPqPGG

$(function() {

var srcURL = " http://roostergrin.com "; $("iframe").attr("src", srcURL);

});

I've got the HTML and CSS working, but how do I get the script to work?

Answer 1

The iframes src's are being set, I can only assume you aren't linking to the jQuery library

If you open your browser console you might see this message.

Uncaught ReferenceError: $ is not defined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you cannot link to the jQuery library for whatever given reason, here's a pure javascript method

window.onload=function(){
    var frames=document.getElementsByClassName('devices')[0].getElementsByTagName('iframe');
    for(var i=0; i<frames.length; i++){
        frames[i].setAttribute('src','http://roostergrin.com');
    }
}

If you have any questions about, please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!