call javascript / jQuery function - javascript

I am using the following javascript which uses some jQuery, neither of which I know much about. This is for a simple image slider:
/*!
* jQuery wmuSlider v2.1
*
* Copyright (c) 2011 Brice Lechatellier
* http://brice.lechatellier.com/
*
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
*/
;(function($) {
$.fn.wmuSlider = function(options) {
/* Default Options
================================================== */
var defaults = {
animation: 'fade',
animationDuration: 600,
slideshow: true,
slideshowSpeed: 7000,
slideToStart: 0,
navigationControl: true,
paginationControl: true,
previousText: 'Previous',
nextText: 'Next',
touch: false,
slide: 'article',
items: 1
};
var options = $.extend(defaults, options);
return this.each(function() {
/* Variables
================================================== */
var $this = $(this);
var currentIndex = options.slideToStart;
var wrapper = $this.find('.wmuSliderWrapper');
var slides = $this.find(options.slide);
var slidesCount = slides.length;
var slideshowTimeout;
var paginationControl;
var isAnimating;
/* Load Slide
================================================== */
var loadSlide = function(index, infinite, touch) {
if (isAnimating) {
return false;
}
isAnimating = true;
currentIndex = index;
var slide = $(slides[index]);
$this.animate({ height: slide.innerHeight() });
if (options.animation == 'fade') {
slides.css({
position: 'absolute',
opacity: 0
});
slide.css('position', 'relative');
slide.animate({ opacity:1 }, options.animationDuration, function() {
isAnimating = false;
});
} else if (options.animation == 'slide') {
if (!infinite) {
wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
isAnimating = false;
});
} else {
if (index == 0) {
wrapper.animate({ marginLeft: -$this.width() / options.items * slidesCount }, options.animationDuration, function() {
wrapper.css('marginLeft', 0);
isAnimating = false;
});
} else {
if (!touch) {
wrapper.css('marginLeft', -$this.width() / options.items * slidesCount);
}
wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
isAnimating = false;
});
}
}
}
if (paginationControl) {
paginationControl.find('a').each(function(i) {
if(i == index) {
$(this).addClass('wmuActive');
} else {
$(this).removeClass('wmuActive');
}
});
}
// Trigger Event
$this.trigger('slideLoaded', index);
};
/* Navigation Control
================================================== */
if (options.navigationControl) {
var prev = $('<a class="wmuSliderPrev">' + options.previousText + '</a>');
prev.click(function(e) {
e.preventDefault();
clearTimeout(slideshowTimeout);
if (currentIndex == 0) {
loadSlide(slidesCount - 1, true);
} else {
loadSlide(currentIndex - 1);
}
});
$this.append(prev);
var next = $('<a class="wmuSliderNext">' + options.nextText + '</a>');
next.click(function(e) {
e.preventDefault();
clearTimeout(slideshowTimeout);
if (currentIndex + 1 == slidesCount) {
loadSlide(0, true);
} else {
loadSlide(currentIndex + 1);
}
});
$this.append(next);
}
/* Pagination Control
================================================== */
if (options.paginationControl) {
paginationControl = $('<ul class="wmuSliderPagination"></ul>');
$.each(slides, function(i) {
paginationControl.append('<li>' + i + '</li>');
paginationControl.find('a:eq(' + i + ')').click(function(e) {
e.preventDefault();
clearTimeout(slideshowTimeout);
loadSlide(i);
});
});
$this.append(paginationControl);
}
/* Slideshow
================================================== */
if (options.slideshow) {
var slideshow = function() {
if (currentIndex + 1 < slidesCount) {
loadSlide(currentIndex + 1);
} else {
loadSlide(0, true);
}
slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
}
slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
}
/* Resize Slider
================================================== */
var resize = function() {
var slide = $(slides[currentIndex]);
$this.animate({ height: slide.innerHeight() });
if (options.animation == 'slide') {
slides.css({
width: $this.width() / options.items
});
wrapper.css({
marginLeft: -$this.width() / options.items * currentIndex,
width: $this.width() * slides.length
});
}
};
/* Touch
================================================== */
var touchSwipe = function(event, phase, direction, distance) {
clearTimeout(slideshowTimeout);
if(phase == 'move' && (direction == 'left' || direction == 'right')) {
if (direction == 'right') {
if (currentIndex == 0) {
wrapper.css('marginLeft', (-slidesCount * $this.width() / options.items) + distance);
} else {
wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) + distance);
}
} else if (direction == 'left') {
wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) - distance);
}
} else if (phase == 'cancel' ) {
if (direction == 'right' && currentIndex == 0) {
wrapper.animate({ marginLeft: -slidesCount * $this.width() / options.items }, options.animationDuration);
} else {
wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);
}
} else if (phase == 'end' ) {
if (direction == 'right') {
if (currentIndex == 0) {
loadSlide(slidesCount - 1, true, true);
} else {
loadSlide(currentIndex - 1);
}
} else if (direction == 'left') {
if (currentIndex + 1 == slidesCount) {
loadSlide(0, true);
} else {
loadSlide(currentIndex + 1);
}
} else {
wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);
}
}
};
if (options.touch && options.animation == 'slide') {
if (!$.isFunction($.fn.swipe)) {
$.ajax({
url: 'jquery.touchSwipe.min.js',
async: false
});
}
if ($.isFunction($.fn.swipe)) {
$this.swipe({ triggerOnTouchEnd:false, swipeStatus:touchSwipe, allowPageScroll:'vertical' });
}
}
/* Init Slider
================================================== */
var init = function() {
var slide = $(slides[currentIndex]);
var img = slide.find('img');
img.load(function() {
wrapper.show();
$this.animate({ height: slide.innerHeight() });
});
if (options.animation == 'fade') {
slides.css({
position: 'absolute',
width: '100%',
opacity: 0
});
$(slides[currentIndex]).css('position', 'relative');
} else if (options.animation == 'slide') {
if (options.items > slidesCount) {
options.items = slidesCount;
}
slides.css('float', 'left');
slides.each(function(i){
var slide = $(this);
slide.attr('data-index', i);
});
for(var i = 0; i < options.items; i++) {
wrapper.append($(slides[i]).clone());
}
slides = $this.find(options.slide);
}
resize();
$this.trigger('hasLoaded');
loadSlide(currentIndex);
}
init();
/* Bind Events
================================================== */
// Resize
$(window).resize(resize);
// Load Slide
$this.bind('loadSlide', function(e, i) {
clearTimeout(slideshowTimeout);
loadSlide(i);
});
});
}
})(jQuery);
what I want to be able to do is change the slider image index with some sort of 'onclick' event. for example:
<img src="images/IMG_5137_s.jpg" width="100%" />
this however does not call the 'loadslide' function in the javascript file, probably because I don't know what I'm doing.... any help with this would be appreciated.


