I'm building an HTML5/JavaScript app that runs on the iPhone in offline mode.
I know I can selectively run JavaScript by inspecting the window.navigator.standalone property - is there some equivalent switch/selector for CSS? The extra screen space that's available when running locally means I'd like to use different CSS for running as a web page vs. running as an offline app.
There's no declarative, CSS-only way that I'm aware of (such as using a media-query).
One shortcut option might be to use the trick that people use on Android, which does not have an installable HTML5 option at all: scroll the URL bar out of view. See http://www.html5rocks.com/mobile/mobifying.html#toc-optimizations-scrolling
At least that way users get a "full-screen" appearance. You may want to couple that with a min-height on the body or containing element to make sure it actually stretches far enough to scroll the URL bar out of the way.
You can use a cache manifest and provide a completely different CSS when viewing offline (under FALLBACK): http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Related
I downloaded a template and customised it a bit. It's working well but the template has a kind of mobile style sheet. When I open the webpage with the iPhone, it looks great on the homepage. However, on the most important pages I don't want it to appear for mobile I want it to appear like it would on a browser.
I've tried.
Deleting the: style-mobile.css file. - Nothing happened.
Playing around with the style-mobile.css file. - Nothing!
Deleting some js files.
I can't seem to find the code that is telling my iPhone to open the page like an iPhone instead of opening it like a browser.
Where will I find this??
The idea that you can download an arbitrary HTML/CSS/JS(?) template that is designed for mobiles and have it magically adapt to look right in a classic browser window is .... naive.
Either look for a template that is designed to look good in both contexts, or build your own layouts using something like Twitter Bootstrap which is responsive to differences in the display port size.
Is there a method to not display and important not load the Facebook Likebox on devices with a certain screen size (for example: not on smartphones) or certain data connection (not wifi), the likebox slows down the website significantly.
So the method display:none; is no option.
Currently there's no way to (reliably) query for data connection type.
May I suggest a different approach? perhaps you could load the likebox on demand using javascript, the way techcrunch.com or enter.co do it. Those sites load the social buttons only when you hover over some placeholder images.
This way, you optimize not only for mobile screens but for all devices. If you still want, you could check the viewport size before loading the buttons, or use display:none inside a media query so the placeholder images are not shown –and the buttons can't be loaded.
Why not a simple echo based on a conditional ?
For connection you would get the users speed perhaps using a bit of code like this: http://www.emanueleferonato.com/2006/05/31/determine-connection-speed-with-php/
Then an if statement if the speed is above say 56k, output the likebox code?
For mobiles, you would do the same after getting the browsers user agent.
I'm building a GWT application that looks great. At the end of the page I'd like to include a WordPress blog that I'm developing. In order to do that I want to use a com.google.gwt.user.client.ui.Frame so that an IFrame gets created, and the Wordpress just gets seamlessly embedded.
I've built this and it seems to work, although there's a problem with the size of the IFrame. I'm not sure how it's getting sized, but it's too small so that scrollbars are thrown onto it. This makes the the embedding not so seamless.
What should I be doing so that this second webiste can be seamlessly embedded into my GWT app?
The easiest solution is to make iframe as big as possible, and hope that there will be no unexpected scrollbars.
Also there is another way, if you have access to the innerDocument of iframe (if SOP doesn't stop you from doing this), you can compare its size against the size of iframe, and increase iframe height/width if necessary.
If blog is in another domain, you might try to use cross-document messaging to retrieve information about the size of document(this will not work in IE7,IE6 and you will have to put some additional JS on your blog).
Also you can include information from your blog without using iframes. You can simply pull RSS of your blog, parse it and display it in any way you like it.
The setup: I have a Blogger blog set up on a domain name as blog.mydomain.com. The main site site at mydomain.com is running Umbraco CMS.
The problem: I need to have the navigation from the CMS transported to Blogger somehow, so that making a change on the main website doesn't require the extra step of modifying the navigation inside Blogger.
Generating the navigation data on the CMS side in what ever format it needs to be (XML, unordered list, JSON, etc) is not a problem. The problem is getting the data from Umbraco to Blogger after it is generated.
I'm not yet willing to use Javascript, as this would seriously impair the website for users browsing without Javascript. (Too bad because AJAX would be a very workable solution.)
I've tossed around the idea of using an iFrame. How would this work for a navigation system including sub-menus? Creating and deleting multiple iframes is out of the picture, since I don't want to use Javascript. I could use one large iframe to allow for the sub-menus, but then it would cover content at the top of the content area, rendering it unclickable.
I'm thinking about how you could do this, but while I do - in this day-and-age javascript has become very common. Most users are going to have it, and those with it disabled really shouldn't be on the web. Is this the only reason you don't want to use javascript? Around 2% according to YDN have js disabled, and that's lower from other countries. As time goes on that 2% should get lower, I don't see that as an issue. However if you absolutely can't use javascript, I'll keep thinking. I might have an idea, I'll need to test it though.
It's not possible to use IFrame, cause of same origin policy. Both sites are on different domains, when user click menu item inside IFrame, there is no way to call parent window.
There are few ways how this can be done.
1) Javascript solution. Use json rpc, or another cross-domain calls. Load menu from your CMS and render it. Yes, this requires javsascript, but, seriously, show me the site, which does not use javascript.
2) Direct server communication.
Is it possible to perform http call from blogger ? If so, just perform http call to your CMS from Blogger, get data and render it.
3) Mixed flash/javascript solution. Flash can perform http call regardless of same origin policy. Get data with flash, use ExternalInterface to call Javascript function to render data.
There is no another way to do it. I suggest you to use javascript solution
You could build an HTML skeleton of empty ULs in Blogger (the max that you might need) to hold your navigation contents, and then link to an Umbraco-generated external stylesheet.
This stylesheet could fill those LIs with CSS generated content using the :before and :after pseudo-elements, and hiding unused LIs with CSS display: none.
An example of this is at: http://jsfiddle.net/5bXja/1/
This works in IE8+ so depending on your clients, this may-or-may-not be more widely supported than Javascript. Likely not. ;-)
How do you put the Amazon Kindle web browser into Article Mode via HTML or Javascript?
Editor's note: Some pages are not automatically detected as "articles" by the Kindle 3 browser, and give an error message when trying to go into Article mode. What does the Article mode use to determine what portion of the page to display?
Is this related at all to Readability?
http://lifehacker.com/5163401/readability-bookmarklet-quick+formats-pages-for-smoother-text
Actual JavaScript code for Readability, which is heuristic based:
// Study all the paragraphs and find the chunk that has the most <p>'s and keep it:
This also appears to be related to Safari 5's Reader mode. Here is what is required for Safari Reader:
This definitely needs more investigating, but so far, these appear to be the most important factors for Safari’s Reader functionality to kick in:
Use the right markup, i.e. make sure the most important content is wrapped inside a container element. Whether you use <article>, <div> or even <span> doesn’t seem to matter — as long as it’s not <p>.
The content needs to be long enough. Use enough words, use enough paragraphs, use enough punctuation. Every paragraph should have at least 100 characters.
Reader doesn’t work for local documents.
http://www.wired.com/gadgetlab/2010/09/simple-tip-turns-kindle-into-ultimate-news-reader/ - The "f" key feature outlined above or some other feature? Not quite sure what article mode means.
It means that the browser will try to identify if the page you are looking at has a main body of text (is an article), parse it out and then display only that text without clutter and for easy scrolling.
I don't think you can force it via the web page's code
As far as I know, once the website has loaded (and if you are on an specific topic) you can turn on the "Article Mode" from the menu.
I've seen similar JS tools for Chrome too, so I assume it's part of webkit.