2
\$\begingroup\$

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

\$\endgroup\$
1
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ 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! \$\endgroup\$ – darcher Dec 4 '13 at 0:28
  • \$\begingroup\$ @darcher Yes, I believe all of those would work. Jquery provides all sorts of selectors which is part of why it's so popular. \$\endgroup\$ – Daniel Dec 4 '13 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.