Wednesday, 21 August 2013

Moving static variables and related classes into a loop

Moving static variables and related classes into a loop

I have some code in a Javascript file that was fixed at 3 elements.
I am now pulling items from a database so I need to convert it into a loop
to create the right amount of elements.
I can't seem to figure out how to write my dynamic variables properly.
This is what I originally had:
var block0=$('#block0').offset().top;
var block1=$('#block1').offset().top;
var block2=$('#block2').offset().top;
$(window).scroll(function(){
windowScroll=$(window).scrollTop();
// conditional first item
if(windowScroll > block0){
$('.arrow').show();
$('.static_ele').hide();
$('#block_1').show();
$('#block_1').css({'position':'fixed','padding-top':0});
$('.arrow a').removeClass('upward');
}else{
$('.arrow a').attr('href','#block1');
}
// all central items
if(windowScroll > block1-200){
$('.static_ele').hide();
$('#block_2').show();
$('#block_2').css('position','fixed');
$('.arrow a').attr('href','#block2');
$('.arrow a').removeClass('upward');
}
// conditional last item
if(windowScroll > block2-200){
$('.static_ele').hide();
$('#block_3').show();
$('#block_3').css('position','fixed');
$('.arrow a').attr('href','#arrow1');
$('.arrow a').addClass('upward');
}
})
This is where I have got to:
var i=0;
var j=0;
var len={{collection.products_count}};
for (j; j<len; j++)
{
// set block vars
var tem=block[j];
tem=$('#block'+[j]).offset().top;
}
$(window).scroll(function(){
windowScroll=$(window).scrollTop();
for (i; i<len; i++)
{
// first block
if(i == 0){
if(windowScroll > block0){
$('.arrow').show();
$('.static_ele').hide();
$('#block_1').show();
$('#block_1').css({'position':'fixed','padding-top':0});
$('.arrow a').removeClass('upward');
}else{
$('.arrow a').attr('href','#block1');
}
} else {
// last block
if(i == len){
if(windowScroll > tem-200){
$('.static_ele').hide();
$('#block_'+[i+1]).show();
$('#block_'+[i+1]).css('position','fixed');
$('.arrow a').attr('href','#arrow1');
$('.arrow a').addClass('upward');
}
} else {
// all other blocks
if(windowScroll > tem-200){
$('.static_ele').hide();
$('#block_'+[i+1]).show();
$('#block_'+[i+1]).css('position','fixed');
$('.arrow a').attr('href','#block_'+[i+1]);
$('.arrow a').removeClass('upward');
}
} // end testing which blocks
} // end for loop
}) // end window scroll function

No comments:

Post a Comment