Solved

Jquery Vertical Slider issue !

Posted on 2009-05-16
18
1,949 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to count occurrences of each item in an array.

690 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