2

Can anyone give me a light how to develop a site without jquery and javascript.

Currently I have a carousel developed using by jquery cycle plugin, but as we changed the mind that we should implement our site believing 'web for all, using progressive enhancement', sounds good to me but have no idea how i'm gonna modify my exisiting carousel and accordion to run if javascript is disabled.

I have to run those carousel and accordion without javascript or minimal use of javascript. Using only css3 and html5, so if javascript is OFF still users can view. Currently without javascript, accordion breaks, simply it displays all the contents and carousel just stucks!

I'm just looking for some ideas, how to run my existing carousel, accordion without JS.

Thanks in advance.

Waiting for your answers.

Zakir Sajib
  • 293
  • 2
  • 7
  • 16
  • why? just out of interest; I really don't understand why this would be useful. pretty much everyone has JavaScript enabled, and those that don't are either search engines or speech browsers, where image carousels would not be useful anyway. – Kae Verens Nov 19 '11 at 15:14
  • Exactly, Why ? This is the same question I asked my manager, and he said our site should be visible to everyone, we have to consider accessibility, and for most importantly for legal purpose. Also javascript based contents are not crawled by google! Whe he saw one page which was using javascript and when it was disabled the whole calendar disappeared, he simply said it is illegal and not acceptable! I looked around the room and everyone looked at me as I was watching porn! – Zakir Sajib Nov 19 '11 at 15:19

2 Answers2

2

Interactivity on websites is delivered through CSS and Javascript. If you disable Javascript, you'll have to do all interactivity with CSS.

CSS3 is certainly able to generate carousels. See http://speckyboy.com/2010/06/09/10-pure-css3-image-galleries-and-sliders/ for some examples. Here is (german, but understandable) walk-through for a pure CSS3 carousel: http://webstandard.kulando.de/post/2010/05/21/sliding-image-gallery-css3-transition-tutorial

Still, while this is nice and solves the problem for people that don't have Javascript, it creates just as much problems for people with older browsers that don't support CSS3...

Tell your boss that there will always be people that don't have Javascript, don't have CSS3, don't like carousels or even don't have internet. You can't make your site accessible for everybody! Just consider the costs and benefits, and go for some reasonable option!

I myself think that a Javascript with CSS3 fallback works well for most everybody :)

Good luck!

Willem Mulder
  • 12,974
  • 3
  • 37
  • 62
1

You are going to want to check out css3 transitions, transforms and the :active pseudo class.

transitions: http://www.alistapart.com/articles/understanding-css3-transitions/

transforms: http://24ways.org/2010/intro-to-css-3d-transforms

pseudo classes: http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/

You will end up displaying all of the images at once, or displaying one static image in browsers like ie6, if you don't want to use javascript.

Chris Biscardi
  • 3,148
  • 2
  • 20
  • 19