jQuery plugin: prevent multiply calls of an object - javascript

Recently, I'm writing a jQuery plugin which moves html elements.
My plugin is something like this:
$('#div1').moveIt({ top: 100, left: 200 });
The problem is, When I call moveIt more than once for an element. It does all methods together. something like this:
$('#div1').moveIt({ top: 100, left: 200 }); // first call
$('#div1').moveIt({ top: 200, left: 300 }); // second call
// even more calls ....
The questions are:
How can I prevent the the second call inside my plugin?
How can I overwrite the new values of second call into the first call?
A simple sample code will be enough.
edit: here is my problem

UPDATED: What about your problem - check fiddle http://jsfiddle.net/vittore/jHzLN/1/
You have to save timeout and clear it when you set new one.
What you are asking for is called throttle.
Check this article http://benalman.com/projects/jquery-throttle-debounce-plugin/
But as you are really using jquery animations ( your plugin name tells that ), you have to use something else.
Check stop() method
$(selector).stop(true, true).animate(...)
Another interesting thing you can do is queue additional animations. Use queue:true option for that:
$(selector).animate({ left:...} , { queue: true })

Is this what you were going for? http://jsfiddle.net/acbabis/B89Bx/. Let me know:
$(function()
{
var methods =
{
init : function(options) {
$(this).each(function() {
var self = $(this);
var settings = $.extend({
top : 50,
left : 50,
dir : true,
}, options);
var i=0, j=0;
var move = function()
{
settings = self.data('moveItTarget');
if(settings.dir)
{
i++;
j++;
}
else
{
i+=10;
j+=10;
}
self.css({'top':Math.min(i, settings.top),
'left':Math.min(j, settings.left)});
if(j<=settings.top && i<=settings.top)
{
setTimeout(move,1);
} else {
self.data('movingIt', false);
}
};
self.data('moveItTarget', settings);
if(!self.data('movingIt')) {
self.data('movingIt', true);
move();
}
});
}
};
$.fn.moveIt = function(methodOrOptions) {
if (methods[methodOrOptions]) {
return methods[methodOrOptions].apply(this,
Array.prototype.slice.call(arguments, 1));
} else if (typeof methodOrOptions==='object' || !methodOrOptions) {
return methods.init.apply(this, arguments);
} else {
$.error('Method "'+methodOrOptions+'" does not exist!');
}
};
}(jQuery));
$('#div1').moveIt({ top: 100, left: 100, dir: true }); // first call
$('#div1').moveIt({ top: 300, left: 300, dir: false }); // second call

Related

Multiple instances of a JavaScript carousel

