I have a page in a WinRT XAML 8.1 app that is basically a full-page display made up of a WebView control, in order to display a web page.
For mouse users, it would be handy to be able to use the hardware mouse button that is included on many mice to go back a page in the WebView (not to the previous app page -- to the previous web page).
WinRT 8.1 is nicely programmed out of the box to respond to the hardware mouse back button and go back a page in an app. But when the mouse is hovered over the WebView control, the app does not respond to the hardware mouse back button at all. Move the mouse off the WebView, and pressing the hardware mouseback button moves to the previous app page.
SO the question is how do I detect the mouse back button when the mouse is hovering over the WebView control so I can issue a GoBack() command to the WebView control?
Manipulation events and certain mouse events (like these, it appears) are not forwarded through the WebView. There is no satisfactory workaround.
Working on my first jQuery Mobile app. There is a localStorage value that must have a value throughout the application, so I tapped into the pageshow event to check this value:
$(function () {
$("div[data-role='page']").on("pageshow", function (event, ui) {
if (getValue() == null) {
// show the dialog
$.mobile.changePage("#dialog");
}
});
});
This works when navigating through the various pages, but never gets called when the first page loads. I tried to copy the above If statement again below the part where I add the pageshow listener, but it has the effect of showing the dialog, hiding it, then showing it again.
On that first page, it seems like opening the dialog is triggering pageshow (which is strange, considering my selector), which in turn triggers another dialog. Does anyone have advice on how to get around this, or a better way to go about the whole thing?
UPDATE #1: I tried
$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );
but it had the same effect as my original problem where it launches the dialog, then hides it, then shows it again. It seems like somehow launching the dialog is firing the pageshow event, even though I tried to filter that out in my selector. Note that if you remove the transition: "none" option, the dialog does not appear at all.
UPDATE #2: I also tried to create a blank initial page, then do a simple page transition
$.mobile.changePage("#mypage");
but it still does not have the correct behavior. In this scenario, it does take me to the next page, but the pageshow event does not fire, because my dialog does not appear. I know it is not firing because I can select another page from my navigation menu and the dialog does appear.
UPDATE #3: I changed my selector where I attach the pageshow listener. Instead of selecting where data-role="page", I am selecting the specific pages by their id. Then I re-tried both of the approaches I described in my previous two updates, but it still works incorrectly. First, when I try to refresh the initial page using allowSamePageTransition, it seems that pageshow fires twice, because the dialog launches twice. Then, when I try using a blank initial page, and then do a redirect immediately after I attach the pageshow listener, nothing happens and the dialog never appears. If I navigate to any other page, the dialog works as expected. I don't understand why this first page is so troublesome.
Set a time interval to show the dialog, rather than call it once the page is shown.
$(document).on('pageshow', '#myPage' ,function () {
if (getValue() == null) {
setTimeout(function () {
$.mobile.changePage('#dialog');
}, 100); // delay above zero
}
});
This way, the dialog will popup on pageshow event and only once.
update
I found this interesting jQueryMobile events diagram on this blog. It explains why a dialog or a popup is fired twice on the first page and not on the rest of the pages in case of multi-pages structure. It seems it fires once the page is ready into DOM and again when on pageshow. Setting a timeout prevents the dialog from firing on pageinit, and therefore skips that event until pageshow is triggered.
Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html
Most probably is that on first page, that event is already fired when your piece of code is executed. Which explains why you get nothing only on the first page.
About your second point, it's normal since, changePage will "change" the page to the dialog, and once you close the dialog, it will return to your previous page. Thus, the if is executed 2 times.
My suggestion is that for the first time you enter the first page, you can re-transition to the same page just after you register the callback for the pageshow event.
I used "pagecreate" and that seems to solve my problem (so far...)
$(document).on('pagecreate', "#page-formyID", function () {
//whatever
});
I am using jQuery Mobile 1.3.0 RC1. I have a popup that I create programmatically at the bottom of my page and close after a few seconds using setTimeout (toast notification). It works very well, however if I happen to scroll the page while the popup is displayed, the popup gets scrolled too. I would like the popup not to move, i.e. stay in its position relative to the screen, not relative to the page. Is there a way to do that ?
I have tried playing with the data-position-to attribute in the HTML element, with the positionTo option of the "open" method, and tried placing the popup element inside a fixed transparent footer, none of these resulted in the desired behavior.
I had a similar problem last week. Finally solved it using modal dialog instead of popups.
For popups, I could find following.
$("#myPopup").on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
Which helped me in prevention of closing the dialog while user touched outside of popup. But scrolling issue was still there. So I changed all popups to modal dialogs. Hope it helps someone.
I'm using iOS 5.0.1, and Sencha Touch 2-rc1. I have a search input field where the focus event is getting triggered, as well as the submit event when I press 'Search' on the on-screen keyboard. The blur event doesn't get triggered when I expect it to, which would be when the 'Done' key is pressed, or the viewable area is tapped.
Note that the blur event IS getting triggered on my laptop in Chrome.
Not every element is focusable. At least <div> is not.
onblur is not firing because when a user taps on a div element, the focus doesn't go to the <div>.
Based on this post:
http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
tabindex on the correct div element can make a div focusable.
This is likely to be related to the event not "bubbling" up through the DOM. Or perhaps the code you've used includes an event.preventDefault(), but that would have killed more than just blur. I've also had this issue with clicking away from items which appear via javascript.
http://www.quirksmode.org/dom/events/blurfocus.html
I have a textarea element inside of a jquery modal dialog that has an attached blur handler. The blur handler code is triggered correctly in Chrome and Internet Explorer when the click of the button on the dialog, which calls $('#mydialog).dialog('destroy').remove(); occurs.
Unfortunately, in Firefox this is not happening!
Why might this be?
I was able to eventually resolve the issue by utilizing setTimeout to wrap the click handler code in, which allowed enough time for the blur event on the textarea to fire properly.
The resulting code was as follows:
var c = $('#mydialog');
setTimeout(function() {c.dialog('destroy').remove();}, 1);
As it turns out so far, a 1ms timeout is just enough to force the appropriate context switch in the browser to allow for the blur event to occur before the element is removed from the DOM.