CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

Hide Text when panel is not the primary #52

Closed aguieb closed 12 years ago

aguieb commented 12 years ago

I was wondering.... is it possible to hide the panel content (text) of a panel that is not the primary focus one? I want the primary focus panel to have the text display only. Does that make sense?

Mottie commented 12 years ago

Hi Aguieb!

I made this demo using the initialized and initChange callbacks.

$('#slider').movingBoxes({

    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar){
        // hide all non-current panel text
        slider.$panels.filter(':not(:eq(' + (tar-1) + '))').find('h2,p').hide();
    },

    // callback upon change panel initialization
    initChange: function(e, slider, tar){
        if (tar < 1 || tar > slider.totalPanels) { return; }
        var $tar = slider.$panels.eq(tar-1);
        // hide non-current panel text
        slider.$panels.not($tar).find('h2,p').slideUp('slow');
        // show current panel text
        $tar.find('h2,p').slideDown('slow');
    }

});

There are two problems/issues with this code.

aguieb commented 12 years ago

thanks! It works GREAT

aguieb commented 12 years ago

I set the wrap set to false and it works but when wrap is set to true it doesn't seem to work. any idea?

Mottie commented 12 years ago

Hi Aguieb!

Because MovingBoxes clones panels to make the wrap work, the code required a tweak (new demo):

$('#slider').movingBoxes({

    // overall width of movingBoxes
    width: 300,
    // current panel width adjusted to 50% of overall width
    panelWidth: 0.5,
    // non-current panel size: 80% of panel size
    reducedSize: 0.8,

    // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
    wrap: true,

    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar){
        // hide all non-current panel text
        slider.$panels.filter(':not(:eq(' + (tar) + '))').find('h2,p').hide();
    },
    // callback upon change panel initialization
    initChange: function(e, slider, tar){
        var t = (tar < 1) ? slider.totalPanels : (tar > slider.totalPanels) ? 1 : tar,
        $tar = slider.$panels.eq(t);
        // hide non-current panel text
        slider.$panels.not($tar).find('h2,p').slideUp('slow');
        // show current panel text
        $tar.find('h2,p').slideDown('slow');
    }

});
aguieb commented 12 years ago

works just great now for both wrap set to true or false!!!!

chriseverson commented 12 years ago

Is there a disadvantage I'm overlooking in doing this through css?

.mb-panel h2 { display:none }
.mb-panel.current h2 { display:block }
Mottie commented 12 years ago

There shouldn't be any problem, but the current class is not added to the panel until after the animation has completed. So you might want to add some css3 transitions to fade it in or something. It's really up to you.

Edit: Opps, I meant activePage instead of current