I am learning JavaScript and I got stuck creating a function to minimize a window. The problem is that this functions seems to stack in itself so many times.
Gere is my principal function :
function displayChatWindow(user, status, avatar, id){
var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar, userId: id});
stackingWidth = stackingWidth - boxWidth;
console.log(stackingWidth);
$("body").prepend(template);
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$("#" + id).css({
top: absoluteY,
left: stackingWidth
});
$(".minimize-others").on("click", displayOthersChat);
$(".chat input, .chat textarea").on("focus", cleanInputs);
$(".chat input, .chat textarea").on("blur", setInputs);
}
This function receives some parameters and with a template creates the chat window. At the end it applies the function to minimize the window (displayOthersChat) and load plugins and stuff for each window.
My displayOtherChats function:
function displayOthersChat(e){
/*e.preventDefault();*/
var This = $(this).parent().parent();
var minimize = This;
if(!This.hasClass("draggable")){
This.animate({
top: windowHeight - boxHeight - 20
});
This.addClass("draggable");
This.draggable({handle: ".header"});
var timeOut = setTimeout(function() {
This.find(".minimize").toggleClass("rotate");
}, 500);
}else{
This.draggable("destroy");
This.removeClass("draggable");
var timeOut = setTimeout(function() {
This.find(".minimize").toggleClass("rotate");
}, 500);
This.animate({
top: absoluteY
});
}
/*return false;*/
}
This seems to work really well. If I open my first window it displays and also minimizing the window works. When I open another window, the last window works correctly but the first window opens when I try to minimize it.
It seems that it calls the function twice, and if I open a third window, the first window calls the function three times.
I actually don't know whats going on, I will appreciate if you guys could help me. I also leave a link so you guys can see whats going on: http://s3.enigmind.com/jgonzalez/nodeChat.
The problem seems to be that you are binding the same event handler to the same elements over and over again.
$(".minimize-others").on("click", displayOthersChat); will bind displayOthersChat to all existing elements with class minimize-others. .on always adds event handlers, it does not replace them. So if you call displayChatWindow multiple times, you are binding the event handler to the .minimize-others elements multiple times.
You only want to bind the handler to the window that was just created, for example:
// create reusable jQuery object from HTML string.
var $template = $(template).prependTo('body');
// instead of $("body").prepend(template);
// ...
$template.find('.minimize-others').on('click', displayOthersChat);
Same goes for the other event handlers.
Alternatively, you could bind the event handler once, outside of the function and use event delegation to capture the event:
$(document.body).on('click', '.minimize-others', displayOthersChat);
Related
I create a dialog in which there are some buttons with events. When I destroy the dialog recursive programmatical or by pressing the X are there deleted all the created event-listener (hide, cancel, click1, click2)?
Because I call this part (here I posted only a simplified version of my code) very often (for different dialogs) and it seems that my code could have some memory leaks I want to eliminate them. So please tell me, is it necassary/make sense to remove the event-listener all by myself like eventHide.remove(); ?
Additional: I tried to use the on (like the eventHide) for the click- and cancel-events but it didn't work.
var myDialog = new Dialog({
content: 'Testdialog'
});
myDialog.show();
var btn1 = new dijit.form.Button({ label: "Ok" });
var btn2 = new dijit.form.Button({ label: "Help" });
myDialog.containerNode.appendChild(btn1.domNode);
myDialog.containerNode.appendChild(btn2.domNode);
var eventHide = on.once(myDialog, "hide", function(e){
console.log('hide');
myDialog.destroyRecursive();
});
dojo.connect(btn1, "onClick", function(){
console.log('click ok');
myDialog.destroyRecursive();
});
dojo.connect(btn2, "onClick", function(){
console.log('click help');
myDialog.destroyRecursive();
});
dojo.connect(myDialog, "onCancel", function(){
console.log('cancel');
});
You could use this.own defined in dijit/Destroyable, which is a base of dijit/_WidgetBase and thus most widgets (make sure your custom widget inherit from hit.).
dijit/Destroyable is used to track handles of an instance, and then destroy them when the instance is destroyed.
More infos:
http://dojotoolkit.org/reference-guide/1.10/dijit/Destroyable.html
http://dojotoolkit.org/reference-guide/1.8/dojo/Evented.html
just added some shake effect when user submit form on the inputs that not being full.
But when user press many times on submit button the shake effect fired many times.
How can I prevent it from being fired more than one time?
stop() - not workings.
clearQueue() - stop it even if it moves from it's first place in the page.
This is what I came with:
$(this).effect("shake");
Thanks :)
if you can use an extra variables you can use a flag:
first_submit = true
if(first_submit){
first_submit = false
$(this).effect("shake");
}
You could create a variable to set the effect is active (running). When your submit call is intercepted by a callback you verify if it's true, if yes you return. Preventing from another call.
In the effect callback (success) you set the variable false, for example. That's the cycle.
I have added an extension for the effect to callback it's success, look here: What is the true way of adding callback functionality to custom JQuery Animation?
Something like:
// Your new control
var active = false;
// Extending callback functionality to the animation
$.fn.shake = function ( times, distance, duration, callback ) {
return this.css({ position: 'relative' }).each( function () {
for ( var i = 0, t = duration / times; i < times; i+= 1 ) {
$( this ).
animate({ left: -distance }, t / 3 ).
animate({ left: distance }, t / 3 ).
animate({ left: 0 }, t / 4 );
}
$( this ).show( callback );
});
};
// DOM load
$(document).ready(function(){
// Triggering form the event
$('#form_ID').submit({function(){
if(active == true)
return false;
// trigger your event..
shake(5, 10, 500, function () {
$('#your_component_ID').removeClass( 'shaking' );
});
});
});
I guess you could take a look in this post too: jQuery prevent multiple clicks until animation is done
I'm using a jquery script called magnific popup and I'm trying to access a variable I created in a callback function, inside another callback function but I can't work out how to do it. My code for the magnific init looks like this:
$('.packery').magnificPopup({
delegate: '.js-modal',
type: 'ajax',
mainClass: 'mfp-zoom-in',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
elementParse: function(item) {
item.community = item.el.attr('data-community');
var communityClass = item.community;
console.log(item.community);
// this ^ does actually print the data-community
console.log('Parsing content. Item object that is being parsed:', item);
},
resize: function() {
console.log('Popup resized');
// resize event triggers only when height is changed or layout forced
$('.mfp-bg').addClass(communityClass);
}
}
});
If I try and set $('.mfp-bg').addClass(communityClass); or $('.mfp-bg').addClass(item.community); I get a Uncaught ReferenceError: communityClass is not defined.
I can't apply a class to mfp-bg inside elementParse as that element hasn't been created yet.
I know that I can't use variables from different functions in javascript, but I'm a bit stuck at this point on how I can actually use the data-community attribute inside the resize callback, because it seems like I can only create the variable inside the elementParse callback?
Any help would be much appreciated, cheers.
You could create a global variable, outside the function and assign item.community to it. That way you will be able to access it in the other callback aswell
For example:
var communityClass;
$('.packery').magnificPopup({
delegate: '.js-modal',
type: 'ajax',
mainClass: 'mfp-zoom-in',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
elementParse: function(item) {
item.community = item.el.attr('data-community');
communityClass = item.community;
console.log(item.community);
// this ^ does actually print the data-community
console.log('Parsing content. Item object that is being parsed:', item);
},
resize: function() {
console.log('Popup resized');
// resize event triggers only when height is changed or layout forced
$('.mfp-bg').addClass(communityClass);
}
}
});
I realised after console.logging this there was already a currItem bit I could access, so I changed the code to this and it works fine now.
$('.packery').magnificPopup({
delegate: '.js-modal',
type: 'ajax',
mainClass: 'mfp-zoom-in',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
elementParse: function(item) {
item.community = item.el.attr('data-community');
},
resize: function() {
$('.mfp-bg').addClass(this.currItem.community);
}
}
});
I use the following iScroll 5 code (generally, not so important: just a common scrolling page-by-page):
var myScroll = new IScroll('.scroller', {
mouseWheel: true,
scrollbars: true,
keyBindings: {
// doesn't matter
},
preventDefault: false,
fadeScrollbars: true,
snap: 'section', // <-- that's the key
wheelAction: 'scroll',
});
myScroll.on('beforeScrollStart', function (e) {
myScroll.preventDisabling = true;
});
myScroll.on('scrollMove', function (e) {
});
myScroll.on('scrollStart', function (e) {
// !!! I need the detection somewhere here !!!
if (!myScroll.preventDisabling) {
myScroll.disable();
disabledWasCalledInMeanwhile = true;
}
myScroll.preventDisabling = false;
});
var disabledWasCalledInMeanwhile = false;
// that's just to prevent jumping to another page before scrolling is finished
myScroll.on('scrollEnd', function (e) {
disabledWasCalledInMeanwhile = false;
window.setTimeout(function () {
if (!disabledWasCalledInMeanwhile)
myScroll.enable();
}, 250);
$('.labels>*').toggleClass('active', false)
.eq(this.currentPage.pageY).toggleClass('active', true);
});
myScroll.on('scrollCancel', function (e) {
myScroll.enable();
});
So, is there any chance to detect in beforeScrollStart or scrollStart the page I am going to scroll to? That's important to know for triggering that page items animation. Thanks!
I've used iScroll for a number of years (it is a excellent library), and I don't know of a built-in method of doing it. All the scroll events (except scrollEnd) before the iScroll snap is determined. However, with a slight modification of the library, I believe it is possible.
First, go into iScroll.js source and find the _nearestSnap method. At the bottom of the method, you will find the object you seek returned. Before the return, grab that data and pass it to a custom event. Unfortunately, iScroll's event system doesn't permit you to pass custom variables to events, so you'll have to do a work-around. In addition, you'll need to track the "flick" event because it won't trigger the _nearestSnap method.
iScroll modification in _nearestSnap method
this.customSnap({
x: x,
y: y,
pageX: i,
pageY: m
});
Update to class instance. Note the addition of "customSnap" method and the flick event.
myScroll = new IScroll('#wrapper', {snap: "p"});
myScroll.customSnap = function(data) {
console.log(data);
};
myScroll.on('flick', function() {
console.log(data.currentPage);
});
That should do it. Not necessarily the cleanest update, but in my testing, it does work.
http://jsfiddle.net/9pa4th4y/
I have a jQuery dialog that appears and loads an external page. In that page i am running a setInterval() function that queries my server continuously every 1 second (AJAX). The problem is that when i close the dialog, the setInterval doesn't stop running.
here is the code for the dialog:
var theUrl = 'someUrl';
var popUp = document.createElement('div');
$(popUp).dialog({
width: 400,
height: 270,
title: "Some Title",
autoOpen: true,
resizable:false,
close: function(ev, ui) {
$(this).dialog('destroy');
},
modal: true,
open: function() {
$(this).load(theUrl);
}
});
I tried calling $(this).dialog('destroy') and $(this).remove() and document.body.removeChild(popUp) on close. nothing worked. is there anyway to 'unload' the loaded page?
setInterval returns a handler that you can pass to clearInterval to stop the function from running. Here's a basic example of how it works.
var handler = setInterval(function() {}, 2000);
clearInterval(handler);
For your example you'd want to call clearInterval in the close method of the ui.dialog.
Docs:
setInterval - https://developer.mozilla.org/en/window.setInterval
clearInterval - https://developer.mozilla.org/en/DOM/window.clearInterval
Edit
You will not be able to call clearInterval without the stored handler from setInterval, therefore if the call to setInterval is in another script the only way you're going to capture the handler is to override window.setInterval itself.
$(function() {
var originalSetInterval = window.setInterval;
var handlers = [];
window.setInterval = function() {
handlers.push(arguments[0]);
originalSetInterval(arguments);
};
$('whatever').dialog({
close: function() {
for (var i = 0; i < handlers.length; i++) {
clearInterval(handlers[i]);
}
handlers = [];
}
});
});
Note that the code to override window.setInterval must come before including the <script> tag to bring in the external file. Also this approach will clear all interval functions whenever clearInterval is called, therefore this is not ideal, but it's the only way you're going to accomplish this.