Setting inline URL with Jquery

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?

Btw, it should be target="_blank" if you want each link to open in a new window and not just a new one that'll be named blank and each subsequent link you click will open it that window instead of a new one. — stealthyninja
– stealthyninja, Commented Jan 25, 2011 at 19:09

user113716 · Accepted Answer · 2011-01-25 19:55:15Z

2

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);
}

edited Jan 25, 2011 at 19:55

answered Jan 25, 2011 at 18:58

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

JCHASE11 Over a year ago

I tried this and it doesnt function as well.....It blinks and doesnt enable a solid hover

user113716 Over a year ago

@JCHASE11: Somehow I didn't notice that you were doing it on hover. Do you really want to add a new duplicate <img> every time you hover? Seems like you should do it once, then just do a fadeIn/Out after that.

JCHASE11 Over a year ago

You are correct, that is probably not the best way of doing it, but I am not familiar with your method...If you can rewrite the code so it works with my hover, Id gladly accept

user113716 Over a year ago

@JCHASE: I just updated. Now each <a> will only append new elements if they're not currently there. Give it a shot and let me know how it went.

stealthyninja Over a year ago

@JCHASE11: Yeah...hovering over the links by The Vancouver Sun creates some pretty funky effects.

|

hunter · Accepted Answer · 2011-01-25 18:53:57Z

1

$('<a href="http://www.facebook.com/sharer.php?u=' 
    + $(this).attr("href") + ' target="blank">

answered Jan 25, 2011 at 18:53

hunter

63.8k19 gold badges115 silver badges115 bronze badges

1 Comment

jondavidjohn Over a year ago

you're missing a trailing double-quote after the href=""

Collectives™ on Stack Overflow

Setting inline URL with Jquery

2 Answers 2

13 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related