Link to home
Start Free TrialLog in
Avatar of hiddenpearls
hiddenpearlsFlag for Pakistan

asked on

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

Avatar of hiddenpearls
hiddenpearls
Flag of Pakistan image

ASKER

thanks to EE moderator !
i need help asap !
Do you still need help with that ?
yes ,  i need help still .. please
@wilq32: i  visited your blog , i m sure u can help me in that .
Yes I doing this right now, it should be simple.
ASKER CERTIFIED SOLUTION
Avatar of Pawel Witkowski
Pawel Witkowski
Flag of Poland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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 .
From what I gave you:

lines: 36 and 40

remove please a

", this"     from both of those files
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#
just set for LI css style  :

list-style:none
@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
@wilq32

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

thanks