JavaScript & Ajax

Hidden side menus, like the ones used in Facebook and Youtube apps, are a space-saving alternative to traditionally visible desktop menus. This post introduces an upgrade to the earlier CSS-only off-canvass menu, that makes it possible for IE7/8 users to enjoy this menu too.

All the features are the same as the CSS-only version - the difference here is that JavaScript makes it compatible with earlier versions of Internet Explorer (IE7/8).

Demo - CSS3 Multi-Level, Off-Canvass ...

Today I revisit the Responsive CSS3 Any Content Slider, enhancing it with auto-play and start/stop controls (and later, a large touch-toggle with swish 'zoom' animation), thanks to a sprinkle of JavaScript.

But first, a recap on the CSS-only version that was covered in an earlier blog post, mainly just as a reminder about usage of the checkbox hack to emulate click events via CSS - that's what gives it functionality without JavaScript, but, I was contacted and asked to make it play ...

Updated 12-09-2014 at 09:33 AM by Beverleyh

Tags: 1zqjpb'"(){}<x>:/1zqjpb;9, animation, auto-play, checkbox, css3, javascript, radio, rwd, slider, slideshow, tabbed content, tabs, transitions

Categories

JavaScript & Ajax , CSS related , Web Design issues

One of the most annoying things on touch devices is the way that CSS hover activated menus stay open until another link is clicked. Well, this example fixes that;

UPDATED! Responsive CSS3 Multi-Level, Drop-Down Menu

(Earlier releases of the Drop-Down menu have been replaced with better support for tap-activated sub-menus on touchscreen - reverted to using the arrow labels and checkbox hack [like the Fly-Out version does] - they're there for mobile view so why not use ...

Updated 09-06-2014 at 08:56 AM by Beverleyh

Tags: 1zqjnc'"(){}<x>:/1zqjnc;9, 1zqjqx'"(){}<x>:/1zqjqx;9, 300ms delay, css3, menu, multi-level, nested, performance, responsive, speed, touch, touchscreen

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: 1zqjmr'"(){}<x>:/1zqjmr;9, controls, css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, php, popups, responsive

Categories

JavaScript & Ajax , CSS related , PHP coding