How does the Chrome Web Store page work? - javascript

There are some oddities in the Chrome Web Store:
It opens dialogs navigating to new URLs
while this happens the screen doesn't flash
and the original page is still shown behind the dialog with the same items and scroll position
I have a background in HTML4 where I couldn't do this and I don't know if it is possible to do the same in HTML5.
My guess is that this behavior is because the Chrome browser has special behavior when handling its store.

It uses the new HTML5 history.pushState(); method, as demoed here and explained here.

Read about jQuery, Dojo, MooTools, YUI, script.aculo.us, etc.
Javascript is pretty powerful these days, and can be used to do some advanced stuff in your browser. For diaglogs, you can look at things like DOMWindow, FancyBox, etc. You can place an entirely separate web page into the pop-up dialog.
This StackOverflow question gathered some other suggestions too. There are many alternatives.

Related

chrome.app.window Alternative

so currently I have a packaged Chrome app, which uses chrome.app.window.create() to create frameless Notifications. Since Chrome Apps will be discontinued in the near future I am currently looking for alternatives.
I am trying now to emulate the same behavior in a Chrome Extension, but I have only found chrome.windows.create() where I can open popups, but they can't be made frameless apparently.
I have also tried chrome.notifications but they are not customizable enough for my needs.
Do any of you guys know a way to do this?
No, that's about it. You can't emulate this behavior with extensions.
Add to that list a possibility to inject DOM in the currently opened page, which you can style, but it's complicated, requires very heavy permissions to do at will at any page, will be confined to the browser viewport and still won't work in some edge cases.

Liveweb Plugin for Powerpoint: Support for HTML5 Canvas?

I'm thinking of using the Liveweb plugin for Powerpoint, to embed a web page in a Powerpoint presentation.
Does Liveweb support HTML5 Canvas? Does it support Javascript?
Thanks very much in advance to all for any info.
Shyam Pillai's LiveWeb? It simply embeds an instance of the browser control into your presentation. It doesn't support any web technologies ... just turns the browser loose on them, so it'll depend on the MSIE version in place and what it supports and your Internet settings (ie, whether javascript is disabled or not).
Or the short version: Can't answer that. Try it for yourself and see. ;-)
So far it doesn't seem to be working. I can access a web page from inside a PowerPoint slide show. I can use the navigation on the page and navigate around the site. But when I go to a page that uses HTML5 Canvas, the Canvas objects don't yet appear.

Google Chrome Extension and NPAPI/FireBreath embed webpages

I am developing a project where i intend to open multiple webpages in the same one but not using <iframe>. I have tried in the past using <iframes> but i usually end up with the browser UI locking the webpage, so i have been trying to find alternatives.
I developed a small google chrome extension where instead having opening webpages, i open chrome.windows in the position i want and it works fine, but i wouldn't want any UI around them like the title bar and the buttons like a sort of 'fullscreen' for the dimensions i defined.
chrome.windows.create({ url: app.src, left: wleft, top: wtop, width: wwidth, height: wheight, focused: false, type: "popup" }, function(tab) {
self.windowid = tab.id;
console.log('Window ID is: ' + self.windowid);
//chrome.windows.update(tab.id, { focused: true, state: "maximized" })
});
While looking into chrome extension API i read something about NPAPI and with a little more research i have found about FireBreath. Since i have never did anything with this i have doubts if there is any way or possibility, by developing a plugin npapi/firebreath to do 1 of the following:
When opening a window with chrome extension, somehow remove the UI from it?
With the development of a plugin and having an index.html with 3 <object id="plugin"...> instead of the <iframe>, and inside those 3 object embed on the index, make them open webpages with url that i define and make it change the url after X time that is set on javascript?
This is all assumptions, idk if i am saying anything stupid regarding the possibility to do this with npapi or if i should look somewhere else.
Thanks in advance.
Basically the answer is no, you can't do any of that.
To be more accurate, however, you can do #2 but it's a huge amount of work and may not work how you expect. The only way to load an html page inside an npapi plugin is to actually embed a web browser of some sort into that plugin; FireBreath has an undocumented library called WebView that will do this for you, but it uses the IE engine on windows and on Mac it uses a lot of hacks to make it work which end up only working correctly in certain cases.
Your #1 can't be done in any consistent or reliable; npapi plugins know nothing about the browser itself, only the page. It might be possible using windows APIs to essentially hack into the browser window and change things but it would be very fragile and implementation specific to that version of chrome; if something changed later it'd just break.

How to create navigation tabs or thumbnails as Firefox or Google chrome?

I want to show the important links or services in my website as multiple thumbnails or tabs like what we see in Firefox or Google Chrome when we open it and they show us the latest opened websites.
I think there is a way to do that with CSS or JQuery. I googled about it but I could not be able to find it.
Though I'm not quite sure what you're referring to RE. a web browser interface, here's a really simple implementation of jQuery powered tabs: http://jsfiddle.net/i_like_robots/cc324/

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

Categories