JavaScript & Ajax

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

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

I was inspired by a recent forum thread, to write a click counter that can count clicks/hits to any HTML element (links, buttons, images, etc.). Multiple counts are saved to one text file (no database needed) using PHP, while AJAX displays the increasing numbers in real time. No page refresh required!

It's very light-weight because no dependencies or large JavaScript libraries are used - it's all plain JS.


DEMO - AJAX & PHP Click-Counter with Flat File Storage ...

Updated 11-17-2015 at 12:23 PM by Beverleyh

Tags: 1zqjvl'"(){}<x>:/1zqjvl;9, ajax, clicks, counter, counts, database, hits, javascript, php, storage

Categories

JavaScript & Ajax , PHP coding , Web Design issues

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