Archive image

Posts Tagged ‘javascript’

Creating a Simple Style Switcher

I see quite a few questions on how to persist state (of a checkbox, for example) between page reloads, so decided to write a tutorial on how this might be achieved.

In the tutorial I show how to make a simple style switcher, not because the world needs another style switcher, but rather to demonstrate this technique using a half-way to realistic example. I also took the opportunity to show how to attach event handlers unobtrusively (without jQuery) and manipulate an element’s style.

Read the complete article on SitePoint

How to persist checkbox checked state after page reload

This quick tip describes how to have your browser remember the state of checkboxes once a page has been refreshed or a user navigates away from your site to come back at a later date.

It might be useful to Persist Checkbox Checked State if, for example, you use checkboxes to allow your users to set site-specific preferences, such as opening external links in a new window or hiding certain page elements.

Read more…

How to center an HTML Element using JavaScript

Imagine you have an element which is dynamically added to your web page (an image in a lightbox, for instance) and you want to centre it on the screen both horizontally and vertically.

You could do so with CSS (as this article explains), but if you don’t know the dimensions of the element you want to centre or you need to support older browsers, things can become quite tricky quite quickly.

That’s when you should think about doing the job with JavaScript.

Read more…

DOM Selection without jQuery

One of the main reasons behind jQuery’s meteoric rise to popularity was its use of the CSS selector syntax to select DOM elements and the ease with which it could then traverse these and modify their content.

In this post I’d like to focus on how jQuery handles DOM selection under the hood and what native JavaScript functions we can use in its place.

Read more…

How to detect a touch device using JavaScript

A while back I had to make a navigation menu which played a sound when you moused over the various menu points.

The problem was, that this feature didn’t play nicely with touch devices, as they don’t really have a concept of hover.

What happened instead was that the sound would play when the user selected one of the menu points, but would get cut off as the new page loaded – eurgh!

Read more…

Simple JavaScript debugging with Chrome’s console

All to often of late, I have seen people having trouble trying to debug some JavaScript or other.

Some were stumped by the white screen of death which confronted them the minute their script failed silently, whilst others were trying to debug their program using an alert dialogue box (a truly tedious process).

Well, good news it at hand. There is another, more efficient way to do things – with the console. Read more…

Overlaying Lightbox with the HTML5 Canvas Element

Here’s how to use the HTML5 canvas element in conjunction with Lokesh Dhakar’s excellent Lightbox2 script, to dynamically highlight a part of a static image (in this case individual offices on a company’s floor plan).  Read more…