0

When adding JQuery to hide a class it of course waits for the page to load then hides the class, same thing for 'addClass'. There has got to be a better or faster way for it to 'load' as the page is loading. Anyone know of any ideas? I have given my sites JQuery scripts below with links to see them in action:

Hides sub filters: Link to example of my script to hide sub filters (notice left navigation filters)

if(jQuery('.refinement_category_section').length){
   jQuery('.refinement_custom_category_section').hide() &&
      jQuery('.refinement_filter').hide();
}

jQuery(document).ready(function(){                         
   if(jQuery('.refinement_category_section').length){
      jQuery('.refinement_custom_category_section').hide() &&
         jQuery('.refinement_filter').hide();
   }
});

OR

Adds a Class:Link to example of my script adding Class (notice left navigation filters)

$('.refinement_brand_section').parent().addClass('filterresults');

ErikE
  • 48,881
  • 23
  • 151
  • 196
ToddN
  • 2,901
  • 14
  • 56
  • 96
  • Use css... .className{ display:none; }. – Joseadrian Mar 04 '11 at 20:57
  • Am I the only one who cares about accessibility? Progressive enhancement means that it's not broken if the user isn't (can't) use javascript. Hiding them, not revealing them, via javascript is the way to go. – tvanfosson Mar 04 '11 at 21:03
  • tvanfosson - i agree with your sentiment. however, i know for a fact that many of our admin backends work exclusively with javascript enabled as a default, due to sponsor demands to have a combo of offline capability and clientside decision process trees. as i said, i get you but it's very use case specific and i don't feel you can always mandate accessibilty concerns (per se - they should be accomodated) in opposition to business demand. this is an ongoing issue with many of my projects, so i do feel it – jim tollan Mar 04 '11 at 21:44
  • @jim - I work for the government (University) so accessibility is always a concern. The biggest use case for this is not people who have javascript turned off intentionally -- those I don't worry about -- but vision-impaired people using screen readers. – tvanfosson Mar 04 '11 at 22:52
  • tvanfosson - yes, i take that on board 100%. i think the balance is definately progressive enhancement moving twds full js functionality when the user base is unknown. – jim tollan Mar 05 '11 at 10:07

2 Answers2

1

you can add CSS rules to hide these classes and then change it after jquery loads

.refinement_category_section, .refinement_custom_category_section, .refinement_filter {
  display: none;
}
yoavmatchulsky
  • 2,962
  • 1
  • 17
  • 22
  • Then if there's a javascript error (say like loading Google analytics) or the user is using a screen reader, they won't display at all. – tvanfosson Mar 04 '11 at 21:01
  • I don't think there a way to do what you want without waiting for the DOM ready handler.. – yoavmatchulsky Mar 04 '11 at 21:09
  • @yaov - you can do quite a lot of improvement by simply reducing the number of requests and still keep the interface accessible. – tvanfosson Mar 04 '11 at 21:14
1

Using Firebug, it appears that the issue is with the number of images that you are loading. My suggestion is to dynamically load pictures for your items using javascript after applying your style changes or have a smaller number of items on the page (or both). This will result in a degraded, but still functional interface for non-javascript users. For javascript-enabled browsers, you can adjust how and how many images are loaded to still achieve a nice effect.

You should also use sprites for your small interface elements so that you're downloading a single image and using CSS to display various portions of it. Combining your javascript files and stylesheets for your production site would also help quite a bit -- you've got 20+ js files and 13+ stylesheets, each of which requires a separate request. You might want to run YSlow and follow it's other recommendations.

tvanfosson
  • 524,688
  • 99
  • 697
  • 795