Can I avoid this code duplication in jquery?
Question
I do need to display a content which position to fixed in the bottom of every pages on my site, like this.
<div class="footer-fix">
<p>This is its contents......</p>
</div>
.footer-fix {
background:#fff;
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
}
My question is if I have a lot of pages in my site. So do I need to add this code in almost every webpages or is there any other way to do it without adding this code in every pages?
Hope somebody may help me out.
Thank you.
3 answers
solution1
1 ACCPTED 2015-09-19 12:53:55
demo: http://jsfiddle.net/qz94zkmm/
first all, yes you can do it in jQuery. But not recommended!
Here's a function it can dynamically insert html & css styles into an element:
function appendHtmlTo(where, htmlText, cssText) {
$(where).append(htmlText).append('<style text="text/css">'+cssText+'</style>');
}
and call this function:
appendHtmlTo('body', html, css);
which variables html and css define like this (there is a backslash at the end of each line):
var html = '\
<div class="footer-fix">\
<p>This is its contents......</p>\
</div>\
';
var css = '\
.footer-fix {\
background:pink;\
position: fixed;\
bottom: 0;\
z-index: 999;\
width: 100%;\
}\
';
be sure call this function when document ready!
solution2
0 2015-09-19 12:17:22
You can do it very easy with PHP just create footer.php file and insert code above in. Then just call include("/path/to/footer.php"); in bottom of every page and that its.
solution3
-1 2015-09-19 12:27:24
You can use html tag Ex:
<body>
<header class="col-lg-12" style="background-color:#444444; ">
//Here i have Header
</header>
<div class="container-fluid" style="padding:10px; height:600px;">
// Here goes my Body
</div>
<footer class="col-lg-12 text-center" style="background-color:#444444; height:50px;">
//Here Goes my Footer
</footer>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.