A little background

I’ve thought about creating the iPad simulator shortly after I bought my iPad. I was fascinated by the UI and wanted to see if I can recreate it.

This isn’t the first online simulator I’ve built, before this, was a Nokia n97 simulator, also built with JS + CSS  (http://nokian97.co.il)

I’ve uploaded the iPad simulator a while ago, started playing with it, adding apps  (google maps, safari, photos etc’) , and I was getting 5 hits daily (most of them me from work)

Forrst

I joined Forrst and decided to share it with the forrsters , and I got amazing feedback. And people there told me they want to hack on it, so I’ve released the code on github.

W3c Israel

Some weeks after, I went to a W3C Israel meeting on web app development and after a short hackaton (results of which you can see  here and fork on github ) I’ve showed the guys there the iPad simulator among other things. They told me I have to publish it somewhere. I’ve sent an email to ajaxians@ajaxian.com and went to sleep.

Morning After

I wake up, and I see that someone mentioned me on twitter (I’m @altryne) and he talked about my iPad simulator. I went and checked google analytics and I was amazed to see that while I was sleeping more then 2000 unique hits arrived at my site.

Twitter

Turns out my site was a hit on twitter, with guys like Dylan Schiemann (@dylans), Jesse Newhart (@JesseNewhart),Dion Almaer (@dalmaer),Cameron Moll (@cameronmoll) and a lot more – thanx a lot guys I’m glad you like it.

Websites and blogs

Like I said, I never expected this kind of embrace by the community, and I certainly was surprised to see my link in the guardian tech blog and on Developer.Yahoo.com tech blog and I was proud.

Also I was featured on habrahabr.ru , techweb.com.cn, Ycombinator, macmagazine.com.br and event 1 youtube video!

What’s next?

Well I read all the comments I could find, including the trolling and I have a ton of stuff to do.

One thing I was thinking about, is showing a web demo of some iPad applications, and ask developers to provides those demo’s, because screenshots are too static

If your’e an iPad app developer and want to see your app in the simulator, contact me : alex [at]  alexw.me

I’m also gonna finish my photos app and it’s gonna be awesome! Stay tuned.

A little history about browser rendering. The are 3 browser events that happen depending on stuff you change dynamically with JS in DOM.

1. restyle – recalculation of style for affected DOM element.
2. reflow – recalculation of flow and all the Elements that are affected by your change.
3. repaint /redraw - re-rendering of the element in it’s new position, style, whatever you changed.

These “events” happend each time you change something. I’m going to talk about repaint/redraw today.

When you animate a div for instance, each step in the animation, each frame if you will, fires a repaint function in the browser, that makes sense,  as the browser has to show us the updated position/style/whatever of the element.

You would suspect that a browser only repaints the individual animated element, and maybe its surrounding and dependent elements. And you would be right.

So why does some of your animation on the more heavy sites stugger in firefox and IE and Opera when they work like a charm in webkit browsers? Faster browser? Faster Rendering Engine?

All these are a factor, but there’s a hidden factor that you didn’t know about.

float:left;

“OMG? WTF? float? what’s float has to do with animation ??? Alex stop beating around and explain this to me” you must be saying.

It turns out that whenever you animate a div on a page, even if it’s position:relative, that if one of it’s ancestors has a floating (left or right), firefox/opera/ie8 fire a repaint function on ALL THE ANCESTORS content. Not Only the animated div.

So if for instance you have a tiny div that animates every 2 seconds, for every frame of that animation, firefox/opera/ie8 repaint the entire DOM tree up until the floated ancestor.

I don’t know wheather it’s a bug, or this is just how it’s suppose to be. But facts are facts.

I’ve created a small jsfiddle in order to test this.

http://fiddle.jshell.net/JeGKR/10/show/light/

The css3 stuff is there only to make the content heavy so you really notice the animation changes.

Run the animation with task manger open. Then click “add float:left” and see the difference. If you have a fast computer, click on “add content” a couple of times.

Workarounds :

There’s one workaround I’ve read about and it’s just disabling float:left on the ancestors up until the body Element. This won’t be applicable in many many cases I’m afraid.

I’ve yet to find another solution beside putting all the animated elements in a non floated container and positioning them accordingly.

Notes : if you want to see the redraw regions in firefox by yourself, you can download and install  firebug paint events

Credits : This post is a partial translation/adoption from Sergey Chikuyonok – all credits on this find go to him.

We have a very heavy Ajax application on one of our sites. It reloads block of html on the site every 5 seconds or every user click, so obviously it’s intense.

I was approached by our QA and he told me that he’s computer freezes after some time the site is running.

And I started to investigate. Turns out we haven’t been collecting our garbage ourselves, and the “good” browsers took care of that for us.

Not IE though. IE was stuck after some 5-6 requests, and would just come to a halt on page.unload()

Manual garbage collecting to the rescue.

_temp = $.ajax(/* get loads of html data from ajax here*/);
_temp = _temp.replace(/*apply needed transformations before outputing code to the page*/)
$('#updated_div').html(_temp);
//garbage collecting - very important
delete _temp;

As you can see, one small line of code can help so much to your heavy Ajax application in browsers like IE.

SEE DEMO HERE

Step one : xHtml markup

I decided to use the most basic structure. 2 wrappers next to each other, one containing the actual tabs, the other the relative content to each tab. Both elements(tabs and content) receive the ‘active’ class when their are in fact active.

<ul id="tabz">
<li class="tab active">Tab1</li>
<li class="tab ">Tab2</li>
<li class="tab ">Tab3</li>
</ul>
<div id="tabz_cont">
<div class="cont active">Content 1</div>
<div class="cont">Content 2</div>
<div class="cont">
<h1>some other content</h1>
Content 1
</div>
</div>

Step two : Css

I used a grid system (http://960.gs) to position and give widths to all the elements, beside that, I used some css3 techniques to beatify my tabs (rounded corners and shadow).
The actual css you use, isn’t important to the work of the tabz.

Step three : JAVASCRIPT

This is the reason why you are reading this, right? here you go:

//Tabz code - apply event to the tabs elements and your done
$('#tabz li').live('click',function(){
_index = $(this).parent().children().index($(this));
$(this).addClass('active').siblings().removeClass('active');
$('.cont').removeClass('active').eq(_index).addClass('active');
});

I select the tabs and assign them a click event listener, with the live() function.

Then I create an _index variable, that will tel me the index of the tab inside it’s parent.

By this _index I can now show the relevant content in the content div(the tabs and their content have to be the same index in their respective containers)

That’s it. Hope you can use this. If you do, don’t forget to comment here and show me your work.

I’s a consept website, in flash, I created some time ago and didn’t finish.

It has a couple if nifty things to play with (draggable birds, media buttons in form of floating balloons,a very unique panoramic background)

And I decided to port this whole thing into JS with MooTools and it’s FX.Scroll function.

So in the next couple of days I will be posting the results here and the code also.

Cheerz

Ok so i’m working on this site at work, and our creative designers decided it should have a news ticker in Javascipt. A fade-in/out kind of thing.

I used Mootools (of course) to write a simple script for this. And then I noticed something very strange. While in transition, both in Firefox and IE (6 and 7) the text got Garbled and rendered strangely.

Problem :

I then noticed this deal on another websites :

getstisfaction.com

Preview :

I tried to recreate this , and I made it happen only in IE for some reason.

FIX :

All that needs to be done, is to add background color to the absolute positioned elements that get faded in and out…

like so :

.fade_div{
position:absolute;
background-color:#fff;
}