Reputation: 23
I use single file each for header and footer that I include in all the pages by using:
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
}
</script>
and adding this in the <body>
section:
<body>
<div id="header"></div>
<div id="footer"></div>
</body>
I want to keep the following in a single separate file and include in all pages' <head>
section.
<script type="text/javascript" src="signupjs/jquery.reveal.js"></script>
<link rel="stylesheet" href="signupjs/reveal.css">
<!-- some more elements -->
I tried applying the known method, ie, .load()
and <div id=""></div>
in <head>
section but as obvious, it didn't work. The contents got loaded in the <body>
section.
Is there a technique to achieve this?
Upvotes: 2
Views: 1688
Reputation: 12329
As said on this question, you can add your css like this
$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
You can do the same for javascript, but you also have a few other options.
You can use $.getScript
of jQuery, or you can use requirejs. I recommend require.js, with that librarie you can do
var librari = require("js/librarie.js");
Upvotes: 0
Reputation: 4637
Html
<head>
// we can append here
</head>
Jquery
$('head').append('<link rel="stylesheet" type="text/css" href="signupjs/reveal.css">');
$('head').append('<script type="text/javascript" src="signupjs/jquery.reveal.js"></script>');
Upvotes: 2