Grow your CSS skills. Land your dream job.

$(this).closest is not a function?

  • # May 14, 2010 at 6:44 pm

    Alrighty,

    I’m blazing new personal trails and trying to teach myself javascript for use within Drupal. I am starting off with Lam Nguyen’s jquery bubble up script as a training wheels test to see if I can implement it within drupal( http://aext.net/2010/04/bubbleup-jquery-plugin/) but I am running into trouble. I worked through a couple of issues but now I am getting this in the Firebug console when I mouseover the li I am applying Lam’s effect to:

    Code:
    $(this).closest is not a function
    $(this).closest(‘li’).css({‘z-index':100000});

    The code is supposed to add a grow on hover effect when mousing over the the icons, and I understand that it is basically failing to target the list element that it is supposed to, but every thing seems hunky dory as far as the code goes (it works if I load his example code straight into Firefox via his included demo html.) In my Drupal implementation, the instructions get to the point where it animates the tooltip, but then the process stops there and throws out the error in the console.

    I am not sure what to make of the error or how to troubleshoot it; is it a problem with the target class (li) or is there something else going on? I’m a total js noob so any advice would probably be useful.

    Here is the js for the bubbleup effect:

    Code:
    /*
    * Bubbleup – Spicing up menu jQuery plugin
    *
    * Tranform the images inside the list items like Mac Dock effect
    *
    * Homepage: http://aext.net/2010/04/bubbleup-jquery-plugin/
    *
    * Copryright? I don’t have any!
    *
    * First written by Lam Nguyen (yah, it’s me)
    * Written again by Jonathan Uhlmann http://jonnitto.ch
    * Thanks to Icehawg (Hey, I don’t know anything from him, just a name http://aext.net/2010/02/learn-jquery-first-jquery-plugin-bubbleup/#comment-6777)
    *
    */

    (function($){
    $.fn.bubbleup = function(options) {
    //Extend the default options of plugin
    var opt = $.extend({}, $.fn.bubbleup.defaults, options),tip = null;

    return this.each(function() {
    var w=$(this).width();
    $(this).mouseover(function(){
    if(opt.tooltip) {
    tip = $(‘

    ‘ + $(this).attr(‘alt’) + ‘

    ‘).css({
    fontFamily: opt.fontFamily,
    color: opt.color,
    fontSize: opt.fontSize,
    fontWeight: opt.fontWeight,
    position: ‘absolute’,
    zIndex: 100000
    }).remove().css({top:0,left: 0,visibility:’hidden’,display:’block’}).appendTo(document.body);
    var position = $.extend({},$(this).offset(),{width:this.offsetWidth,height:this.offsetHeight}),tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;
    tip.stop().css({
    top: position.top – tipHeight,
    left: position.left + position.width / 2 – tipWidth / 2,
    visibility: ‘visible’
    }).animate({top:’-=’+(opt.scale/2-w/2)},opt.inSpeed);
    }

    $(this).closest(‘li’).css({‘z-index':100000});

    $(this).stop().css({‘z-index':100000,’top':0,’left':0,’width':w}).animate({
    left:-opt.scale/2+w/2,
    top:-opt.scale/2+w/2,
    width:opt.scale
    },opt.inSpeed);
    }).mouseout(function(){

    $(this).closest(‘li’).css({‘z-index':100});
    $(this).closest(‘li’).next().css({‘z-index':0});
    $(this).closest(‘li’).next().css({‘z-index':0});
    $(this).closest(‘li’).next().children(‘img’).css({‘z-index':0});

    if(opt.tooltip){tip.remove()}
    $(this).stop().animate({left:0,top:0,width:w},opt.outSpeed,function(){
    $(this).css({‘z-index':0});

    });
    })
    })
    }
    $.fn.bubbleup.defaults = {
    tooltip: false,
    scale:96,
    fontFamily:’Helvetica, Arial, sans-serif’,
    color:’#333333′,
    fontSize:12,
    fontWeight:’bold’,
    inSpeed:’fast’,
    outSpeed:’fast’
    }
    })(jQuery);

    Rob
    # May 14, 2010 at 7:11 pm

    Just to say something probably you have already done – or know…

    But have you linked in your jQuery library? Just because closest is a function within jQuery – if it can’t find that function then my first thought is whether the library has been pulled in?

    # May 14, 2010 at 9:32 pm
    "Robskiwarrior" wrote:
    Just to say something probably you have already done – or know…

    But have you linked in your jQuery library? Just because closest is a function within jQuery – if it can’t find that function then my first thought is whether the library has been pulled in?

    Hey Rob
    I’m pretty sure it loaded. The files (.js) show up in the head of the page for the bubbuleup function, so it appears to be calling it properly. Also it is performing half of the function, which adds a tooltip, but then it fails there. I’m using Drupal’s built in jquery library, but I also tried linking to the library that is in Lam’s tutorial, but unless I did it wrong, it made no difference.

    # May 14, 2010 at 9:38 pm

    Try adding console alerts in your code and reload the page and check to see where the alerts stop. It should tell you where your bug is.

    # May 15, 2010 at 5:48 pm

    WooHoo! Thanks guys, fixed it.

    I went back through and enabled the *specific* js library that Lam suggested (1.4.0), not the most current one in the Google api and not the Drupal jquery library and it worked. Then it stopped working. Then it worked again! I’m going to troubleshoot what is going on in more detail as to why the include Drupal jquery library doesn’t work over the next few days, but for now it is working so I’m calling this case closed for now.

    Thanks for the help Rob and noah

    With this new info I can move on to figuring out the on hover js issue I was looking into earlier. I’ll update my previous post with what I work out for as a solution.

    # May 23, 2010 at 5:39 am

    Alright so an update and a reworking of the problem.

    I was able to get the basics of Drupal jquery functioning with this plugin and I learned a bit about the two big issues I was having with the Bubble Up script.

    1. The jquery bubbleup uses jquery 1.4.x, which is not supported by Drupal yet (only up to 1.3.x).

    2. Drupal has a known issue regarding resolving paths, which makes a problem for theming with hardcoded html paths in content areas.

    On the first issue, it seems so far that just linking to the Google hosted file works. My uderstanding is that others have tried to get Jquery 1.4 to work with Drupal, but it is still buggy and causes problems, mainly with the output filter system Views. As of yet I haven’t noticed any issues, so fingers crossed.

    The second issue is more of a problem. Using a href img src="some path" in the body of a content block doesn’t work with clean url’s for a reason that is outside of my ability to understand at this point. Suffice it to say that you apparently need to force Drupal to use a set base path for the file system, and though there seems to be a way to use php and base_path . drupal_get_path commands, I couldn’t get it to work. Mixing php and html in a block wouldn’t fly for some reason.

    So I am back to trying to resolve the issue using CSS. The problem I am having now is that my planned approach to add classes to each li element and then assign images the images I need to them seems to break the javascript function or not apply the images as expected.

    I tried changing this

    Code:
  • Full RSS Feed

to this

Code:
  • Full RSS Feed
  • and then use CSS to add a background image to bypass Drupal’s inability to find the image path. Actually what it is doing is not using the theme folder as the base path for nodes for some reason, but that’s probably TMI…

    Code:
    .feedimg{
    background: url(images/feed/feed.png) no-repeat;
    width: 10px;
    }

    But the image wouldn’t appear and/or broken the javascript function. Given the bubbleup.js function above, is there a way to formulate the li class or the javascript function to accept new classes for background images? Or am I going about this the wrong way from the Javascript/CSS perspective?

    Viewing 6 posts - 1 through 6 (of 6 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".