# Opening social media links in a new window

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',
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',
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',
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.)

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',

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
• Ah, I wasn't aware I could use attribute selectors like in css (which I'm much more familiar with). so I could have gone with either id^=ssba_, id\$=_share, or id*=ssba_ / id*=_share. The links are generated from a plugin in wordpress, to prevent breaking anything should the plugin update I don't want to edit the actual plugin source files (e.g. no classes). So in this case both "ssba_" and "_share" are unique to the links generated. I'll definitely read up on 'window.open' and eventually do away with the plugin and build a modal in it's place. But great post, thanks for the insight! – darcher Dec 4 '13 at 0:28