So I'd like to use ratchet to create a mobile web experience (and not a phone gap/hybrid app experience), and ratchet seems like a good fit for that. However, I don't want the functionality to be broken if a user views my prototype from a desktop browser (it can be ugly ). I've noticed that some of the javascript like the modals don't work in a desktop and only on the mobile device.
What's the work around to get something like the modal working on a desktop browser as well?
I noticed in the js file that I can just add the same event listener to the click event from the touched event like so:
window.addEventListener('click', function (event) {
var modal = getModal(event);
if (modal) {
if (modal && modal.classList.contains('modal')) {
modal.classList.toggle('active');
}
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
}
});
Any suggestions on doing a side by side with say bootstrap? Is that feasible?
Related
Is there anyway i can get the hyperlink click in webview to my c# with Hyperlink value in Metro?. I am using WebView..NavigateToString() to generate the content?.
You can call InvokeScript with some of your own Javascript to set up a listener for when the user navigates away from your page. This would look something like the following in C#:
var navigationListenerString = #"
(function() {
function leavingPage() {
window.external.notify("LEAVING PAGE");
}
window.onbeforeunload = leavingPage;
})()";
webView.InvokeScript("eval", new string[] { navigationListenerString });
Then you can use ScriptNotify to listen for your particular message to determine that the page is unloading and the user is leaving. Unfortunately you cannot detect where a user is going. Also, if the hyperlink opens in a new window and the webview does not unload, you cannot detect that either.
Since WebView in windows 8 doesn't support Navigating() events like the Silverlight WebBrowser control, thus it is not possible to get hyperlink or cancel navigation.
But since you're using NavigateToString() method, you can write some manual javascript code and achieve same with the help of WebView.ScriptNotify() event.
I'm working on a FB canvas app using Flash with 3D graphics. I must embed my SWF with param wmode="direct".
According to FB documentation, when using wmode="direct", FB hides the flash object when displaying a popup/dialog (buy credits, chat, notifications, etc.) and after the popup close, it shows the flash again.
On Chrome and Firefox it works, but on IE, after the dialog closes I checked the flash element style and I saw that visibility=visible, but still the flash is still hidden!
I tried several approaches, all with same result:
Not using "hideFlashCallback" on FB.init (let FB do it
automatically)
Using "hideFlashCallback":
function onFlashHide(params) {
if (params.state == 'opened') {
hideFlash();
FB.Canvas.hideFlashElement(params.elem);
} else if (params.state == 'closed') {
showFlash();
FB.Canvas.showFlashElement(params.elem);
}
}
function hideFlash() {
$('#flashContent').css('visibility', 'hidden');
}
function showFlash() {
$('#flashContent').css('visibility', 'visible');
}
Thanks!
Roei
UPDATE:
Another reference to FB documentation: http://developers.facebook.com/docs/appsonfacebook/tutorial/#flash
I had the same problem with IE when calling the FB.ui functions. The Facebook dialog would open, but when closed Flash would not come back.
I found a trick which solves this. Before calling to the FB functions, use javascript to set focus to a different HTML element. After that, the Flash object became visible again when I was done with the Facebook dialog.
// IE9 has a problem where the Flash object won't regain
// focus if it has focus when the FB UI is called. To fix this,
// We'll redirect focus before the call.
var lFocus = document.getElementById('focus_target');
lFocus.focus();
Hope this helps.
Have you tried using display: none; and display:block instead of visibility: hidden and visibility: visible? In past projects I have noticed that IE sometimes has trouble with the visibility CSS property...
For some reason the following html doesnt work inside safari on iphone 4.
Test Link</div>
it works on safari inside a regular browser. I am using senchatouch2 framework.
Thanks
The only way you can add events to dom elements in Sencha touch 2.0 that I know of, is to use their element events api. this is an example of it. Alot of events are available like tap, double tap and so on.
var el = Ext.get("test");
el.addListener( 'tap', function(e){
alert('it works!');
});
This goes after the panel is rendered.
I propose that you do not use such inline event handlers.
Not only is it better to separate markup and behavior, but you should let sencha touch handle the messy business of unifying events across browsers.
At the very least give your tag an id and do Ext.get('id').on('tap', function(){...})
But still better look into MVC features to avoid such low-level code altogether.
Opening my mobile webpage from my homescreen (after adding it to my homescreen), it starts in fullscreen mode, so far so good.
After logging in (form/submitbutton), the 'app' is still in fullscreen mode, which is also the desired result.
Now, when I click a link that has the rel="external" attribute, webkit opens a new window in Safari, so it exits the fullscreen 'app' I started from my homscreen, I would like it to stay in fullscreen mode.
data-ajax="false" has te same result. Removing data-ajax="false" and rel="external" will not exit fullscreen, but this way you can't link to a multi-page document (1 document with different data-role="page").
Does anyone has the same problem, or even better, a solution?
I do not really care about the transitions, I just want the webpage to remain in fullscreen mode, (the user has to log in again when the new window has opened).
iPhone 3gs
M_webkit / 5.0.2
Why not create a script that pulls out the href and goes to the new url via javascript.
If you use jQuery it's as simple as:
$("a[rel='external']").bind("click",
function() {
if (this.href) {
location.href = this.href;
return false;
}
});
Without jquery you'll need to use object detection and attach a click event to it with the same logic inside the anonymous function above.
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps