JavaScript simulation of an iPad | Hacker News Reader

JavaScript simulation of an iPad

alexw.me

138 pointsrafaelc39 comments

This is extremely impressive! It always surprises me how far people can go with web scripting languages like JavaScript and CSS. In fact, it reminds me of the iPhone icons made purely out of CSS[1]

Anyways, for anyone who is interested, the only two apps that work are Safari and Maps.

And for anyone who can't access it, here are the features:

     In the meanwhie, you are welcome to checkout my blog : alexw.me
     You can also fork this at https://github.com/altryne/Ipad-Simulator
     and hack on this and do cool stuff because open souce rulez

     Things that work :

     -Moving Screens left and right with "spring" effect

     -Dock icons have css3 "reflection" ;)

     -All icons have css3 rounded corners and shadow similar to Ipads

     -Search works almost identically to the ios. (using modified jquery live-search)

     -Lock screen effect with returning lock

     -Home button works (exits apps, goes to first page,
      return from sleep mode,exits edit mode)

     -Sleep button puts iPad in sleep mode

     -Edit Mode: click and hold on any app for 2 seconds to enable edit mode

        °Edit mode icons shake in chrome (using css animation)

        °Move apps from place to place in edit mode

        °Move apps to another page

        °Move apps to dock

        °Delete Apps

All he/she needs to add is multitasking and I think the app (or should I say, operating system) is complete!

[1] - http://graphicpeel.com/cssiosicons

> the only two apps that work are Safari and Maps

Coincidentally, those are the only two apps I tried, and they both immediately worked, which caused me to (incorrectly) conclude that everything would work. So much for random sampling.

Not only does Safari work, it uses this user agent: "Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10"

    This is extremely impressive! It always surprises me how 
    far people can go with web scripting languages like
    JavaScript and CSS.

I hate to be the one who pisses on this nice looking project... but you guys do realize that this is not a "simulation of an ipad".

This a couple of jQuery plugins and ~200 LOC of JavaScript to make it look like the iPad interface.

Did anyone actually look at the code?

I'm not even sure I understand what the point of this is.

>but you guys do realize that this is not a "simulation of an ipad"

How is it not? Regardless of the code, doesn't it perfectly emulate some key features of iOS? Understanding the point is another argument...

it's "HE" ;) and I've thought about that, but when I started building this, iOs 4.x was still in beta, and I couldn't install it,maybe in the future :)

Surprisingly enough, it does work on the iPad. It is slow as hell of course, with a real problem of adjusting to the screen size, but it works !

Using Safari on the simulated iPad, you can open the webpage for the simulated iPad :)

(If you're using Chrome, use the middle mouse button to scroll).

Awesome! feature request: please auto-detect the iPad and run it in full-screen mode, without the black border. :)

Yeah i just loaded this in my iPad. Reminds me of browserling.com. We put an iPad in your iPad.

So you can touch while you touch?

It also works on the simulation itself, although again you can't scroll, even to unlock it.

inception :P

I thought this was pretty cool at first, then I checked the useragent of the Safari browser on the simulated iPad:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Now I'm seriously impressed.

thanx, then you would probably like to hear that it tried to remove all flash also, and replace it with the blue lego thingie :)

Brilliant touch, I laughed when I noticed it. Shame that drag and drop doesn't scroll the page.

It's minor, but there is no messaging app on the iPad...

Yeah, he did a great job with this! I saw it on forrst a while back ( http://forrst.com/posts/iPad_simulator_with_jQuery_Css3-CTA ). I love how the browser works.

Slightly similar (framing content inside of images to mimic other environments), I just added a boss key to viewtext.org to view web pages in a window that looks like Visual Studio. I plan on adding other environments soon.

Example:

http://viewtext.org/article?url=http://weblog.raganwald.com/...

Font is wrong, app names are in the wrong case, "slide to unlock" bar/text is way wrong, icons are wrong...

Why would you simulate some things (search, SpringBoard animations) with a very high level of detail, but completely neglect others?

Nothing other than maps works.

Nonsense! The browser running the iPad Simulation works! :)

Well, kinda.

I had thought "under construction" heavy web sites died out in the 90s, I guess I was wrong.

it is impressive but I saw one similar to it a while back here : http://sachleen.com/iPad/ he also has a few other simulations

This seems to be merely a web app that changes a photo when you press different areas of it. It's cool, but no where near as interactive as the alexw.me one IMO.

alarm clock doesn't work. how ironic.

Flash works!

iPad simulator inside Safari inside iPad simulator doesn't work :(

yes it does :)

Doesn't work for me :-/ It shows the unstyled text. Using chrome 9 beta

Remove the www.

oops. Chrome no like.

"Warning: Suspected phishing site!"

Cool. But why?

Why NOT? This is a very cool CSS/Javascript hack, I love it

pretty cool! hope it comes out well

No USB port on this one either!

good job!

very nice

cool app of the day!

Reply on news.ycombinator.com