Archie Makuwa's Blog

Category: Javascript

Using HTML5 Web Storage

What is HTML5 Web Storage?

With web storage, web applications can store data locally within the user’s browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and the information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Browser Support

The following web browsers supported:

  • Google Chrome 4.0 +
  • Internet Explorer 8.0 +
  • Firefox 3.5 +
  • Safari 4.0 +
  • Opera 11.5 +

Usage Examples

HTML web storage provides two objects for storing data on the client:

  • window.localStorage – stores data with no expiration date
  • window.sessionStorage – stores data for one session (data is lost when the browser tab is closed)

I also recently used the script to load a popup video once on a website. The video will not load again unless the session is terminated somehow (closing browser tab or moving away from the site). I used Fancybox2 in this example – look, this is really some basic shit but you get the idea.

 

 

Wrap colorbox main div into another Raw

The last time I worked with the Colorbox library was during my “hardcore” Drupal7 days and that was many months ago. I recently found myself creating galleries, pop-ups and so forth over the past 48 hours using jQuery ColorBox: http://www.jacklmoore.com/colorbox/

If you have ever wanted to know how you could easily wrap the colorbox main div with another div, this is how easy it is to do that:

 

How to remove a div containing a button using jQuery

HTML

jQuery

 

How to compare the result of success function of ajax with a string

So I got this script from the internet that was supposed to make my life easy… but a one day job ended up becoming a 3 day job and this was why:

But… (wait for it)

So in a nutshell: 
Don’t forget to sanitise your results before comparisons…

Adding elements to the home page using JavaScript

This is how you go about doing that:

Another alternative method:

 

Reduce Wistia Plugin Load Time

If you happen to experience issues with Wistia Plugin load time because you were not loading your javascript asynchronously, try using the following script:

 

 

Filtering duplicate img src with jQuery / javascript and only display the first image

Filtering duplicate img src with jQuery / javascript and only display the first image:

Here’s the little trick:

 

Google Maps with a Marker and an InfoWindow

Ja, it is what it is… You are probably here because you battled to get your Google map to load with a marker and an InfoWindow. Just copy and paste the script below in your code and amend as desired.

ja

 

Introduction to Grunt.js – The grunt file

Hello and welcome to Grunt. This is my setup file…

 

How to Hide JavaScript Errors on IE

Add below piece of code on your page <head> tags.

 

Copyright © 2018 Archie Makuwa's Blog

Theme by Anders NorenUp ↑