I am developing a jQuery Mobile application that will run into a Cordova wrapper.
I am struggling to understand the use of each pagecontainerX event and when to use which.
I will post three specific use cases:
1) hook click events:
Say I want to assign a handler to a certain click event on a button.
2) change textual content of the page:
Say I have a page and I want to update some content that might have changed since last time I have shown the page.
3) change graphical content of the page:
Like if I want to draw on some canvas, or in cases where I need to know how things are rendered and their size.
Preliminary answers:
these is what I have found myself, but I would really much appreciate comments:
1) I am using the pagecreate event, as it's only called once. It is also possible to specify what specific page you want to hook the handler to by doing: $(document).on("pagecreate", "#pageid", handler);
2) I am using pagecontainerbeforetransition or pagecontainerbeforehide. Pagecontainerbeforehide has the advantage that is only fired once, while the other is fired twice (dunno why). Other options, like pagecontainershow, will change the content after transition, which is a bit weird to look at.
3) In this case I am employing pagecontainershow, so that things have already been graphically rendered and I can compute heights and widths etc., the drawback is that the user will see the transition, and only after he will see the content of the page being modified.
Related
I'm using jQuery UI Sortable behavior and have come upon a situation in which I needed to start the sortable drag behavior from interaction with another element other than the original handle (which is not visible at the time).
I have managed to put together a way to achieve this thanks to suggestions in some posts and the use of jquery.simulate.js (used to run official jQUI tests) and I can procedurally start the sortable drag process in pretty much all browsers except IE8 and below, simulating the events like so:
item.simulate('mousedown',pos).simulate('mousemove',{ clientX: pos.clientX+1, clientY: pos.clientY});
Problem: In IE8 (or below), after the interaction with the outside 'handle' and simulation of mousedown and mousemove events, the drag is indeed correctly started, but as soon as the user really moves his mouse in any way/shape/form, the drag stops or cancels as if the 'mouseup' event had ocurred to finalize it.
I highly think this is due to some fundamental difference in the old fireEvent (IE8-) method vs the dispatchEvent that everything else uses, but cannot quite figure out how to, or if it's possible to prevent it.
What I'm looking for are snippets of what may be done to correct this or suggestions as to why this is happening and if it can have a workaround of some sort to prevent the cancelling (such as is the behavior that occurs in any other browser using dispatchEvent instead of fireEvent).
Have put together a small example for you of the success (any recent browser) or failure of the situation described: demo
TL;DR: Have put together a small way to procedurally start a jQUI sortable drag (through jquery.simulate.js, link above), but it fails to work or cancels itself in IE8-. Need some guidance or suggestions about how to overcome that. Check above demo
Another topic on the much discussed issue of button responsiveness when web apps are used on mobile devices.
I am listening for the touchend event to trigger a radio button being pressed. This solves the issue of making the button more responsive, however creates another problem.
jQuery mobile applies classes such as ui-icon-radio-on, ui-radio-on, ui-btn-hvr-a, ui-btn-dwn-a when the event occurs that get left behind. This makes the button look like it is still being pressed even though the event is over. It ends up being a decent effort to juggle removing and adding all those classes to make everything look right.
My questions is - does anyone have an elegant way of adding and removing the needed classes and attributes.
or
Is there a better way of going about this that will not involve "recreating the wheel" in terms of manually dealing with the styling based on event triggers. Would google's fast button be a better solution? (not sure how to integrate). Is there a simpler way?
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function (event) {
if($(this).hasClass('AdminSurv') && event.type=='pageinit') {
$(this).on( 'touchend', '.ui-radio', function(event) {
event.preventDefault();
/*uncheck all radios in control group to avoid multiple checks*/
var _control_group = $(this).parent();
_control_group.find("input:radio:checked").attr('checked',false);
/*check the radio*/
$(this).find('input').attr('checked', true);
/*much juggling of classes/attributes going on here
still looks like the buttons are being held down
this is a very sloppy example of my initial attempt*/
_control_group.find('label').removeClass('ui-radio-on');
_control_group.find('label').removeAttr('data-icon');
_control_group.find('label span span').removeClass('ui-icon-radio-on');
$(this).find('label').removeClass('ui-radio-off');
$(this).find('label').addClass('ui-radio-on');
$(this).find('label').attr('data-icon','radio-on');
$(this).find('label span span').removeClass('ui-icon-radio-off');
$(this).find('label span span').addClass('ui-icon-radio-on');
});
}
});
Many jQuery Mobile widgets accept refresh method, in which it is used to enhance markup of elements already existing in DOM or are inserted dynamically.
For checkbox and Radio buttons, .checkboxradio('refresh') combined with .prop() are used to enhance/modify the markup by adding/removing classes, for checked and unchecked elements dynamically.
Check
$('.selector').prop('checked', true).checkboxradio('refresh');
Uncheck
$('.selector').prop('checked', false).checkboxradio('refresh');
Demo
Reference: Checkboxradio Widget
In JavaFX WebView I can view view html pages. Although shortcut to find a word doesn't work there (Ctrl+F).
How can I enable Ctrl+F functionality?
WebView does not support this functionality.
I raised a feature request for it. The feature is not scheduled for implementation. You can vote for it if you like.
You can implement the find functionality yourself.
An example would be to create a new HBox in your FX scene that opens when it detects the CTRL+F event with a TextField for typing into. After this, you'll need to make it so that every time you type in the TextField it will fire off an event to a method where you implement some Javascript that searches through the DOM of your current page based on what you typed in to find. You can also make it so that your script highlights the word it found, amongst other find related tasks.
I'm kinda new to rails so forgive if this is a stupid question.
The scenario is:
I got my events controller with a index view that shows all events on the page. Now, what i want to achieve is: User clicks on one of the events, lightbox comes up showing all info about about that one event, with all the other events still behind the dark background of the lightbox. User closes the light box and process repeats. Pinterest is a good example of what i'm trying to do.
At the moment, i got these 2 views working properly. User clicks on the event and is taken to the show action.
So i'm wondering if what i'm trying to do is RESTfully achievable(without too much hacking around) in rails(3.2.8) and if so, would appreciate some insight as to where i should start from.
Thanks a lot.
As far as I understand what you want to achieve, it has nothing to do with actually rendering 2 views at the same time. What you're describing is simply making an ajax call with lightbox that opens up an URL that renders another view in the shown DIV or IFRAME (whatever lightbox uses)...
Depending on which version of Rails you use the implementation of this looks a bit different. But actually what you have to do is simply include LightBox2 in your Rails app, by simply adding the appropriate JS and CSS files and then supply the necessary class at your link_to calls...
Hope it's clear what I mean.
UPDATE
See this link for further info.
I'm displaying HTML content using a UIWebView and would like some action to occur whenever the user clicks anywhere that isn't a link.
I added a UITapGestureRecognizer, however at the point handleTapGesture is called I do not yet know if the user has clicked on a linked or non linked part of the screen.
To work around this within handleTapGesture I added performSelector:#selector(performAction) withObject:self afterDelay:n]
Then if shouldStartLoadWithRequest is subsequently called I set a flag that performAction checks to see if it actually should perform the action or not.
This works perfectly - but only if the time delay n is sufficiently long enough (about 0.3 to 0.4 seconds) which is too long from a users perspective as its a noticable delay. Also I guess the value of n would likely need to vary on different devices with different processor speeds and so its a fragile solution.
Is there an elegant solution?
Do you have control over the HTML? If so, you can add a global click detection, e.g. <body ontouchdown='detectTouch()'> and then use a custom message to your ObjC app, e.g. location.href="touch://whatever". Watch for the link/location change messages in your UIWebView (shouldStartLoadWithRequest) and parse the scheme and data passed. Don't propagate on link clicks. Should work good.
If you don't have control over the HTML, you can always inject your touch handler, but it's trickier as you'll need to figure out the order of events during a link click, and ignore the ones that aren't links.