I'm having trouble getting the element in a jQuery Callback function. I have tried various suggestions of $(this) and $(this.element) with no success.
$.fn.onTypeFinished = function (func) {
$(this).bind("keypress", onKeyPress)
function onKeyPress() {
setTimeout(onTimeOut, 500);
}
function onTimeOut() {
func.apply();
}
return this;
};
$(".user-input").onTypeFinished(function () {
var ntabindex = parseFloat($(this.element).attr('tabindex'));
ntabindex++;
$('input[tabindex=' + ntabindex + ']').focus();
});
I have been thinking I need some way to pass a reference to this to the callback function but no other similar posts seem to suggest that route.
Here is a JSFiddle of what I am trying to do. The gist of the functionality is I'm trying to auto advance to the next input according to tabindex.
http://jsfiddle.net/helfon/fdu8xw0h/2/
Thanks
From your code it looks like you want to pass the element on which the keypress has occurred as this to the callback.
For that to happen you need to pass the correct context to the timeout handler, for which we can use .bind() as shown below.
Also to make the timer work correctly some other corrections are also made.
$.fn.onTypeFinished = function(func) {
$(this).bind("keypress", onKeyPress)
function onKeyPress() {
var onTypeFinished = $(this).data('onTypeFinished');
if (!onTypeFinished) {
onTypeFinished = {};
$(this).data('onTypeFinished', onTypeFinished);
}
clearTimeout(onTypeFinished.keytimer);
onTypeFinished.keytimer = setTimeout(onTimeOut.bind(this), 500);
}
function onTimeOut() {
func.apply(this);
}
return this;
};
$(".user-input").onTypeFinished(function() {
//$('input[tabindex=3]').focus();
var ntabindex = parseFloat(this.getAttribute('tabindex'));
ntabindex++;
$('input[tabindex=' + ntabindex + ']').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="1" tabindex=1 class="user-input">
<input id="2" tabindex=2 class="user-input">
<input id="3" tabindex=3 class="user-input">
<input id="4" tabindex=4 class="user-input">
As per the logs, it seems that your this keyword inside the jQuery fn is pointing to the window object instead, I've bound the functions as follows and passed this in your apply, and got it working so that this points to the input elements instead:
$.fn.onTypeFinished = function (func) {
var time;
$(this).each(function () {
$(this).on('keypress', onKeyPress);
});
function onKeyPress() {
clearTimeout(time);
time = setTimeout(onTimeOut.bind(this), 500);
}
function onTimeOut() {
func.apply(this);
}
return this;
};
$(".user-input").onTypeFinished(function () {
//$('input[tabindex=3]').focus();
var ntabindex = parseFloat($(this).attr('tabindex'));
++ntabindex;
$('input[tabindex=' + ntabindex + ']').focus();
});
http://jsfiddle.net/fdu8xw0h/9/
You have to also iterate over the array of elements as your selector is returning an array of inputs, so you have to handle them separately, otherwise your event will occur only once, i've tested it and it goes from the first input to the second and then it stops working. With the approach i've pasted here it will go from input to input.
You should understand that this changes whenever you change scope. Always var $this = $(this) to lock it down.
$.fn.onTypeFinished = function (func) {
var $this = $(this);
$this.bind("keypress", onKeyPress);
function onKeyPress() {
setTimeout(onTimeOut, 500);
}
function onTimeOut() {
func($this); //I would personally send this, like how you do $.each(function(count, element){})
}
return this;
};
$(".user-input").onTypeFinished(function (t) {
var ntabindex = parseInt($(t).attr('tabindex')) + 1; //You should parse int here
$('input[tabindex=' + ntabindex + ']').focus();
});
Of course, you can simplify the above more into:
$.fn.onTypeFinished = function (func) {
var $this = $(this);
$this.bind("keypress", onKeyPress);
function onKeyPress() {
setTimeout(function(){
func($this);
}, 500);
}
return this;
};
$(".user-input").onTypeFinished(function (t) {
$('input[tabindex=' + String(parseInt($(t).attr('tabindex')) + 1) + ']').focus();
});
The jsfiddle: http://jsfiddle.net/vimxts/fdu8xw0h/6/
Related
I want a to have an animation only when seven elements have been click. Here is the code but it doesn't work:
var animp5 = function () {
var i = 0;
$("#ans1_p5").on('click', function () {
i = i + 1;
$("#ans1_p5").fadeOut(800);
$("#correct1_p5").fadeIn(1000);
});
$("#ans2_p5").on('click', function () {
i = i + 1;
$("#ans2_p5").fadeOut(800);
$("#correct2_p5").fadeIn(1000);
});
$("#ans3_p5").on('click', function () {
i = i + 1;
$("#ans3_p5").fadeOut(800);
$("#correct3_p5").fadeIn(1000);
});
$("#ans5_p5").on('click', function () {
i = i + 1;
$("#ans5_p5").fadeOut(800);
$("#correct4_p5").fadeIn(1000);
});
$("#ans7_p5").on('click', function () {
i = i + 1;
$("#ans7_p5").fadeOut(800);
$("#correct5_p5").fadeIn(1000);
});
$("#ans9_p5").on('click', function () {
i = i + 1;
$("#ans9_p5").fadeOut(800);
$("#correct6_p5").fadeIn(1000);
});
$("#ans10_p5").on('click', function () {
i = i + 1;
$("#ans10_p5").fadeOut(800);
$("#correct7_p5").fadeIn(1000);
});
if (i === 7) {
$("#ans4").fadeOut(800);
$("#ans6").fadeOut(800);
$("#ans8").fadeOut(800);
$("#wrong1_p5").fadeIn(1000);
$("#wrong2_p5").fadeIn(1000);
$("#wrong3_p5").fadeIn(1000);
$("#cor_p5").fadeIn(1000);
}
};
I have tried other solutions (like .data('clicked') or .attr('clicked') but they didn't work either.
You can use observer design pattern in javascript to achieve this the right way.
First create handlers, subscribe and execute functions and then you can subscribe waht ever you like in your case its comparison i===7. execute fade.execute after every click to validate.
Also it's advisable to use class selectors than id selectors in your case. As id selectors will be unmanageable and you will end up with a lot of duplicate code.
But for the sake of your question observer is your way to go.
jsFiddle
function Fade() { // Create Fade handlers
this.handlers = []; // observers
}
Fade.prototype = { // define subscribe and execute
subscribe: function(fn) {
this.handlers.push(fn);
},
execute: function(o, thisObj) {
var scope = thisObj || window;
this.handlers.forEach(function(item) {
item.call(scope, o);
});
}
};
var fade = new Fade();
fade.subscribe(function(){ // pass function you want to subscribe
console.log(i);
if(i===7){
$("#ans4").fadeOut(800);
$("#ans6").fadeOut(800);
$("#ans8").fadeOut(800);
$("#wrong1_p5").fadeIn(1000);
$("#wrong2_p5").fadeIn(1000);
$("#wrong3_p5").fadeIn(1000);
$("#cor_p5").fadeIn(1000);
}
});
var animp5 = (function(){
var i = 0;
$("#ans1_p5").on('click',function(){
i=i+1;
$("#ans1_p5").fadeOut(800);
$("#correct1_p5").fadeIn(1000);
fade.execute(); // execute to check if condition met
});
$("#ans2_p5").on('click',function(){
i=i+1;
$("#ans2_p5").fadeOut(800);
$("#correct2_p5").fadeIn(1000);
fade.execute();
});
$("#ans3_p5").on('click', function(){
i=i+1;
$("#ans3_p5").fadeOut(800);
$("#correct3_p5").fadeIn(1000);
fade.execute();
});
$("#ans5_p5").on('click', function(){
i=i+1;
$("#ans5_p5").fadeOut(800);
$("#correct4_p5").fadeIn(1000);
fade.execute();
});
$("#ans7_p5").on('click', function(){
i=i+1;
$("#ans7_p5").fadeOut(800);
$("#correct5_p5").fadeIn(1000);
fade.execute();
});
$("#ans9_p5").on('click', function(){
i=i+1;
$("#ans9_p5").fadeOut(800);
$("#correct6_p5").fadeIn(1000);
fade.execute();
});
$("#ans10_p5").on('click', function(){
i=i+1;
$("#ans10_p5").fadeOut(800);
$("#correct7_p5").fadeIn(1000);
fade.execute();
});
})();
Thanks for your answers.
As I have not much experience working with jquery I was unable to code your solution but I found a new one that works perfect. I put the "if" inside every click function so each time I click, code checks if the condition has been fulfilled and once this happens run the appropriate code.
Thanks again
I'm stumped with this one and would really appreciate someone's help.
I'm customizing highslide for integration with wordpress. Via the following code within the highslide.config.js file I'm adding a class name to certain elements and passing different attributes through an onClick call depending on certain conditions.
Everything works until I add the following code:
if(hsGroupByWpGallery){
slideshowGroup: this.parentNode.parentNode.parentNode.id
};
When the above code is present, not only does that one statement not execute, but the whole thing stops working. Even if the if statement is something like if(1=1){}; it still breaks.
If I have instead simply slideshowGroup: this.parentNode.parentNode.parentNode.id or nothing (the two options I'm looking for), both do what I would expect. I just need an if statement to switch between them.
Here's the relevant code:
jQuery(document).ready(function() {
var hsCustomGalleryGroupClass = 'fbbHighslide_GalleryGroup';
var hsCustomGalleryGroupChecker = 0;
var hsGroupByWpGallery = true;
jQuery('.' + hsCustomGalleryGroupClass).each(function(){
hsCustomGalleryGroupChecker++;
return false;
});
if (hsCustomGalleryGroupChecker > 0){
jQuery('.' + hsCustomGalleryGroupClass).each(function(i, $item) {
var grpID = $item.id;
jQuery('#' + grpID + ' .gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
return hs.expand(this, {
slideshowGroup: grpID
});
};
});
});
} else {
jQuery('.gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
return hs.expand(this, {
// This is the problem if statement
if(hsGroupByWpGallery){
slideshowGroup: this.parentNode.parentNode.parentNode.id
};
});
};
});
};
});
Thanks in advance.
The problem is you are trying to assign a conditional property.. you can't have a if condition inside a object definition like that
jQuery('.gallery-item a').addClass('highslide').each(function () {
this.onclick = function () {
var obj = {};
//assign the property only if the condition is tru
if (hsGroupByWpGallery) {
obj.slideshowGroup = this.parentNode.parentNode.parentNode.id;
}
return hs.expand(this, obj);
};
});
Another way to do the same is
jQuery('.gallery-item a').addClass('highslide').each(function () {
this.onclick = function () {
//if the flag is true sent an object with the property else an empty object
return hs.expand(this, hsGroupByWpGallery ? {
slideshowGroup: this.parentNode.parentNode.parentNode.id
} : {});
};
});
I think you might want this, based on the other code:
jQuery('.gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
if(hsGroupByWpGallery){
return hs.expand(this, {
slideshowGroup: this.parentNode.parentNode.parentNode.id
});
}
};
});
Im struggling with this code:
Within 'swapFunc' function, I append an addEventListener to 'tEleBaby' element, immediately after which, I trigger the addEventListener by replacing the class of 'tEleBaby'.
The problem is with the code within 'setTimeout', which needs to run after the 'animListener' function has completed. Im not keen on using setTimeout so would prefer a more sensible / correct way of dealing with this.
swapFunc: function swapFunc(tEle, swapEle) {
var tEle = document.getElementById(tEle);
var tEleBaby = tEle.children[0];
tEleBaby.addEventListener("animationend", this.animListener, false);
tEleBaby.classList.add("animFadeOut");
// I want to remove the setTimeout; i.e. the animListener func should feedback to swapFunc
setTimeout(function () {
tEle.id = swapEle;
tEle.setAttribute("data-action", dataAction);
tEle.setAttribute("data-tooltip", dataTooltip);
}, 500);
},
animListener: function animListener(ev) {
if (ev.type.toLowerCase().indexOf("animationend") >= 0) {
var eventTarget = ev.target;
eventTarget.className = "animFadeIn cFBIcons";
}
},
Try it this way :
swapFunc: function swapFunc(tEle, swapEle) {
var tEle = document.getElementById(tEle);
var tEleBaby = tEle.children[0];
tEleBaby.addEventListener("animationend", listener, false);
tEleBaby.classList.add("animFadeOut");
function listener(ev) {
animListener(ev, callMe);
}
function callMe() {
tEle.id = swapEle;
tEle.setAttribute("data-action", dataAction);
tEle.setAttribute("data-tooltip", dataTooltip);
}
},
animListener: function animListener(ev, callback) {
if (ev.type.toLowerCase().indexOf("animationend") >= 0) {
var eventTarget = ev.target;
eventTarget.className = "animFadeIn cFBIcons";
}
callback();
},
Why don't you simply put that code in the event handler?
var self = this;
tEleBaby.addEventListener ("animationend" , function (ev) {
self.animListener(ev);
//rest of code
} , false);
I have some jQuery plugin that changes some elements, i need some event or jQuery plugin that trigger an event when some text input value changed.
I've downloaded jquery.textchange plugin, it is a good plugin but doesn't detect changes via external source.
#MSS -- Alright, this is a kludge but it works:
When I call boxWatcher() I set the value to 3,000 but you'd need to do it much more often, like maybe 100 or 300.
http://jsfiddle.net/N9zBA/8/
var theOldContent = $('#theID').val().trim();
var theNewContent = "";
function boxWatcher(milSecondsBetweenChecks) {
var theLoop = setInterval(function() {
theNewContent = $('#theID').val().trim();
if (theOldContent == theNewContent) {
return; //no change
}
clearInterval(theLoop);//stop looping
handleContentChange();
}, milSecondsBetweenChecks);
};
function handleContentChange() {
alert('content has changed');
//restart boxWatcher
theOldContent = theNewContent;//reset theOldContent
boxWatcher(3000);//3000 is about 3 seconds
}
function buttonClick() {
$('#theID').value = 'asd;lfikjasd;fkj';
}
$(document).ready(function() {
boxWatcher(3000);
})
try to set the old value into a global variable then fire onkeypress event on your text input and compare between old and new values of it. some thing like that
var oldvlaue = $('#myInput').val();
$('#myInput').keyup(function(){
if(oldvlaue!=$('#myInput').val().trim())
{
alert('text has been changed');
}
});
you test this example here
Edit
try to add an EventListner to your text input, I don't know more about it but you can check this Post it may help
Thanks to #Darin because of his/her solution I've marked as the answer, but i have made some small jQuery plugin to achieve the same work named 'txtChgMon'.
(function ($) {
$.fn.txtChgMon = function (func) {
var res = this.each(function () {
txts[0] = { t: this, f: func, oldT: $(this).val(), newT: '' };
});
if (!watchStarted) {
boxWatcher(200);
}
return res;
};
})(jQuery);
var txts = [];
var watchStarted = false;
function boxWatcher(milSecondsBetweenChecks) {
watchStarted = true;
var theLoop = setInterval(function () {
for (var i = 0; i < txts.length; i++) {
txts[i].newT = $(txts[i].t).val();
if (txts[i].newT == txts[i].oldT) {
return; //no change
}
clearInterval(theLoop); //stop looping
txts[i].f(txts[i], txts[i].oldT, txts[i].newT);
txts[i].oldT = $(txts[i].t).val();
boxWatcher(milSecondsBetweenChecks);
return;
}
}, milSecondsBetweenChecks);
}
I have built a dropdown menu system, everything works when tested independently, the problem I have is in the code below. I use the jQuery ready function to build the menu bar from an external array (menubar[]). Here I am trying to get the mouseover event to call the dropdown() function, but using a different argument for each anchor tag.
So rolling over the first should call dropdown(0), the second dropdown(1) and so on.
$(document).ready(function () {
for (i in menubar) {
var declaration = '<a href="' + baseurl + '/' + menubar[i].url +
'" class="menutitle">' + menubar[i].name + '</a>';
var a = $(declaration).mouseover(function () {
dropdown(i);
}).mouseout(function () {
activeTimer = setTimeout("removedropdowns()", 100);
});
$("#menu").append(a);
}
});
The code is calling dropdown(6); on each rollover. How can I pass the loop variable (i) into the mouseover function as a literal/static value!
I got this working fine in FF by using
.attr('onMouseOver','javascript:dropdown('+i+');')
but that wasn't firing for some versions of IE, so I switched to the jQuery mouseover, which fires, but I have the issue above :(
Your actual problem is that each of your mouseover callbacks uses the same i you increase i all the way up to 6, the callbacks still point to the same i and therefore all use 6 as the value.
You need to make a copy of the value of i, you can do this by using an anonymous function.
$(document).ready(function () {
// you should use (for(var i = 0, l = menubar.length; i < l; i++) here in case menubar is an array
for (var i in menubar) {
var declaration = '<a href="' + baseurl + '/' + menubar[i].url +
'" class="menutitle">' + menubar[i].name + '</a>';
(function(e) { // e is a new local variable for each callback
var a = $(declaration).mouseover(function () {
dropdown(e);
}).mouseout(function () {
activeTimer = setTimeout(removedropdowns, 100); // don't use strings for setTimeout, since that calls eval
});
$("#menu").append(a);
})(i); // pass in the value of i
}
});
$(function() {
$(menubar).each(function(i){
$("#menu").append('' + menubar[i].name + '');
});
$("#menu a").hover(
function(){
dropdown($(this).index());
},
function(){
activeTimer = setTimeout("removedropdowns()", 100);
}
);
});
First, don't use for..in but rather ordinary loop.
Second, I would just append the links first then apply the events later:
$(document).ready(function() {
for (var i = 0; i < menubar.length; i++) {
$("#menu").append('' + menubar[i].name + '');
}
$("#menu a").each(function(index) {
$(this).mouseover(function() { dropdown(index); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
});
});
Have a look here and here.
To capture the current value of i, you need to pass it as a parameter to another function where it can be captured as a local variable:
Try using jQuery's each() function:
jQuery(function() {
jQuery.each(menubar, function(index, element) {
var declaration = '' + element.name + '';
var a = $(declaration).mouseover(function() { dropdown(index); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
$("#menu").append(a);
});
});
In JavaScript, if you don't declare your variable, it is defined globally. To fix this, add "var" in front of your i looping variable like this. UPDATE: As Sime noticed (see comment), you also need to pass the variable into the function, otherwise you form a closure on the i.
$(document).ready(function() {
for(var i in menubar) {
var declaration = '' + menubar[i].name + '';
var a = $(declaration).mouseover(function(i) { dropdown(i); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
$("#menu").append(a);
}
});