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.

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

I opened this blog, to share my thoughts on different things I come accross in my field.

I’m a web-designer and web-developer for a year now.

I do mostly PHP and JavaScript (usually mootools), also I really love everything that has to with mark-up (xHTML and CSS)

Everyday I learn something new, and this will be the place to share my newly acquired knowledge.