I have a simple button that needs to be pressed (for accessibility reasons on desktop) by using the enter or spacebar keys. The following is what I have:
$("#return-home").on("tap", function () {
window.location.reload();
});
In addition to "tap" I need an event for enter and spacebar.
$("#return-home").on("tap keypress", function (e) {
if(e.type == "tap" || e.which == "13" || e.which == "32") {
window.location.reload();
}
});
Related
I tried several codes but still, it's not working.
$(".chatboxtextarea").on('keypress', function(e){
if(e.keyCode == 13 && !e.shiftKey){
$('#file_name #fileLoader').show();
console.log('loader div triggered!');
if($.trim($(this).val()).length > 0){
if ((entr === false) && (submt === false)) {
sendMessageClient();
entr = true;
}
}else{
$(this).focus();
}
}
});
If you want to prevent the creating of a new line from happening you can use the following code:
$("textarea").keydown(function(e){
// Enter was pressed without shift key
if (e.keyCode == 13 && !e.shiftKey)
{
// prevent default behavior
e.preventDefault();
}
});
(Copy paste from here)
This will prevent the default behaviour from happening when pressing enter (but not pressing shift at the same time) inside a textarea.
Also, this jsFiddle is mentioned in the answer.
http://jsfiddle.net/ujty083a/4/
$(document).ready(function(){
$(".left ul li").draggable({
refreshPosition: true,
revert: true
});
$(".right li").droppable({
drop: function(e, ui){
alert(ui.draggable.text()+" "+$(this).text());
}
});
});
I have three lists one you can drag and the other two accept drop. The right lists may or may not have a scroll bar but there will always be 2 or more.
The first problem I've found is when the top list has a scrollbar and you try to drop an item on the second list two events are triggered. One for the hidden list and one for the visible list.
The second problem is the when one of the lists has a scrollbar it does not auto scroll when the user drags an item into it.
I think you'll need to modify droppable and modify substantially some of the behaviors this way:
You'll need to add an option to define if the droppable should be
scrollable or not.
Then you'll need some kind of validation as to which droppable
are visible or not.
And you'll need to tweak the scroll behavior that are already in some
of jquery ui widgets.
This is not perfect but should give you some ideas:
$.widget('ui.droppable', $.ui.droppable, {
_over: function (e, ui) {
var draggable = $.ui.ddmanager.current;
if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return; // Bail if draggable and droppable are same element
// this to make sure the droppable is visible
this.scrollVisible = this._isScrollIntoView();
if (this.accept.call(this.element[0], (draggable.currentItem || draggable.element)) && (!this.options.scrollable || this.scrollVisible)) {
if (this.options.hoverClass) {
this.element.addClass(this.options.hoverClass);
}
// to activate scrollable you need to change scrollParent of the draggable
// and adjust some calculations
if (this.options.scrollable) {
draggable.overflowOffset = $(this.element).scrollParent().offset();
draggable.scrollParent = $(this.element).scrollParent();
draggable.offsetParent = $(this.element).scrollParent();
draggable.offset.parent.top = $(this.element).scrollParent().scrollTop();
}
this._trigger('over', event, this.ui(draggable));
}
},
_out: function (event) {
this._super();
var draggable = $.ui.ddmanager.current;
// remove scrollable
if (this.options.scrollable) {
draggable.scrollParent = $(document);
draggable.offsetParent = $(document);
draggable.overflowOffset = $(document).offset();
draggable.offset.parent.top = $(document).scrollTop();
}
},
_drop: function (event, custom) {
var draggable = custom || $.ui.ddmanager.current;
if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return false; // Bail if draggable and droppable are same element
var childrenIntersection = false;
this.element.find(":data(droppable)").not(".ui-draggable-dragging").each(function () {
var inst = $.data(this, 'droppable');
if (
inst.options.greedy && !inst.options.disabled && inst.options.scope == draggable.options.scope && inst.accept.call(inst.element[0], (draggable.currentItem || draggable.element)) && $.ui.intersect(draggable, $.extend(inst, {
offset: inst.element.offset()
}), inst.options.tolerance)) {
childrenIntersection = true;
return false;
}
});
if (childrenIntersection) return false;
// same as for over, you need to validate visibility of the element
this.scrollVisible = this._isScrollIntoView();
if (this.accept.call(this.element[0], (draggable.currentItem || draggable.element)) && (!this.options.scrollable || this.scrollVisible)) {
if (this.options.activeClass) this.element.removeClass(this.options.activeClass);
if (this.options.hoverClass) this.element.removeClass(this.options.hoverClass);
this._trigger('drop', event, this.ui(draggable));
return this.element;
}
return false;
},
// a function to check visibility. Taken here:
//http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
_isScrollIntoView() {
var $elem = $(this.element);
var $parent = $(this.element).scrollParent();
var docViewTop = $parent.parent().scrollTop();
var docViewBottom = docViewTop + $parent.parent().height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
});
$(document).ready(function () {
$(".left ul li").draggable({
refreshPosition: true,
revert: true,
});
$(".right .top li").droppable({
scrollable: true,
drop: function (e, ui) {
alert(ui.draggable.text() + " " + $(this).text());
}
});
$(".right .bottom li").droppable({
scrollable: false,
drop: function (e, ui) {
alert(ui.draggable.text() + " " + $(this).text());
}
});
});
http://jsfiddle.net/ejv32oen/4/
On page 1, when ajax loading to page 2, I need to get the [data-role=page] element of page 2,
but on pageinit(or pagecreate), the $.mobile.activePage is still page 1.
How to get the newly loaded page instead of the current page on pageinit?
$(document).on('pageinit', function () {
console.log($.mobile.activePage); // page 1
});
If you want to retrieve it one time only, then use pagecreate because it fires once per page and it fires before navigation is commenced.
$(document).on("pagecreate", function (e) {
if ( $(e.target).hasClass("ui-dialog") ) {
var dialog = $(e.target);
}
});
To retrieve it every time you navigate to it, you can use othe pageContainer events. In case you want to alter the page you're nacigating to, use pagecobtainerbeforechange.
$(document).on("pagecintainerbeforechange", function (e, data) {
if ( typeof data.toPage == "object" && typeof data.prevPage != "undefined" && data.toPage.hasClass("ui-dialog") ) {
data.toPage.find(".foo").addClass(".bar");
}
});
For other events in case you just want to access dialog and manipulate its markup.
$(document).on("pagecontainerbeforeshow pagecontainershow", function (e, data) {
if ( data.toPage.hasClass("ui-dialog") ) {
var dialog = data.toPage;
/* do something */
});
I have a FB.getLoginStatus function that is there to bypass the login function if the user has already authorized the app:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
userID = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
$.mobile.pageContainer.pagecontainer('change' , '#homepage');
navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else if (response.status === 'not_authorized') {
$.mobile.pageContainer.pagecontainer('change' , '#login');
} else {
$.mobile.pageContainer.pagecontainer('change' , '#login');
}
});
It works in that it checks the login status, but it quickly flashes the login screen before it jumps to the home screen. Is there a way I can completely avoid flashing the login screen and just load the home screen if the user is connected?
Yes there's a working solution:
$(document).on('pagebeforechange', function(e, data){
var to = data.toPage,
from = data.options.fromPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (from) from = '#' + from.attr('id');
if (from === '#index' && to === '#second') {
alert('Can not transition from #index to #second!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
}
}
});
What you need to do here is add another layer of checking to this line:
if (from === '#index' && to === '#second') {
All you need to do is check if user has authorized through Facebook and redirect him programmatically using function changePage().
Read more about it here.
Update
I forgot, this example may not work in your case because if you're checking it in the beginning you will not have destination page because you are here to determinate which page is first: login page or main page.
This code will help you in this case:
$(document).on('pagebeforechange', function(e, data){
var to = data.toPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (to === '#second') {
alert('Can not transition the page #second!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
}
}
});
In my jQuery Mobile app, I want to use tap and taphold events. I tried using the standard approach of binding event handlers to these events but in case of taphold event, the tap event was always firing so I used the following approach which I found on stackoverflow here:
jQuery calling click event after taphold event
$("#list li").live('vmousedown vmouseup', function (event)
{
if (event.type == 'vmousedown')
{
tapTime = new Date().getTime();
}
else
{
//event.type == 'vmouseup'
//here you can check how long the `tap` was to determine what do do
duration = (new Date().getTime() - tapTime);
//The tap code
if(duration >250 && duration <750)
{
}
//The taphold code
else if (duration >=750) {
}
Now, on an iPhone with iOS 5, I am having the problem that the tap event is being fired and an item is selected when I scroll down a list. I tried to increase the duration for tap event but it seems to have no effect in iOS. Any suggestions?
[Tried and Tested]
I checked jQuery Mobile's implementation. They are firing the 'tap' event after 'taphold' every time on 'vmouseup'.
Workaround would be not to fire the 'tap' event if the 'taphold' has been fired. Create a custom event or modify the source as per you need as follows:
$.event.special.tap = {
tapholdThreshold: 750,
setup: function() {
var thisObject = this,
$this = $( thisObject );
$this.bind( "vmousedown", function( event ) {
if ( event.which && event.which !== 1 ) {
return false;
}
var origTarget = event.target,
origEvent = event.originalEvent,
/****************Modified Here**************************/
tapfired = false,
timer;
function clearTapTimer() {
clearTimeout( timer );
}
function clearTapHandlers() {
clearTapTimer();
$this.unbind( "vclick", clickHandler )
.unbind( "vmouseup", clearTapTimer );
$( document ).unbind( "vmousecancel", clearTapHandlers );
}
function clickHandler( event ) {
clearTapHandlers();
// ONLY trigger a 'tap' event if the start target is
// the same as the stop target.
/****************Modified Here**************************/
//if ( origTarget === event.target) {
if ( origTarget === event.target && !tapfired) {
triggerCustomEvent( thisObject, "tap", event );
}
}
$this.bind( "vmouseup", clearTapTimer )
.bind( "vclick", clickHandler );
$( document ).bind( "vmousecancel", clearTapHandlers );
timer = setTimeout( function() {
tapfired = true;/****************Modified Here**************************/
triggerCustomEvent( thisObject, "taphold", $.Event( "taphold", { target: origTarget } ) );
}, $.event.special.tap.tapholdThreshold );
});
}
};