We Keep Coding

Create a custom event like 'click' for longtap

I want to make a custom event which I can use like
$('.entry').on('click', function().......
I need it for detecting a longtap for mobile devices. I want to call it like this:
$('.entry').on('longtap', function().......
I read a lot about creating events but the most ways are with bind and trigger. So is there a way to do this?

Here is a way to implement long tap:
var clickStart;
document.getElementById("cool_button").addEventListener('mousedown', function() {
console.log('mouse down');
this.clickStart = new Date().getTime();
});
document.getElementById("cool_button").addEventListener('mouseup', function() {
console.log('mouse up');
if ((new Date().getTime() - this.clickStart) >= 1000) {
console.log('this is a long tap');
}
});
<button id="cool_button">i'm a long tap button</button>

You may use one of the handmade solutions, provided here.
You may attach it as third-party script.
There is a special taphold event for jQuery Mobile.

As said here , you don't need to create a custom event for longtap, you only need js timer and two already exsiting events like mouseup, mousedown:
var pressTimer;
$(".entry").mouseup(function(){
clearTimeout(pressTimer);
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() {
console.log("hi!")
},1000);
return false;
});
I made an example for you
https://jsfiddle.net/sOoN92/74rbc2ph/

OpenLayers get coordinates of touch points?

I am registering the "click" event on the map to get the Lon and Lat of the mouse click like this:
map.events.register("click", map, function(e) {
var lonlat = map.getLonLatFromPixel(e.xy);
});
This works fine on my PC(click), but doesn't get triggered on my Android tablet(touch). So it gets triggered on click, but not on touch. I have to register the event to my layer to get it to trigger on touch(https://gis.stackexchange.com/q/20859) like this:
layer.events.register("touchstart", layer, function(e) {
//e.xy is undefined
});
This gets triggered, but for some reason event.xy is undefined?
How do I get the touch coordinates when using touch on a tablet?

It's not so easy to get the coordinates from the touchstart event.
Touchstart event comes with a touches array, each one containing some coordinates, but using different properties.
OpenLayers normalizes the touchstart event in the OpenLayers.Event class method getTouchClientXY.
Also, I can't find any click/touchstart event in the layer class. Maybe you are using some other subclass or a custom one...
However, depending on your needs, you could
create a drawfeature control, with a point handler and listen to the featureadded event
define a custom control that use the OpenLayers.Handler.Click (that handles click/touchstart correctly)
if you need to select a vector feature, use the SelectFeature control
Handle the "touchstart" event using a for loop to find xy coordinates in the touches property

I found a solution that works for me. This also triggers click event with touch:
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function(e) {
var coordinates = map.getLonLatFromViewPortPx(e.xy);
}
});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();

i use
e.clientX
instead of
e.x
or the touch.
Have a look in my code if you want In taphold.js
[http://ozonforages.free.fr/mobile.html]

jQuery add event and instantly execute it

Often there is situation when I need to add some event with some customizations and then apply those customizations on page ready.
Usually I was doing it like:
$(window).resize(function(){
//some code
}).resize(); //trigger it when event defined
Problem with this solution is that if I have many resize events, then if I trigger it like this - it will re-execute all previously defined events too.
So another solution could be:
var myCallback = function(){ /*some code*/ };
$(window).resize(function(){
myCallback();
});
myCallback();
And it does it correctly but I find it not so good looking code and also there is no this inside function changed to event target DOM element that is very useful quite often.
Great would be something like
$(window).addEventAndFireOnce("resize", function(){});
such function is not so hard to implement, but I'm wondering if there is something like this there already in js or jQuery.

I don't know if I'm alone in this, but if I need to do that (and it's not uncommon) I bind a custom event name (possibly with a scope) at the same time as I bind the real event ("click" or "change" or whatever):
var myCallback = function(ev) { ... };
$(window).on("resize my-resize", myCallback).trigger("my-resize");
That's particularly useful when you're handling something like a "click" event on a checkbox. Triggering the "click" will actually update the checkbox "checked" state, which is not generally what you'd want to do. There's the jQuery .triggerHandler() method, but for whatever reason that only works on the first element in the jQuery object, so you can't trigger the handlers for all the checkboxes in a form with one call.

I would write it like so:
var myCallback = function(){ /*some code*/ };
$(window).resize( myCallback );
myCallback();

I think what you are looking for here is namespaced handlers
var log = (function() {
var $log = $('#log');
return function(msg) {
$('<p/>', {
text: msg
}).appendTo($log)
}
})();
$(window).resize(function() {
log('handler 1');
});
$(window).resize(function() {
log('handler 2');
});
$(window).on('resize.myspecial', function() {
log('handler 3');
}).trigger('resize.myspecial');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>

mouseover action run just once (how to)

I would like to load data(via ajax) in a tooltip when the mouse is over a specific area. The problem is that the ajax call is made as long as my mouse is on that area. Is there any way, that I could make onmouseover (ajax call) efect happen just once? Here is the code:
$.post('calendar/event-details', {'eventId' :event.id},
function (data){
this.top = (ui.clientY + 15); this.left = (ui.clientX - 230);
$('body').append( '<div id="vtip">' + data + '</div>' );
$('div#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
$('div#vtip').css("position","absolute");
$('div#vtip').css("z-index", "+99");
})

With .one:
$('element').one('mouseover', function() { /* ajax */ });
.one will detach the handler as soon as it is executed. As a result, it won't execute any more times.

You may want to hook your function to the onMouseEnter event instead of the onMouseOver event, along with a function hooked to the onMouseLeave event that hides the tooltip:
$('element').mouseenter(function() {
/* Make request, show tooltip */
});
$('element').mouseleave(function() {
/* Hide tooltip */
});
Note that the pure JS versions of these events are IE only, jQuery simulates the behaviour for other browsers

Use modern JS!
node.addEventListener("mouseover", function() {
// Load data here
}, {once : true});
Documentation, CanIUse

I know it's been a long time since this has been a topic but for anyone looking for an easy alternative:
Set a static variable and check the last id used.
If the last id is the current id, do nothing; quick example below
var LastId = null;
function Hover(Id){
if(Id!= LastId){
LastId = Id;
$(Id).hide('fast');
}else{
//Do nothing; this will keep the function from recalling
}
}

I guess you need to use onmouseenter instead of onmouseover
please read the docs here

iOS Web App touch gestures

I've searched all across the web to find a simple way of adding touch gestures to a simple button. Basically I'm trying to find a simple way of getting the back button (which you usually see on the task-bar at the top of an iOS device) to change CSS classes from 'normal' state to 'pressed' state when pressed.
Although I'm very new to Javascript, I would prefer to use standard DOM methods rather than jQuery (or any other library). Would anyone have some complete code and explain how the JavaScript code reads an ontouchstart and ontouchend event and how these functions could be used to change CSS classes?
Any help would be greatly appreciated!
TC

ontouchstart, ontouchmove and ontouchend are managed the same as onclick, onmousemove and so.
You can apply the listeners in a <script> tag or directly in the html element.
Using JavaScript only
var back = document.getElementById("back-button-id");
back.ontouchstart = function( event ) {
// using the target property of the event
// you can reach the hitted html element
event.target.className = 'css-href-selected-class-name';
}
back.ontouchend = function( event ) {
event.target.className = 'css-href-normal-class-name';
}
Using HTML tag and callbacks
1) Declare your Javascript callbacks to swap a css class for any state
function onclickCallback( event ) {
// do something
}
function ontouchstartCallback( event ) {
event.target.className = 'selected';
}
function ontouchendCallback( event ) {
event.target.className = 'normal';
}
2) Put the callbacks into the anchor tag (I suggest to use DIV instead of A)
<div class="normal" onclick="onclickCallback( event );" ontouchstart="ontouchstartCallback( event );" ontouchend="ontouchendCallback( event );">Back</div>
Edit 1: to prevent hilight freezing during scrolling
Try to add the ontouchmove handler
ontouchmove="ontouchmoveCallback( event );"
Then declare the handler function that swap the css class
function ontouchmoveCallback( event ) {
event.target.className = 'normal';
}
Hope this helps!
Ciao.

This should get you started:
HTML:
<input type="button" id="thebutton" value="Do Stuff!" />
Javascript:
var thebutton = document.getElementById("thebutton");
thebutton.ontouchstart = function(e)
{
this.setAttribute('class', 'pressed');
var touches = e.touches; // array of all touch data
var target = touches[0].target; // what DOM element was touched
var pageX = touches[0].pageX; // coords relative to site
var pageY = touches[0].pageY;
var clientX = touches[0].clientX; // coords relative to screen
var clientY = touches[0].clientY;
};
thebutton.ontouchmove = function(e)
{
var touches = e.touches; // same fields as above
var changedTouches = e.changedTouches; // only touches which have changed
};
thebutton.ontouchend = function(e)
{
this.setAttribute('class', '');
// cleanup, if needed
};
For more details, see: http://sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
It's worth noting that MobileSafari sometimes does wonky things with touch events and form elements (input boxes in particular). You may find it's better to use a styled div than an actual input button.
EDIT: For what you're trying to do, I think you might be better served with simple click events, which generally work fine for things like button presses. Touch events are more for drag and drop, precise finger tracking etc. Try this:
thebutton.onclick = function(e) { this.setAttribute('class', 'your_class'); };
EDIT2: Now I see what you're asking for. Easiest way is this:
thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); };
thebutton.ontouchend = function(e) { this.setAttribute('class', ''); };

There are a couple of libraries already for jQuery
http://plugins.jquery.com/project/multiswipe
And you also can check this demo from
http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/
And you can fork the example and start working with it.
There are some options but everything its quite new.