Currently Browsing: JavaScript Tutorials

Link Sanitation

Sometimes when working on a client’s site, you might be tasked with trying to capture all out bound links as what we call “external links” and display a confirm message to the user before letting them leave the site. Sounds simple enough right? Well, in a perfect world yes it should be, but more times than not you will be dealing with a whole host of ways page links have been authored....

read more

Let’s Talk JS Markup Templates

So today I wanted to spotlight a neat JS library I found while doing some client work called Markup JS by Adam Mark: https://github.com/adammark/Markup.js/ What is Markup JS? Well to answer that question, it might be better to bring in a real world need first. Lets say we are building a web application, or even a really simple web service between frontend and backend using XHR (ajax) only. The first thing...

read more

DOMRelocator Helper for Responsive Design

This is a nice little snip I created when in a bunch with a client who needed a DOM part to be higher up in the source order at particular break points, but not higher up in the source order under other responsive break points. So, if in a bunch, if you can’t convince another developer or owner that the stacking rules would be a better approach, or if you just have no other choice. You can use this...

read more

Optimizing Window Resize and Mouse Move Events

Today, we will talk about the re-size and mouse move events. These two events indeed are very helpful, but can also be very costly on your site or web app. Let’s take a look at an example of re-size for say window: Vanilla JS versionwindow.addEventListener('resize', function(){ ... logic .... });jQuery version$(window).on('resize', function(){ ... logic ... });Standard...

read more

Using Google Earth Borders as Google Maps Polygons

Today we are going to cover how to extract the polygonal data from Google Earth’s country borders and encode the data into a JavaScript array that we can use in Google maps. With the combination of both polygon borders and Google style wizard you can get some stunning map results. [View Working Example Here] To begin, download and install Google earth here. Once you have installed Google earth, open...

read more

Efficient Event Targeting with JS

Today I would like to talk a bit about setting up events on DOM using jQuery and how one should try to avoid setting up huge numbers of unnecessary events on a single document.

read more

Basic jQuery touchmove Event Setup

I was recently tasked with replicating a "mousemove()" event on the iPad using the "touchmove()" event. I ran into a few snags and felt it was worthy enough to document my findings. Here I will show you how to properly setup a touchmove() event and even find the touch's page coordinates.

read more

jQuery Selector Chain Conditions

There has been a few times while writing a few jQuery plugins that I come across conditions that almost does the same thing in both the if and else. I always wondered if their was a way to condense such a condition and help lower my file size, and after a little bit of tweaking I figured it out.

read more

Realtime Image Typesetting with PHP GD

Learn how to use both JavaScript Ajax and PHP GD (graphical library) to perform real-time image typesetting onto a image. We will also cover how to use custom text colors, sizes, rotation and even fonts in our example demo.

read more