View RSS Feed

Recent Blogs Posts

  1. iOS 'Sticky Hover' Fix - Unhovering dropdown CSS menus

    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

    Categories
    JavaScript & Ajax , CSS related , Web Design issues
  2. The Easy Way to Absolute Center (vertical + horizontal alignment)

    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

    Categories
    CSS related , Web Design issues
  3. SlideUp / SlideDown content without jQuery (VelocityJS)

    The SlideUp/SlideDown methods in jQuery are said to be the "Holy Grail" of vertical animations, because they are able to (reasonably) smoothly change the height of a matched element with a sliding motion, while allowing sibling elements to move in to the empty space. If you're unsure of what I mean, take a look at this jQuery-powered Q&A/FAQs script I cobbled together, and watch how the pretty-coloured bars move to leave no gaps, when other boxes are opened and closed;

    ...
  4. Content Filter + Refine with Multi-Category Select (show selected or hide selected)

    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 ...
  5. On-Demand Animated GIF Player to reduce page load

    Play animated GIFs on-demand with this GIF player. No JavaScript dependencies. Initial loading of a GIF is delayed until the user starts playback manually.

    For a recent project, I needed to display a number of animated GIFs on a web page to illustrate before and after scenarios. Now, the problem with GIFs is that they are usually displayed on a web page using the <img> element, which means that they download immediately when the page loads. Some of my animated GIFs were several ...
Page 1 of 7 123 ... LastLast