A good way to manage long list in short space!

jquery.mb.verticalSlider let you show long list of elements managing pagination, it can work with elements already in the DOM of your page or loading them via ajax when needed. And it works with mouse wheel of course.

v. 1.0

Comments

60 Responses to “jQuery.mb.verticalSlider”

tremerator says:

20/01/2011 at 10:55 pm

Hi,

Great work but I can’t find any documentation about verticalSlider.
Im trying to load my content without using ajax.
Can you tell me how to do this please?

thank you.

Reply
- Matteo Bicocchi says:
  
  22/01/2011 at 7:12 pm
  
  Sorry, DOC is not published yet.
  
  Yes, you inserted content directly into the verticalslider element on your page (in the demo page the “.slider” DIV). Set the “template” property to an empty string and that’s all.
  Bye,
  Matteo
  
  Reply
- Shubham Kumar says:
  
  07/03/2011 at 9:01 pm
  
  How to its Work i donot understand so please help me.
  Please Contact me=kshubham52@gmail.com
  
  Reply
Sk says:

10/02/2011 at 8:57 am

Thas´t great i’m gonna prove this. thanks

Reply
- Joe says:
  
  10/02/2011 at 7:24 pm
  
  Looks great as usual.
  
  What would be a very nice feature would be a search or “jump-to” function box so one could jump down the list.
  
  Looks great though Matteo
  Joe
  
  Reply
Seb says:

20/02/2011 at 9:11 pm

Love it.

Would also love to see some sort of feedback to give users an idea of where I am in the grand scheme of things. Eg, a scroll bar with scroller length in proportion to scroller track, or some sort of pagination indicator (screen 2/12).

Keep up the great work. A presto.

Seb

Reply
topy says:

23/02/2011 at 11:36 pm

Hi,

I’m using verticalSlider without Ajax. I have a list with 5 visible entrys, so all works fine with up to 10 entries at all. But if there more it slides only to the last or to the first page. For example if there are 20 entries it shows 1,2,3,4,5, then u need to click 3 times and then it shows 16,17,18,19,20 … I tested it with just Test as innerHTML… but i doesnt work, here my configuration

$(“#user_lists”).mb_vSlider({
//default attributes of the mb.vSlider
template:”"
,easing:”easeOutExpo”
,slideTimer:1000
,nextEl:”.vSnext”
,prevEl:”.vSprev”
,height:100
,width:195
},{ //data passed in the ajax query string
elementsPerPage:5
,actualPage:0
})

any ideads?

thx a lot
topy

