Solved

Jquery Vertical Slider issue !

Posted on 2009-05-16
18
1,941 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

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 will show, step by step, how to integrate R code into a R Sweave document
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

910 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

19 Experts available now in Live!

Get 1:1 Help Now