Blogger: Uncaught ReferenceError $ is not defined

I am following the tutorial here: http://tympanus.net/codrops/2013/04/30/text-opening-sequence-with-css-animations/

I'm trying to add this to a Blogger XML template. The script doesn't work, I keep getting an error in my Chrome Console saying it's not defined, but as far as I can tell it is. Here is what I'm using:

<div class="intro-container">   
    <div class="os-phrases" id="os-phrases">
        <h2>Hello...</h2>
        <h2>I'm Draven Xarcell Vestatt</h2>
        <h2>I Provide</h2>
        <h2>Organzied Creative Services</h2>
        <h2>Through</h2>
        <h2>Xarcell Studios</h2>
    </div>
</div>

<script type='text/javascript'>
    $(document).ready(function() {
        $("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering(); 
    });
</script>

My jQuery call is at the end of the document:

<!-- Let's add jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

and the javascript file lettering.js is included within my XML template file(meaning no external js). I have tried linking directly to the file in the tutorial webpage, but gives the same results.

BTW, I have the script working in a blank html document, but it doesn't work in a Blogger template. I even got it working in jsFiddle just fine: http://jsfiddle.net/BULLr/

Answers


jQuery should be included before it is used - so it should be added before your script


Need Your Help

Read in .vtk binary file using vtkGenericDataObjectReader

c++ vtk

I'm trying to read a legacy .vtk file in c++ and populate my data structures using vtkGenericDataObjectReader (for a Molecular Dynamics simulation). I've searched through the documentation and

What is the difference between Java RMI and RPC?

java rmi rpc

What is the actual difference between Java RMI and RPC?