• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1956
  • Last Modified:

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

0
hiddenpearls
Asked:
hiddenpearls
  • 7
  • 5
1 Solution
 
hiddenpearlsAuthor Commented:
thanks to EE moderator !
i need help asap !
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Do you still need help with that ?
0
 
hiddenpearlsAuthor Commented:
yes ,  i need help still .. please
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
Pawel WitkowskiSenior 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:
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now