如果javascript被禁用，jquery同位素的后备？

Question

Is there a fallback for jQuery isotope if JavaScript is disabled?

Suppose if I m using there fitColumns property, is there a fallback to that layout style if JavaScript is disabled, like what u have in d new myspace .
the initial posts, which appears on your myspace home page, will be styled properly but no additional post will load when you further scroll.
What kind of CSS structure or fallback methodology can be used for such situations?

Answer 1

If JavaScript is disabled and if you want to keep the elements positioned nicely like as if the jQuery Isotope is doing its job then you can only rely on CSS. That would mean you would have to manually position those elements in the order that you want.

If you're OK with that then follow these steps below to start:

1. Put a class name on the main wrapper of your Isotope elements such as off . For example: <div id="isotope-container" class="isotope off">
2. Start positioning your elements manually and include .off as one of the selectors. For example: .isotope.off .isotope-element-1 { position:absolute; top: 10px; left: 10px; } .isotope.off .isotope-element-1 { position:absolute; top: 10px; left: 10px; } .isotope.off .isotope-element-1 { position:absolute; top: 10px; left: 10px; } .isotope.off .isotope-element-2 { position:absolute; top: 10px; left: 100px; } .isotope.off .isotope-element-2 { position:absolute; top: 10px; left: 100px; }
3. Then on your general jquery file where you have all other stuff written on, check if .off class exists and if it does, remove it. For example: if($('#isotope-container.isotope').hasClass('off')){ $('#isotope-container.isotope').removeClass('off'); } if($('#isotope-container.isotope').hasClass('off')){ $('#isotope-container.isotope').removeClass('off'); }