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
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.
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.
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.
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!
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…
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…