Geek Answers Handbook

JQuery Scrolling

I was assigned some kind of work, where I need to implement a type of firmware like a slot machine on some blocks (divs) containing various content. I want to do the following: every time I click a button / link, I want a column of 4 blocks (divs) to move a distance equal to the height of each block. I was able to come up with the following basic functions (thanks to a great answer right here on SO!):

HTML

<div class="slot" id="slot1"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block last">4</div> </div> <div class="slot" id="slot2"> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block last">8</div> </div> <div class="slot" id="slot3"> <div class="block">9</div> <div class="block">10</div> <div class="block">11</div> <div class="block">12</div> </div> <div class="clear"></div> <p><a href="#" id="nudge1">nudge1</a></p> <p><a href="#" id="nudge2">nudge2</a></p> <p><a href="#" id="nudge3">nudge3</a></p>

CSS

 .block { height:58px; width:100px; color: #ccc; border: 1px solid #666; position:absolute; } .slot { height: 176px; width:100px; border: solid 1px black; position: relative; overflow: hidden; float:left; } .clear { clear:both; } p { display:inline;} }

Js

 $(document).ready(function() { $(".block").last().addClass("last"); $(".slot").each(function() { var i = 0; $(this).find(".block").each(function() { var $this = $(this); $this.css("top", i); i += $this.height(); }); }); $('#nudge1').on('click',function() { var countScrolls = $('.slot .block').length; for (var i=0; i < countScrolls; i++) { var top = parseInt($('#slot1 .block:nth-child(' + i + ')').css("top")); if (top < -58) { var $lastEle = $('#slot1 .block:nth-child(' + i + ')').closest('.slot').find(".last"); $lastEle.removeClass("last"); $('#slot1 .block:nth-child(' + i + ')').addClass("last"); var top = (parseInt($lastEle.css("top")) + $lastEle.height()); $('#slot1 .block:nth-child(' + i + ')').css("top", top); } $('#slot1 .block:nth-child(' + i + ')').clearQueue().stop().animate({ top: (parseInt(top) - 58) }, 100, 'linear'); } }); $('#nudge2').on('click',function() { var countScrolls = $('.slot .block').length; for (var i=0; i < countScrolls; i++) { var top = parseInt($('#slot2 .block:nth-child(' + i + ')').css("top")); if (top < -58) { var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last"); $lastEle.removeClass("last"); $('#slot2 .block:nth-child(' + i + ')').addClass("last"); var top = (parseInt($lastEle.css("top")) + $lastEle.height()); $('#slot2 .block:nth-child(' + i + ')').css("top", top); } $('#slot2 .block:nth-child(' + i + ')').clearQueue().stop().animate({ top: (parseInt(top) - 58) }, 100, 'linear'); } }); $('#nudge3').on('click',function() { var countScrolls = $('.slot .block').length; for (var i=0; i < countScrolls; i++) { var top = parseInt($('#slot3 .block:nth-child(' + i + ')').css("top")); if (top < -58) { var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last"); $lastEle.removeClass("last"); $('#slot3 .block:nth-child(' + i + ')').addClass("last"); var top = (parseInt($lastEle.css("top")) + $lastEle.height()); $('#slot3 .block:nth-child(' + i + ')').css("top", top); } $('#slot3 .block:nth-child(' + i + ')').clearQueue().stop().animate({ top: (parseInt(top) - 58) }, 100, 'linear'); } }); });

Here is the fiddle for better reference. Clicking on "nudge" enlivens the blocks to move up in height equal to the height of each block. My problem is that this works fine for two blocks at a time now, and I can't figure out how to display more (3 specifically). Can someone suggest me a way to do this here?

+4
source share
1 answer

Like this? Demo Made it a lot easier, readable and extensible. Sorry, I do not have access to jsfiddle in my current location.

HTML:

 <div class="slot" id="slot1"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> </div> <div class="slot" id="slot2"> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> </div> <div class="slot" id="slot3"> <div class="block">9</div> <div class="block">10</div> <div class="block">11</div> <div class="block">12</div> </div> <div class="clear"></div> <div class="slotActionWrapper"> <div class="slotActions"> <a href="#" id="nudge1Up">&uarr;</a>&nbsp; <a href="#" id="nudge1Down">&darr;</a> </div> <div class="slotActions"> <a href="#" id="nudge2Up">&uarr;</a>&nbsp; <a href="#" id="nudge2Down">&darr;</a> </div> <div class="slotActions"> <a href="#" id="nudge3Up">&uarr;</a>&nbsp; <a href="#" id="nudge3Down">&darr;</a> </div> </div>

CSS

 .block { height:58px; width:100px; color: #ccc; border: 1px solid #666; float:left; } .slot { height: 176px; width:100px; border: solid 1px black; position: relative; overflow: hidden; float:left; } .slotActionWrapper { width: 306px; } .slotActions { width: 102px; text-align:center; float: left; } .slotActions a, .slotActions a:visited { text-decoration: none; color: black; } .clear { clear:both; }

JavaScript:

 $(document).ready(function() { $('#nudge1Up').on('click',function() { $('#slot1 .block').first().animate({marginTop: "-=60"}, 300, function() { var firstElement = $(this).detach(); firstElement.css('margin-top', '0'); $('#slot1').append(firstElement); }); }); $('#nudge2Up').on('click',function() { $('#slot2 .block').first().animate({marginTop: "-=60"}, 300, function() { var firstElement = $(this).detach(); firstElement.css('margin-top', '0'); $('#slot2').append(firstElement); }); }); $('#nudge3Up').on('click',function() { $('#slot3 .block').first().animate({marginTop: "-=60"}, 300, function() { var firstElement = $(this).detach(); firstElement.css('margin-top', '0'); $('#slot3').append(firstElement); }); }); $('#nudge1Down').on('click',function() { var lastElement = $('#slot1 .block:last-child').detach(); $('#slot1').prepend(lastElement); $('#slot1 .block:first-child').css('margin-top', '-60px'); $('#slot1 .block:first-child').animate({marginTop: "+=60"}, 300); }); $('#nudge2Down').on('click',function() { var lastElement = $('#slot2 .block:last-child').detach(); $('#slot2').prepend(lastElement); $('#slot2 .block:first-child').css('margin-top', '-60px'); $('#slot2 .block:first-child').animate({marginTop: "+=60"}, 300); }); $('#nudge3Down').on('click',function() { var lastElement = $('#slot3 .block:last-child').detach(); $('#slot3').prepend(lastElement); $('#slot3 .block:first-child').css('margin-top', '-60px'); $('#slot3 .block:first-child').animate({marginTop: "+=60"}, 300); }); });
+2
source

More articles:


All Articles