Using jQuery, I would like to change the cursor on page when any key is pressed (for example Ctrl).
Simple task, however I can not get make it work...
This was my first idea, obviously - does not work:
$(document).on('keydown',function(){
$(document).css('cursor','wait');
});
Any idea what is wrong?
Think what you want is something like this:
$('body').css('cursor','wait');
You can't apply CSS to the document. Also if you wanted to only apply this css to the CTRL key press you could do:
$(document).on('keydown', function (event) {
if (event.ctrlKey) {
$('body').css('cursor', 'wait');
}
});
Related
I am trying to make a image preview containing of about 5-6 images which will appear one after another when user hovers over it (not like a carousel with prev and next buttons). Here is the fiddle consisting of what I gathered so far.. i don't know if this approach is right or not.. but I am stuck as the alert callback is not working. Could someone please tell me what is wrong?
$(function()
{
var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');
for (var i = 0, n = imageCount.length; i < n; i++) {
imageCount[i].on('click', function(e)
{
alert('Everything is going fine!');
}
);
}
}
);
The root cause of click event callback can't be triggered is that you're trying to register a event handler on a "DOM" (in this case: imageCount[i]) element in jQuery way. Try to register the event handler like this if you want to use pure javascript solution:
imageCount[i].addEventListener('click', function(e){
alert('Everything is going fine!');
});
Here is a jsfiddle demo.
Note: I didn't consider the cross browser issue in this case.
BTW, try to cache the length of imageCount node list, it will improve the performance.
You are using js AND jQuery at same time. It's wrong. If you use jQuery, than click event will be like this:
$(document).('click', '#product_grid_list figure img', function(){
alert('Everything is going fine!');
});
You are using a mix of jQuery and standalone javascript. You might as well go all the way to jQuery, with something like:
$('#product_grid_list figure:first img').click(function(e) {
alert('Everything is going fine, hopefully!');
});
You did not send the corresponding HTML, so we cannot test whether the above is correct.
it's just a simple click event in jQuery, no need to use js: http://jsfiddle.net/wP3QQ/11/
$('#product_grid_list').find('figure img').click(function(e){
alert('Everything is going fine!');
e.preventDefault();
});
You want the hover effect, so click event should not be used over here. It should be mouseover.
Working Fiddle
Code Snippet:
$(document).on('mouseover','#product_grid_list figure img',function(e){
alert("now it is working");
});
You are attempting to call on(), a jQuery method, on an HTMLElement (a DOM element). You can't do that, jQuery methods can only be called on jQuery collections. It's easy to get a jQuery collection for the elements you desire:
Use .find() to match the images
There's no need for a for() loop, jQuery's .on() will handle looping for you.
You may also want to prevent the default behaviour of your anchors
$(function () {
var imageCount = $('#product_grid_list').find('figure img');
imageCount.on('click', function (e) {
e.preventDefault()
alert('Everything is going fine!');
})
});
JSFiddle
I am writing an interaction and need a bit of syntax help on one element:
Need to check "IF" a class is present on a div
<div class="something">
and the "Enter" key is pressed (key 13)
switch (window.event.keyCode) {
case 13:
window.location.href = 'http://google.com';
break;
}
then run a function
$('#thing').addClass('that');
What would proper jQuery or JS Syntax be for something like this?
So to clear things up: I have a div with classes that are changing. I am trying to get the browser to detect when said class is present on the dive "AND" the enter button is pressed, then run a function.
Thanks!
Here is a working JSFiddle
You can check for the class within your keypress function:
$(function() {
$(window).keypress(function(event)
{
if ((event.keyCode == 13) && ($('div').hasClass('this')))
{
$('#thing').addClass('that');
}
});
});
You may want to change the generic div to check whether a certain div has the class by its id
if($('#thing').hasClass('that')) { // your code };
Simple as that. Check out the jQuery docs some time. Usually if you need to do anything, there's a function for it already.
You are probably looking for the jquery function .hasClass()
https://api.jquery.com/hasClass/
like
if($("#thing").hasClass("something")){
$("#thing").addClass("that");
}
I don't completely understand understand what you are trying to do to incorporate it in your code.
$('body').on('click', '.anything', function() {
//code
});
doesn't work for anything right now and I can't figure out why. I'm able to anchor to anything else, say I just toss a #wrap div right inside the body. Then I'm able to do
$('#wrap').on('click', '.anything', function() {
//code
});
for any element I want.
Any idea what I could have done to disable this ability on the body element?
Thanks!
You should use $(document). It is a function trigger for any click event in the document. Then inside you can use the jquery on("click","body *",somefunction), where the second argument specifies which specific element to target. In this case every element inside the body.
$(document).on('click','body *',function(){
// $(this) = your current element that clicked.
// additional code
});
You can try this:
You must follow the following format
$('element,id,class').on('click', function(){....});
*JQuery code*
$('body').addClass('.anything').on('click', function(){
//do some code here i.e
alert("ok");
});
If you want to capture click on everything then do
$("*").click(function(){
//code here
}
I use this for selector: http://api.jquery.com/all-selector/
This is used for handling clicks: http://api.jquery.com/click/
And then use http://api.jquery.com/event.preventDefault/
To stop normal clicking actions.
This is my website. http://www.sarahjanetrading.com/js/j/index.html All the code+images+css is there with access to anyone
When anyone clicks on the listen button its background changes into the stop listening and vice versa. This is the functionality I wanted and I got it using jQuery.
What I also want now is the text to change too accordingly. Like, when someone clicks on the "listen" anchor, its text should change to "stop listening", and the same for the stop listening anchor. Like a toggle anchor.
Thanks for the help ! Really appreciate it... :)
$("#first").toggle(function(){
$(this).text("Stop listening");
}, function(){
$(this).text("Listen");
});
Online demo: http://jsfiddle.net/5AUdJ/
UDPATE
I see you are using a class to control the listen/stop state. Maybe this will work better.
$("a").click(function(){
if($(this).is(".listen")){
$(this).text("Stop listening").removeClass("listen");
} else {
$(this).text("Listen").addClass("listen");
}
});
Here, I made this JSFiddle using your source code.
http://jsfiddle.net/K4Njj/2/
Here is the jQuery code:
$(function(){
$("#container a").click(function(){
if ($(this).html() == "Stop Listening")
{
$(this).html("Listen");
}
else if ($(this).html() == "Listen")
{
$(this).html("Stop Listening");
}
});
});
That will simply check to see if the text on the anchor is "Stop Listening" or "Listen" and if it is, it will switch it when you hit the button. It's really the most elegant solution.
In your Javascript, you can use the innerHTML property to access and/or change the HTML text of an element.
getElementById("first").innerHTML = "newtext"
I'm kind of stuck on a problem of how to stop my menu from executing the fadeOut() function. When I click the main links on my menu to open the submenu it just fades out. Here is how the code looks at the moment:
$('a.main-menu-item').click(function(){
if($('.rtmenu:visible')){
$('.rtmenu').click(function(e) { e.stopPropagation(); });
$(document).click(function() {
$('.rtmenu').fadeOut(200);
});
}
})
Can anyone tell me how I can write 'if not clicked a.main-menu-item' where it says 'document'?
Much Appreciated
SOLUTION FOUND!
$('.rtmenu').click(function(e) { e.stopPropagation(); });
$('.rtmenu').mouseout(function(){
$(document).one('click',function() { $('.rtmenu').fadeOut(200); });
})
Have a look at Ben Alman's "outside events" plugin. It allows you to define a range of events, not just click events. With it, your code would look something like this:
$('.rtmenu').bind('clickoutside', function() {
$(this).fadeOut(200);
});
As an aside, you shouldn't set up the bind inside the click event for the menu, this will attach another handler every time the menu option is clicked. Your code should be replace with something like:
$('a.main-menu-item').click(function(){
// Show menu item
});
$('.rtmenu').bind('clickoutside', function() {
$(this).fadeOut(200);
});
use blur event to handle losing focus.
This might help also.