jQuery "slide from bottom" and "inside tabber" problems

[ryanhellyer]

Hi,
I'm having two problems with the following page:
http://pixopoint.com/demo/javascript/grecco.html

(1) You are supposed to be able to click on the left and right buttons to scroll horizontally, but for some reason they don't work when used in side the tabber (the sub-menu uses the jQuery tabber system).

(2) When you click on the image, a lightbox appears, however I need a lightbox which slides in from the bottom, like the one here ... http://www.nakedambition.com/ (click "See the Movie" or "Get the Book").


Any ideas on where I'm going wrong with the scroller? And any tips on how to get a lightbox style effect where it slides in from the bottom?

All help much appreciated!
Thanks

PS: Please excuse the n00b'ish questions. JavaScript seems to be my brains worst enemy

[molona]

I can't get to see the code in two of your javascript files... maybe they're not loading correctly and that's part of the problem (one of the is magic.js which I assume is the one that has the lightbox effect as it does in the other site)

[JimmyP]

I haven't had a proper look through the code, as there is quite a lot of it, but from the looks of things your arrows are not having any event handlers bound to them, which means nothing is going to happen when they're clicked.

You're going to have to custom-build something if you want a lightbox appearing from the bottom - it's not too tricky though - since you're using jQuery...

It looks like you've got quite a lot going on in that page (JavaScript-wise). It's probably a good idea to just start again, adding each enhancement one at a time, and then confirming it works properly. This shouldn't take long, since you're just using plugins. Just remember that, while plugins may work well on their own, they're not guaranteed to play nice with each other.

[ryanhellyer]

Sorry, I should have removed that magic.js file. It was related to something different and isn't used on the page.

Here's a much more simplified version of the page. It's only loading
http://pixopoint.com/demo/javascript/grecco2.html

[Mal Curtis]

Try this - it will attempt to reattach the event handlers when the tabs are changed.

Place the code which applies the slider inside a function, then call that function in two scenarios

1) When the page loads - to get your initial slider
2) When you change tabs (callback) - to attach the event handlers to the sliders.

Wrap in a function

function applyAnythingSlider(){ 
    $(function () {
 
    $('.anythingSlider').anythingSlider({
        easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
        delay: 7500,                    // How long between slide transitions in AutoPlay mode
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        animationTime: 1000,             // How long the slide transition takes
        hashTags: true,                 // Should links change the hashtag in the URL?
        buildNavigation: false,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Go",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
    });
    $("#slide-jump").click(function(){
        $('.anythingSlider').anythingSlider(6);
    });
});
}
// Then call the function
resetAnythingSlider();

And then call the resetAnythingSlider in the callbacks (this is your tabber.js).

var $ = jQuery;
$(function() {
    $("#tabs").tabs({
         onShow: function() {
            resetAnythingSlider();
        }
    });
    //$('#tabs').tabs({ fxFade: true, fxSpeed: 'slow' });
    //$('#tabs').tabs({ fxSlide: true });
});

[molona]

I think, Ryan, that they were faster than me. Sorry

[markbrown4]

The actual sliding from the bottom part isn't all too difficult.

<div id="lightbox" style="display:none"></div>

#lightbox {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -250px
  width: 500px;
}

if ($('#lightbox').is(':hidden') {
  $('#lightbox').slideDown('slow');
}
else {
  $('#lightbox').slideUp('slow');
}

Hope it helps,