We’ve used various versions of jQuery and HTML5 to get Back and White images with hover. Here’s our preferred solution {here we are adding greyscale to ‘.item img’ so replace with your own element} … the problem with many of these approaches is that they break your preferred code structure. CSS would be a more [...]

Tags: black and white css hover, black and white query, css mobile, css3, jquery

You’ve probably found that when using CSS hover your iPhone / iPad will not translate these into a click event. In our recent experience with a client site when clicking the CSS3 hover we experienced a forced copy of the content of the div by our trusty iPad. To resolve CSS Hover issues on iPad [...]

Tags: css click, hover ipad, hover iphone, hover mobile, jquery

A quick snippet for you to limit the number of characters in a span / div etc by a particular value. This function also includes a slightly neater … at the cutoff point:- Make sure you enter the character value in twice (currently 80). Limit Number of Characters with CSS Actually this can also be [...]

Tags: CSS, css limit text length, jquery, jquery limit characters

If you are experiencing problems with your WordPress site even though you haven’t changed anything then your issue could be a little known jQuery compatibility issue. The latest jQuery update ver 1.9.0 has a number of conflicts with WordPress 3.5 and this could throw your WordPress theme out of sync. We suggest that instead of [...]

Tags: google repository, jquery, jquery wordpress problems, Wordpress

We recently found an odd behaviour in Safari that stopped a script working on page load. We came back to the page and then it periodically worked, but on the whole it simply wasn’t firing up. If you have the same problem then we would advise the following:- 1. Make sure you are using valid [...]

Tags: jquery, jquery carousel, jquery marquée, jquery not working in safari, jquery slider

First lets look at how jQuery Does it With jQuery it’s easy to target a specific first child with jQuery First:- Or if it’s not the first then the <strong>:nth-child() Selector</strong> like so:- This selects the second ‘li’ in the ‘ul’ and appends a span Or a combination of selectors such as ‘first’ and ‘:nth-child’ [...]

Tags: css target child, css target first, css target last, jquery, jquery target child, pagelines framework, pagelines soapboxes

We were using the great Isotope responsive layout jQuery plugin on a client project and found that because of the absolute positioning of divs there was an overspill when the isotope elements moved. If these items were relatively placed on the page obviously that wouldn’t be the case. Our solution to this was to create [...]

Tags: isotope, jquery, jquery resize div by height, jquery resize page

Here are a number of useful snippets that will find the height of child elements in a parent div/ul etc and unify the hight throughout to the highest of all of them:- Method 1 – This works best across a list with multiple rows. It takes each row in turn and makes it the highest [...]

Tags: jquery, jquery equal height

Recently we were using the great EU Cookie Compliance plugin Cookie Control on a client site (also seen on this site bottom left of page), but found that within the custom WordPress Theme that the Cookie Compliance scripts and CSS were loading with a flash of the unformatted and unhidden content. That looked rather ugly [...]

Tags: eu cookie compliance plugin, jquery, jquery hide

A quick snippit for you to apply jQuery selection to all but first element:- As per our example this is useful in unordered / ordered lists and therefor menus etc. We are prepending a span with x2 spaces to every li except the first.

Tags: jquery