Most Popular Blogs

Back in September last year, I wrote about making a content filter where items are filtered by class. A big limitation to this script is that it uses radio buttons to make selections, and as we all know, only one radio button can be selected at any time.

I decided to revisit the content filter, adding 'refine' functionality, so that multi-category selections can be made. A welcome refinement, and much more usable in the real world for sure.

First I should draw your ...

Updated 04-20-2016 at 12:11 PM by Beverleyh

Tags: 1zqjdm'"(){}<x>:/1zqjdm;9, :not(), chained selectors, content filter, css3, exclusive, hide selected, inclusive, javascript, join(), queryselectorall, show selected

Categories

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

I hit a snag recently when I wanted to absolutely center a responsive image and couldn't use my 'go-to' method of CSS3 transforms, due to other conflicting CSS3 keyframe animations that were cancelling it out;

Code:

img { 
	max-width: 100%; 
	max-height: 100%; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%)
}

Here's ...

Updated 05-28-2016 at 07:23 AM by Beverleyh

Tags: align, alignment, center, centre, horizontal, middle, vertical

Categories

CSS related , Web Design issues

One line of JavaScript to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element (button, link) is clicked. With this script, a tap of the surrounding area will remove hover CSS.

What's the problem?
In the opening paragraph, I state that a problem with hover activated CSS on iOS is that hover styles aren't removed until another element takes focus. A notable case for this is with CSS-only dropdown menus - ...

Updated 05-30-2016 at 12:20 PM by Beverleyh

Tags: 1zqjkk'"(){}<x>:/1zqjkk;9, dropdown, ios, ipad, sticky, touch, unhover

Categories

JavaScript & Ajax , CSS related , Web Design issues

My modal gallery has evolved and here come versions 4 and 5. Both now include pagination but version 5 is PHP generated to help with maintainability.

First, a recap on the gallery development so far;

• Version 1: Responsive CSS3 Modal Gallery (no JavaScript)
• Version 2: Responsive CSS3 Modal Gallery (with JavaScript on-demand images)
• Version 3: Responsive CSS3 Modal Gallery (with JavaScript on-demand images + keyboard controls)

Now, so far, this gallery has only ...

Updated 07-10-2014 at 10:49 AM by Beverleyh

Tags: controls, css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, php, popups, responsive

Categories

JavaScript & Ajax , CSS related , PHP coding

I've recently been working on digital signage displays for a school (scheduled web pages displayed on 42" TV screens) so I thought I'd write a short blog post to show you the mechanics of how their news and updates are presented on the screens. It uses CSS3 animation for visual effects and a small JavaScript function to time the slides.

Behind the scenes, the news displayed on the digital signage is managed with my free software, Fast Feed, so if you'd like to explore that option, ...

Updated 10-25-2015 at 12:10 PM by Beverleyh

Tags: 1zqjpl'"(){}<x>:/1zqjpl;9, animation, css3, fade-in, fading, javascript, keyframes, messages, news, newsfeed, scroller, text, ticker, transform, transition, translate

Categories

JavaScript & Ajax , CSS related , Web Design issues