Solved

Jquery Vertical Slider issue !

Posted on 2009-05-16
18
1,943 Views
Last Modified: 2012-05-07
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
Comment
Question by:hiddenpearls
  • 7
  • 5
18 Comments
 

Author Comment

by:hiddenpearls
ID: 24432306
thanks to EE moderator !
i need help asap !
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24466965
Do you still need help with that ?
0
 

Author Comment

by:hiddenpearls
ID: 24467015
yes ,  i need help still .. please
0
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

Author Comment

by:hiddenpearls
ID: 24467023
@wilq32: i  visited your blog , i m sure u can help me in that .
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24467032
Yes I doing this right now, it should be simple.
0
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 500 total points
ID: 24467267
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
 

Author Comment

by:hiddenpearls
ID: 24467454
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24467930
From what I gave you:

lines: 36 and 40

remove please a

", this"     from both of those files
0
 

Author Comment

by:hiddenpearls
ID: 24469411
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24469428
just set for LI css style  :

list-style:none
0
 

Author Comment

by:hiddenpearls
ID: 24485449
@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
 

Author Comment

by:hiddenpearls
ID: 25002008
@wilq32

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

thanks
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question