Closed aguieb closed 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.
#slider p, #slider h2 { display: none; }
, but the problem is that users who have javascript disabled will never see the text.show()
all of the hidden elements before using update()
, then re-hide them again after. Otherwise the panel heights will not include the hidden text.thanks! It works GREAT
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?
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');
}
});
works just great now for both wrap set to true or false!!!!
Is there a disadvantage I'm overlooking in doing this through css?
.mb-panel h2 { display:none }
.mb-panel.current h2 { display:block }
There shouldn't be any problem, but the 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.current
Edit: Opps, I meant activePage
instead of current
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?