So I have the following code I have written to build a carousel in JavaScript using Hammer.js and jQuery:
var hCarousel = {
container: false,
panes: false,
pane_width: 0,
pane_count: 0,
current_pane: 0,
build: function( element ) {
hCarousel.container = $(element).find('.hcarousel-inner-container');
hCarousel.panes = $(hCarousel.container).find('> .section');
hCarousel.pane_width = 0;
hCarousel.pane_count = hCarousel.panes.length;
hCarousel.current_pane = 0;
hCarousel.setPaneDimensions( element );
$(window).on('load resize orientationchange', function() {
hCarousel.setPaneDimensions( element );
});
$(element).hammer({ drag_lock_to_axis: true })
.on('release dragleft dragright swipeleft swiperight', hCarousel.handleHammer);
},
setPaneDimensions: function( element ){
hCarousel.pane_width = $(element).width();
hCarousel.panes.each(function() {
$(this).width(hCarousel.pane_width);
});
hCarousel.container.width(hCarousel.pane_width*hCarousel.pane_count);
},
next: function() {
return hCarousel.showPane(hCarousel.current_pane+1, true);
},
prev: function() {
return hCarousel.showPane(hCarousel.current_pane-1, true);
},
showPane: function( index ) {
// between the bounds
index = Math.max(0, Math.min(index, hCarousel.pane_count-1));
hCarousel.current_pane = index;
var offset = -((100/hCarousel.pane_count)*hCarousel.current_pane);
hCarousel.setContainerOffset(offset, true);
},
setContainerOffset: function( percent, animate ) {
hCarousel.container.removeClass("animate");
if(animate) {
hCarousel.container.addClass("animate");
}
if(Modernizr.csstransforms3d) {
hCarousel.container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
}
else if(Modernizr.csstransforms) {
hCarousel.container.css("transform", "translate("+ percent +"%,0)");
}
else {
var px = ((hCarousel.pane_width*hCarousel.pane_count) / 100) * percent;
hCarousel.container.css("left", px+"px");
}
},
handleHammer: function( ev ) {
ev.gesture.preventDefault();
switch(ev.type) {
case 'dragright':
case 'dragleft':
// stick to the finger
var pane_offset = -(100/hCarousel.pane_count)*hCarousel.current_pane;
var drag_offset = ((100/hCarousel.pane_width)*ev.gesture.deltaX) / hCarousel.pane_count;
// slow down at the first and last pane
if((hCarousel.current_pane == 0 && ev.gesture.direction == Hammer.DIRECTION_RIGHT) ||
(hCarousel.current_pane == hCarousel.pane_count-1 && ev.gesture.direction == Hammer.DIRECTION_LEFT)) {
drag_offset *= .4;
}
hCarousel.setContainerOffset(drag_offset + pane_offset);
break;
case 'swipeleft':
hCarousel.next();
ev.gesture.stopDetect();
break;
case 'swiperight':
hCarousel.prev();
ev.gesture.stopDetect();
break;
case 'release':
// more then 50% moved, navigate
if(Math.abs(ev.gesture.deltaX) > hCarousel.pane_width/2) {
if(ev.gesture.direction == 'right') {
hCarousel.prev();
} else {
hCarousel.next();
}
}
else {
hCarousel.showPane(hCarousel.current_pane, true);
}
break;
}
}
}
And I call this like:
var hSections;
$(document).ready(function(){
hSections = hCarousel.build('.hcarousel-container');
});
Which works fine. But I want to make it so that I can have multiple carousels on the page which again works... but the overall width of the container is incorrect because it's combining the width of both carousels.
How can I run multiple instances of something like this, but the code know WHICH instance it's interacting with so things don't become mixed up, etc.
The problem is your design is not really suited to multiple instances, because of the object literal which has properties of the carousel, but also the build method.
If I was starting this from scratch, I would prefer a more OOP design, with a carousel class that can you instantiate, or have it as a jQuery plugin. That said, it's not impossible to adapt your existing code.
function hCarousel(selector){
function hCarouselInstance(element){
var hCarousel = {
// insert whole hCarousel object code
container: false,
panes: false,
build : function( element ){
...
};
this.hCarousel = hCarousel;
hCarousel.build(element);
}
var instances = [];
$(selector).each(function(){
instances.push(new hCarouselInstance(this));
});
return instances;
}
Usage
For example, all elements with the hcarousel-container class will become an independant carousel.
$(document).ready(function(){
var instances = hCarousel('.hcarousel-container');
});
Explanation:
The hCarousel function is called passing the selector, which can match multiple elements. It could also be called multiple times if needed.
The inner hCarouselInstance is to be used like a class, and instantiated using the new keyword. When hCarousel is called, it iterates over the matched elements and creates a new instance of hCarouselInstance.
Now, hCarouselInstance is a self contained function that houses your original hCarousel object, and after creating the object it calls hCarousel.build().
The instances return value is an array containing each instance object. You can access the hCarousel properties and methods from there, such as:
instances[0].hCarousel.panes;
jQuery plugin
Below is a conversion to a jQuery plugin, which will work for multiple carousels.
(function ( $ ) {
$.fn.hCarousel = function( ) {
return this.each(function( ) {
var hCarousel = {
// insert whole hCarousel object code here - same as in the question
};
hCarousel.build(this);
});
};
}( jQuery ));
Plugin usage:
$('.hcarousel-container').hCarousel();
I would try turning it into a function which you can use like a class. Then you can create separate objects for your carousels.
So you would have something like the following:
function HCarousel (element) {
this.element=element;
this.container= false;
this.panes= false;
this.pane_width= 0;
this.pane_count= 0;
this.current_pane= 0;
}
And then add each method on the class like this.
HCarousel.prototype.build = function() {
this.container = $(element).find('.hcarousel-inner-container');
this.panes = $(hCarousel.container).find('> .section');
this.pane_width = 0;
this.pane_count = hCarousel.panes.length;
this.current_pane = 0;
this.setPaneDimensions( element );
$(window).on('load resize orientationchange', function() {
this.setPaneDimensions( element );
});
$(this.element).hammer({ drag_lock_to_axis: true }).on('release dragleft dragright swipeleft swiperight', hCarousel.handleHammer);
};
etc. That should give you the basic idea. Will take a little bit of re-writing, but then you can create a carousel with something like this:
var carousel1 = new HCarousel('.hcarousel-container');
Hope that puts you on the right track.
Classes don't actually exist in JS, but this is a way to simulate one using a function. Here's a good article on using classes in JS http://www.phpied.com/3-ways-to-define-a-javascript-class/

Function not accepting callback

My goal is to show and hide a search form and a call number. When the search form is visible, the toggle should allow the form to submit. They shouldn't be open at the same time because there isn't room for both of them to be open, so I've written the functions to accept callback functions except both events seem to fire at the same time, ignoring the fact that they should wait for the first function to complete.
What am I doing wrong? My code is pasted below, but here's a fiddle that demonstrates the problem. There may also be a better way to write this so I'm open to suggestions. Thanks.
//Functions for Search and Call
var closeSearch = function(callback) {
$('.searchbox').removeClass('open').addClass('notOpen').animate({
width: '40px'
}, function() {
$('.call').animate({
width: '100%'
}, function() {
$('.call h4').fadeIn();
});
$('.search_bar').hide();
});
if (typeof callback == "function") {
callback();
}
};
var openSearch = function(callback) {
$('.searchbox').animate({
width: '100%'
}).addClass('open').removeClass('notOpen');
$('.search_bar').animate({
width: '100%'
}).fadeIn();
$('.search_bar #searchform .search-query').animate({
width: '90%'
});
if (typeof callback == "function") {
callback();
}
};
var closeCall = function(callback) {
$('.call').removeClass('open').addClass('notOpen')
$('.call').animate({
width: '60px'
});
$('.call h4').fadeOut();
if (typeof callback == "function") {
callback();
}
};
var openCall = function(callback) {
$('.call').animate({
width: '100%'
}, function() {
$('.call h4').fadeIn();
});
$('.searchbox').addClass('notOpen');
if (typeof callback == "function") {
callback();
}
};
// Search Box Toggle
$('.searchbox a').toggle(function() {
if ($('.searchbox').hasClass('notOpen')) {
closeCall(function() {
openSearch();
});
} else {
$('.search_bar #searchform').submit();
}
}, function() {
if ($('.searchbox').hasClass('notOpen')) {
closeCall(function() {
openSearch();
});
} else {
$('.search_bar #searchform').submit();
}
});
//Call Box Toggle
$('.call a').toggle(function() {
if ($('.searchbox').hasClass('open')) {
closeSearch(function() {
openCall();
});
} else {
openCall();
}
}, function() {
if ($('.searchbox').hasClass('open')) {
closeSearch(function() {
openCall();
});
} else {
closeCall();
}
});​
As the animations themselves need some time to execute, they run asynchronous, thus providing their own callback - method.
In your script, you put your callback-function right after calling animate, so your passed function is called immediatly. You should put the call of your own callback - function into the callback-function of the jQuery animation.
For example:
$('.searchbox').animate({
width: '100%'
}, function(){
//callback of the .animate-function
if (typeof callback == "function") {
callback();
}
});
I made a quick edit to your fiddle to show you: http://jsfiddle.net/nsSxh/2/
I know it's not perfect, but it should give you an idea what to do.

jQuery plugin development preserve element original state

I'm developing a jQuery plugin to create modal windows, so, now, I want to restore element original state after hide it.
Someone can help me?
Thanks!
---- update ---
Sorry,
I want to store element html in some place when show it, then put the stored data back when hide it.
This is my plugin:
(function ($) { // v2ui_modal
var methods = {
show: function (options) {
var _this = this;
var defaults = {
showOverlay: true,
persistentContent: true
};
var options = $.extend(defaults, options);
if (!_this.attr('id')) {
_this.attr('id', 'v2ui-id_' + Math.random().toString().replace('.', ''));
}
if (options.showOverlay) {
$('<div />', { // overlay
id: 'v2-ui-plugin-modal-overlay-' + this.attr('id'),
css: {
zIndex: ($.topZIndex() + 1),
display: 'none',
position: 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0
}
}).addClass('v2-ui').addClass('plugin').addClass('overlay').appendTo('body');
};
_this.css({
zIndex: ($.topZIndex() + 2),
position: 'fixed'
});
_this.center();
$('#v2-ui-plugin-modal-overlay-' + _this.attr('id')).fadeIn(function () {
_this.fadeIn();
});
},
hide: function () {
var _this = this;
_this.fadeOut();
$('#v2-ui-plugin-modal-overlay-' + _this.attr('id')).fadeOut(function () {
$('#v2-ui-plugin-modal-overlay-' + _this.attr('id')).remove();
if ((_this.attr('id')).substr(0, 8) == 'v2ui-id_') {
_this.removeAttr('id');
};
});
}
};
jQuery.fn.v2ui_modal = function (methodOrOptions) {
if (methods[methodOrOptions]) {
methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
methods.show.apply(this, arguments);
};
};
})(jQuery);
You can take a look at jQuery.detach.
The .detach() method is the same as .remove(), except that .detach()
keeps all jQuery data associated with the removed elements. This
method is useful when removed elements are to be reinserted into the
DOM at a later time.
But I am having a hard time understanding your problem fully, so I apologize if my answer does not fit your question.

jQuery if statement breaks my code

This is my code:
$("#header").touchwipe({
// if($('#cont-wide').css('left') == '-100%' ){
wipeLeft: function() {
$('#cont-wide').animate({
left: '-201%'
}, 500 );
$('#nav-filters').fadeOut(200);
$('#nav-map-l').delay(300).fadeIn(200);
$('#one .col-inner').delay(500).hide(0);
$('#three .col-inner').css('display','block');
setTimeout(function() {
window.scrollTo(0, 1) },
100);
},
wipeRight: function() {
$('#cont-wide').animate({
left: '1%'
}, 500 );
$('#nav-filters').fadeOut(200);
$('#nav-map-r').delay(300).fadeIn(200);
$('#one .col-inner').css('display','block');
setTimeout(function() {
window.scrollTo(0, 1) },
100);
},
min_move_x: 50,
min_move_y: 50,
preventDefaultEvents: false
// }
});
As it currently is it works fine. However when I remove the comments to add the conditional statement, the code and all my other JavaScript stops working. Thanks
You cannot put the if statement there ...
you could do this :
wipeLeft: function() {
if($('#cont-wide').css('left') == '-100%' ){
// the rest
}
},
wipeRight: function() {
if($('#cont-wide').css('left') == '-100%' ){
// the rest
}
}
Note - the css function my not produce the result you are expecting : http://jsfiddle.net/VccAn/ using a value of 10% for left in my example returns auto on Chrome ! See this question / answer for discussions related to this problem : jQuery .css("left") returns "auto" instead of actual value in Chrome
You can't just shove in an if statement in the middle of a statement.
The best solution would be creating your options object before calling touchwipe():
var options = {};
if($('#cont-wide').css('left') == '-100%') {
options.wipeLeft = function() {
};
options.wipeRight = function() {
};
}
$("#header").touchwipe(options);
Note that the if condition is only evaluated once. If you want it to be evaluated on every event, #ManseUK's answer is the way to go.

is there any easy way to get fancybox 2 to animate left to right instead of up and down?

I have a project i'm working on and using fancybox 2 (which is pretty great).
That said, one annoyance is that the arrows in a gallery point left and right, but the animation moves up and down. i'd really love to animate the new content in from the left, rather than the top.
Before i pull apart the default rollout of fancybox and start overwriting oncompletes and the such, is there something i'm missing?
The latest source code - https://github.com/fancyapps/fancyBox/zipball/master
Includes different animation directions depending on the way you navigate (using scroll mouse or keyboard navigation keys).
You can get horizontal transitions using the left and right key arrows.
No need to hack or customize your own fancybox version.
So, here's how i did it, if anyone else runs into this question later.
example: The Fremont
in the plugins.js file, i've made my own version of the fancybox script. changeIn and changeOut are updated as so:
if(!isForward){
// move left (backwards)
startPos.left = (parseInt(startPos.left, 10) + 1500) + 'px';
wrap.css(startPos).show().animate({
opacity: 1,
left: '-=1500px'
}, {
duration: current.nextSpeed,
complete: F._afterZoomIn
});
} else {
// move right (forwards)
startPos.left = (parseInt(startPos.left, 10) - 1500) + 'px';
wrap.css(startPos).show().animate({
opacity: 1,
left: '+=1500px'
}, {
duration: current.nextSpeed,
complete: F._afterZoomIn
});
}
and changeOut looks like this now:
changeOut: function () {
var wrap = F.wrap,
current = F.current,
cleanUp = function () {
$(this).trigger('onReset').remove();
};
wrap.removeClass('fancybox-opened');
var leftAmt;
if(isForward){
leftAmt = '+=1500px';
} else {
leftAmt = '-=1500px';
}
if (current.prevEffect === 'elastic') {
wrap.animate({
'opacity': 0,
left: leftAmt
}, {
duration: current.prevSpeed,
complete: cleanUp
});
}
isForward is defined in the next/prev function
next: function () {
if (F.current) {
F.jumpto(F.current.index + 1);
isForward = true;
}
},
prev: function () {
if (F.current) {
F.jumpto(F.current.index - 1);
isForward = false;
}
},
and that's that. enjoy!
Good idea. Just, there is a bug in you code. you must put
isForward = false; or isForward = true;
before
F.jumpto(F.current.index - 1); or F.jumpto(F.current.index + 1);
in both next and prev function. Since it break your code when you press next and then you press prev. you can try it.
next: function () {
if (F.current) {
isForward = true;
F.jumpto(F.current.index + 1);
}
},
prev: function () {
if (F.current) {
isForward = false;
F.jumpto(F.current.index - 1);
}
},
Check the API, maybe there's an option for it?
If not, find the part of the code that does the animation and replace it with your own.

Categories