Skip to content

Instantly share code, notes, and snippets.

@SkyronDevelopers

SkyronDevelopers/JS:equal-height-blocks.js

Created June 19, 2013 12:51
Show Gist options
  • Save SkyronDevelopers/5814067 to your computer and use it in GitHub Desktop.
Save SkyronDevelopers/5814067 to your computer and use it in GitHub Desktop.
Download ZIP
EqualHeight for multiple rows...
Raw
JS:equal-height-blocks.js
/* Author:
*/
/* ===========================================================================
Name: initCarousels
Desc: Init carousel on .mod-caroussel
======================================================================== */
function initCarousels(){
//alert('xx');
var slider;
if ($('.mod-caroussel').length) {
slider = $('.mod-caroussel').flexslider({
animation : "slide", //String: Select your animation type, "fade" or "slide"
slideDirection : "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
slideshow : true, //Boolean: Animate slider automatically
slideshowSpeed : 3000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration : 600, //Integer: Set the speed of animations, in milliseconds
animationLoop : true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnHover : true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
directionNav : false, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav : false, //Boolean: Create navigation from slide x to slide y(pagination)? (true/false)
myControlNav : $(".caroussel-pagination li"), // Personnal setting to use in function
sliderVid : $(".video video"), // Personnal setting to use in function
video : true,
before : function(slider){
var theSlide = $('.slide').get( slider.currentSlide + 1),
hasVideo = $(theSlide).find(this.sliderVid).length;
if( hasVideo ){
if( !videoPlayer.paused()){
videoPlayer.pause();
}
}
},
after : function(slider){
activeSlide( this.myControlNav.eq( slider.currentSlide ) );
}
});// flexslider
return slider;
}// if
return slider;
}
/* ===========================================================================
Name: InitVideoSlide
Desc: Add / Remove active state for the slider pagination
======================================================================== */
function InitVideoSlide( ){
if( $('video').length ){
//Video flash player fallback
videojs.options.flash.swf = "/videos/video-js.swf";
// console.log( $('video').attr('id') );
var vidId = $('video').attr('id'),
myPlayer = _V_(vidId);
// Attach event for slider Video
myPlayer.on("play", videoIsPlaying);
myPlayer.on("pause", videoIsPaused);
return myPlayer;
}
}
/* ===========================================================================
Name: videoIsPlaying
Desc: Pause the caroussel if playing
======================================================================== */
function videoIsPlaying(){
var myPlayer = this;
console.log("videoIsPlaying() called");
// Force pausing the carousel
homeSlider.flexslider.manualPause = true;
}
/* ===========================================================================
Name: videoIsPaused
Desc: Resume the Caroussel
======================================================================== */
function videoIsPaused(){
console.log("videoIsPaused() called");
var myPlayer = this;
// Remove the manual pause
homeSlider.flexslider.manualPause = false;
// Resume the slider
homeSlider.flexslider.play();
}
/* ===========================================================================
Name: activeSlide
Desc: Add / Remove active state for the slider pagination
======================================================================== */
function activeSlide( elem ){
$(".caroussel-pagination").find($(".active")).removeClass("active");
elem.toggleClass("active");
// Remove the manual pause to reset the timer
homeSlider.flexslider.manualPause = false;
}
/* ===========================================================================
Name: checkedUpdated
Desc: check the filter status to update the style accordingly
======================================================================== */
function checkedUpdated( elem ){
var formClassName = $(elem).attr("class").split(" ")[0],
labelDiv = $("."+formClassName+" + .label"),
labelClassName = $("input[name='"+formClassName+"']:checked").attr("id");
labelDiv.find("p").removeClass("selected");
$( "."+labelClassName+" > p" ).addClass("selected");
};
// Global var:
// For interaction with the slider / video
var videoPlayer, // Assuming 1 video per page only!!!
homeSlider, elemHomeSlider; //
$(function(){
// TODO:
// Refactor -> here is for demo popup
$("#test-step-popup").click(function(e){
e.preventDefault();
$(".popup-step").toggleClass("is-hidden is-shown");
});
$(".popup-step a").click(function(e){
e.preventDefault();
$(".popup-step").toggleClass("is-hidden is-shown");
});
$(".show-idea-info").click(function(e){
e.preventDefault();
$(".popup-idea").toggleClass("is-hidden is-shown");
});
$(".popup-idea .close-icon").click(function(e){
e.preventDefault();
$(".popup-idea").toggleClass("is-hidden is-shown");
});
$(".show-strategy-info").click(function(e){
e.preventDefault();
$(".popup-strategy").toggleClass("is-hidden is-shown");
});
$(".popup-strategy .close-icon").click(function(e){
e.preventDefault();
$(".popup-strategy").toggleClass("is-hidden is-shown");
});
// Video ===============================================
videoPlayer = InitVideoSlide();
// Caroussel ===========================================
elemHomeSlider = initCarousels();
//Reference the caroussels functions and properties
homeSlider = $('.mod-caroussel').data();
// Custom pagination for the caroussel
var carouselPagination = $(".caroussel-pagination li");
$(".caroussel-pagination").on('click', function(e){
e.preventDefault();
homeSlider.flexslider.manualPause = true;
var elem = $(e.target).closest("li"),
dest = carouselPagination.index(elem);
elemHomeSlider.flexslider(dest);
activeSlide( elem );
});
// Slider Form ========================================
// Yes / No horizontal values
$(".decision").noUiSlider({
range: [0, 1]
,start: 0
,step: 1
,handles: 1
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-yes").prop("checked", (value === 0));
$("#label-no").prop("checked", (value === 1));
checkedUpdated( elem );
}
});
$(".frequency").noUiSlider({
range: [0, 1]
,start: 0
,step: 1
,handles: 1
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-frequently").prop("checked", (value === 0));
$("#label-rarely").prop("checked", (value === 1));
checkedUpdated( elem );
}
});
$(".feature").noUiSlider({
range: [0, 1]
,start: 0
,step: 1
,handles: 1
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-rich").prop("checked", (value === 0));
$("#label-simple").prop("checked", (value === 1));
checkedUpdated( elem );
}
});
$(".charge").noUiSlider({
range: [0, 1]
,start: 0
,step: 1
,handles: 1
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-more").prop("checked", (value === 0));
$("#label-less").prop("checked", (value === 1));
checkedUpdated( elem );
}
});
// Multiple vertical values
$(".amount").noUiSlider({
range: [0, 5]
,start: 0
,step: 1
,handles: 1
,orientation: "vertical"
,connect: "upper"
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-over").prop("checked", (value === 0));
$("#label-50-100").prop("checked", (value === 1));
$("#label-10-50").prop("checked", (value === 2));
$("#label-1-10").prop("checked", (value === 3));
$("#label-0-1").prop("checked", (value === 4));
$("#label-none").prop("checked", (value === 5));
checkedUpdated( elem );
}
});
$(".how-long").noUiSlider({
range: [0, 5]
,start: 0
,step: 1
,handles: 1
,orientation: "vertical"
,connect: "upper"
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-over-15").prop("checked", (value === 0));
$("#label-10-15").prop("checked", (value === 1));
$("#label-6-10").prop("checked", (value === 2));
$("#label-1-5").prop("checked", (value === 3));
$("#label-how-long-0-1").prop("checked", (value === 4));
$("#label-how-long-none").prop("checked", (value === 5));
checkedUpdated( elem );
}
});
$(".capital").noUiSlider({
range: [0, 5]
,start: 0
,step: 1
,handles: 1
,orientation: "vertical"
,connect: "upper"
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-capital-only").prop("checked", (value === 0));
$("#label-capital-more").prop("checked", (value === 1));
$("#label-balance").prop("checked", (value === 2));
$("#label-capital-less").prop("checked", (value === 3));
$("#label-income").prop("checked", (value === 4));
$("#label-capital-none").prop("checked", (value === 5));
checkedUpdated( elem );
}
});
$(".attitude").noUiSlider({
range: [0, 4]
,start: 0
,step: 1
,handles: 1
,orientation: "vertical"
,connect: "upper"
,slide: function(){
var value = $(this).val(),
elem = $(this).context;
// Just to update the real radio buttons
// for the form that has to be submitted...
$("#label-attitude-agressive").prop("checked", (value === 0));
$("#label-attitude-moderate").prop("checked", (value === 1));
$("#label-attitude-cautious").prop("checked", (value === 2));
$("#label-attitude-no-risk").prop("checked", (value === 3));
$("#label-attitude-none").prop("checked", (value === 4));
checkedUpdated( elem );
}
});
$(".label").each(function(){
// Set the dimension of my slider equal to the labels
var elem = $(this),
cssHeight = elem.height(),
cssWidth = elem.width(),
itVerticalSibling = elem.prev( ".noUiSlider.vertical" ),
itHorizontalSibling = elem.prev( ".noUiSlider.horizontal" );
itVerticalSibling.css("height", cssHeight + "px");
itHorizontalSibling.css("width", cssWidth + "px");
// Align my labels to the arrow
// Vertical layout only
var labels = elem.find( $("div") ).length;
elem.children().css({
"height" : (100 / (labels - 1) ) + "%"
});
});
$(".form").addClass("visuallyhidden");
// Equal height my headers for the filters
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(".mod-filter > header").each(function() {
$el = $(this);
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment