Use my existing jquery function in drupal 7

Question

I have my function like this in jquery

$(document).ready(function(){

    // set the map-wrapper width and height to match the img size
    $('#map-wrapper').css({'width':$('#map-wrapper img').width(),
                      'height':$('#map-wrapper img').height()
    })

    for (i=0; i<$(".pin").length; i++)
    {
        // store initial tooltips contents within an array
        var tooltipContent = new Array();
        tooltipContent[i] = $(".pin").eq(i).html();

        // set tooltip direction type - up or down
        var tooltipDirection = 'tooltip-up';             
        if ($(".pin").eq(i).hasClass('pin-down'))
        {
            tooltipDirection = 'tooltip-down';
        }

        // append the tooltip
        $("#map-wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
                                            <div class='tooltip'>" + tooltipContent[i] + "</div>\
                                    </div>");
    }    

    // show/hide the tooltip
    $('.tooltip-up, .tooltip-down').mouseenter(function(){
                $(this).children('.tooltip').fadeIn(100);
            }).mouseleave(function(){
                $(this).children('.tooltip').fadeOut(100);
            })
});

But i am unable to use it in Drupal 7 . So what changes do i need to make for it.

Answer 1

Your are missign two important things. First, in Drupal 7 jQuery is namespaced to avoid conflict with other JavaScript libraries. So you should either wrap your code in an anonymous function to assign the jQuery object to the $ variable (ie. (function($){...})(jQuery);) or use jQuery instead of $.

Second, you shouldn't use $(document).ready() but add you code as a the attach function under the Drupal.behaviors.yourModule namespace. Behaviors are attached on the documentobject on load, but also to any new element added to the page by any well behaving scripts (the ones that call Drupal.attachBehaviors()). Finally, because behaviors could be attached several times to the same DOM tree, you should avoid processing the same element multiple times. This can easily be done with jQuery Once.

(function($){
  Drupal.behaviors.myFunkyModule = {
    attach: function(context, settings) {
      // Get the map wrapper element (anywhere in the document).
      var map_wrapper = $('#map-wrapper');
      //Set the map-wrapper width and height to match the img size only once.
      map_wrapper.once('my-funky-module').css({
        width: $('#map-wrapper img').width(),
        height: $('#map-wrapper img').height()
      })
      // Get the (un-processed) .pin elements, in the context (ie. DOM tree) our behavior is attached to.
      var pins = $(".pin", context).once('my-funky-module');
      // Process the pin elements (note: this could also be done using jQuery.each()).
      for (i=0; i<pins.length; i++) {
           var pin = pins.eq(i);
          // store initial tooltips contents within an array
          var tooltipContent = new Array();
          tooltipContent[i] = pin.html();

          // set tooltip direction type - up or down
          var tooltipDirection = 'tooltip-up';             
          if (pin.hasClass('pin-down')) {
              tooltipDirection = 'tooltip-down';
          }

          // Append the tooltip elements to the #map_wrapper one.
          map_wrapper.append("<div style='left:"+pin.data('xpos')+"px;top:"+pin.data('ypos')+"px' class='" + tooltipDirection +"'><div class='tooltip'>" + tooltipContent[i] + "</div></div>");
      }    

      // Add event listeners to show/hide the tooltip, again this only need to be done once.
      $('.tooltip-up, .tooltip-down').once('my-funky-module').mouseenter(function(){
        $(this).children('.tooltip').fadeIn(100);
      }).mouseleave(function(){
        $(this).children('.tooltip').fadeOut(100);
      });
    }
  }
})(jQuery);

Answer 2

Try wrapping the entire function into this:

(function($) {

  //.. your function here ..



}(jQuery));

then you would get:

(function($) {

  $(document).ready(function(){

      // set the map-wrapper width and height to match the img size
      $('#map-wrapper').css({'width':$('#map-wrapper img').width(),
                        'height':$('#map-wrapper img').height()
      })

      for (i=0; i<$(".pin").length; i++)
      {
          // store initial tooltips contents within an array
          var tooltipContent = new Array();
          tooltipContent[i] = $(".pin").eq(i).html();

          // set tooltip direction type - up or down
          var tooltipDirection = 'tooltip-up';             
          if ($(".pin").eq(i).hasClass('pin-down'))
          {
              tooltipDirection = 'tooltip-down';
          }

          // append the tooltip
          $("#map-wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
                                              <div class='tooltip'>" + tooltipContent[i] + "</div>\
                                      </div>");
      }    

      // show/hide the tooltip
      $('.tooltip-up, .tooltip-down').mouseenter(function(){
                  $(this).children('.tooltip').fadeIn(100);
              }).mouseleave(function(){
                  $(this).children('.tooltip').fadeOut(100);
              })
  });

}(jQuery));

Answer 3

Try this:

(function($){

  // your code

})(jQuery);

Have you added the file with the drupal_add_js() function or have you added it to your template.info file?