Triggering multiple elements with one touch - javascript

Fiddle here: http://jsfiddle.net/mBBJM/3743/
Javascript in question:
$('div').on('mouseenter touchstart touchenter', function(event) {
console.log('Entered ' + $(this).attr('class') + ' by ' +
event.type);
})
What I'm having trouble accomplishing:
Trigger all 4 divs in one 'movement' on a touch device

Related

FullCalendar dayClick won't work at all

I've been trying to get Full Calendar's dayClick event to work. It won't work, I've tried so many different things. I don't know what the problem is, I can get things like eventClick to work perfectly fine.
Here is my code:
$(document).ready(function () {
$('#calendar').fullCalendar({
selectable:{
month:false,
agenda: false
},
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
}
});
});
What am I doing wrong?

Need to trigger a space keydown event when on button click using jquery

I need to trigger a space keydown event inside a text box when a button is clicked so that a space is achieved inside the text box using jquery
My code which i have Tried
var idz, valz;
$(document).ready(function () {
$(document).delegate('#getRuleStr', 'click', function () {
$('#' + idz).val($('#preTag').text());
var e = jQuery.Event("keydown");
e.which = 32;
$('#' + idz).trigger(e);
});
$(document).delegate('.rulez', 'click', function () {
idz = this.id;
valz = $('#' + idz).val();
});
});
If you want to add the space in text box then you can achieve this by
$('#' + idz).val( $('#' + idz).val()+" ");
But If you don't want to use this approach then post your complete code with html.
If you need to insert a character programatically into input element taking into account a caret position you can do this
$('.rulez').on('click', function () {
var caret = document.getElementById(idz).selectionStart;
var txtVal = jQuery('#' + idz).val();
var characterToAdd = " ";
jQuery('#' + idz).val(txtVal.substring(0, caret) + characterToAdd + txtVal.substring(caret) );
});
Note that line in your code
$('#' + idz).val($('#preTag').text());
will rewrite value in $('#' + idz) element and set caret position to end so there is no need to take caret position into account and thus there is no need to calc anything so you can just append space char to input element value.

jQuery: event "mouseover"-like

I need an event, that invokes everytime I move my mouse above some HTML element. But I need it to fire off all the time I am moving, not just when I enter some element (like the mouseover, mouseenter or hover event does).
I saw a lot of people were trying to do just opposite functionality few years ago (mouseover element was firing of all the time I was hovering above some div) but everytime I was testing this event, it fired off only when I entered some div. I need it to fire off everytime I move my mouse and I am above watched element so I can determine mouse relative position to that element.
Is there an event I am missing or is there some workaround how to track mouse position within some element based just on hovering(not click, dbclick, ..)?
Add the mouseover event, then bind to the mousemove.
I made you a small example to see the coordinates while you are moving over a div.
$("#mydiv").bind('mousemove', function(event)
{
var offsetleft = this.offsetLeft;
var offsettop = this.offsetTop;
var coordX = event.pageX - offsetleft;
var coordY = event.pageY - offsettop;
$("#coords").html("X: " + coordX + " Y: " + coordY);
});
http://jsfiddle.net/dVqwH/2/
Try to use mousemove: http://api.jquery.com/mousemove/
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$( "#log" ).append( "<div>" + msg + "</div>" );
});
you can bind to the mousemove jQuery event
$( "html" ).mousemove(function( event ) {
...
});
jsFiddle demo
In the examples I bind to all the document but you can easily bind to the element of interest with jquery selectors

Javascript/jQuery: input 'blur' prevents 'click' being fired

jsBin:
http://jsbin.com/eyARuHI/2/edit?html,css,js,output
Code:
$('#in').on('blur', function(event) {
alert('input: ' + event.type);
});
$('#button').on('click', function(event) {
alert('button: ' + event.type);
});
HTML:
<input id='in' type='text'>
<div id='button'></div>
Issue:
If focus the input and then click on button - click will never be fired.
How to properly handle click event in such cases?
As suggested by #RGraham try following JS. You will be able see that button event get fired every time when you click on it.
$('#in').on('blur', function(event) {
console.log('input: ' + event.type);
});
$('#button').on('click', function(event) {
console.log('button: ' + event.type);
});
you will need stop bubbling events. Try this
$('#button').on('click', function(event) {
alert('button: ' + event.type);
return false;
});
$('#in').on('blur', function(event) {
alert('input: ' + event.type);
});

Syntax error with some JS/jquery code regarding });

I'm getting an error on some JS code for a content window I'm trying to create. I'm getting told that }); shouldn't be where it is, but I can't understand what the problem is. Am I using terms from an outdated jquery?
jQuery(document).ready(function($) {
$('.contentwindow_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#contentwindow').length > 0) {
$('#content').html('<img src="' + image_href + '" />');
$('#contentwindow').show();
}
else {
var contentwindow =
'<div id="contentwindow">' +
'<p>Click to close</p>' +
'<section id="content">' +
'<img src="#" />' +
'</section>' +
'</div>';
$('body').append(contentwindow);
}
}); //HERE
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
});
The fault is where it says HERE, any help would be appreciated.
Thanks!
Use this sript:
jQuery(document).ready(function() {
$('.contentwindow_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#contentwindow').length > 0) {
$('#content').html('<img src="' + image_href + '" />');
$('#contentwindow').show();
}
else {
var contentwindow =
'<div id="contentwindow">' +
'<p>Click to close</p>' +
'<section id="content">' +
'<img src="#" />' +
'</section>' +
'</div>';
$('body').append(contentwindow);
}
}); //HERE
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
});
remove the $ from this line your code
function($) {
to
function() {
/
jQuery(document).ready(function() {
$('.contentwindow_trigger').click(function(e) {
// Click event code
});
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
});
One more change required which does not affect the Syntax error in the page is that I see that you are dynamically adding an element and associating a click event to it .
You need to delegate the event for such case and the Event might not work
$('body').on('click','#contentwindow' , function() {
$('#contentwindow').hide();
});
Not sure what the syntax error you're seeing is, but it seems to work fine in this jsfiddle:
http://jsfiddle.net/xV58c/
One change I made there that may help you. Instead of:
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
I did:
$('body').on('click', '#contentwindow', function() {
$('#contentwindow').hide();
});
which uses the "on" method in a way that allows the containing element ("body" in this case) to deal with events on elements below, even elements generated that way that #contentwindow is.
Hope this helps.

Categories