In my jquery mobile app, I want to run a function when the default page shows. This code works
$(document).unbind("pageshow").on("pageshow","#login-page",function(){
GLOBAL_DATA.user = null;
alert("reset");
});
But the problem is when I click a button to go to another page, then when I click the back button to go back to the default page, the pageshow function does not trigger. How can I get it to do that?
Thanks
For jQM 1.4.x try using the pagecontainer widget show event instead:
$(document).on( "pagecontainershow", function( event, ui ) {
alert( "The page being shown is: " + ui.toPage.prop("id") );
});
DEMO
Related
I'm facing some issue setting focus on the editor when navigating with TAB.
If my div doesn't have tabindex to set, and just click into it, the code below is working well, I can see the two console.log, init and focus, and the toolbar appears properly :
setup: function(editor) {
editor.on("init", function() {
console.log('init');
editor.focus();
});
editor.on("focus", function() {
console.log('focus');
});
}
But when I set a tabindex on the div, and TAB into it, I can only see the "init" one. The cursor is in place receiving text but there's no toolbar.
I have to TAB out and then TAB in again, to see this time the "focus" one and the toolbar.
Does anyone have some help ?
PS: The tab_focus plugin don't fit my needs because there can be several editors in the page and they aren't init on page load but on click, and now i'm trying to figure out how I can turn that click action onto a focus by TAB one.
I solved this issues this way :
editor.on("init", function() {
$(focusElement).blur();
$(focusElement).focus();
});
Because the original
editor.on("init", function() {
editor.focus();
});
don't work with TAB naigation I had to do this trick to fake the thing that I had to TAB out and then TAB in again to trigger the focus event.
Hi i have tried the below event to detect but sometimes it doesn't fire the event, while closing the tab or Browser.
$window.onbeforeunload
if you want only browser close do something and you do want when refresh page yuo can use this code:
window.onbeforeunload = function () {
if (performance.navigation.type == 1) {
localStorageService.remove("authorizationData");
}
}
I want to know when the user starts the navigation to a new page by clicking in a link located inside my Flickity slider. I have attached the jQuery click event on the links, but when the user slides and click at the same time, the click event on the <a> is triggered but the navigation to the link adress does not occur.
Demo : http://codepen.io/anon/pen/GoapaY
. To reproduce the issue : click down on the link, then slide, then release your click : the event is triggered but the navigation to example.com have not occured.
Which event/trick can I use to know when the user actually navigate to the link adress ?
Answer obtained with this issue opened on Flickity's GitHub :
This is the intended behavior. This allows users to slide the gallery using any element on the page, links, buttons, etc. It lets click events propagate. There's additional logic so that static clicks do trigger a click on the element, and allow links to go through if no sliding occurred.
Flickity's staticClick event might be what you're looking for.
This solves the issue for me:
$el.on('dragStart.flickity', () => $el.find('.slide').css('pointer-events', 'none'));
$el.on('dragEnd.flickity', () => $el.find('.slide').css('pointer-events', 'all'));
I just disable pointer events on dragStart and reinstate them on dragEnd.
Ali Klein's solution worked for me.
I'm not using jQuery so here is the code I'm using
const carousel = document.querySelector('.carousel')
const flkty = new Flickity(carousel, {
// ...options
on: {
'dragStart': () => {
carousel.style.pointerEvents = 'none'
},
'dragEnd': () => {
carousel.style.pointerEvents = 'all'
}
}
})
The problem is I would like to fire only once when the mouseevent function is triggered, e.g.
$(document).ready(function() {
$("#menu").click(function(){
$('#menu_div').show();
menu_function();
});
$("#menu_close").click(function(){
$('#menu_div').hide();
});
});
function menu_function(){
$(".select_li").live(
"click",
function() {
alert("test");
}
);
}
The example has two objects, menu and menu close; when the menu press, the ui box is shown, and run the menu_function , which fires an alert test message. The problem is when the menu_close is clicked and box closed, and open it again, the alert test will fire twice. I observe that the times of div box close and open again is the same as the fire times of the function, how can I fix it?
If I would like not using unbind, are there any better solution?
Your menu_function() is NOT just firing an alert test message - it is adding a live click listener to everything in the DOM that has a class of "select_li" that fires a test alert. This means that every time you click on #menu you are adding ANOTHER listener to .select_li - so if you click #menu 10x, you should have 10 listeners for each click of .select_li.
If you are truly trying to JUST show an alert when you click on #menu, your menu_function() should only look like this:
function menu_function() {
alert("test");
}
I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?
This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog