We Keep Coding

Launch chrome as an emulator using javascript

I have a website where editors write articles using a custom built CMS. Once done they generally test these articles on desktop, but not mobile. To fix this I was wondering if there is an easy way to launch chrome using html/javascript such that I can provide it a url and one of the device emulators? (Keep in mind these are non tech people, and would be easily confused if I asked them to emulate themselves). If thats not possible then launch chrome in a new tab with specific width and height (which matches a mobile device)? Also if possible I would prefer these new windows to be incognito so that I do not save cookies in their sessions. Is there any way to do this? Any ideas would be appreciated. Thanks for reading

Chrome Provides Device Emulator as shown in below screenshot. by pressing the f12 ( Developers tool ) you can find the option. by selecting that "Device Emulator" Icon. You can choose the device as shown in below screenshot and change the device Os and device type and resolution and Orientation.

Regarding chrome fullscreen message disable

I need to disable fullscreen message ("you've gone fullscreen") coming on the top when chrome fullscreen mode is activated .
i need to do it through javascript . but it's one of the default functionality of chrome.
can any one help me out ?

It's not possible. As you pointed you it's one of the default functionality of chrome.
and I agree with the comment by mic You can't it's there for security

That message is, if you it can be disabled at all, likely a user preference. I have had my fair share of changing that kind of things for a custom "layer" over windows with an integrated browser and I can tell you it's impossible with javascript without some listener app. We created a C# listener app for that kind of thing that keeps checking a certain text file. We made javascript edit the text file and then let C# work it's hacking magic in some of the user's settings.
You could take a look at Chromium, the stripped down version of Chrome, if that would be of any help ;)
ps: To all the people going mental over changing user settings like that, our customers were old people that were unable to use a computer, and our application's purpose was to do as much as possible for them.

You cannot possibly do that as suggested by these links.
https://superuser.com/questions/398945/disable-the-youve-gone-full-screen-notification-in-chrome
https://groups.google.com/forum/#!topic/chromebook-central/h1crbhOy-7U
On the other note, why exactly would you want to do that?

JavaScript Mimics of the iPad's UI (specifically, UIDatePicker and UIPicker)

Does anyone know a way to mimic the UIDatePicker and the even more general UIPicker iOS controls in HTML & JavaScript?
Does anyone know of a solution like this? I've seen JavaScript mimics of other iPhone/iPad controls, such as the UIPopoverController. I would really like to be able to offer this way of entering dates (compared to solutions like jQuery UI's datepicker). It looks like it would be easy to use both on a mouse scroll-wheel and on the iPad. So, any advice?

One reason all these strange widgets exist is because typing on touchscreens is annoying. You probably wouldn't want to use this sort of widget on desktop for the same reason that very few people like to draw pictures with their mice: the control you get with a mouse isn't really the same as the control you get with a touchscreen.
For that reason, libraries that have implemented functionality like this do it specifically for mobile, and do not ensure compatibility with older browsers such as IE6. If you only need to support good Webkit browsers, and you don't mind using a large framework for this purpose, Sencha Touch's Picker works well (see this page for an example). Sencha's doesn't offer mousewheel support.
I don't know if anyone has implemented one outside of a large framework, but it wouldn't hurt to look around.
--- EDIT ---
A solution listed in a previous StackOverflow question (Date Picker for iPhone Web Application) was chosen as the answer, but it's only for mobile — perhaps only for iPhone. You could look at the code and write one that would work on desktop.

#theazureshadow has a point that this is probably a bad idea for a mouse-based experience.
For anyone looking to do this in a touch-screen browser (smartphone or tablet, iOS or Android), and from my research, this is a great solution : http://demo.mobiscroll.com/. (Found in this answer)
If you only target iOS (iPad and iPhone), this code has a better native iOS feel : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

I've been looking for the same thing today and found this pretty good implementation:
http://marinovdh.wordpress.com/2011/09/14/use-the-iphone-uipickerview-control-as-a-selectbox-on-your-website-with-jquery/
There's a zip file with a working demo you can play with. I didn't create this, but I'm going to modify it for a project I'm working on.

'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)

What are the quickest and easiest ways to ensure existing web pages display well on mobile platforms?

The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?

Opera has an option to view pages as through a mobile device. I've found it useful in the past.

I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.

One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.

You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.

It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.

BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.