Category Archives: Development

CSS3 Shiney Shiney

By James | Published: August 24, 2011

#spinnerIcon img { background-repeat:no-repeat; background-position: center; -webkit-mask-position: 0 0; -webkit-mask-size: 215px 140px; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.25, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0.65)), color-stop(0.75, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,1))); -webkit-mask-size: 430px 140px; -webkit-animation-name: shinyshiny; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-delay: 5s; -webkit-transform:translate3d(0,0,0); } @-webkit-keyframes shinyshiny { 0% {-webkit-mask-position: -215px 0px;} 50% {-webkit-mask-position: 0px 0px;} 100% [...]

Posted in Development | Leave a comment

Love in an Elevator

By James | Published: February 8, 2011

There are many tabs, accordions, scrollers, carousels etc for jQuery but what if I fancy something different. Navigation along the left hand side with an arrow that scrolls between the options and content that slides up and down to match the selected tab. Simple. Getting Started The original idea was to use an unordered list, [...]

Also posted in jQuery | Tagged , | Leave a comment

HTML5 Canvas Timed Image Gallery

By James | Published: February 8, 2011

A simple use of the HTML Canvas Element to create a simple pie-chart timer to show when the next image in a gallery slide show will be displayed.

Also posted in jQuery | Tagged , , , | Leave a comment

Subliminal JavaScript

By James | Published: February 2, 2011

Ok. So this one’s a little below the belt. Flashing a pop-up message very quickly to the user in an attempt to influence their behaviour. There’s of course no evidence that it works but its fun to try at least…     var shown = false;   $(function(){   $(’input:text’).hover(function(){   if(!shown){   var msg [...]

Also posted in jQuery | Leave a comment

JavaScript and CSS Pie chart

By James | Published: January 12, 2011

This started off as an experiment with a combination JQuery and WordPress custom fields. The idea was to total up the distances of all the walks on my other site, a walking blog and make something a bit more interesting than a simple table. An obvious choice would be to use the new HTML5 canvas [...]

Also posted in jQuery | Leave a comment

jQuery Regex Filter

By James | Published: January 7, 2011

As an alternative to a database auto suggest which often results in a lot of small database calls over a small period of time I decided to dump all results onto a page and use a combination of jQuery and Regex to filter out the results.

Also posted in jQuery | Leave a comment

Scrolling Data Tables

By James | Published: December 14, 2010

Use jQuery and CSS to create a sliding table from large, wide tables to fit in narrow page templates.

Also posted in jQuery | Leave a comment

Windows 7 Navigation with jQuery

By James | Published: December 10, 2010

Windows 7, with its new shiny hover-over effect on the nav bar. Is it possible to re-create that using jQuery?

Also posted in jQuery | Leave a comment

Can I use CSS to style the head?

By James | Published: December 8, 2010

Yes. Should I? Hmmm, only if you’re prepared for it not to work in some browsers.

Also posted in CSS | Tagged , , | Leave a comment