Given the following jsFiddle, how can I implement the same effect as I have made without building on the stack?
http://jsfiddle.net/YWMcy/1/
I tried doing something like this:
jQuery(document).ready(function () {
'use strict';
(function ($) {
function validateOptions(options) {
if (typeof(options.delay) == typeof(0)) {
$.error('Delay value must an integer.');
return false;
} else if (options.delay < 0) {
$.error('Delay value must be greater than zero.');
return false;
}
if (typeof(options.direction) == typeof('')) {
$.error('Direction value must be a string.');
return false;
} else if (!(options.direction in ['left', 'right', 'up', 'down'])) {
$.error('Direction value must be "left", "right", "up", or "down".');
return false;
}
if (typeof(options.easing) == typeof('')) {
$.error('Easing value must be a string.');
return false;
}
if (typeof(options.selector) == typeof('')) {
$.error('Selector value must be a string.');
return false;
}
if (options.transition < 0) {
$.error('Transition value must be greater than zero.');
return false;
}
return true;
}
var methods = {
init: function (options) {
return this.each(function () {
var settings = {
delay: 5000,
direction: 'left',
easing: 'swing',
selector: '*',
transition: 3000
};
if (options) {
$.extend(settings, options);
}
$(this).css({
overflow: 'hidden',
position: 'relative'
});
var styles = {
left: 0,
position: 'absolute',
top: 0
};
switch (settings.direction) {
case 'left':
styles.left = $(this).width() + 'px';
break;
case 'right':
styles.left = -$(this).width() + 'px';
break;
case 'up':
styles.top = $(this).height() + 'px';
break;
case 'down':
styles.top = -$(this).height() + 'px';
break;
default:
jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle');
break;
}
$(this).children(settings.selector).css(styles).first().css({
left: 0,
top: 0
});
if ($(this).children(settings.selector).length > 1) {
$(this).cycle('slide', settings);
}
});
},
slide: function (options) {
return this.each(function () {
var settings = {
delay: 5000,
direction: 'left',
easing: 'swing',
selector: '*',
transition: 3000
}, animation, property, value;
if (options) {
$.extend(settings, options);
}
switch (settings.direction) {
case 'left':
animation = {left: '-=' + $(this).width()};
property = 'left';
value = $(this).width();
break;
case 'right':
animation = {left: '+=' + $(this).width()};
property = 'left';
value = -$(this).width();
break;
case 'up':
animation = {top: '-=' + $(this).height()};
property = 'top';
value = $(this).height();
break;
case 'down':
animation = {top: '+=' + $(this).height()};
property = 'top';
value = -$(this).height();
break;
default:
jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle');
break;
}
$(this).children(settings.selector + ':first-child').each(function () {
$(this).delay(settings.delay);
$(this).animate(
animation,
settings.transition,
settings.easing,
function () {
$(this).css(property, value);
}
);
});
$(this).append($(this).children(settings.selector + ':first-child').detach());
$(this).children(settings.selector + ':first-child').each(function () {
$(this).delay(settings.delay);
$(this).animate(
animation,
settings.transition,
settings.easing,
function () {
$(this).parent().cycle('slide', settings);
}
);
});
});
}
};
jQuery.fn.cycle = function (method, options) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.fn.cycle');
}
};
}(jQuery));
jQuery('.slider').cycle();
});
But the each() method does not take into account nodes that are added during the loop.
You can launch your _cycle() function through setInterval(), to periodically update the slider:
setInterval(function() {
_cycle2(slider, transition_duration, easing);
}, delay_duration);
Note that I renamed your original _cycle() function to _cycle2(), and removed the delay_duration parameter. You can see a working demo here.
You don't want anything resembling while(true).
Your problem stems from the fact that you're creating a static function and then trying to figure out how to animate the children with the constraint of keeping it all in scope of your static function.
You should instead create an instance of an object per element, let the object maintain the state of the slider and have it update that state via an implementation necessary for the slider to operate.
http://jsfiddle.net/qjVJF/3/
(function ($) {
var $b = $.behaviors || {};
$b.slider = function(element, options) {
this.element = $(element);
this.panels = this.element.find('.slide');
this.options = $.extend({}, $b.slider.defaults, options);
this.currentPanel = 0;
var horizontal = (this.options.direction == 'left' || this.options.direction == 'right');
var anti = (this.options.direction == 'left' || this.options.direction == 'up');
var distance = horizontal ? '600' : '150';
this.action = anti ? '-='+distance : '+='+distance;
this.origin = anti ? distance : 0-distance;
this.edge = horizontal ? 'left' : 'top';
this.animation = horizontal ? { "left": this.action } : { "top" : this.action };
this.panels.css(this.edge, this.origin+'px').show().first().css(this.edge, '0px');
this.delayNext();
return this;
}
$b.slider.defaults = {
delay: 500,
direction: 'left',
easing: 'swing',
transition: 3000
};
$b.slider.prototype = {
delayNext: function() {
setTimeout($.proxy(this.slideNext, this), this.options.delay);
},
slideNext: function() {
var current = this.panels[this.currentPanel % this.panels.length];
var next = $(this.panels[++this.currentPanel % this.panels.length])
.css(this.edge, this.origin+'px');
var plugin = this;
next.add(current).animate(
this.animation,
this.options.transition,
this.options.easing,
function() {
if (this == current) plugin.delayNext();
}
);
}
};
$.fn.cycle = function (options) {
return this.each(function() {
$(this).data('bCycle', new $b.slider(this, options));
});
};
}(jQuery));
jQuery(document).ready(function () {
jQuery('.slider').cycle();
});
Maybe this plugin http://docs.jquery.com/Plugins/livequery can help you?
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
For example you could use the following code to bind a click event to all A tags, even any A tags you might add via AJAX.
$('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});
Related
I'm trying to extract the *.JS and CSS code of a specific image reveal animation that is embedded onto a static HTML page:
Sadly, the particular effect I'm looking at is embedded into a showcase of several image animations, which makes picking only the necessary lines of code from the (huge) *.JS and *.CSS file extremely difficult:
Image Animation is at the 'good design - good business' part
While I'm able to identify some of the code related to the animation, such as:
<div class="block-revealer__element" style="transform: scaleX(0); transform-origin: 100% 50%; background: rgb(240, 240, 240); opacity: 1;"></div>
I'm left with the enormously time consuming and error-prone task to identify all other necessary CSS parts manually, which becomes an almost impossible task when having to search through 8589 lines of JavaScript in a reverse engineering approach.
Additionally, this approach leads to a time-consuming trial & error phase to validate if whether or not all necessary parts have been identified and copied.
Is there any plugin, workaround or simply more efficient way to target specific CSS and JavaScript code without having to search through the complete code manually?
The plugin which you are looking for is available here. Search for liquidReveal.
Since this link can go down any time, i am posting the code here
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
/*
* Credits:
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2016, Codrops
* http://www.codrops.com
*/
;(function ($, window, document, undefined) {
'use strict';
var pluginName = 'liquidReveal';
var defaults = {
// If true, then the content will be hidden until it´s "revealed".
isContentHidden: true,
// If true, animtion will be triggred only when element is in view
animteWhenInView: true,
delay: 0,
// The animation/reveal settings. This can be set initially or passed when calling the reveal method.
revealSettings: {
// Animation direction: left right (lr) || right left (rl) || top bottom (tb) || bottom top (bt).
direction: 'lr',
// Revealer´s background color.
bgcolor: '#f0f0f0',
// Animation speed. This is the speed to "cover" and also "uncover" the element (seperately, not the total time).
duration: 500,
// Animation easing. This is the easing to "cover" and also "uncover" the element.
easing: 'easeInOutQuint',
// percentage-based value representing how much of the area should be left covered.
coverArea: 0,
// Callback for when the revealer is covering the element (halfway through of the whole animation).
onCover: function onCover(contentEl, revealerEl) {
return false;
},
// Callback for when the animation starts (animation start).
onStart: function onStart(contentEl, revealerEl) {
return false;
},
// Callback for when the revealer has completed uncovering (animation end).
onComplete: function onComplete(contentEl, revealerEl) {
return false;
},
onCoverAnimations: null
}
};
function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function init() {
this._layout();
if (this.options.animteWhenInView) this.setIntersectionObserver();else this.doTheReveal();
},
_createDOMEl: function _createDOMEl(type, className, content) {
var el = document.createElement(type);
el.className = className || '';
el.innerHTML = content || '';
return el;
},
/**
* Build the necessary structure.
*/
_layout: function _layout() {
var position = getComputedStyle(this.element).position;
if (position !== 'fixed' && position !== 'absolute' && position !== 'relative') {
this.element.style.position = 'relative';
}
// Content element.
this.content = this._createDOMEl('div', 'block-revealer__content', this.element.innerHTML);
if (this.options.isContentHidden && this.content.querySelector('figure')) {
this.content.querySelector('figure').style.opacity = 0;
}
// Revealer element (the one that animates)
this.revealer = this._createDOMEl('div', 'block-revealer__element');
this.element.classList.add('block-revealer');
this.element.innerHTML = '';
this.element.appendChild(this.content);
var parallaxElement = this.element.querySelector('[data-parallax=true]');
if ((typeof parallaxElement === 'undefined' ? 'undefined' : _typeof(parallaxElement)) !== (typeof undefined === 'undefined' ? 'undefined' : _typeof(undefined)) && parallaxElement !== null) {
parallaxElement.appendChild(this.revealer);
} else {
this.element.appendChild(this.revealer);
}
},
/**
* Gets the revealer element´s transform and transform origin.
*/
_getTransformSettings: function _getTransformSettings(direction) {
var val, origin, origin_2;
switch (direction) {
case 'lr':
val = 'scaleX(0)';
origin = '0 50%';
origin_2 = '100% 50%';
break;
case 'rl':
val = 'scaleX(0)';
origin = '100% 50%';
origin_2 = '0 50%';
break;
case 'tb':
val = 'scaleY(0)';
origin = '50% 0';
origin_2 = '50% 100%';
break;
case 'bt':
val = 'scaleY(0)';
origin = '50% 100%';
origin_2 = '50% 0';
break;
default:
val = 'scaleX(0)';
origin = '0 50%';
origin_2 = '100% 50%';
break;
}
return {
// transform value.
val: val,
// initial and halfway/final transform origin.
origin: { initial: origin, halfway: origin_2 }
};
},
/**
* Reveal animation. If revealSettings is passed, then it will overwrite the options.revealSettings.
*/
reveal: function reveal(revealSettings) {
// Do nothing if currently animating.
if (this.isAnimating) {
return false;
}
this.isAnimating = true;
// Set the revealer element´s transform and transform origin.
var defaults = { // In case revealSettings is incomplete, its properties deafault to:
duration: 500,
easing: 'easeInOutQuint',
delay: parseInt(this.options.delay, 10) || 0,
bgcolor: '#f0f0f0',
direction: 'lr',
coverArea: 0
},
revealSettings = revealSettings || this.options.revealSettings,
direction = revealSettings.direction || defaults.direction,
transformSettings = this._getTransformSettings(direction);
this.revealer.style.WebkitTransform = this.revealer.style.transform = transformSettings.val;
this.revealer.style.WebkitTransformOrigin = this.revealer.style.transformOrigin = transformSettings.origin.initial;
// Set the Revealer´s background color.
this.revealer.style.background = revealSettings.bgcolor || defaults.bgcolor;
// Show it. By default the revealer element has opacity = 0 (CSS).
this.revealer.style.opacity = 1;
// Animate it.
var self = this,
// Second animation step.
animationSettings_2 = {
complete: function complete() {
self.isAnimating = false;
if (typeof revealSettings.onComplete === 'function') {
revealSettings.onComplete(self.content, self.revealer);
}
$(self.element).addClass('revealing-ended').removeClass('revealing-started');
}
},
// First animation step.
animationSettings = {
delay: revealSettings.delay || defaults.delay,
complete: function complete() {
self.revealer.style.WebkitTransformOrigin = self.revealer.style.transformOrigin = transformSettings.origin.halfway;
if (typeof revealSettings.onCover === 'function') {
revealSettings.onCover(self.content, self.revealer);
}
$(self.element).addClass('element-uncovered');
anime(animationSettings_2);
}
};
animationSettings.targets = animationSettings_2.targets = this.revealer;
animationSettings.duration = animationSettings_2.duration = revealSettings.duration || defaults.duration;
animationSettings.easing = animationSettings_2.easing = revealSettings.easing || defaults.easing;
var coverArea = revealSettings.coverArea || defaults.coverArea;
if (direction === 'lr' || direction === 'rl') {
animationSettings.scaleX = [0, 1];
animationSettings_2.scaleX = [1, coverArea / 100];
} else {
animationSettings.scaleY = [0, 1];
animationSettings_2.scaleY = [1, coverArea / 100];
}
if (typeof revealSettings.onStart === 'function') {
revealSettings.onStart(self.content, self.revealer);
}
$(self.element).addClass('revealing-started');
anime(animationSettings);
},
animationPresets: function animationPresets() {},
setIntersectionObserver: function setIntersectionObserver() {
var self = this;
var element = self.element;
self.isIntersected = false;
var inViewCallback = function inViewCallback(enteries, observer) {
enteries.forEach(function (entery) {
if (entery.isIntersecting && !self.isIntersected) {
self.isIntersected = true;
self.doTheReveal();
}
});
};
var observer = new IntersectionObserver(inViewCallback, { threshold: 0.5 });
observer.observe(element);
},
doTheReveal: function doTheReveal() {
var onCoverAnimations = this.options.revealSettings.onCoverAnimations;
var onCover = {
onCover: function onCover(contentEl) {
$('figure', contentEl).css('opacity', 1);
if ($(contentEl).find('.ld-lazyload').length && window.liquidLazyload) {
window.liquidLazyload.update();
}
if (onCoverAnimations) {
var animations = $.extend({}, { targets: $('figure', contentEl).get(0) }, { duration: 800, easing: 'easeOutQuint' }, onCoverAnimations);
anime(animations);
}
}
};
var options = $.extend(this.options, onCover);
this.reveal(options);
this.onReveal();
},
onReveal: function onReveal() {
if ($(this.element).find('[data-responsive-bg]').length) {
$(this.element).find('[data-responsive-bg]').liquidResponsiveBG();
}
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
var pluginOptions = $(this).data('reveal-options');
var opts = null;
if (pluginOptions) {
opts = $.extend(true, {}, options, pluginOptions);
}
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, opts));
}
});
};
})(jQuery, window, document);
jQuery(document).ready(function ($) {
$('[data-reveal]').filter(function (i, element) {
var $element = $(element);
var $fullpageSection = $element.closest('.vc_row.pp-section');
return !$fullpageSection.length;
}).liquidReveal();
});
I have build a slider using jQuery which works fine. It was a quick development so that didn't get time to add controller. Right now it is getting hard to fix controller for the carousel.
Does any one have solution or alternative to fix this?
Demo http://jsfiddle.net/sweetmaanu/Pn2UB/16/
$.fx.speeds._default = 1000;
function slider(container) {
var currPg = null,
firstPg = null;
container.find('> .pg').each(function (idx, pg) {
pg = $(pg);
var o = {
testimonial: pg.find('> .testimonial'),
thumb: pg.find('> .testimonial-thumb'),
pg: pg
};
o.pg.css({
position: 'absolute',
width: '100%',
height: '100%',
});
if (idx > 0) {
o.pg.css({
opacity: 0,
'z-index': -1
});
o.testimonial.css({
'margin-left': '100%'
});
o.thumb.css({
'bottom': '-100%'
});
} else {
firstPg = o;
}
o.prev = currPg;
if (currPg) {
currPg.next = o;
}
currPg = o;
});
firstPg.prev = currPg;
currPg.next = firstPg;
currPg = firstPg;
this.advance = function advance(duration) {
console.log("advance!", this);
var dur = duration || $.fx.speeds._default;
var dur2 = Math.ceil(dur / 2);
var dh = container.height();
var dw = container.width();
var nextPg = currPg.next;
nextPg.pg.css({
opacity: 1,
'z-index': null
});
var _pg = currPg;
currPg.testimonial.stop().animate({
'margin-left': -dw
}, dur, function () {
_pg.pg.css({
opacity: 0,
'z-index': -1
});
_pg = null;
});
nextPg.testimonial.stop()
.css({
'margin-left': dw
})
.animate({
'margin-left': 0
}, dur);
currPg.thumb.stop().animate({
'bottom': -dh
}, dur2, function () {
nextPg.thumb.stop()
.css({
'bottom': -dh
})
.animate({
'bottom': 0
}, dur2);
nextPg = null;
});
currPg = nextPg;
}
}
var s = new slider($('#banner'));
function scheduleNext() {
setTimeout(function () {
s.advance();
scheduleNext();
}, 5000);
}
scheduleNext();
You just want to add a variable direction and change that on click of both prev and next
var direction = 'left';
$('#next').click(function(event) {
direction = 'right';
s.advance(1000,direction);
});
$('#prev').click(function(event) {
direction = 'left';
s.advance(1000,direction);
});
then add a line where it checks the direction variable
if(direction == 'left')
var dw = container.width();
else if(direction =='right')
var dw = - container.width();
else{
console.log('Wrong direction')
return;
}
Carosal fixed
Don't forget to add argument on advanced function
For next slider you need:
$('#next').click(function(){
s.advance();
});
But anyway you have to construct universal animations methods with parameters.
Check this examples:
http://jsfiddle.net/lalatino/pjTU2/
and
http://sorgalla.com/projects/jcarousel/examples/static_controls.html
How to create jqgrid edit form at specified position and size which can changed in runtime?
Edit window postition should combined with other edit parameters in navGrid.
I tried code below but alert box does not appear and edit form is shown in default position.
var oldJqDnRstop,
editWindowParams = {
left: 10,
width: window.innerWidth-18,
top: 5,
height: 100
};
if ($.jqDnR) {
oldJqDnRstop = $.jqDnR.stop; // save original function
$.jqDnR.stop = function (e) {
var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id"), position;
oldJqDnRstop.call(this, e); // call original function
if (typeof dialogId !== "string") {
return;
}
if (dialogId.substr(0, 11) === "editmodgrid") {
editWindowParams.width = $dialog.width();
position = $dialog.position();
editWindowParams.left = position.left;
editWindowParams.top = position.top;
}
};
}
$.extend($.jgrid.edit, {
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: false,
left: 10,
dataheight: '100%',
width: window.innerWidth-18
});
$grid.jqGrid("navGrid", "#grid_toppager", { edit: true },
{
top: function() { alert(editWindowParams.top); return editWindowParams.top; },
left: function() { return editWindowParams.left; },
width: function() { return editWindowParams.width; },
height: function() { return editWindowParams.height; },
afterSubmit: function (response, postdata) {
if (response.responseText.charAt(0) === '{') {
var json = $.parseJSON(response.responseText);
return [true, '', json.Id];
}
alert( decodeErrorMessage(response.responseText, '', ''));
return [false, decodeErrorMessage(response.responseText, '', ''), null];
},
beforeShowForm: function ($form) {
$("#tr_Info>td:eq(1)").attr("colspan", "2");
$("#tr_Info>td:eq(1)>textarea").css("width", "95%");
$("#tr_Info>td:eq(0)").hide();
$("#tr_Markused>td:eq(1)").attr("colspan", "2");
$("#tr_Markused>td:eq(1)>textarea").css("width", "95%");
$("#tr_Markused>td:eq(0)").hide();
beforeShowForm_base($form);
},
url: '/Edit',
closeAfterEdit: true,
onClose: function(){
$( ".ui-autocomplete-input").trigger("blur");
}
} );
The demo demonstrate the fixed code. It's modification of the demo from my previous answer. It uses the following code:
if ($.jqDnR) {
oldJqDnRstop = $.jqDnR.stop; // save original function
$.jqDnR.stop = function (e) {
var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id"),
position, $form;
oldJqDnRstop.call(this, e); // call original function
if (typeof dialogId === "string") {
if (dialogId.substr(0,14) === "searchmodfbox_") {
// save the dialog position here
searchParams.width = $dialog.width();
position = $dialog.position();
searchParams.left = Math.max(0, position.left);
searchParams.top = Math.max(0, position.top);
} else if (dialogId.substr(0,7) === "editmod") {
// Add or Edit form
editParams.width = $dialog.width();
position = $dialog.position();
editParams.left = Math.max(0, position.left);
editParams.top = Math.max(0, position.top);
$form = $dialog.find("form.FormGrid");
if ($form.length > 0) {
editParams.dataheight = $form.height();
}
editParams.height = $dialog.height();
} else if (dialogId.substr(0,6) === "delmod") {
// Delete form
}
}
};
}
I have a button on my wordpress theme homepage that is used for going to the top of the page. I want to hide it when page is fully scrolled to the top. Here is my code:
(function($) {
var version = '#VERSION',
defaults = {
exclude: [],
excludeWithin:[],
offset: 0,
direction: 'top', // one of 'top' or 'left'
scrollElement: null, // jQuery set of elements you wish to scroll (for $.smoothScroll).
// if null (default), $('html, body').firstScrollable() is used.
scrollTarget: null, // only use if you want to override default behavior
beforeScroll: function() {}, // fn(opts) function to be called before scrolling occurs. "this" is the element(s) being scrolled
afterScroll: function() {}, // fn(opts) function to be called after scrolling occurs. "this" is the triggering element
easing: 'swing',
speed: 600,
autoCoefficent: 2 // coefficient for "auto" speed
},
getScrollable = function(opts) {
var scrollable = [],
scrolled = false,
dir = opts.dir && opts.dir == 'left' ? 'scrollLeft' : 'scrollTop';
this.each(function() {
if (this == document || this == window) { return; }
var el = $(this);
if ( el[dir]() > 0 ) {
scrollable.push(this);
} else {
// if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
el[dir](1);
scrolled = el[dir]() > 0;
if ( scrolled ) {
scrollable.push(this);
}
// then put it back, of course
el[dir](0);
}
});
// If no scrollable elements, fall back to <body>,
// if it's in the jQuery collection
// (doing this because Safari sets scrollTop async,
// so can't set it to 1 and immediately get the value.)
if (!scrollable.length) {
this.each(function(index) {
if (this.nodeName === 'BODY') {
scrollable = [this];
}
});
}
// Use the first scrollable element if we're calling firstScrollable()
if ( opts.el === 'first' && scrollable.length > 1 ) {
scrollable = [ scrollable[0] ];
}
return scrollable;
},
isTouch = 'ontouchend' in document;
$.fn.extend({
scrollable: function(dir) {
var scrl = getScrollable.call(this, {dir: dir});
return this.pushStack(scrl);
},
firstScrollable: function(dir) {
var scrl = getScrollable.call(this, {el: 'first', dir: dir});
return this.pushStack(scrl);
},
smoothScroll: function(options) {
options = options || {};
var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
locationPath = $.smoothScroll.filterPath(location.pathname);
this
.unbind('click.smoothscroll')
.bind('click.smoothscroll', function(event) {
var link = this,
$link = $(this),
exclude = opts.exclude,
excludeWithin = opts.excludeWithin,
elCounter = 0, ewlCounter = 0,
include = true,
clickOpts = {},
hostMatch = ((location.hostname === link.hostname) || !link.hostname),
pathMatch = opts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) || locationPath ) === locationPath,
thisHash = escapeSelector(link.hash);
if ( !opts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
include = false;
} else {
while (include && elCounter < exclude.length) {
if ($link.is(escapeSelector(exclude[elCounter++]))) {
include = false;
}
}
while ( include && ewlCounter < excludeWithin.length ) {
if ($link.closest(excludeWithin[ewlCounter++]).length) {
include = false;
}
}
}
if ( include ) {
event.preventDefault();
$.extend( clickOpts, opts, {
scrollTarget: opts.scrollTarget || thisHash,
link: link
});
$.smoothScroll( clickOpts );
}
});
return this;
}
});
$.smoothScroll = function(options, px) {
var opts, $scroller, scrollTargetOffset, speed,
scrollerOffset = 0,
offPos = 'offset',
scrollDir = 'scrollTop',
aniProps = {},
aniOpts = {},
scrollprops = [];
if ( typeof options === 'number') {
opts = $.fn.smoothScroll.defaults;
scrollTargetOffset = options;
} else {
opts = $.extend({}, $.fn.smoothScroll.defaults, options || {});
if (opts.scrollElement) {
offPos = 'position';
if (opts.scrollElement.css('position') == 'static') {
opts.scrollElement.css('position', 'relative');
}
}
scrollTargetOffset = px ||
( $(opts.scrollTarget)[offPos]() &&
$(opts.scrollTarget)[offPos]()[opts.direction] ) ||
0;
}
opts = $.extend({link: null}, opts);
scrollDir = opts.direction == 'left' ? 'scrollLeft' : scrollDir;
if ( opts.scrollElement ) {
$scroller = opts.scrollElement;
scrollerOffset = $scroller[scrollDir]();
} else {
$scroller = $('html, body').firstScrollable();
}
aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
opts.beforeScroll.call($scroller, opts);
speed = opts.speed;
// automatically calculate the speed of the scroll based on distance / coefficient
if (speed === 'auto') {
// if aniProps[scrollDir] == 0 then we'll use scrollTop() value instead
speed = aniProps[scrollDir] || $scroller.scrollTop();
// divide the speed by the coefficient
speed = speed / opts.autoCoefficent;
}
aniOpts = {
duration: speed,
easing: opts.easing,
complete: function() {
opts.afterScroll.call(opts.link, opts);
}
};
if (opts.step) {
aniOpts.step = opts.step;
}
if ($scroller.length) {
$scroller.stop().animate(aniProps, aniOpts);
} else {
opts.afterScroll.call(opts.link, opts);
}
};
$.smoothScroll.version = version;
$.smoothScroll.filterPath = function(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
};
// default options
$.fn.smoothScroll.defaults = defaults;
function escapeSelector (str) {
return str.replace(/(:|\.)/g,'\\$1');
}
})(jQuery);
your help will be highly appreciated.
I'm guessing this is based on user events so something like this to cover mousescroll and scroll
$(window).bind( "mousewheel DOMMouseScroll scroll", function(e){
if (document.body.scrollTop == 0) {
// do this
}
})
I am using the following plugin
http://playground.mobily.pl/jquery/mobily-notes/demo.html
which gives a very good stack, but the problem is when I use it for my gallery. All of the albums are auto rotating which looks odd. Is there any possible way to at least run the plugin after we hover on the div instead of auto run? The main code to run this is
$(function(){
$('.notes_img').mobilynotes({
init: 'rotate',
showList: false,
positionMultiplier: 5
});
});
Notice: I am not the author but it's an MIT licensed plugin so there shouldn't be any problem with modifying and redistributing it here.
In spite of eye candy of the plugin, it's not elastic enough to extend.
You can use my modified version instead.
mobilynotes.js:
(function ($) {
$.fn.mobilynotes = function (options) {
var defaults = {
init: "rotate",
positionMultiplier: 5,
title: null,
showList: true,
autoplay: true,
interval: 4000,
hover: true,
index: 1
};
var sets = $.extend({}, defaults, options);
return this.each(function () {
var $t = $(this),
note = $t.find(".note"),
size = note.length,
autoplay;
var notes = {
init: function () {
notes.css();
if (sets.showList) {
notes.list()
}
if (sets.autoplay) {
notes.autoplay()
}
if (sets.hover) {
notes.hover()
}
notes.show()
},
random: function (l, u) {
return Math.floor((Math.random() * (u - l + 1)) + l)
},
css: function () {
var zindex = note.length;
note.each(function (i) {
var $t = $(this);
switch (sets.init) {
case "plain":
var x = notes.random(-(sets.positionMultiplier), sets.positionMultiplier),
y = notes.random(-(sets.positionMultiplier), sets.positionMultiplier);
$t.css({
top: y + "px",
left: x + "px",
zIndex: zindex--
});
break;
case "rotate":
var rotate = notes.random(-(sets.positionMultiplier), sets.positionMultiplier),
degrees = "rotate(" + rotate + "deg)";
$t.css({
"-webkit-transform": degrees,
"-moz-transform": degrees,
"-o-transform": degrees,
filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotate + ")",
zIndex: zindex--
})
}
$t.attr("note", i)
})
},
zindex: function () {
var arr = new Array();
note.each(function (i) {
arr[i] = $(this).css("z-index")
});
var z = Math.max.apply(Math, arr);
return z
},
list: function () {
$t.after($("<ul />").addClass("listNotes"));
var ul = $t.find(".listNotes"),
title = new Array();
if (sets.title != null) {
note.each(function (i) {
title[i] = $(this).find(sets.title).text()
})
} else {
title[0] = "Bad selector!"
}
for (x in title) {
$t.next(".listNotes").append($("<li />").append($("<a />").attr({
href: "#",
rel: x
}).text(title[x])))
}
},
autoplay: function () {
var i = 1,
autoplay = setInterval(function () {
i == size ? i = 0 : "";
var div = note.eq(i),
w = div.width(),
left = div.css("left");
notes.animate(div, w, left);
i++
}, sets.interval)
},
hover: function () {
$t.hover(function() {
var div = note.eq(sets.index),
w = div.width(),
left = div.css("left");
sets.index == size ? sets.index = 1 : sets.index += 1;
notes.animate(div, w, left);
},
function() {}
);
},
show: function () {
$t.next(".listNotes").find("a").click(function () {
var $t = $(this),
nr = $t.attr("rel"),
div = note.filter(function () {
return $(this).attr("note") == nr
}),
left = div.css("left"),
w = div.width(),
h = div.height();
clearInterval(autoplay);
notes.animate(div, w, left);
return false
})
},
animate: function (selector, width, position) {
var z = notes.zindex();
selector.animate({
left: width + "px"
}, function () {
selector.css({
zIndex: z + 1
}).animate({
left: position
})
})
}
};
notes.init()
})
}
}(jQuery));
Using new features:
$('.notes_img').mobilynotes({
init: 'rotate',
showList: false,
autoplay: false,
index: 1, //starting index (new)
hover: true // (new)
});
Taking over where #username left off (excellent work), I have branched username's fiddle with the following changes to the config options:
Modified (from #username's code):
hover: (boolean) on hover, reverses the effect of autoplay
New:
click: (boolean) on click, advances to next note, then resumes autoplay, if active, in the hover state.
Internally, new next, stop and restart functions and modified init, autoplay and animate functions handle (combinations of) the options.
The trickiest part was to provide for a callback in animate to cause autoplay to resume after next (the click action) has completed. This has ramifications in several other functions. (On reflection there's undoubtedly a better way using deferreds - I will have a think about that)
Here's the fiddle (or this full page version), with settings that reflect #Sakshi Sharma original question. I set click to true but it could equally be set to false, depending on preference.
And here's the code:
(function($) {
$.fn.mobilynotes = function(options) {
var defaults = {
init: "rotate",
positionMultiplier: 5,
title: null,
showList: true,
autoplay: false,
hover: true,//when true, hovering reverses autoplay; when false, has no effect.
click: true,
interval: 4000,
index: 1
};
var settings = $.extend({}, defaults, options);
return this.each(function() {
var $t = $(this),
note = $t.find(".note"),
size = note.length,
autoplay,
currentIndex = 1;
var notes = {
init: function() {
notes.css();
if (settings.showList) {
notes.list();
}
if (settings.hover) {
var fn1 = settings.autoplay ? notes.stop : notes.restart;
var fn2 = settings.autoplay ? notes.restart : notes.stop;
$t.hover(fn1, fn2);
}
if (settings.click) {
clearInterval(autoplay);
//autoplay 0, hover 0: null
//autoplay 0, hover 1: autoplay
//autoplay 1, hover 0: autoplay
//autoplay 1, hover 1: null
var callback = ( (settings.autoplay && !settings.hover) || (!settings.autoplay && settings.hover) ) ? notes.autoplay : null;
$t.click(function(){
notes.next(callback);
});
}
if (settings.autoplay) {
notes.autoplay();
}
notes.show();
},
random: function(l, u) {
return Math.floor((Math.random() * (u - l + 1)) + l);
},
css: function() {
var zindex = note.length;
note.each(function(i) {
var $t = $(this);
switch (settings.init) {
case "plain":
var x = notes.random(-(settings.positionMultiplier), settings.positionMultiplier),
y = notes.random(-(settings.positionMultiplier), settings.positionMultiplier);
$t.css({
top: y + "px",
left: x + "px",
zIndex: zindex--
});
break;
case "rotate":
var rotate = notes.random(-(settings.positionMultiplier), settings.positionMultiplier),
degrees = "rotate(" + rotate + "deg)";
$t.css({
"-webkit-transform": degrees,
"-moz-transform": degrees,
"-o-transform": degrees,
filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotate + ")",
zIndex: zindex--
})
}
$t.attr("note", i)
});
},
zindex: function() {
var arr = new Array();
note.each(function(i) {
arr[i] = $(this).css("z-index")
});
var z = Math.max.apply(Math, arr);
return z
},
list: function() {
$t.after($("<ul />").addClass("listNotes"));
var ul = $t.find(".listNotes"),
title = new Array();
if (settings.title != null) {
note.each(function(i) {
title[i] = $(this).find(settings.title).text()
})
} else {
title[0] = "Bad selector!"
}
for (x in title) {
$t.next(".listNotes").append($("<li />").append($("<a />").attr({
href: "#",
rel: x
}).text(title[x])))
}
},
next: function(callback) {
callback = (!callback || typeof callback !== 'function') ? null : callback;
currentIndex = currentIndex % size;
notes.animate(note.eq(currentIndex), callback);
currentIndex++;
},
autoplay: function() {
notes.stop();
autoplay = setInterval(notes.next, settings.interval);
},
stop: function() {
clearInterval(autoplay);
},
restart: function() {
notes.next(notes.autoplay);
},
show: function() {
$t.next(".listNotes").find("a").click(function() {
var $t = $(this),
nr = $t.attr("rel"),
div = note.filter(function() {
return $(this).attr("note") == nr;
});
clearInterval(autoplay);
notes.animate(div);
return false;
})
},
animate: function(selector, callback) {
var width = selector.width(),
position = selector.css("left"),
z = notes.zindex();
selector.animate({
left: width + "px"
}, function() {
selector.css({
zIndex: z + 1
}).animate({
left: position
}, function(){
if(callback) {
callback();
}
});
});
}
};
notes.init()
})
}
}(jQuery));
Hiya there so demo here :) and hope this helps: http://jsfiddle.net/haf6J/14/show/ && http://jsfiddle.net/haf6J/14/ OR http://jsfiddle.net/haf6J/3/show/ && http://jsfiddle.net/haf6J/3/
Now the rotation will start when you hover the images and if you want further that one mouse out it should stop you can take a look into event .mouseout and you can stop the rotation i.e. remove the effect.
Like epascarello mentioned documentation is here http://playground.mobily.pl/jquery/mobily-notes.html
Please let me know and dont forget to accept if this helps (and upvote :)) cheers
Jquery Code
$('.notes_img').hover(function() {
$('.notes_img').mobilynotes({
init: 'rotate',
showList: false
});
});