Question

I am using the following code to show social icons on hover: You can see the site here: http://vitaminjdesign.com/adrian/

$('a').live('mouseover mouseout', function(event) {
          if (event.type == 'mouseover') {

            $('<a href="http://www.facebook.com/sharer.php?u=(this)" target="blank"><img src="images/facebook.gif" class="facebook" alt="facebook"></a>').appendTo(this).fadeIn(500);
            $('<a href="#"><img src="images/twitter.gif" class="twitter" alt="twitter"></a>').appendTo(this).fadeIn(500);
          } else {
            $('a').find('.facebook,.twitter').stop(true, true).fadeOut(500);
          }
        });

The problem I am having is within the facebook URL where you see (this). I want to dynamically add in the URL of the link associated with the current a being hovered. Basically, I want to add in the URL of the element being hovered on into the (this) area of the URL. Anyone?

Answer 1

A little nicer way (in my opinion) to create elements is to use the properties object argument.

Also, I assume you only want to load the new elements once, then just fade them thereafter.

$('.rssRow').live('mouseenter mouseleave', function(event) {
      var twitFace = $(this).find('.facebook,.twitter');
      if (event.type == 'mouseover') {
            if( twitFace.length ) {
                twitFace.fadeIn(500);
            } else { 
                loadTwitFace.call(this);
            }
      } else {
            twitFace.stop(true, true).fadeOut(500);
      }
 });

function loadTwitFace() {

    $('<a>', { href:'http://www.facebook.com/sharer.php?u="' + $(this).find('a').attr('href') + '"',
             target:"blank"})
        .append($('<img>',{       src:'images/facebook.gif',
                            className:'facebook',
                                  alt:'facebook'}))
        .appendTo(this)
        .fadeIn(500);
}