Code Food Travel repeat!

Web

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.

Customize WordPress Google Maps Store Locator Plugin: WPSL

This is a post of all the awesome mods I was able to do on WP Store Locator to have it work the way I wanted, mainly:

  • Remove the search bar
  • Display results as a grid row (responsively designed)
  • Customize the store info attributes.. showing phone and hours natively
  • Disabling Scrollwheel (so when you’re scrolling down the page, it doesn’t start zooming into the map
  • Disabling Dragging on mobile devices (so when you’re touch scrolling you don’t get stuck in quicksand land on panning around the map and you can’t leave that section of the screen)

 

Hands down, this is the cleanest of them all and not filled with complicated garbage. I went through ALL the rest of the popular ones and their request for you to upgrade to get ‘premium features’ at $750+ was driving me mad.

Thank gosh I found this one. The MAIN issue with the others is that it wouldn’t let you specify your start location – it would put an ugly ass “home” icon in the middle of the US, and that would horribly zoom out your map to accommodate for that marker unless you wanted to pay hundreds of dollars to get rid of it.

Luckily WPSL lets you specify your starting home location for the map view! I set mine as one of the stores I’m displaying.. just so it can display nice and close.

Next benefit of WPSL is that you can easily mod the javascript with little to know JS knowledge! (aka me) to have it display what you want.

Removing the search bar & Displaying the results as rows of 4 (works for responsive layouts too!)
(CSS MODS)

/* * * LOCATION MODS * * */
#wpsl-result-list li {

	width: 23%;
	min-width: 180px;
	float: left;
	margin-right: 20px;
}

.wpsl-search {display:none;}

Customizing the Store Listing results to natively display the PHONE # and HOURS without having to click on the marker to load the info window
(JS MODS)

This was line 813 in the file wpsl-gmap.js
Also note: I took out distance and directions (because i set my starting marker at one of the stores.. so it would just display 0 miles away and give false directions).

		/* * * * *CUSTOM STEVEN CHU * * * * */
		html = "</pre>
<ul>
	<li data-store-id="&quot; + id + &quot;">
<div>
" + storeImg + "<strong>" + store + "</strong><span class="wpsl-street">" + street + "</span>"  + city + " " + state + " " + zip + "

" + moreInfo + "</div>
<span class="store-phone">" + response.phone + "</span>

<span class="store-hours">" + response.hours + "</span></li>
</ul>
<pre>
";

Disabling Scrollwheel Zooming on computers & Disabling Dragging on mobile devices

Thanks to this amazing snippet by Kenny Brijs, I found the corresponding sections in the plugin to modify.

BASE CODE:

function initMap(){
	var isDraggable = $(document).width() > 480 ? true : false; //If site is wider than 480px, isDraggable = true, else false.
	var mapOptions = {
		draggable: isDraggable,
		scrollwheel: false, //Prevent users to start zooming the map when scrolling down page
	};
}

How to modify in WPSL Store Locator: Find wpsl-gmap.js and search CNTL+F / CMD+F for myOptions.
On my version of WPSL (1.2.13), it is line 67

Just above myOptions array, I pasted the variable isDraggable if screen is above 480px.
Then in the options, I added in the draggable option (to our isDraggable specifications) and scrollwheel set to false – Both of these options WPSL does not have by default!

My final code that I replaced in the plugin file on my live website is:

/* * * CUSTOM STEVEN CHU * * */
	var isDraggable = $(document).width() > 480 ? true : false; //If site is wider than 480px, isDraggable = true, else false.


    myOptions = {
		zoom: zoomLevel,
		center: startLatLng,
		mapTypeId: mapType,
		mapTypeControl: false,
		panControl: false,
		streetViewControl: streetViewVisible,
		draggable: isDraggable,
		scrollwheel: false, //Prevent users to start zooming the map when scrolling down page
			zoomControlOptions: {
				style: zoomControlStyle,
				position: zoomControlPosition
			}
	};
3 of 14
1234567
%d bloggers like this: