I've just finished a program for a 2-way carousel. Meaning, if I click left or right, you are able to go up and down, depending on where you are. This is suppose to work for iPad or tablet only.
I would like to know how to make the code better or if there are any suggestions. I would appreciate it. I am new at this, so I've done my best.
$(document).ready(function() {
// Find matches
var mql = window.matchMedia("(orientation: portrait)");
var all = document.getElementById("slider-view");
var winWidth = 0;
var winHeight = 0;
winWidth = window.innerHeight;
winHeight = window.innerWidth;
// If there are matches, we're in portrait
if(mql.matches) {
// Portrait orientation
$(all).addClass('portrait-transform');
$(all).css('height', window.innerWidth);
$(all).css('width', window.innerHeight);
$(all).css('top', (window.innerHeight - window.innerWidth) / 2);
$(all).css('left', (window.innerWidth - window.innerHeight) / 2);
winWidth = window.innerHeight;
winHeight = window.innerWidth;
console.log('height '+ $(all).css('height')+' width '+$(all).css('width')+' top '+$(all).css('top')+' left '+$(all).css('left'));
} else {
// Landscape orientation
$('#slider-view').removeClass('portrait-transform');
all.style.height = window.innerHeight + "px";
all.style.width = window.innerWidth + "px";
winWidth = window.innerWidth;
winHeight = window.innerHeight;
console.log('height '+ $(all).css('height')+' width '+$(all).css('width')+' top '+$(all).css('top')+' left '+$(all).css('left'));
}
// Add a media query change listener
mql.addListener(function(m) {
if(m.matches) {
// Changed to portrait
$(all).addClass('portrait-transform');
$(all).css('height', window.innerWidth);
$(all).css('width', window.innerHeight);
$(all).css('top', (window.innerHeight - window.innerWidth) / 2);
$(all).css('left', (window.innerwidth - window.innerheight) / 2);
console.log('height '+ $(all).css('height')+' width '+$(all).css('width')+' top '+$(all).css('top')+' left '+$(all).css('left'));
}
else {
// Changed to landscape
$(all).removeClass('portrait-transform');
$(all).css('height', window.innerWidth);
$(all).css('width', window.innerHeight);
$(all).css('top', 0);
$(all).css('left', 0);
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
console.log('height '+ $(all).css('height')+' width '+$(all).css('width')+' top '+$(all).css('top')+' left '+$(all).css('left'));
}
});
var sliderWidth = window.innerWidth;
var sliderHeight = window.innerHeight;
// Assigns the container that has all the sectios that will be scrolled horizontally
var sliderH = $('.nav-h');
var sliderVMiddle = $('.nav-v-middle');
var sliderVLast = $('.nav-v-last');
// Gets the number of slides of the horizontal slider
var sliderCountH = $('.nav-h').children().size();
var sliderCountVMiddle = $('.nav-v-middle').children().size();
var sliderCountVLast = $('.nav-v-last').children().size();
// assign width and height to the main scrollers
$('.nav-h > div').css('width', winWidth); // Asigns the width to the view
$('.nav-h > div').css('height', winHeight); // Asigns the height to the view
$('.nav-v-middle > div').css('width', winWidth); // Asigns the width to the view
$('.nav-v-middle > div').css('height', winHeight); // Asigns the height to the view
$('.nav-v-last > div').css('width', winWidth); // Asigns the width to the view
$('.nav-v-last > div').css('height', winHeight); // Asigns the height to the view
var viewWidth = sliderCountH * winWidth;
var heightVMiddle = sliderCountVMiddle * winHeight;
var heightVLast = sliderCountVLast * winHeight;
$('.nav-h').css('width', viewWidth); // assigns the width
$('.nav-v-middle').css('height', heightVMiddle); // assigns the width
$('.nav-v-last').css('height', heightVLast); // assigns the width
var viewSliderH = $('#slider-view').css('width', winWidth); // Asigns the width to the view
var viewSliderV = $('#slider-view').css('height', winHeight); // Asigns the height to the view
var isMobile = {
Android: function() { return navigator.userAgent.match(/Android/i); },
BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); },
iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
Opera: function() { return navigator.userAgent.match(/Opera Mini/i); },
Windows: function() { return navigator.userAgent.match(/IEMobile/i); },
any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }
};
if ( isMobile.any() ) {
$('a#prevh').toggle();
$('a#nexth').toggle();
$('a#prevv').toggle();
$('a#nextv').toggle();
var horizontalIndex = 0;
var verticalIndexMiddle = 0;
var verticalIndexLast = 0;
// actions for the swiperight
$(sliderH).hammer({prevent_default:true}).on('swiperight', function() {
if(verticalIndexMiddle!==0) {
$('> div', sliderVMiddle).animate({
top: '+=' + (sliderHeight*verticalIndexMiddle)
}, 400);
verticalIndexMiddle = 0;
}
if(verticalIndexLast!==0) {
$('> div', sliderVLast).animate({
top: '+=' + (sliderHeight*verticalIndexLast)
}, 400);
verticalIndexLast = 0;
}
if(horizontalIndex!==0){
$('> div', sliderH).animate({
left: '+=' + sliderWidth
}, 400);
horizontalIndex-=1;
}
});
// Actions for the swipeLeft
$(sliderH).hammer({prevent_default:true}).on('swipeleft', function() {
if(verticalIndexMiddle!==0) {
$('> div', sliderVMiddle).animate({
top: '+=' + (sliderHeight*verticalIndexMiddle)
}, 400);
verticalIndexMiddle = 0;
}
if(verticalIndexLast!==0) {
$('> div', sliderVLast).animate({
top: '+=' + (sliderHeight*verticalIndexLast)
}, 400);
verticalIndexLast = 0;
}
if(horizontalIndex!==sliderCountH-1){
$('> div', sliderH).animate({
left: '-=' + sliderWidth
}, 400);
horizontalIndex+=1;
}
});
// Actions for the swipeUp
$(sliderH).hammer({prevent_default:true}).on('swipedown', function() {
if(horizontalIndex==1) {
if(verticalIndexMiddle!==0) {
$('> div', sliderVMiddle).animate({
'top': '+=' + sliderHeight
}, 400);
verticalIndexMiddle-=1;
}
}
else if (horizontalIndex==2) {
if(verticalIndexLast!==sliderCountVLast-1) {
$('> div', sliderVMiddle).animate({
'top': '+=' + sliderHeight
}, 400);
verticalIndexLast-=1;
}
}
});
// Actions for the swipeDown
$(sliderH).hammer({prevent_default:true}).on('swipeup', function() {
if(horizontalIndex==1) {
if(verticalIndexMiddle!==sliderCountVMiddle-1) {
$('> div', sliderVMiddle).animate({
top: '-=' + sliderHeight
}, 600);
verticalIndexMiddle+=1;
}
}
else if (horizontalIndex==2) {
if(verticalIndexLast!==sliderCountVLast-1) {
$('> div', sliderVLast).animate({
top: '-=' + sliderHeight
}, 600);
verticalIndexLast+=1;
}
}
});
}
else {
var horizontalIndex = 0;
var verticalIndexMiddle = 0;
var verticalIndexLast = 0;
$('a#prevh').on('click', function(event) {
if(verticalIndexMiddle!==0) {
$('> div', sliderVMiddle).animate({
top: '+=' + (sliderHeight*verticalIndexMiddle)
}, 600);
verticalIndexMiddle = 0;
}
if(verticalIndexLast!==0) {
$('> div', sliderVLast).animate({
top: '+=' + (sliderHeight*verticalIndexLast)
}, 600);
verticalIndexLast = 0;
}
if(horizontalIndex!==0) {
$('> div', sliderH).animate({
left: '+=' + sliderWidth
}, 600);
horizontalIndex-=1;
}
console.log('horizontal '+horizontalIndex+' vertical1 '+verticalIndexMiddle+' vertical2 '+verticalIndexLast);
});
$('a#nexth').on('click', function(event) {
if(verticalIndexMiddle!==0) {
$('> div', sliderVMiddle).animate({
top: '+=' + (sliderHeight*verticalIndexMiddle)
}, 600);
verticalIndexMiddle = 0;
}
if(verticalIndexLast!==0) {
$('> div', sliderVLast).animate({
top: '+=' + (sliderHeight*verticalIndexLast)
}, 600);
verticalIndexLast = 0;
}
if(horizontalIndex!==sliderCountH-1) {
$('> div', sliderH).animate({
left: '-=' + sliderWidth
}, 600);
horizontalIndex+=1;
}
console.log('horizontal '+horizontalIndex+' vertical1 '+verticalIndexMiddle+' vertical2 '+verticalIndexLast);
});
$('a#prevv').on('click', function(event) {
if(horizontalIndex==1) {
if(verticalIndexMiddle!==0) {
$('> div', sliderVMiddle).animate({
top: '+=' + sliderHeight
}, 600);
verticalIndexMiddle-=1;
}
}
else if (horizontalIndex==2) {
if(verticalIndexLast!==sliderCountVLast-1) {
$('> div', sliderVMiddle).animate({
top: '+=' + sliderHeight
}, 600);
verticalIndexLast-=1;
}
}
console.log('horizontal '+horizontalIndex+' vertical1 '+verticalIndexMiddle+' vertical2 '+verticalIndexLast);
});
$('a#nextv').on('click', function(event) {
if(horizontalIndex==1) {
if(verticalIndexMiddle!==sliderCountVMiddle-1) {
$('> div', sliderVMiddle).animate({
top: '-=' + sliderHeight
}, 600);
verticalIndexMiddle+=1;
}
}
else if (horizontalIndex==2) {
if(verticalIndexLast!==sliderCountVLast-1) {
$('> div', sliderVLast).animate({
top: '-=' + sliderHeight
}, 600);
verticalIndexLast+=1;
}
}
console.log('horizontal '+horizontalIndex+' vertical1 '+verticalIndexMiddle+' vertical2 '+verticalIndexLast);
});
}
});