Combine JS with HTML code

Question

I am trying to create a link that opens a popup video when clicked. I was able to get it to work so far. However, I was wondering if there is a way for me to combine the HTML and JS code into 1. That way, I will not have to call the JS.

HTML

<style>
.mfp-title {
position:absolute;
color: #FFF;
background: maroon;
}
</style>

<a class="video" title="Living the Mission, A Perspective from Residential Life Staff at Boston College" href="http://www.bc.edu/content/dam/files/offices/reslife/mov/Living%20the%20Mission%20%20A%20Perspective%20from%20Residential%20Life%20Staff%20at%20Boston%20College.mp4">Open video</a>

JS

$('.video').magnificPopup({
type: 'iframe',


iframe: {
 markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
            '<div class="mfp-title">Some caption</div>'+
          '</div>'
},
callbacks: {
markupParse: function(template, values, item) {
 values.title = item.el.attr('title');
}
}


});

If that's not possible, how can I go about calling the JS file. If I do something like this

<script src="myScript.js"></script>

The video opens in full screen and user is taken to a different page. I don't want to have the user go to another page.

Any help would be appreciated.

When you used the <script> tag, did you place it in the <head> or at the end just inside the closing </body> tag? — Austin Mullins
– Austin Mullins, Commented Mar 26, 2015 at 18:55
Either way, it should work as long as you wrap your script in a call to $(document).ready. — Austin Mullins
– Austin Mullins, Commented Mar 26, 2015 at 18:56
I tried both, placing it at the top before the <style> and at the bottom after the video link codepen.io/anon/pen/LEaPbE — Agent_Sully
– Agent_Sully, Commented Mar 26, 2015 at 18:59
Just for fun, see if this fiddle does what you want, and if so, check out how JSFiddle manages the separate JS and HTML inputs. Basically, they set the window.onload handler to execute your script. — Austin Mullins
– Austin Mullins, Commented Mar 26, 2015 at 19:01
And also try this updated pen. I also noticed you left out the JQuery script tag in the Codepen. — Austin Mullins
– Austin Mullins, Commented Mar 26, 2015 at 19:07

Ethaan · Accepted Answer · 2015-03-26 19:09:42Z

2

I am just wondering if there is a way for me to have the JS code in HTML. Instead of having 2 different files

Yes, just wrap it inside a <script> tag check this Javascript Where To

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
 <body>
  <a class="video" title="Living the Mission, A Perspective from Residential Life Staff at Boston College" href="http://www.bc.edu/content/dam/files/offices/reslife/mov/Living%20the%20Mission%20%20A%20Perspective%20from%20Residential%20Life%20Staff%20at%20Boston%20College.mp4">Open video</a>
  <script>
$('.video').magnificPopup({
type: 'iframe',
iframe: {
 markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen> </iframe>'+
            '<div class="mfp-title">Some caption</div>'+
          '</div>'
  },
     callbacks: {
      markupParse: function(template, values, item) {
      values.title = item.el.attr('title');
     }
   }
  });
 </script>
 </body>
</html>

Second Option (good practice)

You can do the follow put the css into styles.css and put the Js code into the file name myScript.js.

Now i create this JSFiddle (hope this is what you want.), since Jsfiddle wrap for you the onDomReady Option, this is how the html document should look.

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
 <body>
  <a class="video" title="Living the Mission, A Perspective from Residential Life Staff at Boston College" href="http://www.bc.edu/content/dam/files/offices/reslife/mov/Living%20the%20Mission%20%20A%20Perspective%20from%20Residential%20Life%20Staff%20at%20Boston%20College.mp4">Open video</a>
  <script src="myScript.js"></script>
 </body>
</html>

With this the html will load first the <a> tag, and later will load the .js Script

You can also use $(document).ready(jQuery) as @Austin Mullins suggest, but for this example this is ok.

Hope you get it

answered Mar 26, 2015 at 19:09

Ethaan

11.4k5 gold badges37 silver badges45 bronze badges

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

6 Comments

Austin Mullins Over a year ago

I think the confusion was caused by the way Codepen constructs the iframe HTML. Be sure to include the dependencies before the user code.

Agent_Sully Over a year ago

@AustinMullins It's a little odd that in CodePen video opens in the same page but in JSFiddle the video opens in a new page. Any thooughts?

Austin Mullins Over a year ago

In which JSFiddle? In the one I linked? It opened in the same page for me in Chrome.

Austin Mullins Over a year ago

Basically, if the Javascript fails for some reason, your link will work as a regular link, changing the browser's location to the video (a new page).

Agent_Sully Over a year ago

Seems like the video opens as a regular link in the browser. So I think my JavaScript is failing for some reason.

|

Collectives™ on Stack Overflow

Combine JS with HTML code

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related