Solved

Jquery Vertical Slider issue !

Posted on 2009-05-16
18
1,940 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:wilq32
ID: 24466965
Do you still need help with that ?
0
 

Author Comment

by:hiddenpearls
ID: 24467015
yes ,  i need help still .. please
0
 

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:wilq32
ID: 24467032
Yes I doing this right now, it should be simple.
0
 
LVL 18

Accepted Solution

by:
wilq32 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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:wilq32
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:wilq32
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now