0

I'm trying to use jQuery Tools Scrollable, I have used it before many times, but now it seems like it's not working and I don't know why.

This is the website I'm using it on, if it's needed I can paste the code here, but I'm sure you can look at the source code in your console, everything it's plain HTML, CSS and JavaScript / jQuery : http://rolandgroza.com/projects/tcsg/

Here is the HTML structure:

<section class="galleries-wrapper">
    <div class="paper-stack-wrapper">
        <div class="header-wrapper">
            <h2>Featured Galleries</h2>
        </div>
        <div class="content-wrapper scrollable vertical">
            <div class="items">
                <div class="item">
                    <ul class="css-galleries-list">
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/awwwards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">awwwards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/cssdesignawards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">cssdesignawards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/csswinner.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">csswinner</a></span>
                            <span class="css-gallerie-rank">4</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/divinecss.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">divinecss</a></span>
                            <span class="css-gallerie-rank">5</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/pagecrush.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">pagecrush</a></span>
                            <span class="css-gallerie-rank">3</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                    </ul>
                </div>
                <div class="item">
                    <ul class="css-galleries-list">
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/awwwards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">awwwards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/cssdesignawards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">cssdesignawards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/csswinner.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">csswinner</a></span>
                            <span class="css-gallerie-rank">4</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/divinecss.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">divinecss</a></span>
                            <span class="css-gallerie-rank">5</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/pagecrush.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">pagecrush</a></span>
                            <span class="css-gallerie-rank">3</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-wrapper">
            <h2>Other Galleries</h2>
        </div>
    </div>
    <div class="paper-stack-shadow"></div>
    <div class="galleries-navigation">
        <ul class="nvg">
            <li class="previous-items"><a class="prev-item"><img src="assets/gfx/prev-item.png" alt="Previous" /></a></li>
            <li class="next-items"><a class="next-item"><img src="assets/gfx/next-item.png" alt="Next" /></a></li>
        </ul>
    </div>
</section>

