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. 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;

    ...
  3. 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 ...
  4. Getting Started with JavaScript Charts

    Credits: This is a guest post by Rohit Boggarapu, a software engineer at Adobe.

    Data visualization is something that comes up at least once in the work life of a frontend developer. If you are a JavaScript developer and havenít made any interactive charts yet, then there is a good chance that you will do so in near future. And to prepare you for that moment, I decided to write this detailed tutorial.

    In this tutorial I will not only cover the process of making a simple ...
    Categories
    JavaScript & Ajax
  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 8 123 ... LastLast