Code Food Travel repeat!

Posts by: Steven Chu

Dynamically load website credits through external javascript

Are you a web developer? Do you add your website credits onto the sites you build, but when you have a change in info, you have to change it in 20+ places? Never fear.. here’s something convenient:

  1. Add a div with id=”footer” to your footer section 
    <div id="footer"></div>
  2. On the line BELOW your footer tag.. where you will insert your site credit, insert the javascript call via a file named anything of your choice 
    	<script type='text/javascript' src='http://**yourclient**.com/js/core_webjs.js'></script>
  3. This file, which i call core_webjs but you could call anything you want, includes a call to an external file which you can store in a folder on your own website, so you can update your site credits from your own domain rather than having to go into each client’s FTP. This script is not the shortest by far, and I’m sure you can find a shorthand for this if you care 
    function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("http://**yourwebsite**.com/**makeafoldertostoreallthis**/**clientname**.js", "js")
  4. This is the site credit file on your end. Just be sure not to use apostrophe’s, unless you can escape /’ it out.. if that’s confusing, just don’t use apostrophes in your credit description. Here’s a demo of mine: 
    document.getElementById('footer').innerHTML += '<br>	<p style="opacity:.5;"><a href="http://stevenchu.com" alt="Steven Chu: Photographer, Video, Haircuts, Socially Engaged Artist. New York" title="Steven Chu: Photographer, Video, Haircuts, Socially Engaged Artist. New York">Web Coding by</a> <a href="http://stevenchustudio.com" alt="Steven Chu Studio: New York Visual Creative Consultant: Branding, Digital Web Design, Art Direction" title="Steven Chu Studio: New York Visual Creative Consultant: Branding, Digital Web Design, Art Direction">Steven Chu Studio</a> <a href="http://instatechie.com" alt="InstaTechie - Your face to face tech concierge. IT. Creativity. Productivity. New York." title="InstaTechie - Your face to face tech concierge. IT. Creativity. Productivity. New York.">/ InstaTechie</a>.</p>';
  5. Now when you go to your client’s site, you should see your site credit file (stored on your own domain) rendering the text on their end!

Bootstrap close Mobile / Responsive menu “on click”

This is a great snippet from stackoverflow.

The Snippet to automatically close your Boostrap Menu after clicking on an item

This is great if you are hyperlinking to jumps on the same page (ie. if you have a one-page layout).

$(function(){
	var navMain = $("#nav-main");
	navMain.on("click", "a", null, function() {
		navMain.collapse('hide');
	});
});

Then find your nav menu HTML/PHP and add label it with ID id=”nav-main”.
If you’re using Roots Theme, this is under templates/header-top-navbar.php.

Twitter Bootstrap Roots Theme

I’m using the Roots Theme, which uses Grunt to compile all the scripts.
Paste this snippet into your _main.js file into the All Pages section so it fires on all pages. My snippet above is cleaned up of any stray spaces and characters to prevent compiling errors.

4 of 27
12345678
%d bloggers like this: