Jquery Vertical Slider issue !

please go to this page .
http://www.imblog.info/nettuts/demos/droppable/panel.php
there are 2 sliders
 horizontal one is working fine
 i need to animate the vertical slider like the horizontal animation.
code of the vertical slider is below.
<script type="text/javascript">
(function ($) {    
$.fn.simpleSpy = function (limit, interval) {
  // set some defaults
  limit = limit || 4;
  interval = interval || 4000;
  return this.each(function () {
    // 1. setup
      // capture a cache of all the list items
    var $list = $(this),
      items = [], // uninitialised
      currentItem = limit,
	  currentPage=1;
      total = 0, // initialise later on
      height = $list.find('> li:first').height();
	  singleHeight = $list.find('> li:first').height();
          
    // capture the cache
    $list.find('> li').each(function () {
      items.push('<li>' + $(this).html() + '</li>');
    });
    
    total = items.length;
	pages=Math.ceil(total/limit);
   // alert(Math.ceil(1.2));
    //console.log(total);
	
    // chomp the list down to limit li elements    
    $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
//
	function spy(){
// 4. Bind to the forward and back buttons
        $('a.back_cart').click(function () {   
	    return gotoPage(currentPage - 1);          
        });
        
        $('a.next_cart').click(function () {
            return gotoPage(currentPage + 1);
        });
 
  // 5. paging function
        function gotoPage(page) {
			
            var dir = page < currentPage ? -1 : 1, // page < currentPage ? 1 : -1,
                n = Math.abs(currentPage - page),
                top = singleHeight * dir * limit * n;
           // alert($('ul.spy').scrollTop);
            // console.log('currentPage', currentPage, 'left', left, 'n', n);
            
            $('ul.spy').filter(':not(:animated)').animate({
                scrollTop : '+=' + top
            }, 500, function () {
                if (page == 0) {
                    currentPage = pages;
                    // $wrapper.css('scrollLeft', singleWidth * visible * pages); //  * -1
                    this.scrollTop = singleHeight * limit * pages;
					
                } else if (page > pages) {
                    currentPage = 1;
                    this.scrollTop = singleHeight * limit; //  * -1
					
                    // $wrapper.css('scrollLeft', singleWidth * visible); //  * -1
                    // reset back to start position
                } else {
                    currentPage = page;
                }
            });                
            
            return false;
        }
		
		}
		
		
		
		
		
   
    
   spy();
  });
};    
})(jQuery);
</script>

Open in new window

hiddenpearlsAsked:
Who is Participating?
 
Pawel WitkowskiConnect With a Mentor Senior Javascript DeveloperCommented:
One big mess is here uff....

First of all - here is the code you need, and modyfications in HTML:

Instead of having:


<ul style="padding-left:35px; margin-top:30px; border:1px solid white;" class="spy" >
         <!-- <li>
                      </li>-->
          </ul>

Do some wrappings like:

<div id="dropContent">
<ul style="padding-left:35px; margin-top:30px; border:1px solid white;" class="spy" >
         <!-- <li>
                      </li>-->
          </ul>
</div>


this dropContent should have css styles like:

overflow:hidden
height:200px         (or more as you wish)




then do this:













If it wont work just do those changes and give me link with newest version
$.fn.drag_slider2 = function () {
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
 
    return this.each(function () {
//console.log(this);
        var $wrapper = $(this),
            $slider = $wrapper.find('>ul'),
            $items = $slider.find('>li'),
            $single = $items.filter(':first'),
 
            singleHeight = $single.outerHeight(), //parseInt($single.width()) + parseInt($single.css('padding-left')) + parseInt($single.css('padding-right')),
            visible = Math.ceil($wrapper.innerHeight() / singleHeight)  ,//  <!--note: doesnt include padding or border-->
 
            currentPage = 1,
            pages = Math.ceil($items.length / visible);
            console.log($single);
//alert($items.length);
        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('>li');
        }
 
        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
       $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
 
        // 3. Set the left position to the first 'real' item
        // $wrapper.css('scrollLeft', singleHeight * visible); // * -1
        $wrapper.get(0).scrollTop = singleHeight * visible;
 
        // 4. Bind to the forward and back buttons
        $('a.back_cart', this).click(function () {
            return gotoPage(currentPage - 1);
        });
 
        $('a.next_cart', this).click(function () {
            return gotoPage(currentPage + 1);
        });
 
        // 5. paging function
        function gotoPage(page) {
 
            var dir = page < currentPage ? -1 : 1, // page < currentPage ? 1 : -1,
                n = Math.abs(currentPage - page),
                top = singleHeight * dir * visible * n;
 
           //  console.log('currentPage', currentPage, 'left', top, 'n', n);
console.log(this);
            $wrapper.filter(':not(:animated)').animate({
                scrollTop : '+=' + top
            }, 500, function () {
                if (page == 0) {
                    currentPage = pages;
                    // $wrapper.css('scrollLeft', singleHeight * visible * pages); //  * -1
                    this.scrollTop = singleHeight * visible * pages;
                } else if (page > pages) {
                    currentPage = 1;
                    this.scrollTop = singleHeight * visible; //  * -1
                    // $wrapper.css('scrollLeft', singleHeight * visible); //  * -1
                    // reset back to start position
                } else {
                    currentPage = page;
                }
            });
 
            return false;
        }
 
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });
};
 
$(function () {
    $('#dropContent').drag_slider2();
});

Open in new window

0
 
hiddenpearlsAuthor Commented:
thanks to EE moderator !
i need help asap !
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Do you still need help with that ?
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
hiddenpearlsAuthor Commented:
yes ,  i need help still .. please
0
 
hiddenpearlsAuthor Commented:
@wilq32: i  visited your blog , i m sure u can help me in that .
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Yes I doing this right now, it should be simple.
0
 
hiddenpearlsAuthor Commented:
i really appreciate your help . but it is not working . it creates the class empty cloned .. please look at that in chrome and FF with firebug .

http://www.imblog.info/nettuts/demos/droppable/panel.php

here is newest version .
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
From what I gave you:

lines: 36 and 40

remove please a

", this"     from both of those files
0
 
hiddenpearlsAuthor Commented:
yes , it is working now . it is sliding but it creates the empty cloned list items . please see in FF and Chrome with Firebug.

http://www.imblog.info/nettuts/demos/droppable/panel.php#
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
just set for LI css style  :

list-style:none
0
 
hiddenpearlsAuthor Commented:
@wilq32:
yes , it helped me alot ... but i will still need help .. i m busy a bit with other stuff at the moment.
i will keep u posted soon .
thanks
0
 
hiddenpearlsAuthor Commented:
@wilq32

i m starting work on this again .. are u still available for help ?

thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.