You can inspect this answer for jQuery plugin-authoring:
How to create simple jQuery plugin?
And here is the simple jsFiddle example with explanation on it.

Related

Page Scroll Effects - VelocityJS - (Page Anchors with Data-hijacking enabled)

I'm stuck with my page scroll effects.
This is what I've got so far - https://codepen.io/DCRSLG/pen/jzYJeY
$(document).ready(function($) {
//variables
var hijacking = $('body').data('hijacking'),
animationType = $('body').data('animation'),
delta = 0,
scrollThreshold = 5,
actual = 1,
animating = false;
//DOM elements
var sectionsAvailable = $('.cd-section'),
verticalNav = $('.cd-vertical-nav'),
prevArrow = verticalNav.find('a.cd-prev'),
nextArrow = verticalNav.find('a.cd-next');
//check the media query and bind corresponding events
var MQ = deviceType(),
bindToggle = false;
bindEvents(MQ, true);
$(window).on('resize', function() {
MQ = deviceType();
bindEvents(MQ, bindToggle);
if (MQ == 'mobile') bindToggle = true;
if (MQ == 'desktop') bindToggle = false;
});
function bindEvents(MQ, bool) {
if (MQ == 'desktop' && bool) {
//bind the animation to the window scroll event, arrows click and keyboard
if (hijacking == 'on') {
initHijacking();
$(window).on('DOMMouseScroll mousewheel', scrollHijacking);
} else {
scrollAnimation();
$(window).on('scroll', scrollAnimation);
}
prevArrow.on('click', prevSection);
nextArrow.on('click', nextSection);
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var target = $(this).attr('href');
$(target).velocity('scroll', {
duration: 3000,
offset: 0,
easing: 'ease-in-out',
mobileHA: false
});
});
$(document).on('keydown', function(event) {
if (event.which == '40' && !nextArrow.hasClass('inactive')) {
event.preventDefault();
nextSection();
} else if (event.which == '38' && (!prevArrow.hasClass('inactive') || (prevArrow.hasClass('inactive') && $(window).scrollTop() != sectionsAvailable.eq(0).offset().top))) {
event.preventDefault();
prevSection();
}
});
//set navigation arrows visibility
checkNavigation();
} else if (MQ == 'mobile') {
//reset and unbind
resetSectionStyle();
$(window).off('DOMMouseScroll mousewheel', scrollHijacking);
$(window).off('scroll', scrollAnimation);
prevArrow.off('click', prevSection);
nextArrow.off('click', nextSection);
$(document).off('keydown');
}
}
function scrollAnimation() {
//normal scroll - use requestAnimationFrame (if defined) to optimize performance
(!window.requestAnimationFrame) ? animateSection(): window.requestAnimationFrame(animateSection);
}
function animateSection() {
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
sectionsAvailable.each(function() {
var actualBlock = $(this),
offset = scrollTop - actualBlock.offset().top;
//according to animation type and window scroll, define animation parameters
var animationValues = setSectionAnimation(offset, windowHeight, animationType);
transformSection(actualBlock.children('div'), animationValues[0], animationValues[1], animationValues[2], animationValues[3], animationValues[4]);
(offset >= 0 && offset < windowHeight) ? actualBlock.addClass('visible'): actualBlock.removeClass('visible');
});
checkNavigation();
}
function transformSection(element, translateY, scaleValue, rotateXValue, opacityValue, boxShadow) {
//transform sections - normal scroll
element.velocity({
translateY: translateY + 'vh',
scale: scaleValue,
rotateX: rotateXValue,
opacity: opacityValue,
boxShadowBlur: boxShadow + 'px',
translateZ: 0,
}, 0);
}
function initHijacking() {
// initialize section style - scrollhijacking
var visibleSection = sectionsAvailable.filter('.visible'),
topSection = visibleSection.prevAll('.cd-section'),
bottomSection = visibleSection.nextAll('.cd-section'),
animationParams = selectAnimation(animationType, false),
animationVisible = animationParams[0],
animationTop = animationParams[1],
animationBottom = animationParams[2];
visibleSection.children('div').velocity(animationVisible, 1, function() {
visibleSection.css('opacity', 1);
topSection.css('opacity', 1);
bottomSection.css('opacity', 1);
});
topSection.children('div').velocity(animationTop, 0);
bottomSection.children('div').velocity(animationBottom, 0);
}
function scrollHijacking(event) {
// on mouse scroll - check if animate section
if (event.originalEvent.detail < 0 || event.originalEvent.wheelDelta > 0) {
delta--;
(Math.abs(delta) >= scrollThreshold) && prevSection();
} else {
delta++;
(delta >= scrollThreshold) && nextSection();
}
return false;
}
function prevSection(event) {
//go to previous section
typeof event !== 'undefined' && event.preventDefault();
var visibleSection = sectionsAvailable.filter('.visible'),
middleScroll = (hijacking == 'off' && $(window).scrollTop() != visibleSection.offset().top) ? true : false;
visibleSection = middleScroll ? visibleSection.next('.cd-section') : visibleSection;
var animationParams = selectAnimation(animationType, middleScroll, 'prev');
unbindScroll(visibleSection.prev('.cd-section'), animationParams[3]);
if (!animating && !visibleSection.is(":first-child")) {
animating = true;
visibleSection.removeClass('visible').children('div').velocity(animationParams[2], animationParams[3], animationParams[4])
.end().prev('.cd-section').addClass('visible').children('div').velocity(animationParams[0], animationParams[3], animationParams[4], function() {
animating = false;
if (hijacking == 'off') $(window).on('scroll', scrollAnimation);
});
actual = actual - 1;
}
resetScroll();
}
function nextSection(event) {
//go to next section
typeof event !== 'undefined' && event.preventDefault();
var visibleSection = sectionsAvailable.filter('.visible'),
middleScroll = (hijacking == 'off' && $(window).scrollTop() != visibleSection.offset().top) ? true : false;
var animationParams = selectAnimation(animationType, middleScroll, 'next');
unbindScroll(visibleSection.next('.cd-section'), animationParams[3]);
if (!animating && !visibleSection.is(":last-of-type")) {
animating = true;
visibleSection.removeClass('visible').children('div').velocity(animationParams[1], animationParams[3], animationParams[4])
.end().next('.cd-section').addClass('visible').children('div').velocity(animationParams[0], animationParams[3], animationParams[4], function() {
animating = false;
if (hijacking == 'off') $(window).on('scroll', scrollAnimation);
});
actual = actual + 1;
}
resetScroll();
}
function unbindScroll(section, time) {
//if clicking on navigation - unbind scroll and animate using custom velocity animation
if (hijacking == 'off') {
$(window).off('scroll', scrollAnimation);
(animationType == 'catch') ? $('body, html').scrollTop(section.offset().top): section.velocity("scroll", {
duration: time
});
}
}
function resetScroll() {
delta = 0;
checkNavigation();
}
function checkNavigation() {
//update navigation arrows visibility
(sectionsAvailable.filter('.visible').is(':first-of-type')) ? prevArrow.addClass('inactive'): prevArrow.removeClass('inactive');
(sectionsAvailable.filter('.visible').is(':last-of-type')) ? nextArrow.addClass('inactive'): nextArrow.removeClass('inactive');
}
function resetSectionStyle() {
//on mobile - remove style applied with jQuery
sectionsAvailable.children('div').each(function() {
$(this).attr('style', '');
});
}
function deviceType() {
//detect if desktop/mobile
return window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
}
function selectAnimation(animationName, middleScroll, direction) {
// select section animation - scrollhijacking
var animationVisible = 'translateNone',
animationTop = 'translateUp',
animationBottom = 'translateDown',
easing = 'ease',
animDuration = 800;
switch (animationName) {
case 'gallery':
animDuration = 1500;
if (middleScroll) {
animationTop = 'scaleDown.moveUp.scroll';
animationVisible = 'scaleUp.moveUp.scroll';
animationBottom = 'scaleDown.moveDown.scroll';
} else {
animationVisible = (direction == 'next') ? 'scaleUp.moveUp' : 'scaleUp.moveDown';
animationTop = 'scaleDown.moveUp';
animationBottom = 'scaleDown.moveDown';
}
break;
}
return [animationVisible, animationTop, animationBottom, animDuration, easing];
}
function setSectionAnimation(sectionOffset, windowHeight, animationName) {
// select section animation - normal scroll
var scale = 1,
translateY = 100,
rotateX = '0deg',
opacity = 1,
boxShadowBlur = 0;
if (sectionOffset >= -windowHeight && sectionOffset <= 0) {
// section entering the viewport
translateY = (-sectionOffset) * 100 / windowHeight;
switch (animationName) {
case 'gallery':
if (sectionOffset >= -windowHeight && sectionOffset < -0.9 * windowHeight) {
scale = -sectionOffset / windowHeight;
translateY = (-sectionOffset) * 100 / windowHeight;
boxShadowBlur = 400 * (1 + sectionOffset / windowHeight);
} else if (sectionOffset >= -0.9 * windowHeight && sectionOffset < -0.1 * windowHeight) {
scale = 0.9;
translateY = -(9 / 8) * (sectionOffset + 0.1 * windowHeight) * 100 / windowHeight;
boxShadowBlur = 40;
} else {
scale = 1 + sectionOffset / windowHeight;
translateY = 0;
boxShadowBlur = -400 * sectionOffset / windowHeight;
}
break;
}
} else if (sectionOffset > 0 && sectionOffset <= windowHeight) {
//section leaving the viewport - still has the '.visible' class
translateY = (-sectionOffset) * 100 / windowHeight;
switch (animationName) {
case 'gallery':
if (sectionOffset >= 0 && sectionOffset < 0.1 * windowHeight) {
scale = (windowHeight - sectionOffset) / windowHeight;
translateY = -(sectionOffset / windowHeight) * 100;
boxShadowBlur = 400 * sectionOffset / windowHeight;
} else if (sectionOffset >= 0.1 * windowHeight && sectionOffset < 0.9 * windowHeight) {
scale = 0.9;
translateY = -(9 / 8) * (sectionOffset - 0.1 * windowHeight / 9) * 100 / windowHeight;
boxShadowBlur = 40;
} else {
scale = sectionOffset / windowHeight;
translateY = -100;
boxShadowBlur = 400 * (1 - sectionOffset / windowHeight);
}
break;
}
} else if (sectionOffset < -windowHeight) {
translateY = 100;
switch (animationName) {
case 'gallery':
scale = 1;
break;
}
} else {
//section not visible anymore
translateY = -100;
switch (animationName) {
case 'gallery':
scale = 1;
break;
}
}
return [translateY, scale, rotateX, opacity, boxShadowBlur];
}
});
/* Custom effects registration - feature available in the Velocity UI pack */
//gallery
$.Velocity
.RegisterEffect("scaleDown.moveUp", {
defaultDuration: 1,
calls: [
[{
translateY: '-10%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '-100%'
}, 0.60],
[{
translateY: '-100%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity
.RegisterEffect("scaleDown.moveUp.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '-100%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.60],
[{
translateY: '-100%',
scale: '1',
boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity
.RegisterEffect("scaleUp.moveUp", {
defaultDuration: 1,
calls: [
[{
translateY: '90%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '0%'
}, 0.60],
[{
translateY: '0%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity
.RegisterEffect("scaleUp.moveUp.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '0%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.60],
[{
translateY: '0%',
scale: '1',
boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity
.RegisterEffect("scaleDown.moveDown", {
defaultDuration: 1,
calls: [
[{
translateY: '10%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '100%'
}, 0.60],
[{
translateY: '100%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity
.RegisterEffect("scaleDown.moveDown.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '100%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.60],
[{
translateY: '100%',
scale: '1',
boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity
.RegisterEffect("scaleUp.moveDown", {
defaultDuration: 1,
calls: [
[{
translateY: '-90%',
scale: '0.9',
boxShadowBlur: '40px'
}, 0.20],
[{
translateY: '0%'
}, 0.60],
[{
translateY: '0%',
scale: '1',
boxShadowBlur: '0'
}, 0.20]
]
});
I'm trying to get it so the Dots on the right hand side can be a reference to scroll down to each section like this:
https://codyhouse.co/demo/vertical-fixed-navigation/index.html
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var target = $(this).attr('href');
$(target).velocity('scroll', {
duration: 3000,
offset: 0,
easing: 'ease-in-out',
mobileHA: false
});
});
I can get it to work using the above code providing I disable data-hijacking on the scroll, does anyone know of a way to get this to work while keep data-hijacking enabled?

JavaScript how to stop off click closure

<a style="background-image: url("http://i.imgur.com/MMJtG22.png"); background-repeat: no-repeat; width: 41px; height: 38px; text-indent: -99999px; display: block; outline: medium none; position: absolute; top: -2px; right: -41px;" class="handle active" href="http://link-for-non-js-users" id="handler"></a>
This is the code used (to open the module) and here is the JavaScript.
(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings||{});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background-image' : 'url('+settings.pathToTabImage+')',
'background-repeat' : 'no-repeat',
'width' : settings.imageWidth,
'height': settings.imageHeight,
'textIndent' : '-99999px'
});
}
settings.tabHandle.css({
'display': 'block',
'outline' : 'none',
'position' : 'absolute'
});
obj.css({
'line-height' : '1',
'position' : settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({'left' : settings.leftPos});
settings.tabHandle.css({'right' : 0});
}
if(settings.tabLocation === 'top') {
obj.css({'top' : '-' + properties.containerHeight});
settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'bottom') {
obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
settings.tabHandle.css({'top' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height' : properties.containerHeight,
'top' : settings.topPos
});
settings.tabHandle.css({'top' : -2});
}
if(settings.tabLocation === 'left') {
obj.css({ 'left': '-' + properties.containerWidth});
settings.tabHandle.css({'right' : '-' + properties.tabWidth});
}
if(settings.tabLocation === 'right') {
obj.css({ 'right': '-' + properties.containerWidth});
settings.tabHandle.css({'left' : '-' + properties.tabWidth});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event){
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({top:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({left:'0px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({right:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
}
};
var clickScreenToClose = function() {
obj.click(function(event){
event.stopPropagation();
});
$(document).click(function(){
slideIn();
});
};
var clickAction = function(){
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function(){
obj.hover(
function(){
slideOut();
},
function(){
slideIn();
});
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
var slideOutOnLoad = function(){
slideIn();
setTimeout(slideOut, 500);
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
if (settings.onLoadSlideOut) {
slideOutOnLoad();
};
};
})(jQuery);
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'http://i.imgur.com/MMJtG22.png', //path to the image for the tab (optionaly can be set using css)
imageHeight: '38px', //height of tab image
imageWidth: '41px', //width of tab image
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
As of right now it works great, however I want to make it so that it only closes when you press the button, instead of it closing anytime you click on something besides the module (and the button).
<script>
$(document).ready(function() {
$('#handle').click(function() {
$(this).toggleClass("active");
$('#details').toggle(500);
$('#container').toggleClass("active");
});
});
</script>
After removing clickScreenToClose it works, however this JavaScript code doesn't work now, it's used to move the content side of the forum over. Here is the css attached it to.
<style>
#handler { top: -2px; }
#container { margin-left: 0px; }
#handler.active { top: -2px; }
#container.active { margin-left: 224px; }
</style>

Moving a Div on Mouse Move

I have jquery code that triggers the div to move on movement on a mouse wheel.
The code below works on mouse wheel movement.
What i am trying to implement is that i want the div to move when the mouse is moved to the left or right of the screen?
function scrollLeft() {
var $left = Math.abs(Number($galleryList.css("margin-left").replace("px", "")))
;
if ($left - itemWidth <= 0) {
$galleryList.css({"margin-left": ""});
}
else {
$galleryList.css({"margin-left": -1 * Number($left - itemWidth) + "px"});
}
$(document).trigger("mousemove");
}
function scrollRight() {
var $left = Math.abs(Number($galleryList.css("margin-left").replace("px", "")))
;
if ($galleryList.width() < itemWidth + $left + $window.width()) {
$galleryList.css({"margin-left": -1 * Number($galleryList.width() - $window.width()) + "px"});
}
else {
$galleryList.css({"margin-left": -1 * Number($left + itemWidth) + "px"});
}
$(document).trigger("mousemove");
}
$window.on("mousewheel", function (event) {
if (stackedMode) {
return true;
}
if (event.deltaY == 1) { // left
scrollLeft();
}
else if (event.deltaY == -1) { // right
scrollRight();
}
animating = true;
setTimeout(function () {
animating = false;
}, 500);
})

jQuery addClass only affecting current item

I use this code to make a slider function.
$(function() {
$(".slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 200) {
$(".well").fadeOut(500, function(){
$( ".well" ).delay(1000).addClass( "disappear" );
$( ".showup" ).delay(500).removeClass( "disappear" );
});
} else {
// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
}
},
stop: function(event, ui) {
if (ui.position.left < 201) {
$(this).animate({
left: 0
})
}
}
});
$('.slider')[0].addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
curX = touch.pageX - this.offsetLeft - 40;
if(curX <= 0) return;
if(curX > 200){
$('.well').fadeOut();
$(".well").addClass( "disappear" );
$('.well').add('<h2>Erbjudandet använt</h2>');
}
el.style.webkitTransform = 'translateX(' + curX + 'px)';
}, false);
$('.slider')[0].addEventListener('touchend', function(event) {
this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
this.style.webkitTransform = 'translateX(0px)';
}, false);
});
Here is my HTML for displaying the slider:
return "<link rel='stylesheet' href='http://www.infid.se/wp-content/themes/simplemarket/anvandstyle.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='http://www.infid.se/wp-content/themes/simplemarket/slidetounlock.js'></script>
<div id='page-wrap'>
<div class='showup disappear'><h2>Erbjudande använt</h2></div>
<div class='well'>
<h2><strong class='slider'></strong> <span>Använd erbjudande</span></h2>
</div>
</div>";
The problem here is that I have about 100 of these sliders, and when slider is activated(The "disappear" class makes it disappear, and the h2 is added on), all of them disappears. Is there a way to make the "disappear" class only affect the current item?

You need to select the element relative to the current slider so change.
$('.well').fadeOut();
$(".well").addClass( "disappear" );
$('.well').add('<h2>Erbjudandet använt</h2>');
to
$well = $(this).closest('.well'); //Select only the respective well element.
$well.fadeOut();
$well.addClass( "disappear" );
$well.add('<h2>Erbjudandet använt</h2>');
.....
$well.prev(".showup").delay(500).removeClass( "disappear" );
Similarly you can change this in other events as applicable.
$(".slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 200) {
var $well = $(this).closest('.well');
$well.fadeOut(500, function(){
$well.delay(1000).addClass( "disappear" );
$well.prev(".showup").delay(500).removeClass( "disappear" );
});
} else {
// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
}
},
stop: function(event, ui) {
if (ui.position.left < 201) {
$(this).animate({
left: 0
})
}
}
});
$('.slider')[0].addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
curX = touch.pageX - this.offsetLeft - 40;
if(curX <= 0) return;
if(curX > 200){
var $well = $(this).closest('.well');
$well.fadeOut();
$well.addClass( "disappear" );
$well.add('<h2>Erbjudandet använt</h2>');
}
el.style.webkitTransform = 'translateX(' + curX + 'px)';
}, false);
Fiddle

Jquery custom slider infinite loop

I did jquery slider using this tutorial
http://css-plus.com/2010/09/create-your-own-jquery-image-slider/
, where the pictures are sliding automatically, but just once. How can I make them circle in an infinite loop?
on-line example :
www.vytvarkajablonec.jecool.net/ati
I'd really appreciate your help!

Replace the JS code from tutorial for this:
$(document).ready(function () {
// Gallery
if (jQuery("#gallery").length) {
// Declare variables
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function () {
if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) {
jQuery("#gallery").animate({
left: "+=" + imageWidth + "px"
});
}
if (jQuery("#gallery").position().left === 0) {
jQuery("#gallery > li:last").prependTo($("#gallery"));
}
return false;
});
jQuery("#gallery-next").click(function () {
if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
jQuery("#gallery").animate({
left: "-=" + imageWidth + "px"
});
}
if (jQuery("#gallery").position().left === stopPosition) {
jQuery("#gallery > li:first").appendTo($("#gallery"));
}
return false;
});
}
});

Just animate the gallary back to it's initial position if it is at the end of the gallary.
var oGallary = $('#gallery');
var gallarWidth = oGallary.width();
if(oGalary.position().left > stopPosition && oGallary.is(":animated") == false)
{
oGallary.animate({left : "-=" + imageWidth + "px"});
}
else if ( oGalary.position().left <= stopPosition && oGallary.is(":animated") == false )
{
oGallary.animate({left : "+=" + gallaryWidht + "px"}) // Get full length of the entire gallary
}

Categories