I'm following this course on pluralsight about making web apps using .NET Core. The author uses jQuery 2.4.3 I think and I just picked the newest jQuery myself which 3.x.
So I write the code exactly like he does:
(function () {
var ele = $("#userName");
ele.text("Some Dude");
var main = $("#main");
main.on("mouseenter", function () {
main.css("background-color", "#888;");
});
main.on("mouseleave", function () {
main.css("background-color", "");
});
})();
And at first nothing happened when I moused over my div. It doesn't change color. Nothing much seems to register at all. So I went hunting an I found that this is how I should probably do it instead:
(function () {
var ele = $("#userName");
ele.text("Some Dude");
var main = $("#main");
main.on("mouseover", function () {
console.log("enter");
main.css("background-color", "#888;");
})
.on("mouseout", function () {
console.log("out");
main.css("background-color", "");
});
})();
And while the console prints out "enter" and "out", the background color of my div still doesn't change.
What did I miss about this?
Maybe remove ";" in main.css("background-color", "#888;")
Related
I have a problem in a function PhoneGap-NFC plug-in Intel XDK.
function nova_pulseira(cli_nova_id) {
nfc.addTagDiscoveredListener(function (nfcEvent) {
var tag = nfcEvent.tag;
var = TagID nfc.bytesToHexString(tag.id);
if(TagID! == 0) {
nova_pulseira_input(cli_nova_id, TagID);
} else {
myApp.alert( 'error in reading the bracelet.' 'Notice');
}
});
}
The nfc.addTagDiscoveredListener function is used for reading NFC TAG when occurs nfcEvent.
In the first reading it works normally, but when make the second reading, the nfc.addTagDiscoveredListener function is applied two times, the third reading, it is applied 3 times, and so on.
The only way I found to "stop" this function is using location.reload(); but he returns to the Application home page, and the ideal would be to activate a subpage.
I would, somehow, that nfc.addTagDiscoveredListener function is disabled after applying the nova_pulseira_input(cli_nova_id, TagID); function.
PS: I've used
-> Return false;
-> $ .each (Nfc, function () {this.reset ();});
-> Intel.xdk.cache.clearAllCookies ();
-> $ .ajaxSetup ({Cache: false});
Thanks for the help of all ...
Put the function inside a var and redefine it later:
var tagHandler = function () {
handlerOk();
};
function handlerOk () {
console.log("handlerOk()");
tagHandler = function() {
console.log("disabled..")
};
}
function tag() {
console.log("tag()");
tagHandler();
}
tag();
tag();
I'm stuck with my modal popup plugin since a week.
I'll try to explain as much as i can but first, here is the jsfiddle: http://jsfiddle.net/hideo/yth37hhf/27/
I know the code contains some other functions but they are useful for my plugin.
So, my issue is that the function "triggerLinkAction" contains an addEventListener which is not fired.
(function() {
Window.prototype.triggerLinkAction = function(){
var triggeredLink = document.getElementById("triggeredOtherAction");
var inputTarget = document.getElementById("inputText");
console.log('triggeredLink',triggeredLink);
triggeredLink.addEventListener("click", function (e) {
alert('If this pops out, I will be very happy!!!');
e.preventDefault();
inputTarget.value = "This text should be on the input field...";
}, true);
}
})();
The targeted element is inside the modal, and this modal is displayed by clicking on the link "A small modal".
When the plugin calls ShowModal(), I trigger the TransitionEnd event to call a function
[.... code ...]
function ShowModal() {
vars.popupContainer.classList.add("show");
hsdk.PrefixedEvent(vars.popupOverlay, "TransitionEnd", function (e) {
executeFunctions();
});
}
[.... code ...]
The executeFunctions() will check which functions need to be called:
[.... code ...]
function executeFunctions() {
if (vars.opts && vars.opts.fn) {
var allFunctions = vars.opts.fn.split(',');
for (var i = 0; i < allFunctions.length; i++)
{
var functionName = allFunctions[i];
var functionToExecute = window[functionName];
if(typeof functionToExecute === 'function') {
functionToExecute();
}
}
}
}
[.... code ...]
There are some comments on the javascript part about the plugin, but feel free to ask if I can provide any other information.
PS: I don't care about IE for now ;-)
Is it possible to change the order of events to invoke alert function with message Huh? first and only then next alert with 'Yeah!' message?
<div class="elem" onclick="alert('Yeah!')"></div>
My jQuery code.
$('.elem').click(function () {
alert('Huh?');
})
Link to jsFiddle: http://jsfiddle.net/84Lyq3n9/
How about this:
var inline_click_handler_src = $('.elem').attr('onclick');
var inline_click_handler = new Function('e', inline_click_handler_src);
$('.elem').removeAttr('onclick');
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[Edit] Or without mucking with markup content:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[One more edit] In case your inline click handler uses this, use function.call(), to set the execution context:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler.call(el);
});
But you can do it with many ways.
First you can remove the attribute "onclick".You can do it with javascript.
$('.elem').removeAttr("onclick");
$('.elem').click(function () {
alert('Whatever you want');
alert('Huh?');
})
Here is a link: http://www.w3docs.com/learn-javascript/javascript-events.html
This is what i want: Timeout when i hover out of a div, cancel if i hover on top of the div again.
The code works if i remove the cancelfunction. So showing and hiding the div works fine.
This is my code:
$(document).ready(function ()
{
var timeoutID;
function clearAlert()
{
window.clearTimeout(timeoutID);
}
if ($('.txtVote').text() == "Avgi stemme")
{
$('#starInfo').hover(
function ()
{
clearAlert();
$('#CarDetailsButtons').css('right', '10px');
$('#voteStars').show();
},
function ()
{
console.log("hide iniated");
timeoutID = window.setTimeout(hideStars, 2000);
console.log("hide executed");
});
}
function hideStars()
{
console.log("hideStars ran");
$('#CarDetailsButtons').css('right', '45px');
$('#voteStars').hide();
}
});
And, this is my error:
Uncaught SyntaxError: Unexpected token ILLEGAL
which appears on the line right after window.clearTimeout(timeoutID);
Anyone able to see what I'm doing wrong? :)
EDIT: *WORKS*
So, it seems i had some kind of copy paste bug. I wrote the function clearAlert manually, just like it was before, and it works now.
Thanks for all the input!
try this:
var that = this;
that.timeoutID = null;
...
that.timeoutID = ...
OR
you have to declare var timeoutID = null; global. So you have the var in a gloabl context and not within the function-context of $(document).ready.
the best solution ist to write a little js-class with the timer in it. so you have no global conflicts an it works.
greetings!
I would suggest you to move your functions outside of doc ready like this:
function hideStars()
{
console.log("hideStars ran");
$('#CarDetailsButtons').css('right', '45px');
$('#voteStars').hide();
}
function clearAlert()
{
window.clearTimeout(timeoutID);
}
$(document).ready(function ()
{
var timeoutID;
if ($('.txtVote').text() == "Avgi stemme")
{
$('#starInfo').hover(
function ()
{
clearAlert();
$('#CarDetailsButtons').css('right', '10px');
$('#voteStars').show();
},
function ()
{
console.log("hide iniated");
timeoutID = window.setTimeout(hideStars, 2000);
console.log("hide executed");
});
}
});
I have the following code partially working. I am newbie in javascript so please don't blame me if my approach is not the best.
window.url_var = "status.htm";
window.elem = "#e1";
function menu_item(){
$(window.elem).click(function (event)
{
$("#divTestArea1").load(window.url_var);
});
}
$("#e1").click(function (event)
{
event.preventDefault();
window.url_var = "demo2.txt";
window.elem = "#e1";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
$("#e2").click(function (event)
{
event.preventDefault();
window.url_var = "status.htm";
window.elem = "#e2";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
$("#e3").click(function (event)
{
event.preventDefault();
window.url_var = "form.htm";
window.elem = "#e3";
clearInterval(auto_refresh);
$("#divTestArea1").load(window.url_var);
});
jQuery(document).ready(function() {
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
Whenever I click elements e1 and e2, the setInterval works as expected and as soon as I click element e3, the element cease to be reloaded.
That's the behavior I want so far. But I also wants to start the setinterval again if e1 or e2 get's again clicked.
the last is what it's not working on the above code.
I will appreciate if you could point me in the right direction.
I have come to this code after seeing some of the answers to my original question (thanks to everyone). To clarify my original idea, I need to update some items on my web page on a regular basics but the content can be change with some menu and also some of the contents like a form should not be updated.
window.url_var = "demo2.txt";
var auto_refresh = null;
function setRefresh() {
var self = this;
this.bar = function() {
if(window.url_var != ""){
$("#divTestArea1").load(window.url_var);
auto_refresh = setTimeout(function() { self.bar(); }, 5000);
}
}
this.bar();
}
$("#e1").click(function (event)
{
event.preventDefault();
window.url_var = "demo2.txt";
setRefresh();
});
$("#e2").click(function (event)
{
event.preventDefault();
window.url_var = "status.htm";
setRefresh();
});
$("#e3").click(function (event)
{
event.preventDefault();
window.url_var = "form.htm";
$("#divTestArea1").load(window.url_var);
window.url_var = "";
});
$(document).ready(function() {
setRefresh();
});
Try using 2 different variables and clearing all if needed. This is: auto_refresh1 and auto_refresh2. Each time you call setinterval, it creates a new timer with a new id. You are overwriting auto_refresh variable and the timer before that will still fire.
Or you can store the setinterval in a hash object and run through and clear them all.
I'm unclear as to what exactly it is that you're trying to do here. Nevertheless, I've rewritten your code a bit to make some improvements (and fix one glaring bug in your code involving the setInterval calls).
var url_var = "status.htm",
elem = "#e1",
$destination = $("#divTestArea1"),
auto_refresh;
function menu_item() {
$(elem).bind("click", function (e) {
$destination.load(url_var);
});
}
function load() {
$destination.load(url_var);
}
function set(url, id) {
url_var = url;
elem = id;
}
function setRefresh() {
return setInterval(menu_item, 5000);
}
function handleClick(e) {
e.preventDefault();
set(e.data.url, e.data.id);
load();
auto_refresh = setRefresh();
}
$("#e1").on("click", {
url: "demo2.txt",
id: "#e1"
}, handleClick);
$("#e2").on("click", {
url: "status.htm",
id: "#e2"
}, handleClick);
$("#e3").on("click", function (e) {
e.preventDefault();
set("form.htm", "#e3");
clearInterval(auto_refresh);
load();
});
$(document).ready(function () {
load();
auto_refresh = setRefresh();
});
I'm guessing that maybe those setInterval calls should actually be setTimeout calls? Why would you want to bind a "click" event handler over and over again?
EDIT #1: Switched to jQuery's currently preferred on method from the bind method, included use of event data parameter to further abstract event handling code.