JavaScript & Ajax

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: 1zqjfb'"(){}<x>:/1zqjfb;9, 1zqjkk'"(){}<x>:/1zqjkk;9, dropdown, ios, ipad, sticky, touch, unhover

Categories

JavaScript & Ajax , CSS related , Web Design issues

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;

...

Tags: 1zqjyq'"(){}<x>:/1zqjyq;9, close, contract, expand, javascript, jquery, open, slidedown, slideup, toggle, transition, velocity

Categories

JavaScript & Ajax , CSS related , Web Design issues

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, 1zqjpp'"(){}<x>:/1zqjpp;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

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

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

Updated 12-20-2015 at 09:30 AM by Beverleyh

Tags: 1zqjir'"(){}<x>:/1zqjir;9, animated, gif, load, movie, on-demand, onload, performance, player, speed, video, weight

Categories

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