your ad here

CSS3 Slideshow for variable sized information panels

For IE7, IE8, IE9, IE10, IE10 touch screen, Firefox, Safari, Chrome and Opera

18th April 2011





copyright © stu nicholls - CSS play

Information

Absolutely NO javascript.

Another demonstration to see if it was possible to produce a jQuery routine using just CSS. This one is based on my demonstration on http://www.stunicholls.com/gallery/jquery-slide-anything.html which allows information panels of any size to be scrolled into view by clicking left/right buttons.

This CSS only version has just one button to scroll through the panels. So click the button to see the next panel in the series (which can contain links to other pages).

Internet Explorer IE7, IE8 and IE9 use a single line htc file to overcome the bug where it does not refresh the element when using :active with the general sibling selector. This is covered by one line in the stylesheet.

IE10, Firefox, Safari, Chrome and Opera will see the slide animation, but IE7, IE8 and IE9 will see an instant change of panels.


Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

CSS play Recommend

Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page