I am working on a Chrome extension that has a popup with multiple pages. Before I started implementing all the pages in one HTML file, and hid <div>s depending on which page the user was currently on. Since this turned out to be a major hassle I decided to instead create an HTML file / JavaScript file for each page and switch between them
function toX() {
chrome.browserAction.setPopup({ popup: 'x.html' });
window.location.href = 'x.html';
}
Unfortunately this causes the popup to "flicker" / "reload" (it closes the current page, then opens the next one) when switching between pages.
How can I prevent this from happening an make switching between pages smooth (it was smooth when hiding <div>s containing the HTML of the pages the user isn't on, but as I said, that's a huge hassle)? I was thinking something along the line of Jinja's template inheritance, but I'm not sure if that is possible with a Chrome extension.
Related
Normally if you click a link the browser displays a little loading icon up in the tab until the page complete loading .
Is there any way to prevent the browser from displaying this little icon in the tab especially when dealing with iframes loading ?
Not directly, but you can design your website as a single page application. Implement your internal links with Javascript handlers which load the content with XMLHttpRequest and replace the current content when the response arrives.
Keep in mind that this makes your content practically invisible to search engines and breaks many browser navigation features your users will be used to.
You could write to the document via JavaScript after it has finished loading by using document.onload
I need to create a chrome extension that for every web page te he user opens - he will have a button on top of the page (similar to the google translate extension - just that it will appear with page load, without the need to press a button) - preessing on it will do some activity.
from what i saw - the way to do it is to create a content script that will add an iframe that includes the button on the window.onload. just before i do that - i want to be sure there is no more simple way of doing that.
Thanks.
There is an experimental infobar API, but it's unknown when, if ever, it becomes stable.
As-is, you really need to inject your UI into the page DOM from a content script, with an iframe being a good solution to separate your UI from the page.
If it's just a button for each page then you could use a Browser Action
If you'd like for it to actually be in the page then an iframe is a good way to go.
I'm building a small website that will be always be viewed on an iPad, I am using the meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
And adding the site to the homepage to force the iPad to treat it as an app. This eliminates the address bar and back buttons etc...
I have the site inside a frame set, initially the site will load up an index.htm landing page which has links to other pages containing <frameset>'s and <frame>'s. Each page has a navigation frame and a frame for displaying content. The content of the second frame will be an external webpage.
I had a problem where launching the site in app mode and clicking on the links in the landing page would result in a new window being opened in safari - essentially it would break out of the app context and load up safari, i resolved this with:
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
window.location = $(this).attr('href');
e.preventDefault();
});
});
</script>
Which keeps all links under my site loaded within the 'app'.
Now, here is the problem.
The frames that load the external webpages will obviously contain links, when clicking on these links in the frame this fires up safari and breaks out of the app context and the app goes back to behaving as it did before.
Is there a way of making sure that all links on the site open within the 'app', even those contained within the <frame> elements?
The overall goal here is to prevent the user from breaking out of the app and going off to do whatever they like on the net
I know you state that it's a website, but it seems like you're making something which resembles an app and I'm tempted to suggest using phonegap. http://phonegap.com/
The reason is, you're not going to be able to prevent the links opening in safari. Although Brainfeeder makes a good suggestion with loading external html into a div, but I think you're still going to have the same issue when users click links from external sites inside that div.
With phonegap all you'll have to do is create a new project, dump your code as it is into the www folder and straight away you'll have an app you can deploy to your iPad.
But the main thing which made me suggest this is a feature called inAppBrowser which will let you specify links to open in a foreground webview, so that when a user is finished viewing, they just click done and are returned to your app.
http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
Appreciate it seems like a bit of overhead just to fix the safari issue, but might be worth considering.
I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter components to avoid me having to do anything artistic.
I noticed on that site, the navigation bar does not appear to ever reload.
http://twitter.github.com/bootstrap/javascript.html
Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.
I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:
An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?
Some undetectable AJAX going on
Some sort of browser caching going on (can you do that for a rendered page element)
Something completely different
Any thoughts most welcome :)
The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.
What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.
So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.
The entire page (each tab) is loaded, and hidden when the page loads.
The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).
When the hash is changed, the onhashchange event is ran, and the correct div is shown.
Here is an example: http://jsfiddle.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)
I have a page that has a table whose rows are links to other pages.
When there is a click on a row (link), I set location to that URL like this:
window.location=mytable.rows[temp_no].getElementsByTagName("a")[0];
And in one of those link, a video player starts to play a file in the link and I want it to keep playing when I go back to the previous page so that I can listen to the music when browsing other links.
I go to the previous page with:
window.location.href="..";
This destroys everything i.e. video player naturally. I can't popup a new window or open video player in a new window since this application works on devices which have single browser window.
Any solutions ?
Of course it does. Changing the location causes the full page to be unloaded and the new one to be loaded.
If you do not want this behaviour you'll have to use AJAX to reload only parts of your site.
Opening the video in a popup window would be another solutionbut new windows are usually annoying, so provide the user e.g. with a "open video in new window" link.
Edit: In this case - assuming the TV browsers have sane JavaScript engines - use AJAX.
Another "solution" would be adding an onbeforeunload event to request confirmation from the user before he navigates away from the page.
Without being able to use a new window or AJAX it is impossible unless you use frames and just load another page in a different frame.
Use window.open on your videos in a different window so the parent window can navigate wherever.
Keep in mind that you'll have to disable any pop-up blocker.
** UPDATE **
If you need everything in the same window, consider using some iframe to view other pages. The advantage of iframes is that they have their own CSS styles, Javascript sandbox so any page viewed within an iframe does not (generally) affect it's parent container. Of course, there are ways to communicate between an iframe and it's parent and vice versa. But this is out of the question scope.