0

What would be the ideal way to implement:

  1. A list of widgets / panels . I am looking for widgets like in iGoogle or heft.me. A possible solution would be to use the css from the heft.me site, but I would like to know if there is a twitter bootstrap way of doing it or are there any extensions available ?

  2. Once I achieve rendering widgets, I will be adding widgets dynamically. I would like these widgets to be horizontally scrollable. One possible solution is that I should tweak the carousel plugin that comes with twitter-bootstrap, but again I would like to know if there is a better way ?

  3. Will it be advisable to maintain a list of horizontal scrolling widgets for smaller devices like mobile phones or is better to render them differently on mobile devices, may be accordion panels or something of that sort ?

    BTW I am using twitter-bootstrap 2.0.4

Anand Sunderraman
  • 7,900
  • 31
  • 90
  • 150

1 Answers1

2

Based on this answer and this jQuery plugin

Here is a working solution : jsfiddle.

<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>

div.myClass {
    overflow-x: hidden;
    white-space: nowrap;
}
div.myClass [class*="span"] {
    display: inline-block;
    float: none;
}

$('.myClass').dragscrollable();

I don't know the plugin fiability, but you should be able to retro-engineer it if you want your own version of it.

Community
  • 1
  • 1
Sherbrow
  • 17,279
  • 3
  • 64
  • 77
  • @Shebrow thanks for this piece of code, but when I try it out I get the error "Uncaught TypeError: Object [object Object] has no method 'dragscrollable' " in my chrome error console. Instead I tried the jQueryUI draggable, you can check it out at http://jsfiddle.net/celestialcitizen/MACak/4/, but the problem here is that this does not exactly behave like a scroll – Anand Sunderraman Aug 03 '12 at 09:03
  • @Shebrow got your script working basically I did not get the the dragscrollable.js properly, I got it from your jsfiddle link,.. thanks it works now !! – Anand Sunderraman Aug 03 '12 at 09:15
  • @Shebrow -- dragscrollable doesn't seem to respond to user swipe gestures on android mobile phones !! – Anand Sunderraman Aug 06 '12 at 07:13
  • @Anand That's understandable, because "swipe gestures" must correspond to scroll on phones. Try `overflow-x: auto;` and even deactivate the plugin. Otherwise I don't know. – Sherbrow Aug 06 '12 at 07:50
  • @Shebrow Is there anyway we could use jquery ui draggable plugin to achieve the same effect ? If yes then I can also experiment with http://touchpunch.furf.com/ plugin that translates swipe gestures to mouse actions and hopefully I can achieve something suitable for desktop and mobile browsers – Anand Sunderraman Aug 06 '12 at 08:00
  • @Anand It still doesn't seem to work : [jsfiddle](http://jsfiddle.net/Sherbrow/kP6v8/4/). You'll have to make buttons to scroll, or just make another question (**first, search** about touch devices scrolling) – Sherbrow Aug 06 '12 at 11:35
  • @Shebrow I have opened a new question with more details with specific questions for touch-enabled devices at http://stackoverflow.com/q/11866345/226906 – Anand Sunderraman Aug 08 '12 at 14:11