Here is the LESS styles ( aren't so relevant but some CSS rules are required by the plugin ):

.galleries-wrapper {
    position: relative;
    float: right;
    margin-top: 50px;
    .dimensions(450px, 350px);
    .opacity(0);

    .paper-stack-wrapper {
        position: relative;
        margin: 0px auto;
        .dimensions(450px, 350px);
        .border(1px, 1px, 1px, 1px, #bbc2c8);
        .radius(5px, 5px, 5px, 5px);
        .background(@noise-dark, #f9f9f9, #f9f9f9);

        &:before {
            position: absolute;
            top: 1px;
            left: 0px;
            content: "";
            z-index: -1;
            .dimensions(448px, 350px);
            .border(1px, 1px, 1px, 1px, #bbc2c8);
            .radius(5px, 5px, 5px, 5px);
            .background(@noise-dark, #f9f9f9, #f9f9f9);
        }

        &:after {
            position: absolute;
            top: 3px;
            left: 1px;
            content: "";
            z-index: -2;
            .dimensions(446px, 350px);
            .border(1px, 1px, 1px, 1px, #bbc2c8);
            .radius(5px, 5px, 5px, 5px);
            .background(@noise-dark, #f9f9f9, #f9f9f9);
        }

        .header-wrapper {
            position: relative;
            margin: 0px auto;
            .dimensions(450px, 40px);
            .radius(5px, 5px, 0px, 0px);
            .shadow(@shadow-inset, 0px, -1px, 2px, rgba(000, 000, 000, 0.2));

            h2 {
                .font(ChunkFiveRoman, 21px, normal, normal, normal);
                .text-format(center, none, none, inherit, uppercase, normal, 40px, normal, #afafaf);
            }
        }

        .scrollable {
            position: relative;
            margin: 0px auto;
            .dimensions(450px, 269px);
            overflow: hidden;

            .items {
                position: absolute;
                height: 20000em;

                .item {
                    position: relative;
                    margin: 0px auto;
                    .dimensions(450px, 269px);

                    .css-galleries-list {
                        position: relative;
                        margin: 0px auto;
                        .dimensions(450px, 269px);
                        list-style: none;

                        li {
                            position: relative;
                            margin: 0px auto;
                            .dimensions(450px, 53px);
                            .border(1px, 0px, 0px, 0px, #bbc2c8);
                            .background(@noise-dark, #ffffff, #f6f6f6);

                            &:first-child {
                                .border(0px, 0px, 0px, 0px, #bbc2c8);
                            }

                            &:hover {
                                .background(@noise-dark, #f6f6f6, #f1f1f1);
                            }

                            .css-gallerie-logo {
                                position: relative;
                                float: left;
                                .dimensions(180px, 53px);

                                a {
                                    position: relative;
                                    margin: 0px auto;
                                    display: block;
                                    .dimensions(150px, 53px);

                                    img {
                                        position: relative;
                                        margin: 0px auto;
                                        margin-top: 11.5px;
                                        .border(1px, 1px, 1px, 1px, #000000);
                                    }
                                }
                            }

                            .css-gallerie-name {
                                position: relative;
                                float: left;
                                .dimensions(150px, 53px);

                                a {
                                    display: block;
                                    .font(ChunkFiveRoman, 14px, normal, normal, normal);
                                    .text-format(left, none, none, inherit, uppercase, normal, 53px, normal, #afafaf);
                                    .transition (all, 0.25s, ease-in-out);

                                    &:hover {
                                        .font(ChunkFiveRoman, 14px, normal, normal, normal);
                                        .text-format(left, none, none, inherit, uppercase, normal, 53px, normal, #1fbacb);
                                        .transition (all, 0.25s, ease-in-out);
                                    }
                                }
                            }

                            .css-gallerie-rank {
                                position: relative;
                                float: left;
                                display: block;
                                .dimensions(50px, 53px);
                                .font(ChunkFiveRoman, 16px, normal, normal, normal);
                                .text-format(center, none, none, inherit, uppercase, normal, 53px, normal, #82a664);

                            }

                            .css-gallerie-sbmt {
                                position: relative;
                                float: left;
                                .dimensions(50px, 53px);

                                a {
                                    #bundle > .button(55px, 22.5px, 25px,Arial, 11px, normal);
                                    position: relative;
                                    margin: 0px auto;
                                    margin-top: 15.25px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .footer-wrapper {
            position: relative;
            margin: 0px auto;
            .dimensions(450px, 41px);
            .radius(0px, 0px, 5px, 5px);
            .shadow(@shadow-inset, 0px, 1px, 2px, rgba(000, 000, 000, 0.2));

            h2 {
                .font(ChunkFiveRoman, 21px, normal, normal, normal);
                .text-format(center, none, none, inherit, uppercase, normal, 40px, normal, #afafaf);
            }
        }
    }

    .paper-stack-shadow {
        position: absolute;
        top: 290px;
        .dimensions(450px, 50px);
        z-index: -5;

        &:before {
            position: absolute;
            top: 80%;
            left: 10px;
            bottom: 5px;
            width: 50%;
            max-width: 300px;
            content: "";
            z-index: -1;
            .shadow(@shadow-normal, 0px, 15px, 10px, #777777);
            .transform-rotate(-3deg);
        }
        &:after {
            position: absolute;
            top: 80%;
            right: 10px;
            bottom: 5px;
            width: 50%;
            max-width: 300px;
            content: "";
            z-index: -1;
            .shadow(@shadow-normal, 0px, 15px, 10px, #777777);
            .transform-rotate(3deg);
        }
    }

    .galleries-navigation   {
        position: absolute;
        top: 50%;
        right: -42px;
        margin-top: -40px;
        .dimensions(40px,80px);
        .border(1px, 0px, 1px, 1px, #bbc2c8);
        .background(@noise-dark, #f9f9f9, #f9f9f9);
        .radius(0px, 5px, 5px, 0px);
        .shadow(@shadow-normal,0px, 0px, 4px, rgba(0,0,0,0.1));
        z-index: -5;

        .nvg {
            position: relative; 
            margin: 0px auto;
            .dimensions(40px, 80px);
            list-style: none;

            .previous-items { 
                position: relative;
                margin: 0px auto;
                .dimensions(40px, 40px);
                .border(0px, 0px, 0px, 0px, rgba(247,247,247,1));
                display: block;

                a { 
                    position: relative;
                    margin: 0px auto;
                    .dimensions(40px, 40px);
                    display: block;
                    cursor: pointer;
                    .font (Arial, 13px, normal, normal, normal);
                    .text-format(center, none, none, inherit, none, normal, normal, normal, #6e6e6e);
                    .transition (all, 0.3s,ease-in-out);

                    img {
                        position: relative;
                        margin: 0px auto;
                        .dimensions(40px, 40px);
                        .opacity(0.8);
                        .transition (all, 0.3s,ease-in-out);
                        border: none;
                    }

                    &:hover > img {
                        .opacity(1);
                    }           
                }
            }

            .next-items {
                position: relative;
                margin: 0px auto;
                .dimensions(40px, 40px);
                .border(1px, 0px, 0px, 0px, #bbc2c8);
                display: block;

                a { 
                    position: relative;
                    margin: 0px auto;
                    .dimensions(40px, 40px);
                    display: block;
                    cursor: pointer;
                    .font (Arial, 13px, normal, normal, normal);
                    .text-format(center, none, none, inherit, none, normal, normal, normal, #6e6e6e);
                    .transition (all, 0.3s,ease-in-out);

                    img {
                        position: relative;
                        margin: 0px auto;
                        .dimensions(40px, 40px);
                        .opacity(0.6);
                        .transition (all, 0.3s,ease-in-out);
                        border: none;
                    }

                    &:hover > img {
                        .opacity(1);
                    }
                }
            }
        }
    }
}

And this is how I'm calling the plugin:

var next_items = $(container.home).find('.next-item');

var prev_items = $(container.home).find('.prev-item');

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

$(".scrollable").scrollable({
    vertical: true,
    easing: 'custom',
    speed: 700,
    circular: false,
    next: next_items,   
    prev: prev_items,
    mousewheel: true
});
Roland
  • 9,321
  • 17
  • 79
  • 135
  • 2
    It would be a real good idea to include the relevant code within your question so it remains helpful to others in the future and so we don't have to dig for it. – Sparky Apr 26 '12 at 17:36
  • +1 Sure, I'm going to right now :) – Roland Apr 26 '12 at 17:36
  • 1
    What happens when you fix that JS error in `script.js`? Your page almost crashed my Safari too. – Sparky Apr 26 '12 at 17:38
  • Which error ? Can you tell me if you don't mind ? – Roland Apr 26 '12 at 17:41
  • The only JS error in the Safari console related to `script.js`. I'd gladly tell you but I don't feel like freezing up my browser again. See edit in Matthew's answer- same error. – Sparky Apr 26 '12 at 17:43
  • @Sparky672 - Does this mean that those two plugins aren't compatible ? – Roland Apr 26 '12 at 17:54
  • It probably means that you have not properly included the `jPages` plugin. – Sparky Apr 26 '12 at 18:06
  • Ok, How can I explain, each one works if the other one is disabled. So it cannot be because I haven't done that. It must be something else. – Roland Apr 26 '12 at 18:07
  • That doesn't make a whole lot of sense with regards to the posted error. As far as a possible incompatibility... if I had to choose, I'd dump jQuery Tools. IMHO, it's junk. – Sparky Apr 26 '12 at 18:13
  • 1
    Ignore the jQuery UI parts of [this 2009 article](http://marcgrabanski.com/articles/jquery-tools-vs-jquery-ui). Focus more on the critique of jQuery Tools and the long thread of comments. Much of the complaints are still technically valid today. – Sparky Apr 26 '12 at 18:21
  • @Sparky672 - Indeed, I'll try using the other plugin only because with jQuery tools I always had problems. – Roland Apr 26 '12 at 18:48

1 Answers1

1

EDIT: I removed all of what was above..

This error is breaking your script

enter image description here

honyovk
  • 2,717
  • 18
  • 26
  • Already tried that before, that's why I added the vars so I can be sure it will find the classes. – Roland Apr 26 '12 at 17:29
  • 1
    In that case, what I would do is create a test page with just the CSS, HTML and JS for the what your wanting to make scrollable and go from there. – honyovk Apr 26 '12 at 17:36
  • Than what would be the point if I don't know if I can use it or not in the page I need. It works in the other projects I used it before and with the same structure. – Roland Apr 26 '12 at 17:37
  • The idea is to get it working on its own and _then_ integrate it with the rest of your page. – honyovk Apr 26 '12 at 17:38
  • Yes, I understand that, but I've already tried it before going on the page, and standalone works, that's why I asked here, it may be some other errors that I don't see. – Roland Apr 26 '12 at 17:44
  • @Roland, how is it possible that we can see console errors when you don't? – Sparky Apr 26 '12 at 17:45
  • Oh, why didn't I look there, I replaced the call for the jpages script with this one and I'm using the jPages script too. – Roland Apr 26 '12 at 17:46
  • @Sparky672 - Oh but I now see that jPages plugin is already there, so what is this suppose to mean ? Before worked and now it doesn't. – Roland Apr 26 '12 at 17:49