Thank you for visiting the Focus on Function Web Design website and printing this page.
I hope you'll visit online again soon at www.fofwebdesign.co.uk
Archive 2015 (News & Updates)
These are the news archives for projects I was involved with during 2015.
iPad/ iPhone 'Sticky Hover' Fix (JS) | 22nd Dec 15
One line of JS to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element is clicked.
Blog: Animated GIF Player (JS) | 16th Dec 15
Read my latest entry in the blog; Play animated GIFs on-demand with this GIF player. Initial loading is delayed until the user starts playback.
Ofsted judge DHFS as 'Outstanding' | 9th Dec 15
Congratulations to everyone at Dronfield Henry Fanshawe School for achieving the highest possible ratings across the board! I'm proud to be part of the team!
Windmill Hill website launched | 1st Dec 15
After several weeks of work, this highly performant (less than 200kb on small screen devices), responsive, mobile first website is released in to the wild!
Monthly/ Daily iFrame Content (JS) | 25th Nov 15
Load a different page into an iframe for every month of the year (or every day of the month), and optionally navigate through past and future pages too.
Blog: AJAX & PHP Click-Counter | 17th Nov 15
Read my latest entry in the blog; A click-counter that saves data to a text file (no database), while AJAX displays increasing counts in real time.
Fast Feed v1 special characters fix | 7th Nov 15
A small change has been made to the way that special characters are handled in news entry titles. Some function code has also been tidied up a bit.
JS & CSS3 Content Filter revised | 1st Nov 15
The JS filter category array is gone and item filtering is now done through the manipulation of CSS classes rather than changing the JS 'style.display' property.
Blog: Sweep-in News Scroller | 24th Oct 15
Read my latest entry in the blog; Make a no-frills, animated news scroller where messages sweep in and out with a gentle fade. No controls.
DHFS digital signage revamp | 12th Oct 15
I'm working on digital signage displays for DHFS; CSS3 animated news scrollers and lazy-load images for performance boosts. Optimised for 16:9 screens.
'Ken Burns' Slideshow + Captions | 5th Oct 15
A responsive, cross-fading slideshow with CSS3 'Ken Burns' panning and zooming animation, and captions that sweep in from the bottom right corner.
William Levick website updates | 28th Sep 15
A new headteacher joins William Levick Primary School, so I'm working with them on a CMS handover, while offering training support and ad-hoc updates.
Blog: JS & CSS3 Content Filter | 20th Sep 15
Read my latest entry in the blog; Create an animated, collapsible content filter for your website content, where categories are filtered by class.
Freebie menu CSS 'go-up' subs | 15th Sep 15
RWD CSS3 Multi-Level Drop-Down Menus, and Fly-Out Menus, have a new feature to make long nested sub-menus go upwards, instead of downwards.
Fast Warn v1 inactive message fix | 9th Sep 15
The "inactive message", that should have been written to the XML file when a warning is cleared/ deleted, was not working properly. All fixed now though.
Responsive DHFS website launched | 28th Aug 15
8 months hard work comes to fruition today, with the launch of Dronfield Henry Fanshawe School's new website. All ready to go for the new term!
Blog: EU Cookie Law Consent Bar | 21st Aug 15
Read my latest entry in the blog; Comply with the EU cookie law with an 'implied opt-in' consent bar for website visitors to accept cookies.
Freebie menu CSS text overlap fix | 17th Aug 15
All the freebies RWD menus have been updated with a small fix to stop intermittent button transparency and text overlap on long mobile sub-menus.
Video Player w/ Playlist + Caption | 5th Aug 15
Populate a playlist from a folder of mp4s and play them in this responsive video player. With currently playing caption. Uses the default HTML5 video skin.
RWD Menu in Wordpress theme | 28th Jul 15
"H&D" - A home, decor and interior design WordPress theme, makes use of my Responsive CSS3 Multi-Level, Drop-Down Menu. Thanks for the credit guys!
Blog: 'Swipe Support' for your site | 25th Jul 15
Read my latest entry in the blog; Let visitors 'feel' their way around your website by adding support for swipe gestures on touch devices.
RWD Content Slider (JS auto-play) | 17th Jul 15
This Responsive CSS3 Any Content Slider plays automatically and comes with simple play/ pause controls and navigation pips to jump to each slide.
Fast Feed v1 file browser upgrades | 14th Jul 15
The file browser in Fast Feed v1 has been updated to improve the rename function and add "select all" checkboxes to delete and move functions.
Fast Edit file manager upgrades | 3rd Jul 15
Mods made to the File Manager in Fast Edit v1 and BE, to improve the rename function and add "select all" checkboxes to delete and move functions.
Freebies 'back' arrow Android fix | 26th Jun 15
All the freebie RWD menu and gallery scripts have been updated with Android-friendly "back" arrows; ► rotated with CSS to face back the other way.
Blog: RWD Cross-Fading Slideshow | 17th Jun 15
Read my latest entry in the blog; A simple cross-fading slideshow, using stacked media queries to serve smaller, retina-ready images to mobile.
Fast Edit v1 page assignments | 8th Jun 15
Say who edits what in Fast Edit v1 CMS. This new feature gives users edit access to certain pages only. Users without page assignments can edit everything.
RWD Pop-up YouTube Videos | 2nd Jun 15
Pop-up YouTube videos in the middle of the screen with a small JS function. The pop-up resizes fluidly for mobile and desktop. Includes CSS3 loading bars.
Blog: Track 'New' Content Links | 26th May 15
Read my latest entry in the blog; Flag new content to visitors, and remove the icon when they've read the page. Local storage saves visited links.
RWD Fade-To-Black Slideshow | 15th May 15
A basic but responsive, CSS3 fade-to-black slideshow, powered by a few lines of JS. Images are pulled from a folder with PHP. Modern browsers and IE9+.
RWD Menu in Wordpress theme | 12th May 15
"Billio" - A company centric WordPress theme, makes use of my Responsive CSS3 Multi-Level, Drop-Down Menu. Thanks for the credit guys!
Blog: Circular Pie Chart Menu | 11th May 15
Read my latest entry in the blog; The quest to make a circular menu, with inner rings and segments. Be warned, it croaks in IE.
Audio Player w/ Playlist + Timeline | 1st May 15
Populate a playlist from a folder of mp3s and play them in this responsive audio player. Includes nifty loading animation, timeline controller and fade-in caption.
Blog: Opt-Out of Responsive Design | 16th Apr 15
Read my latest entry in the blog; Letting users opt-out of responsive website design to view fixed width desktop layouts on mobile/ tablet.
Audio Player w/ Timeline + Cookie | 10th Apr 15
Play a random mp3 in this responsive audio player, with draggable timeline controller, fade-in caption box and cookie to remember auto-play setting.
Fast Edit v1 multi-region alias | 1st Apr 15
A fix has been applied to Fast Edit v1 CMS so that the multi-region dropdown box now uses a menu alias, if one is set. This keeps things logical for users.
Responsive CSS3 Fading Quotes | 24th Mar 15
Fade-in quotes or testimonials elegantly with this CSS3 demo for IE10+ and modern browsers. JavaScript support for IE9. IE7/8 users just see the last item.
Menu CSS simplified [id$="-sub"] | 19th Mar 15
All the freebies RWD menus have been updated with attribute selector [id$="-sub"] to simplify their CSS. Sub-menus no longer need defining individually.
Fullscreen 'Ken Burns' Slideshow | 08th Mar 15
A responsive, fullscreen slideshow using CSS3 transforms to create a Ken Burns panning and zooming effect. A small JavaScript function handles timing.
RWD Push/Slide Menu updated | 4th Mar 15
After a "Doh!" moment of realisation, I set overflow:hidden; on the #menu container instead of using an oversized pseudo element to hide subs. Better!
Fast Edit v1 multi-user support | 3rd Mar 15
While rolling out a few upgrades, I decided to extend multi-user support to Fast Edit v1. Multiple admins can now log in and edit via their own accounts.
Simple Audio Player + icons | 24th Feb 15
A simple audio player for single .mp3 sounds or songs. Play/ pause toggles provide basic controls, and the indicator icons change according to play state.
Form Focus Tip Box with CSS Fade | 23rd Feb 15
A really easy way to show tip/ hint boxes to users as they fill out a form. Uses the :focus pseudo selector and a gentle fade animation with CSS.
Focus on Function RWD relaunch | 19th Feb 15
The Focus on Function website has been overhauled and now boasts a new, ultra zippy, responsive design! Fast AND small (~100kb Gzip on mobile).
'All Change' after web host upgrade | 16th Feb 15
Working on script upgrades for all clients; Troubleshooting woes since web host migrated to new servers. Progress is sporadic but I'm getting there...
Blog: Modal Gallery IE8 support | 27th Jan 15
Read my latest freebie script; Using Selectivizr to make the Modal Gallery work in IE8 - view big pics in a :target triggered modal overlay.
Penny Acres pre-audit updates | 20th Jan 15
It's the auditing season for Penny Acres Primary School so I've been working on getting their content updated to help them achieve their expected grades.
Random Audio w/ Caption + Cookie | 15th Jan 15
Auto-play a random song from a folder of mp3s and display the title in a neat fade-in caption box. With toggle switch to turn the sound off and on again.
RWD Modal Pop-up Image Viewer | 11th Jan 15
A responsive, pop-up image viewer with on-demand image loading. The modal overlay is triggered by a small JS function, and styled with CSS.
RWD Menu in Wordpress theme | 1st Jan 15
"Cleanco" - An ultra flexible WordPress theme, makes use of my Responsive CSS3 Multi-Level, Drop-Down Menu. Thanks for the credit guys!