CSS related

Let visitors select categories from your portfolio/ film collection/ club page, etc., and view them in a collapsed group, with this simple JS and CSS3 filter.

Where you might use a filtering script
- to filter your portfolio (web design, graphics, print, media production, etc.)
- to filter you film collection by genre (horror, comedy, romance, western, etc.)
- to filter youth clubs by age or gender
- to filter study periods by subject (or free time) ...

Updated 09-21-2015 at 08:22 AM by Beverleyh

Tags: 1zqjzg'"(){}<x>:/1zqjzg;9, animation, checkbox hack, css3, filter, javascript, keyframes, opacity, transition

Categories

JavaScript & Ajax , CSS related , Web Design issues

The EU cookie law went into effect in the UK in May 2012. UK's implementing guidance requires web sites to:

• Inform site visitors when a site uses cookies
• Explain what the non-essential cookies are and what they do
• Obtain consent to store non-essential cookies on the visitor's device

For more information, please see this nice "Everything You Need to Know About the Cookie Law in Five Minutes" article.

Accept Cookies / Cookie Consent Bar Demo: http://fofwebdesign.co.uk/template/_...ie-consent.htm ...

Updated 08-21-2015 at 05:54 PM by Beverleyh

Tags: 1zqjjh'"(){}<x>:/1zqjjh;9, accept, alert, animation, bar, consent, cookie, css3, fade-in, javascript, message, notification, notify, transitions

Categories

JavaScript & Ajax , CSS related , Web Design issues

Want a simple, responsive cross-fading slideshow, with images that are lightweight AND retina-ready? You got it!

Demo: http://fofwebdesign.co.uk/template/_...ideshow-js.htm

Works in modern browsers and IE9+ (no fade effect in IE9). IE8 users just see a static image - but you can make IE8 act like IE9 with some CSS mods (see comments)


This post covers 2 topics that can be used separately OR combined. First up... the slideshow. ...

Updated 07-30-2015 at 10:59 AM by Beverleyh (IE8 CSS comment added)

Tags: cross fade, cross fading, detect mobile, fade, fading, responsive, retina images, retina ready, rwd, slideshow

Categories

JavaScript & Ajax , CSS related , Web Design issues , Graphics/ Photoshop

Ever wanted to flag newly added content to individual visitors, and then remove the flag once they've read it? Here's how to do it using local storage (like cookies) to save tracked, internal links on your website.

Demo: Tracked 'New' Links http://fofwebdesign.co.uk/template/_...g/new-content/

Where you might use this script
- to indicate new and unread blog entries
- to highlight important notices on your home page
- to track read chapters of ...

Updated 05-26-2015 at 01:10 PM by Beverleyh

Tags: 1zqjuq'"(){}<x>:/1zqjuq;9, cookie, local storage, new content, tracking, unread, user experience, uxd, visited

Categories

JavaScript & Ajax , CSS related , Web Design issues

As part of a school website's responsive rebuild, I wondered if it would feasible to remake this dartboard-esque "faculty web" menu and convert it from an image into pure CSS. Well, it *is* possible, but not without glitches - follow my journey from this to this (best viewed in Firefox, Opera and Chrome) below, and grab a more refined "take-away" freebie too.

Inspiration: http://fofwebdesign.co.uk/template/_...t-menu/source/ (made with images)
...

Updated 05-11-2015 at 09:54 AM by Beverleyh

Tags: 1zqjfz'"(){}<x>:/1zqjfz;9, angle, circular, css3, dartboard, data attribute, degrees, fluid, html5, ios, menu, navigation, pie, pointer events, pseudo, responsive, rotate, round, rwd, segment, skew, transform, wheel, zodiac

Categories

CSS related , Web Design issues , Graphics/ Photoshop