Rectangle 27 13

Tidy and Hopefully Bug Free (not :)) Javascript Solution

First I went with the Rich Bradshaw's approach, but then problems started to appear. By doing the e.preventDefault() on 'touchstart' event, the page no longer scrolls and, neither the long press is able to fire the options menu nor double click zoom is able to finish executing.

A solution could be finding out which event is being called and just e.preventDefault() in the later one, 'touchend'. Since scroll's 'touchmove' comes before 'touchend' it stays as by default, and 'click' is also prevented since it comes afterwords in the event chain applied to mobile, like so:

// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {

    // If event is 'touchend' then...
    if (e.type == 'touchend') {
        // Ensuring we event prevent default in all major browsers
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }

    // Add class responsible for :hover effect
    $(this).toggleClass('hover_effect');
});

But then, when options menu appears, it no longer fires 'touchend' responsible for toggling off the class, and next time the hover behavior will be the other way around, totally mixed up.

A solution then would be, again, conditionally finding out which event we're in, or just doing separate ones, and use addClass() and removeClass() respectively on 'touchstart' and 'touchend', ensuring it always starts and ends by respectively adding and removing instead of conditionally deciding on it. To finish we will also bind the removing callback to the 'focusout' event type, staying responsible for clearing any link's hover class that might stay on and never revisited again, like so:

Atention: Some bugs still occur in the two previous solutions and, also think (not tested), double click zoom still fails too.

Now, for a second, cleaner, tidier and responsive, approach just using javascript (no mix between .hover class and pseudo :hover) and from where you could call directly your ajax behavior on the universal (mobile and desktop) 'click' event, I've found a pretty well answered question from which I finally understood how I could mix touch and mouse events together without several event callbacks inevitably changing each other's ones up the event chain. Here's how:

$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
    $(this).removeClass('hover_effect');

    // As it's the chain's last event we only prevent it from making HTTP request
    if (e.type == 'click') {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        // Ajax behavior here!
    }
});

javascript - How do I simulate a hover with a touch in touch enabled b...

javascript html css hover touch
Rectangle 27 13

Tidy and Hopefully Bug Free (not :)) Javascript Solution

First I went with the Rich Bradshaw's approach, but then problems started to appear. By doing the e.preventDefault() on 'touchstart' event, the page no longer scrolls and, neither the long press is able to fire the options menu nor double click zoom is able to finish executing.

A solution could be finding out which event is being called and just e.preventDefault() in the later one, 'touchend'. Since scroll's 'touchmove' comes before 'touchend' it stays as by default, and 'click' is also prevented since it comes afterwords in the event chain applied to mobile, like so:

// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {

    // If event is 'touchend' then...
    if (e.type == 'touchend') {
        // Ensuring we event prevent default in all major browsers
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }

    // Add class responsible for :hover effect
    $(this).toggleClass('hover_effect');
});

But then, when options menu appears, it no longer fires 'touchend' responsible for toggling off the class, and next time the hover behavior will be the other way around, totally mixed up.

A solution then would be, again, conditionally finding out which event we're in, or just doing separate ones, and use addClass() and removeClass() respectively on 'touchstart' and 'touchend', ensuring it always starts and ends by respectively adding and removing instead of conditionally deciding on it. To finish we will also bind the removing callback to the 'focusout' event type, staying responsible for clearing any link's hover class that might stay on and never revisited again, like so:

Atention: Some bugs still occur in the two previous solutions and, also think (not tested), double click zoom still fails too.

Now, for a second, cleaner, tidier and responsive, approach just using javascript (no mix between .hover class and pseudo :hover) and from where you could call directly your ajax behavior on the universal (mobile and desktop) 'click' event, I've found a pretty well answered question from which I finally understood how I could mix touch and mouse events together without several event callbacks inevitably changing each other's ones up the event chain. Here's how:

$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
    $(this).removeClass('hover_effect');

    // As it's the chain's last event we only prevent it from making HTTP request
    if (e.type == 'click') {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        // Ajax behavior here!
    }
});

javascript - How do I simulate a hover with a touch in touch enabled b...

javascript html css hover touch
Rectangle 27 1

I believe pressing the 'enter' button counts as a click in many cases, including links. If you want your action to be performed only when the mouse is used, then consider using onmousedown or onmouseup instead of onclick, I'd suggest the latter in your case.

