Uncaught TypeError: Cannot read property 'HoverAlls' of null

Question

I can't figure out why I'm getting this error. I have read all documentation provided by the developer.

I placed this code in the Layout Update XML window:

<default>
<reference name="head">
    <block type="core/text" name="your.block.name">
       <action method="setText">
          <text><![CDATA[<script type="text/javascript">
    $(window).load(function(){
        $('.HoverAlls_Caption').HoverAlls({
            "coords":"0,100||0,75||0,100",
            "text_coords":"0,50||0,5||0,50",
            "speed" : "220,220",
            "text_speed" : "400,200",
            "opacity" : "0,1",
            "link_control" : "false,_blank",
            "bg_class" : "captionBackground",
            "text_class" : "captionText"
        });
    });
</script>]]></text>
       </action>
    </block>
    </reference>
</default>

Here is the site I'm trying to work on: http://staged.tailwatersflyfishing.com

Username: admin Password: admin

Thank you in advance! :)

Answer 1

I'm guessing above code is jQuery. In that case you'll need to wrap the code to prevent issues with the Magento Prototype library

<default>
<reference name="head">
    <block type="core/text" name="your.block.name">
       <action method="setText">
          <text><![CDATA[<script type="text/javascript">
    jQuery.noConflict(); // prevent conflicts with prototype

    (function($){ // and wrap it
    $(window).load(function(){
        $('.HoverAlls_Caption').HoverAlls({
            "coords":"0,100||0,75||0,100",
            "text_coords":"0,50||0,5||0,50",
            "speed" : "220,220",
            "text_speed" : "400,200",
            "opacity" : "0,1",
            "link_control" : "false,_blank",
            "bg_class" : "captionBackground",
            "text_class" : "captionText"
        });
    });
    })(jQuery);
</script>]]></text>
       </action>
    </block>
    </reference>
</default>

Answer 2

Try add this directly after add jquery library

...
<script type="text/javascript">
$.noConflict();
jQuery( window ).load(function( $ ) {
  // Code that uses jQuery's $ can follow here.
  $('.HoverAlls_Caption').HoverAlls({
     ....
  })
});
// Code that uses other library's $ can follow here.
</script>
...

See jQuery.noConflict()

Answer 3

I'm guessing you're placing this in local.xml within your current package/theme. I would suggest placing this snippet at the bottom of the page by targeting the "before_body_end" block. (you probably need to wait for DOM ready anyways).

<layout>
  <default>
    <reference name="before_body_end">
        <block type="core/text" name="footer.js.hoveralls">
            <action method="setText">
                <text>
                  <![CDATA[<script type="text/javascript">

$('.HoverAlls_Caption').HoverAlls({
        "coords":"0,100||0,75||0,100",
        "text_coords":"0,50||0,5||0,50",
        "speed" : "220,220",
        "text_speed" : "400,200",
        "opacity" : "0,1",
        "link_control" : "false,_blank",
        "bg_class" : "captionBackground",
        "text_class" : "captionText"
    });
                  </script>]]>
                </text>
            </action>
        </block>
    </reference>
  <default>
</layout>

Make sure you clear the layout cache as well.

Answer 4

Ok - this is what did the trick...

I added this to the local.xml file within the open

<block type="core/text" name="your.block.name">
           <action method="setText">
              <text><![CDATA[<script type="text/javascript">
        jQuery.noConflict(); // prevent conflicts with prototype

        (function($){ // and wrap it
        $(window).load(function(){
            $('.HoverAlls_Caption').HoverAlls({
                "coords":"0,100||0,75||0,100",
                "text_coords":"0,50||0,5||0,50",
                "speed" : "220,220",
                "text_speed" : "400,200",
                "opacity" : "0,1",
                "link_control" : "false,_blank",
                "bg_class" : "captionBackground",
                "text_class" : "captionText"
            });
        });
        })(jQuery);
    </script>]]></text>
           </action>
        </block>

This block was placed within the reference tag that was already opened in the file