I have a requirement where I can add both flash and embed HTML5 app on page. But HTML5 app is not supported on many browsers. What I want to do is to check at runtime if the HTML5 app is not working fine, then show Flash File. But I don't know how can I check at run time whether my app is displaying anything or not. I have embedded the HTML5 code through following code in user-control:
<embed src='<fully qualified html5 app link>' height="<height>" width="<width>" />
The process of checking for supported functionality at runtime is often referred as "feature detection". Modernizr is one popular JavaScript library that provides such "feature detects": http://modernizr.com/
For example, let's start with the HTML you suggested, and add an id attribute for convenience:
<embed id="fancy" height="<height>" width="<width>" />
If you wanted to use HTML5 Canvas, for example, but had to fall back to a Flash alternative in non-Canvas browsers, you could do something like this (in JavaScript, with Modernizr):
if (Modernizr.canvas) {
// TODO: do whatever it is you want to do with Canvas
} else {
// hook up your embed to the fallback Flash component
document.getElementById('fancy').src = 'url/for/flash/component.swf';
}
HTML5 covers loads of functionality. The precise "detect" required will vary based on your requirements, but Modernizr makes most of this quite simple.
Related
When writing a Firefox web extension it's possible to use a default css for browser or page actions so that they are styled like other browser UI components. It's done by inserting:
"browser_style": true
in the extension manifest. Styles like panel-section-footer-button become available.
My question: How can you know how to use the default styles, there doesn't seem to be an official source or description of them?
Related:
The css in built-in resource chrome://browser/content/extension.css.
This popup example on Mozilla site, which uses some default styles..
Using "browser_style": true results in the chrome://browser/content/extension.css file being applied to your HTML (on OSX chrome://browser/content/extension-mac.css is applied instead).
Mozilla has a Style Guide which you can peruse to see how various elements and classes are used. The link to this Style Guide is in the browser_style entry within the "Syntax" section of the browser_action documentation page. A similar link is in the same location on the page_action MDN documentation page. Personally, I would find it more appropriate for the information contained in the Style Guide to be hosted directly on MDN rather than on firefoxux.github.io.
If you are just interested in the elements and classes, you can find examples under the Components section.
Note: Under some conditions, Firefox also attempts to apply chrome://browser/content/extension-win-panel.css or chrome://browser/content/extension-mac-panel.css neither of which exist.
I am a newbie to JQM (I use 1.4.5) and my webapp (asp.net C# apache Cordova) contains many separate pages of .cshtml (single-page template) only. I am testing my webapp on a Samsung Galaxy Grand using Android 4.2.2
A.
I am not sure about my understanding of 'linking pages', even after reading all the JQM docs on this and also after reading up many, many posts on this topic about passing querystring values to another page; mainly because I find that ALMOST ALL the examples are directed towards providing answers for internal pages (Multi-Page template) within a single html page.
So I request some of you JQM experts to confirm or correct the following understanding of mine....
From the JQM docs I understood that
I could use in any link (e.g button), href="page2.cshtml?par1=1&par2=2"; and JQM will automatically use Ajax for this link to work.
I also understood that use of querystring is always allowed in such cases of different html pages of the same domain and it will work via Ajax automatically ; so long as the attr such as rel="external", data-ajax="false" etc. are not used in the same link.
but querystrings are not allowed in case of the internal pages (multi-page template) only....;
and if I need to use the above href to link to a page in another domain e.g. www.anotherdomain.com/page2.cshtml?par1=1&par2=2, then I need to use rel="external".
Are all my above points (that reflect my understanding) CORRECT? KIndly confirm ro please correct me ...
B.
In my app, I find that most of the links work according to my understanding as above, to connect to different pages in the same domain; and I assume it happens via Ajax. Is it correct? I am also able to use the querystring params in page2 ( i.e. To-Page).
But in one case, though it works, in the To-Page the Panel features do not operate correctly, unless I introduce rel="external' in the href link !!! I suppose it means it IS NOT AJAX anymore? Also I am unable to find the reason..
Further independent of the above topic, I face another issue. The loading time (i.e. Time taken to display the To-Page) varies.
Mostly it is OK, but at times the loading-circle goes on forever.... and I presume it has crashed....??? then If I go back using the back button and come forward again, many times it loads immediately...!!!!!
Any thoughts or suggestions.....?
Thanks in anticipation...
Ratna
Before you can worry about how to pass attributes from one page to another you need to understand the difference between multi-page and multi-HTML templates.
Multi HTML page template
Smaller and lighter, each data-role=”page” is inside a separate HTML file and page structure is much more modular.
Can become even smaller if every subsequent HTML page is stripped from HEAD content, or anything that isn’t data-role=”page” div. Unfortunately in this case fallback if JavaScript is not supported is out of question.
DOM size is relatively small, only first page is permanently loaded into the DOM, any other page will also be loaded into the DOM but at the same time it will also be removed when not used actively, basically each time you move from it.
Better fallback if JavaScript is not supported. Works great in desktop browsers after a page refresh, mainly because every HTML page has an existing HEAD content. This also allows your app to behave like normal web app mainly because AJAX can be turned off.
Multipage template
Since all pages are already loaded, no additional requests are generated for navigating between pages.
First load is slower as the file size is larger, but subsequent page navigation is fast, thus making transitions much more smooth. Almost native-like smooth, emphasize on almost.
Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support, thus making it a great solution for a hybrid app. It works much better as a Phonegap app then multi HTML template.
The “page” data-role element is required.
More about this topic can be found here: Multipage template vs Multi HTML template in jQuery Mobile
Now let's talk about how to properly pass data between jQuery Mobile pages.
jQuery Mobile uses AJAX by default
You can turn off AJAX using rel="external"
If you turn off AJAX you will lose almost everything good about jQuery Mobile, including animations. So if you don't want AJAX page handling better find some other responsive framework like Bootstrap or Foundation.
If you don't want to use AJAX you can still use querystrings but inside a href or via changePage function.
Better querystrings alternatives:
Global object.
If you're using AJAX you can simply use a global object(s) to store all of your data.
Something like this:
// Store object
var storeObject = {
parameter1: null,
parameter2 : null
}
Access data from the previous page
Again if you're using AJAX you don't need to pass any data because all that data is till in the DOM.
// Store object
$(document).on('pagebeforeshow', '#second', function(e, data){
alert("My name is " + data.prevPage.find('#test-input').val());
});
Localstorage or Sessionstorage
This solution will work no matter if you use AJAX or not.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#change-page-button', function(){
// store some data
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
// Change page
$.mobile.changePage("#second");
});
});
$(document).on('pagebeforeshow', '#second', function(){
alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
// Lets change localStorage data before we go to the next page
localStorage.firstname="NewFirstNeme";
localStorage.lastname="NewLastName";
});
$(document).on('pagebeforeshow', '#third', function(){
alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
});
Send data through changePage function or via href
// Send
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true});
or
Send parameter
receive that same data:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
If you need more information about this solutions including working examples find them here: Passing data between jQuery Mobile pages
Several methods mentioned here are deprecated (still usable) in the version 1.4. Though you don't need to worry about that, almost everything here will be unusable in version 1.5. This new version will overhaul jQuery Mobile from the bottom to the top.
Update
Yes, you can use any such link and jQuery Mobile will use AJAX. If you take a look at my previous examples you will find a working one.
If you want AJAX you CAN'T use rel="external", data-ajax="false" though stringquerys will work in bot cases.
Correct they will only work in multi-HTML template. Though there used to be a 3rd party plugin that allowed this to work with multi-page template but I don't think it works with newer jQuery Mobile versions.
Correct, if you want to link external page you need to use rel="external".
I am looking for a way to dynamically set the window title for a flex application in Internet Explorer. The most best way to do this is to call javascript from actionscript to set the window title via an "ExternalInterface."
ExternalInterface.call("eval(window.document.title = 'New Title')");
ExternalInterface.call("alert", "Hello ExternalInterface");
This works fine in browsers other than IE, and it even works in IE when accessing the flex application's swf file through an html wrapper.
ttp://localhost:8080/ChangeTitle/ChangeTitle.html
However, I need to access the .swf directly from the browser..
ttp://localhost:8080/ChangeTitle/ChangeTitle.swf
This causes the External interface call to change the window title to not work, but the alert still shows.
So the question is... why don't I just use the html wrapper? ... The answer: because the project is set up specifically to avoid using the html wrapper.
This is related to a known IE bug - http://bugs.adobe.com/jira/browse/FP-240
If anyone could suggest a work-around for this issue it would be greatly appreciated.
Thanks
Don't use ExternalInterface for this; use the BrowserManager class. You can first initialize it with a title:
var browser:IBrowserManager = BrowserManager.getInstance();
browser.init("", "my title");
Later you can adjust the title later on:
browser.setTitle("my new title");
I have several applications that use this and work perfectly in IE (though I haven't tested IE6).
More info on this topic: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64e50-7ff4.html
Pipbox says it's "Plone 4 compatible way to do AJAX pop-ups in Plone 3".
http://plone.org/products/pipbox
Then, what's the proper way of doing jQuery Tools image pop-ups in Plone 4?
Scan HTML for images using selector
Install click handler
On click open the image in pop-up, using one of predefined sizes from plone.app.imaging
All pipbox really does is load plone.app.jquerytools support in Plone 3. In Plone 4, plone.app.jquerytools is built in.
plone.app.jquerytools loads jQuery Tools and some Plone-specific support for easy AJAX popups. That support allows you to associate AJAX popups with jQuery-selectable page components. See the PYPI page for full documentation.
A quick example: let's say that you want to set up lightbox-style popups for images in the content area using the preview-scale supplied by plone.app.imaging. JS to do this is:
jQuery( function($) {
$('img.image-right, img.image-left, img.image-inline')
.prepOverlay({
subtype: 'image',
urlmatch: '/image_.+$',
urlreplace: '/image_preview'
});
});
You would load this code by registering a javascript resource as a skin or browser layer, then add it to the portal_javascripts js resources.
The code:
Sets up a function to load when the page is ready, with "jQuery" aliased to "$";
Selects all image items in the page that use the styles used by the visual editor;
Calls the prepOverlay routine (from plone.app.jquerytools) to associate them with overlays;
Specifies that the overlays will be images, which means that size information may be determined from the loaded image;
Does a little regular expression matching and replacing to pick up the image URL and convert it to a preview.
I am writing a Firefox extension and I am using their Add-on SDK; but I can't figure out how to inject a local CSS file from the data folder into the webpage. It would be great if there were a way to do it via page_mod package.
As of Add-on SDK 1.14 there's experimental (API may change) support for this in the page-mod module:
var pageMod = require("sdk/page-mod").PageMod({
include: "*",
contentStyleFile: require("sdk/self").data.url("my-style.css")
});
See Modifying Web Pages Based on URL for an elaborate guide to using page-mod.
There's a page on the Addon SDK's wiki discussing issues with the current implementation, although it seems a bit outdated.
Under the hood it uses nsIDOMWindowUtils.loadSheet() to add the stylesheet without touching the page's DOM. (This API was added in Firefox 18, see bug 737003. Before that you had to use nsIStyleSheetService which was similar, but not tab-specific.)
Before that you could use the page-mod's content script to insert the link or style element (example). [edit] thanks to lwburk's comment, here's a more elaborate elaborate description in Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section.
To insert CSS from main.js one can now use "page-mod":
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.org",
contentStyleFile: data.url("my-page-mod.css")
});