javascript - Image input onclick event being fired when enter button P...

javascript html forms xhtml
Rectangle 27 1

The following prevents autorepeated keypresses for "normal" keys (i.e. those that generate text input), even when several keys are pressed simultaneously. Note that the keypress event is the only event sure to be fired in all mainstream browsers for autorepeats and the keyCode value for a keydown event will not be the same as the charCode / which value for the corresponding keypress event, which complicates things a little.

var textBox = document.getElementById("my_textbox");

var lastKeyDown, keyIsPressed = {}, keyCodeForCharCode = {},
    charCodeForKeyCode = {};

textBox.onkeydown = function(evt) {
    evt = evt || window.event;
    lastKeyDown = evt.keyCode;
};

textBox.onkeyup = function(evt) {
    evt = evt || window.event;
    var charCode = charCodeForKeyCode[evt.keyCode];
    if (charCode) {
        keyIsPressed[charCode] = false;
    }
};

textBox.onkeypress = function(evt) {
    evt = evt || window.event;
    var keyCode, charCode = evt.which || evt.keyCode;

    if (keyIsPressed[charCode]) {
        // This keypress is an autorepeat
        return false;
    } else {
        keyIsPressed[charCode] = true;

        // Get the key code for the corresponding keydown event
        keyCode = keyCodeForCharCode[charCode];
        if (!keyCode) {
            // Create two-way mapping for keyCode and charCode
            keyCodeForCharCode[charCode] = lastKeyDown;
            charCodeForKeyCode[lastKeyDown] = charCode;
        }
    }
};

The keyCode for a keypress will not be the same as the keyCode for the corresponding keypress? Was one of these supposed to be keydown instead of keypress? Or charCode instead of keyCode?

@jalf: Good question. Not my finest piece of writing. I'll try and work out what I meant and correct it.

html - how to capture key repeats with javascript - Stack Overflow

javascript html keyevent html-input
Rectangle 27 1

The following prevents autorepeated keypresses for "normal" keys (i.e. those that generate text input), even when several keys are pressed simultaneously. Note that the keypress event is the only event sure to be fired in all mainstream browsers for autorepeats and the keyCode value for a keydown event will not be the same as the charCode / which value for the corresponding keypress event, which complicates things a little.

var textBox = document.getElementById("my_textbox");

var lastKeyDown, keyIsPressed = {}, keyCodeForCharCode = {},
    charCodeForKeyCode = {};

textBox.onkeydown = function(evt) {
    evt = evt || window.event;
    lastKeyDown = evt.keyCode;
};

textBox.onkeyup = function(evt) {
    evt = evt || window.event;
    var charCode = charCodeForKeyCode[evt.keyCode];
    if (charCode) {
        keyIsPressed[charCode] = false;
    }
};

textBox.onkeypress = function(evt) {
    evt = evt || window.event;
    var keyCode, charCode = evt.which || evt.keyCode;

    if (keyIsPressed[charCode]) {
        // This keypress is an autorepeat
        return false;
    } else {
        keyIsPressed[charCode] = true;

        // Get the key code for the corresponding keydown event
        keyCode = keyCodeForCharCode[charCode];
        if (!keyCode) {
            // Create two-way mapping for keyCode and charCode
            keyCodeForCharCode[charCode] = lastKeyDown;
            charCodeForKeyCode[lastKeyDown] = charCode;
        }
    }
};

The keyCode for a keypress will not be the same as the keyCode for the corresponding keypress? Was one of these supposed to be keydown instead of keypress? Or charCode instead of keyCode?

@jalf: Good question. Not my finest piece of writing. I'll try and work out what I meant and correct it.

html - how to capture key repeats with javascript - Stack Overflow

javascript html keyevent html-input
Rectangle 27 1

Add this code and then set class "tapHover" to elements which you would like to work this way. First time you tap an element it will gain pseudoclass ":hover" and class "tapped". Click event will be prevented. Second time you tap the same element - click event will be fired.

// Activate only in devices with touch screen
if('ontouchstart' in window)
{
    // this will make touch event add hover pseudoclass
    document.addEventListener('touchstart', function(e) {}, true);

    // modify click event
    document.addEventListener('click', function(e) {
        // get .tapHover element under cursor
        var el = jQuery(e.target).hasClass('tapHover')
            ? jQuery(e.target)
            : jQuery(e.target).closest('.tapHover');

        if(!el.length)
            return;

        // remove tapped class from old ones
        jQuery('.tapHover.tapped').each(function() {
            if(this != el.get(0))
                jQuery(this).removeClass('tapped');
        });

        if(!el.hasClass('tapped'))
        {
            // this is the first tap
            el.addClass('tapped');
            e.preventDefault();
            return false;
        }
        else
        {
            // second tap
            return true;
        }
    }, true);
}
.box {
	float:		left;
	
	display:	inline-block;
	margin:		50px 0 0 50px;
	width:		100px;
	height:		100px;
	overflow:	hidden;
	
	font-size:	20px;
	
	border:		solid 1px black;
}
.box.tapHover {
	background:	yellow;
}
.box.tapped {
	border:		solid 3px red;
}
.box:hover {
	background:	red;
}
<div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>

javascript - How do I simulate a hover with a touch in touch enabled b...

javascript html css hover touch
Rectangle 27 1

Add this code and then set class "tapHover" to elements which you would like to work this way. First time you tap an element it will gain pseudoclass ":hover" and class "tapped". Click event will be prevented. Second time you tap the same element - click event will be fired.

// Activate only in devices with touch screen
if('ontouchstart' in window)
{
    // this will make touch event add hover pseudoclass
    document.addEventListener('touchstart', function(e) {}, true);

    // modify click event
    document.addEventListener('click', function(e) {
        // get .tapHover element under cursor
        var el = jQuery(e.target).hasClass('tapHover')
            ? jQuery(e.target)
            : jQuery(e.target).closest('.tapHover');

        if(!el.length)
            return;

        // remove tapped class from old ones
        jQuery('.tapHover.tapped').each(function() {
            if(this != el.get(0))
                jQuery(this).removeClass('tapped');
        });

        if(!el.hasClass('tapped'))
        {
            // this is the first tap
            el.addClass('tapped');
            e.preventDefault();
            return false;
        }
        else
        {
            // second tap
            return true;
        }
    }, true);
}
.box {
	float:		left;
	
	display:	inline-block;
	margin:		50px 0 0 50px;
	width:		100px;
	height:		100px;
	overflow:	hidden;
	
	font-size:	20px;
	
	border:		solid 1px black;
}
.box.tapHover {
	background:	yellow;
}
.box.tapped {
	border:		solid 3px red;
}
.box:hover {
	background:	red;
}
<div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>

javascript - How do I simulate a hover with a touch in touch enabled b...

javascript html css hover touch
Rectangle 27 1

Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.

What if I press Alt + Z? That way, Z is being pressed and so the event should fire I believe. Also, then why does Shift key work when it's written it should not? ("all keys (e.g. ALT, CTRL, SHIFT, ESC) "?

Stop using keypress at all. Do everything with keydown. Those were just examples, but i have no idea why that works. Probably in IE or other browsers it is not working.

javascript - A simple e.altKey test - Stack Overflow

javascript html keyboard key keypress
Rectangle 27 0

FYI, both of these answers are in jQuery.

html - Javascript event fired on long press/tap on tablets - Stack Ove...

javascript html html5 javascript-events responsive-design
Rectangle 27 0

You can use delegation with .on(). This way it will listen for a click in document (it could also be a parent of your element, as long as its present when the event handler is run), when fired look for the element specified as a parameter of the .on().

$(document).on("click", '.dropdown-toggle', function (e) {

javascript - Attaching event to future elements using jquery - Stack O...

javascript jquery html events
Rectangle 27 0

If an anchor has any events attached, the first tap on it in iOS causes the anchor to be put into the hover state, and focused. A tap away removes the hover state, but the link remains focused. This is by design. To properly control an application on iOS, you need to implement touch-based events and react to those instead of desktop ones.

I Found one more intresting thing in the developer.apple.com/library/safari/#documentation/, that only when i click the clickable element than only the anchor tag lost focus.

javascript - Blur Event Not Fired Properly in ios of ipad and iphone -...

javascript iphone html ios ipad
Rectangle 27 0

I believe pressing the 'enter' button counts as a click in many cases, including links. If you want your action to be performed only when the mouse is used, then consider using onmousedown or onmouseup instead of onclick, I'd suggest the latter in your case.

javascript - Image input onclick event being fired when enter button P...

javascript html forms xhtml
Rectangle 27 0

If the image is focused it will trigger the onclick event when you hit enter. Then you get two alert boxes popping up: the handleEnter of the div and the onclick of the image.

javascript - two buttons are getting fired by a single press of enter ...

javascript html javascript-events
Rectangle 27 0

If the user presses the submit button. The browser has to first validate the form and if the form is valid, the submit event is fired.

This means, that you can simply hook into the form's submit event and start your ajax.

But, Opera has a really nasty bug here. Opera first fires the submit event and then validates the form.

You can workaround this, by using the validation methods of HTML5. This would look like this:

$('form').bind('submit', function(){
    if(!this.checkValidity || this.checkValidity()){
        //Ajax implementation here
    }
});

About the current state of the HTML5 form spec. There are some parts, that should extend the form spec. The features, which are currently implemented in FF4 and others (FF4 has less form features than Opera and Chrome, but very good implementation) are stable enough for production.

If you want to use HTML5 forms in all browsers, I would suggest the webshims HTML5 forms polyfill. It not only polyfills the incapable browsers, but also fixes some bugs in browsers, which haven't implemented the form feature according to the spec. For example, the Opera bug mentioned above will be automatically fixed.

javascript - Submit a HTML 5 Form with AJAX? - Stack Overflow

javascript html5 jquery
Rectangle 27 0

I would use a TapHold (also known as "long press") event to trigger the "sortable lists". The user won't be able to sort the list of articles unless he presses for a few seconds on the list. At that moment, he'll be able to order the list items.

You can use any jQuery UI Sortable or any other "sortable" plugin.

If you don't want to use the TapHold, you can use the following code:

var pressTimer;
$(function(){
        // By default, disable the sortable list

        $("#sortable").mouseup(function(){
            // Disable the sortable list

            clearTimeout(pressTimer);
            // Clear timeout
            return false;
        }).mousedown(function(){
            // Set timeout
            pressTimer = window.setTimeout(function() {
                // Enable the sortable list

            },1000);
            return false; 
        });
    });

javascript - How to do a drag and drop on a dynamic list inside a div ...

javascript html css cordova drag-and-drop
Rectangle 27 0

best way to do this is to use window.onunload but this event is also fired when you press ctrl+r (i.e. on refresh) so just check this out.

javascript - How to check whether (X) button in clicked in popup windo...

javascript html
Rectangle 27 0

Triggering key events, will be received by anything listening for them, but they will NOT affect the input. I've tested your code and the event is actually being fired.

jquery.sendkeys.js
bililiteRange.js

javascript - jQuery onlick, select input box and press enter (rendered...

javascript jquery html
Rectangle 27 0

So I had a similar problem and it was only happening in IE. Chrome and firefox were working just fine. When hitting enter from the input box, it would trigger the first input type="image" which we did not want because it would send multiple requests to IE and after hitting enter a few times it would crash.

The quick and easy work around, though not the best solution, we used was to put a dummy input type="image" with an onclick return value of false before the other ones so that the one being triggered wouldn't actually fire off a request. Not the correct root solution but a good temporary one.

javascript - Image input onclick event being fired when enter button P...

javascript html forms xhtml
Rectangle 27 0

Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.

What if I press Alt + Z? That way, Z is being pressed and so the event should fire I believe. Also, then why does Shift key work when it's written it should not? ("all keys (e.g. ALT, CTRL, SHIFT, ESC) "?

Stop using keypress at all. Do everything with keydown. Those were just examples, but i have no idea why that works. Probably in IE or other browsers it is not working.

javascript - A simple e.altKey test - Stack Overflow

javascript html keyboard key keypress
Rectangle 27 0

When you press Enter in a form, the form is submitted. That's the reason of the second call to validateForm.

onKeyDown="javascript:fKeyDown(event);"
onsubmit=...

2) In fKeyDown, add e.preventDefault(); to prevent the default handling of the key event :

function fKeyDown(e) {
    var  kc = window.event ? window.event.keyCode : e.which;
    if (kc == 13) {
        document.getElementById('submitNameSearch').click();
        e.preventDefault();
    }
}

But if you really do just this in fKeyDown, solution 1 is enough.

Thank you. the the second solution does exactly what I wanted.

javascript - Two Events Fired when I press enter key - Stack Overflow

javascript html