Is it Impossible to Use HTML Such as

Question

I was recently asking a question in regards to how to create a mailto share button that opens a window in which ones can enter email addresses to send to (How to Create a Mailto Share Button that Opens a Window in which Ones Can Enter Email Address to Send to) I was provided one great response by user, Ron Royston, in which he suggested, "You could create a page just to take the email string then do whatever you want with it server side. Make the popup/popover small like:

<a href="/my-email-collector-page"
   onclick="window.open(this.href,'targetWindow',
                                   'toolbar=no,
                                    location=no,
                                    status=no,
                                    menubar=no,
                                    scrollbars=yes,
                                    resizable=yes,
                                    width=200px,
                                    height=120px');
 return false;">email</a>"

This is a great method, however, when I insert this code into my JavaScript sheet (at my CodePen here: https://codepen.io/IDCoder/full/rpdBQJ/), which contains my other social media share button codes, this code disables the code for those buttons? I'm trying to figure out why that is...is it because of the usage of <a href="........"></a> in a JavaScript environment?? If so, is there a way to integrate Ron's code into a code that includes a click function like this:

$('.whatever classname').click(function() {

window.open();

});

In essence, beginning with, window.open(this.href,'targetWindow',.... how can I insert the code below: into the above code?

window.open(this.href,'targetWindow',
                                       'toolbar=no,
                                        location=no,
                                        status=no,
                                        menubar=no,
                                        scrollbars=yes,
                                        resizable=yes,
                                        width=200px,
                                        height=120px');
     return false;

score 1 · Accepted Answer · answered Jan 25 '18 at 07:24

1

You can set a data-* attribute at <button> element pointing to an HTML document that you create

<button data-href="/path/to/html/document" id ="EM" type="button" class="Email share-page-on-Email">Email</button>

var emailWindowSettings = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=200px,height=120px';

$("#EM").on("click", function() {
  var emailWindow = window.open(this.dataset.href,'targetWindow', emailWindowSettings);
  return false;
})

answered Jan 25 '18 at 07:24

guest271314

1
15
104
177

hi! Thanks! I am definitely going to try this out and get back to you! Wow! – codebwoy Jan 25 '18 at 07:36
It worked! It just links to a 404 Error page, though, because I can't create multiple linked pages on CodePen, unless I have a premium account lol! Thankyou so much! Are you a JavaScript nerd!? I need to know! Hahaha – codebwoy Jan 25 '18 at 08:13

Is it Impossible to Use HTML Such as

1 Answers1