iceman1411 Posted November 24, 2008 Share Posted November 24, 2008 Good morning. I am having some trouble trying to figure out a solution to a problem I am having. I have created and am maintaining a website that contains a footer with several links to other sections of the site and links to some external sites. I recently had to change a link to another site and as a result I had to manually change the link in the footer in over 100 pages. I would like to create some kind of external file that the footer can use to find the correct URL by placing a tag of some sort in the footer directing it to the external file (so instead of changing each page individually, i would just have to change the link in the file). I hope I was able to explain this enough for people to be able to understand what I am trying to do. I do have some experience in HTML and I am sure that there is a way to do this, but for now I am stumped. Any help that anyone could give me would be greatly appreciated. Thank you.Mike Link to comment Share on other sites More sharing options...
jeffman Posted November 24, 2008 Share Posted November 24, 2008 I can think of a PHP solution and a javascript solution. PHP is slightly easier, even if you don't know PHP, but of course you need to have PHP enabled on your server.So--which do you want? Link to comment Share on other sites More sharing options...
jeffman Posted November 24, 2008 Share Posted November 24, 2008 All right. Here's a javascript version. First is the external .js file. Second is a generic html file that shows an implementation.update_footer.js /********************************************************************************** UPDATE FOOTER** This little function will update the text and target of an <a> element whose id="footer_tag"** For it to work, you must:* (1) link to this script, like this: <script type="text/javascript" src="update_footer.js"></script>* (2) have such an <a> element in your document* (3) call update_footer() in your window.onload handler** You may customize some settings below:*********************************************************************************/// Customize the value of footer_address. This is the address the link points to:var footer_address = "http://www.google.com";// Customize the value of footer_text. This is the text that would appear between the <a></a> tags:var footer_text = "Google";// If you want to Customize the ID of the footer tag, do it here:var footer_id = "footer_tag";// What follows is the function that does the work. You're better off not messing with it.function update_footer () { var el = document.getElementById (footer_id); el.href = footer_address; if (document.body.innerText == undefined) { el.textContent = footer_text; } else { el.innerText = footer_text; }} whatever.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title></title> <style type="text/css"> </style> <script type="text/javascript" src="update_footer.js"></script> <script type="text/javascript"> function init () { update_footer (); } window.onload = init; </script> </head> <body> <div> <a href="#" id="footer_tag"></a> </div> </body></html> EDITED to avoid using innerHTML where textContent or innerText are preferable. Link to comment Share on other sites More sharing options...
iceman1411 Posted November 26, 2008 Author Share Posted November 26, 2008 Great! Thanks for the help. I'll try it out and see what happens. Link to comment Share on other sites More sharing options...
iceman1411 Posted November 19, 2009 Author Share Posted November 19, 2009 Great! Thanks for the help. I'll try it out and see what happens.Sorry it took so long to get back to you. The code you provided worked perfectly! The only question I had was to make it work for multiple links on a page. I know the code will probably have to be duplicated with some changes to allow for the different links. Any ideas? Thanks a bunch! Link to comment Share on other sites More sharing options...
jeffman Posted November 20, 2009 Share Posted November 20, 2009 Wow. The date on those old posts really knocked me out. I'm less hyper about innerHTML now that it's part of HTML 5.The following is laid out about the same as before. I've added some CSS, mostly to make it look better and suggest the way it can be done. You're certainly free to style it any way you like.footer.js /********************************************************************************** Do not remove the following line of code!*********************************************************************************/var myLinks = [];/********************************************************************************** Customization Area:** Add links to your footer by adding array items as shown below. The first quoted* item in each link array is the text you want to appear in the browser. The second* quoted item is the URL. Each array item should have a unique numerical index:* 0, 1, 2, 3 ... etc. (Don't forget the commas and quotation marks!)*********************************************************************************/myLinks[0] = ["Google", "http://www.google.com"];myLinks[1] = ["Disney", "http://www.disney.com"];myLinks[2] = ["W3Schools", "http://www.w3schools.com"];/********************************************************************************** Alter the following code at your risk!*********************************************************************************/function build_footer () { var footer = document.getElementById("footer_list"); var len = myLinks.length; var link for (var i = 0; i < len; ++i) { item = document.createElement('li'); link = document.createElement('a'); link.href = myLinks[i][1]; link.innerHTML = myLinks[i][0]; item.appendChild(link); footer.appendChild(item); } delete myLinks;} footer.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> @import url(footer.css); </style> <script type="text/javascript" src="footer.js"></script> <script type="text/javascript"> function init () { build_footer(); } window.onload = init; </script> </head> <body> <ul id="footer_list"></ul> </body></html> footer.css #footer_list { margin: 0; padding: 0; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: .8em;}#footer_list li { margin: 0; padding: 0; display: inline; list-style: none; margin-left: 2em;}#footer_list li:first-child { margin-left: 0;} Link to comment Share on other sites More sharing options...
iceman1411 Posted December 10, 2009 Author Share Posted December 10, 2009 Again sorry for taking so long to get back to you but that was exactly what I needed, you made my life a lot easier! Thanks!! Wow. The date on those old posts really knocked me out. I'm less hyper about innerHTML now that it's part of HTML 5.The following is laid out about the same as before. I've added some CSS, mostly to make it look better and suggest the way it can be done. You're certainly free to style it any way you like.footer.js/********************************************************************************** Do not remove the following line of code!*********************************************************************************/var myLinks = [];/********************************************************************************** Customization Area:** Add links to your footer by adding array items as shown below. The first quoted* item in each link array is the text you want to appear in the browser. The second* quoted item is the URL. Each array item should have a unique numerical index:* 0, 1, 2, 3 ... etc. (Don't forget the commas and quotation marks!)*********************************************************************************/myLinks[0] = ["Google", "http://www.google.com"];myLinks[1] = ["Disney", "http://www.disney.com"];myLinks[2] = ["W3Schools", "http://www.w3schools.com"];/********************************************************************************** Alter the following code at your risk!*********************************************************************************/function build_footer () { var footer = document.getElementById("footer_list"); var len = myLinks.length; var link for (var i = 0; i < len; ++i) { item = document.createElement('li'); link = document.createElement('a'); link.href = myLinks[i][1]; link.innerHTML = myLinks[i][0]; item.appendChild(link); footer.appendChild(item); } delete myLinks;} footer.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> @import url(footer.css); </style> <script type="text/javascript" src="footer.js"></script> <script type="text/javascript"> function init () { build_footer(); } window.onload = init; </script> </head> <body> <ul id="footer_list"></ul> </body></html> footer.css #footer_list { margin: 0; padding: 0; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: .8em;}#footer_list li { margin: 0; padding: 0; display: inline; list-style: none; margin-left: 2em;}#footer_list li:first-child { margin-left: 0;} Link to comment Share on other sites More sharing options...
thescientist Posted December 10, 2009 Share Posted December 10, 2009 what happens if Javascript is disabled? Link to comment Share on other sites More sharing options...
knystrom18 Posted December 21, 2009 Share Posted December 21, 2009 what happens if Javascript is disabled?Then you go to the PHP solution: a php include file. It would still make the TS have to edit all their pages again, but only once. After that, they'd only need to edit one file who's code looks almost exactly like HTML except for a few start and end php tags. Once that php include file was changed, anywhere that file is called, the change would be reflected. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.