Reply
- Matteo Bicocchi says:
  
  24/02/2011 at 12:10 am
  
  Hi Tobias,
  here is a link to the latest component’s update with a demo_list_in_place.html file included:
  https://github.com/pupunzi/jquery.mb.verticalSlider/zipball/1.1
  
  The second parameter pased to the function is considered only if you get the list via ajax, otherwise it’s ignored.
  Play around with the demo.
  Bye,
  Matteo
  
  Reply
  - topy says:
    
    24/02/2011 at 9:39 pm
    
    Hi,
    thx for your quick response and the example, but it didn’t helped me with my problem…
    
    First, here my Javascript: http://pastebin.com/68BgxA1r
    and here my HTML: http://pastebin.com/BAXJZ9JR
    
    It runs very nicely if I have only 10 entries in list. So there are two pages a 5 entries. But if I add one more, it brokes. I need to click TWO times to come to the next entrys and then it only shows the last ones. The entrys in the mid are just skipped. I don’t know whats wrong with my code.
    
    thx for helping me
  - Matteo Bicocchi says:
    
    24/02/2011 at 11:03 pm
    
    I test your code (http://pastebin.com/ZB6mph1e) but can’t repeat your behavior.
    It could be a CSS issue… don’t know.
    
    Bye,
    matteo
  - topy says:
    
    25/02/2011 at 12:04 am
    
    hi there,
    thx for your quick response again. I searched for a possible error in my stylesheet, but didn’t found anything.. I took a snapshot of my page http://pastebin.com/2jzSE42C .. the error appears on the left top in the box “Listen”.. It would be very nice if you have a look
    
    thx a lot!
Derek says:

01/03/2011 at 6:35 pm

Hi there I’m just learning and was wondering how do you pass back the number of rows for the “totlaElements parameter?

Many thanks

Reply
Dhruv says:

02/03/2011 at 8:48 pm

Hi Matteo

I want to fix first row as my headers, how can I achieve the same? It scrolls the full area.

Thanks
Dhruv

Reply
Jax says:

14/03/2011 at 7:05 pm

Hi, this is a great plugin, thanks! Is there a way to have the scrolling activated on rollover/hover?

Reply
jam says:

19/03/2011 at 9:02 am

thanks ! my site using this and work well !

Reply
Limpan says:

21/03/2011 at 2:29 pm

Nice slider, made one myself but it was not as easy to implement.

Good work mate!

Reply
Sérgio Campos says:

13/04/2011 at 7:14 pm

I used your code, and let me say it was very usefull.
However i spoted a little bug, if we have a few items, not enough to create a 2nd page you still enable the “next” button.

I changed to this: http://pastebin.com/qZ9uwmDn

good work

Reply
Francisco says:

28/04/2011 at 12:27 am

hi, i have a little issue and i hope you can help me… the issue is that when i load my page, i also load my slider with ajax, but my page is sending the call twice and i get repeat data so, how can i do for my page only to call it once?
I really hope you can help me with this little issue.

Reply
Dino says:

04/05/2011 at 3:57 pm

Is there any way that your vertical slider demo can be manipulated to a horizontal slider? I have a
navigation menu with 7 links. I am trying to get them to slide back and forth. When a user selects the next btn I do not want one link to show and the same with the previous btn.

Reply
- Matteo Bicocchi says:
  
  10/05/2011 at 8:34 pm
  
  Hi Dino,
  No, actually this component works vertically only.
  Bye,
  Matteo
  
  Reply
humayon says:

23/06/2011 at 10:39 am

I am very new i this color full dreamy dream land… I wonder how a guy have so much of imagination… Great job Matteo. Web Picasso(Matteo)…..

Reply
- Matteo Bicocchi says:
  
  23/06/2011 at 8:02 pm
  
  Thnx humayon!
  
  Reply
Will says:

08/07/2011 at 4:42 am

Hi there, I’m having a rather strange issue. I’ve gotten everything to load properly and my slider scrolls down but not back up again. Can anyone help me with this?

Reply
- Andrew Tebbott (@Tebbott) says:
  
  20/10/2011 at 6:09 pm
  
  I’m having this same issue, did you ever find out why this was happening?
  
  Reply
  - Matteo Bicocchi says:
    
    21/10/2011 at 10:03 pm
    
    If you point me to a public url of your page I can try to help you…
    Bye,
    Matteo
Antoine says:

06/08/2011 at 4:28 pm

Hi Matteo,
good job for this plugin.
I’d like to know how to go back to the top of the list when I click on a button ?

Thanks for your reply
Antoine

Reply
cilndroutes says:

22/08/2011 at 11:09 am

Hi,

very nice work !
Could you explain me how to setup the mousewhell feature ?
Thanks by advance

Reply
cilndroutes says:

02/09/2011 at 12:24 pm

Hi Matteo,
I found the reason why the mousewheel does work. You check the “delta” result of mousewheel against “1″ and “-1″ try to check it against “0″, and it works.

Reply
Ricardo says:

24/09/2011 at 10:09 am

Hi,

You think there could be a way to incorporate your paging into another JQuery script?

I’m using these template: http://www.ivystudio.it/airfolio-html/portfolio.html that uses a nice grouping script. But lets say that for ALL PROJECTS there are 50 entries, then the page is too long. So I want to be able to group items and page then if there are too many entries.

Thanks.

Reply
- Matteo Bicocchi says:
  
  24/09/2011 at 11:21 am
  
  Hi Ricardo,
  It should work but you have to try; there could be conflicts with other components behaviour.
  Bye,
  Matteo
  
  Reply
  - Ricardo says:
    
    25/09/2011 at 2:01 am
    
    You do paywork? How may I contact you directly?
    
    Thanks.
  - Matteo Bicocchi says:
    
    25/09/2011 at 10:26 pm
    
    Hi Ricardo,
    you can write to info[at]open-lab.com that is my company.
    Bye,
    Matteo
Steve Margolin says:

07/10/2011 at 1:14 am

Hi, this is an excellent plugin! Thank you!
I was wondering if there’s a way to disable scrolling when all items in the list appear in a pre-sized space? IOW, enable scrolling only when the number of items exceeds a certain height limit.
Right now, I’m using it to show a list of news items, but the same items appear over and over as you keep scrolling. See http://www.bms-inc.com/index-news.html, righthand side block named News.
Steve

Reply
Andrew says:

21/11/2011 at 6:36 pm

Very nice! How to use 2 sliders on the same page without conflict?

Reply
- Matteo Bicocchi says:
  
  21/11/2011 at 9:45 pm
  
  Hi Andrew,
  download the latest update from gitHub, You’ll find the “demo1.html” file with a double instance of the verticalSlider.
  https://github.com/pupunzi/jquery.mb.verticalSlider/zipball/master
  
  Bye,
  Matteo
  
  Reply