Opening social media links in a new window

Question

I'm rather new to jQuery but managed to get some social links to open in a new controlled window instead of new tab. I have a few functions that do the same thing, and this works, but there is always a better method.

I did review the question and answer here and couldn't figure out which would apply to this case.

jQuery(document).ready(function ($) {
  $("#ssba_facebook_share").attr('title','opens in a new pop-up');
  $("#ssba_facebook_share").click(function(){
    w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2);
    cwin = window.open($(this).attr('href'), 'closewin',
   'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600');
    cwin.moveTo(w,h);
    return false;
  });
  $("#ssba_twitter_share").attr('title','opens in a new pop-up');
  $("#ssba_twitter_share").click(function(){
    w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2);
    cwin = window.open($(this).attr('href'), 'closewin',
   'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600');
    cwin.moveTo(w,h);
    return false;
  });
  $("#ssba_google_share").attr('title','opens in a new pop-up');
  $("#ssba_google_share").click(function(){
    w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2);
    cwin = window.open($(this).attr('href'), 'closewin',
   'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600');
    cwin.moveTo(w,h);
    return false;
  });
});

Now, I've attempted a few things to no avail, and one method was this:

jQuery(document).ready(function ($) {
  $("#ssba_facebook_share","#ssba_twitter_share","#ssba_google_share").attr('title','opens in a new pop-up');
    $(this).click(function(){
      w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2);
      cwin = window.open($(this).attr('href'), 'closewin',
      'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600');
      cwin.moveTo(w,h);
      return false;
    });
});

Does anyone have any pointers in this, if possible, with a description of where I went wrong? Or even post a link to a question that goes over this in laymen terms? (I've been looking around and found similar posts, which is how I arrived at where I am now, but still having trouble making complete sense of it.)

Answer 1

First of all, make sure you declare your variables using var:

assigning a value to an undeclared variable implicitly declares it as a global variable (it is now a property of the global object)

Personally, I'd probably add a class to the links in question like shareLink then you could simply do:

$(".shareLink") to select all three links

Alternately, you could try selecting by id ending in _share assuming that quality is unique to these three links:

$("[id$='_share']")

I'd also suggest chaining so that your whole code would be something like this:

$("[id$='_share']").click(function(){
    var w = parseInt((screen.width - 600)/2)
    ,   h = parseInt((screen.height - 400)/2)
    ,   cwin = window.open($(this).attr('href'), 'closewin',
               'status=0,toolbar=0,location=0,menubar=0,directories=0,
               resizable=0,scrollbars=0,height=400,width=600');
    cwin.moveTo(w,h);
    return false;
  }).attr('title','opens in a new pop-up');

Finally, I'd review the documentation on Window.open to be sure you don't want to provide left or top parameters, instead of immediately moving the window, or even a different solution. Make sure you at least read the section on Usability issues