I'm a day 1 UI guy(started web design today only), want to design a header/footer(for pages in my application) for my app.
I read that using Javascript/JQuery we can do that, but on googling I didn't find a simple example of doing that, any example/reference will be of great help.
I'm a day 1 UI guy(started web design today only), want to design a header/footer(for pages in my application) for my app.
I read that using Javascript/JQuery we can do that, but on googling I didn't find a simple example of doing that, any example/reference will be of great help.
Share Improve this question edited Feb 15, 2015 at 14:55 Alex Kulinkovich 4,78815 gold badges50 silver badges54 bronze badges asked May 14, 2011 at 23:03 daydreamerdaydreamer 92.3k204 gold badges473 silver badges750 bronze badges 5- 3 What does this expression mean? "day 1 UI guy" – jcolebrand Commented May 14, 2011 at 23:05
- what do you mean for header/footer? – matchew Commented May 14, 2011 at 23:05
- 1 i think there is a LOT of information you arent telling us. are there any examples of headers and footers you are trying to make? – Jeff Commented May 14, 2011 at 23:06
-
Use html5
<header>and<footer>, or html4.x<div id="header">and<div id="footer">? Why use JavaScript for this? – David Thomas Commented May 14, 2011 at 23:06 -
"Header" and "footer" are pretty loose terms. HTML5 has the
<header>and<footer>tags, but these on their own won't change the appearance of your content. What exactly are you trying to do? – Samir Talwar Commented May 14, 2011 at 23:06
4 Answers
Reset to default 1The short answer goes like this: jQuery is for DOM manipulation. Headers and footers are DOM elements. That's why you can use jQuery to create them.
Something a little longer:
<body>
<div id='header'>
</div>
<div id='content'>
This is where you would put all your regular content on your page,
maybe if it's dynamically generated content. You just have to supply
those other two divs all the time (not really - more later)
</div>
<div id='footer'>
</div>
</body>
<script>
//assuming you have a reference to jQuery in the header
// first let's build an object.
var myHeader = $('div').class('headerClassDiv').append('<div class="nestedHeaderClass" />');
$('#header').append(myHeader);
// do the same for the footer:
var myFooter = $('div').class('footerClassDiv').append('<div class="nestedFooterClass" />');
$('#footer').append(myFooter);
</script>
But this is a really contrived example. I think that you need to focus more on writing a few good webpages before you try and add content dynamically. Especially if this is your very first day. my particular advice is to use something like the Visual Studio designer environment or something similar where you can see both the HTML and the visual effect at one time and try adding elements and that you read a LOT of stuff on good HTML design.
The code sample below shows the script to make a header and footer with Javascript.
function createHeaderAndFooter() {
var header="<!--header html-->";
var footer="<!--footer html-->";
document.body.innerHTML=header+document.body.innerHTML+footer;
}
window.addEventListener("load", createHeaderAndFooter);
If you want the same header and footer across all pages, you could put the script tag below on all your pages.
<script type="text/javascript src="headerFooter.js"></script>
Actually you do not need JavaScript for footer. I had the related problem, becasue I'm working on 100% HTML site and can't include PHP footer.
There have the solution to make footer including html document in html document:
<object type="text/html" width=100% height="250" data="footer.html">
Try to use the "js-header"-package. You can create your header with a class, its super easy. By the way its using JQuery too.
Look here: JS-Header package