jquery - Shows specific divs on scroll with non javascript browser support -
i trying modify below script make more friendly users disabled javascript. code below set opacity of divs 0 , 1 on scroll position. want hide specific divs manually adding class 'hideme' , show them on scroll.
$(document).ready(function() { /* hide elements outside visible window */ $('body *').each( function(){ var top_of_object = $(this).position().top; var bottom_of_window = $(window).scrolltop() + $(window).height(); if( bottom_of_window < top_of_object ){ $(this).addclass('hideme').css({'opacity':'0'}); } }); /* every time window scrolled ... */ $(window).scroll( function(){ /* check location of desired elements */ $('.hideme').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerheight(); var bottom_of_window = $(window).scrolltop() + $(window).height(); if( bottom_of_window > ( bottom_of_object + 20 ) ){ $(this).removeclass('hideme').animate({'opacity':'1'},500); } }); }); }); i figured out how specify selected divs, change below code
$('body *').each( function(){
to
$('.div-class,.another-div-class').each( function(){
as noted anthony in comments, code went execute @ if user has disabled javascript is, in itself, javascript.
you need reverse logic , construct html page fine no javascript, , in javascript add or use javascript hide/change parts of dom make better people javascript.
i feel inclined (but know launched upon non-js people out there) point out need weigh whether minority of non-javascripters worth time , effort take you, or whether use our friend <noscript> tag tell them parts of site require javascript display correctly. sure, practice make site degrade gracefully, remember having site working more important making sure every case works every person. i've seen many people fall trap of trying please , never releasing product!
i know doesn't give solid answers might starting point you.
Comments
Post a Comment