0
Welcome Guest! Login
0 items Join Now

Jquery codes don't work.. tried everything I found in google

Last Post
Search Topic
    • shenk's Avatar
    • shenk
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 11

    Jquery codes don't work.. tried everything I found in google

    Posted 11 years 10 months ago
    • I want to wrap my img with a span and set the image to be the span's background image so I can do some css trick to the image. I found this code
      <script type="text/javascript">
$(document).ready(function(){
 
     $("img").load(function() {
          $(this).wrap(function(){
               return '<span class="image-wrap ' + $(this).attr('class') + '"'+'style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
          });
          $(this).css("opacity","0");
     });
});
</script>

      and it worked perfect well in a single html file.
      However, when I added this code to my ~/template/index.php, it didn't work and browser reported:

      Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'

      It seemed the Jquery wasn't properly loaded, I tried to add the following code to my index.php:

      <script type="text/javascript" src=" ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js "></script>

      and also tried installing Jquery Easy plugin and enable it, but none of them worked.

      What is wrong?
    #971573
    • Shazdeh's Avatar
    • Shazdeh
    • Elite Rocketeer
    • Posts: 4984
    • Thanks: 29

    Re: Jquery codes don't work.. tried everything I found in google

    Posted 11 years 10 months ago
    • Hi,
      you need to call the dom ready method like this:
      jQuery(document).ready(function($){
    // rest of the code
});
      This uses the global "jQuery" instance instead of dollar sign so it doesn't collide with MooTools. Note that inside the ready function you can use the dollar sign since we pass it in, and so it works fine.
    • Please don't PM unless requested ;)
      Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
      Please provide the URL to the issue.
      And please mark the thread as solved if the issue is resolved.
    #975988

Time to create page: 0.044 seconds