SyntaxScrewer's Blog

August 5, 2013

Infinite Scrolling – iPad Web App

Filed under: Uncategorized — geekymaira @ 12:11 pm

Hey Guys,

I came across a splendid library called Infinity.js that allows you to build infinite
scrollable lists in your web apps.

Basically, what the library does is dynamically add/remove items (called ListItems) from
the list (called ListView). The documentation explains what the library does very well but
I found a lack of simple examples.

So here’s a simple implementation using iScroll.js with a lot of comments!

But before the code, checkout these references:
Checkout the library here
The annotated source code is very helpful in understanding what is happening behind the scenes. Check it out.
A helpful concise explanation :

Without further ado, here’s my simple example.

     /*Style needed for iScroll*/
        #scrollerWrapper {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 48px;
            left: 0;
            width: 100%;
            background: #ccc;
            overflow: hidden;

        /* Style needed for iScroll*/
        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;

        /*Style for the list container*/
        #myList {
            width: 300px;
            height: 400px;
            border: 5px solid red;
            position: relative;

        /* I don't like page margins 🙂 */
        body {
            margin: 0;
<div id="myList">
    <div id="scrollerWrapper">
        <div id="scroller">
            <div id="infinityWrapper">
        $(function () {
            var counter = 0;
            var TOTAL_RECORDS = 500; // Useful for a bound check.
            //How many pages should infinity build per screen? Don't know what a page is? Checkout the references above.
            infinity.config.PAGE_TO_SCREEN_RATIO = 3;
            //Get a reference to our wrapper.
            var $el = $('#infinityWrapper');
            //Build the infinity list view on the wrapper.
            var listView = new infinity.ListView($el);
            //Add a data property "listView" to the wrapper element (ie. #infinityWrapper)
            $($el).data('listView', listView);
            //A boolean flag.
            var updateScheduled = false;
            var myScroll;

            /* ================== ISCROLL STUFF =====================*/
            //Disable touchmove on document. Let iScroll catch the events.
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            //Instantiate iscroll and pass the wrapper div to it.
            //iScroll works with a nested div setup. Check out its documentation.
            //It is not necessary to use iScroll. But I want my example to work on iOS!
            //In case myScroll returns null/undefined for you after this statement.
            //Checkout the iscroll example source:
            myScroll = new IScroll('#scrollerWrapper');

            //The BOMB!: This method creates n item rows.
            //For an infinite scrolling list, you would ideally keep calling bomb on each scrollEnd.
            //In this example, I just call it once to create 100 elements.
            //Must refresh the iScroll after adding elements.
            //NOTE: In case you plan to bomb on each scrollEnd, remember to refresh the iscroll too.

            function bomb(num) {
                var index;
                if (num &lt;= 0) return;
                for (index = 0; index &lt; num; index++) {
                    //The row() method is a helper method which creates a new div and appends it to our listView.

            function row() {
                //Just keeping a count. 
                //Create a new div element and add the word &quot;item&quot; as text in it.
                var newContent = $('<div></div>');
                newContent.html("item : " + counter);
                //Append the new div to the listView.
                //NOTE: This append is different from the jquery append method.


Archiving Cordova/Phonegap 2.9 Project – file not found: /Users/…/../libCordova.a

Filed under: iOS,Mobile — geekymaira @ 9:40 am

Hey folks,

So recently we bumped into a weird issue while archiving a cordova 2.9 web project using xcode 4.6.3.
The stubborn error read as follows:

file not found: /Users/admin/…/libCordova.a

It was pretty apparent that it was some path issue. Even libCordova.a showed up highlighted in red.
After searching through a LOT of stackoverflow posts, we finally found a solution.

Follow these steps to fix this problem:

1. Go to project settings and Build Tab. Search for “Other Linker Flags”
2. Double click on the linker flags for Release and Change “$(TARGET_BUILD_DIR)/libCordova.a” to “$(BUILT_PRODUCTS_DIR)/libCordova.a”
3. Do the same for Debug
4. Clean and build archive again



October 23, 2012

Filed under: Javascript,Web — geekymaira @ 12:47 pm
Tags: , , , , , ,


So I’ve been struggling to get an example going using Backbone Relational and Require.js.
Lack of documentation and simple examples on the web made it really difficult for me to wrap my head around the implementation.
Moreover, Require.js was having scoping issues. Anyway, it works now and I can finally leverage this fantastic Backbone plugin 🙂 .

A few things to keep in mind

1) Make sure you have the updated version of Underscore.js
2) Make sure you have the updated version of Backbone
3) Make sure you have the updated version of Backbone-Relational
4) Test your example on a web server! install xampp, wamp or whateverYouWant! web browser have security restrictions to directly ajax local files.

The example I have below works with 1 Cinema JSON file which has a collection of movie objects inside it.
Here’s the JSON

        "name":"Cinema 1",
                "name":"Bag It"
                "name":"Lost Boy: The Next Chapter"

                "name":"To Live &amp; Ride in L.A."


Next comes the MovieModel.js This is a simple extension of the Backbone.RelationalModel

define([],function () {
       var MovieModel = Backbone.RelationalModel.extend({
            idAttribute: 'movieID'
        return MovieModel;

Now the CinemaModel.js. This is where the relation with MovieModel is specified. The Backbone Relational documentation
shows that the “relatedModel” attribute should be set to the Model object. The name of this model object is shown to
be in single quotes. I think scoping issues were happening here. The MovieModel for me was being passed by Require.js
using define up top. However, when I had “relatedModel”:”MovieModel”, it didn’t find the Model in scope. So the solution
was to remove the quotes and have it set like “relatedModel”:MovieModel. Since we’re getting a reference to the MovieModel
object using require.js define() anyway.

define(['models/MovieModel','collections/MoviesCollection'],function (MovieModelClass,MoviesCollection) {
        var CinemaModel = Backbone.RelationalModel.extend({
            relations: [
                    type: Backbone.HasMany,
                    key: "movies",
//Scoping issue happening here. The documentation for Backbone-Relational has this in quotes!
                    //TODO: Figure out what this attribute does!

        return CinemaModel;

Finally, the implementation:

define(['models/CinemaModel'], function (CinemaModel) {

    $(function () {

    function init() {

        /*Instantiating the CinemaModel*/
       cinemaModel = new CinemaModel();
        cinemaModel.fetch({success:function (collection,response) {
            console.log("Woohooo!: Fetch Cinema Model!");
            console.log ("Relational Model : " + cinemaModel.get('movies').at(0).get('name'));
            console.log ("Reverse Relation : " + cinemaModel.get('movies').at(0).get('inCinema').get('name'));
            error:function (collection, response) {
                console.log("Error: Fetch Cinema Collection!");



That’s it!! It works :). Next! I’m going to try and throw collections into the mix and see how I can have a cinemaCollection
with each collection model holding multiple MovieModel objects.

Should be fun 🙂


May 2, 2012

PhoneGap – iPad – Disable app container scrolling

Filed under: iOS,Mobile,Uncategorized — geekymaira @ 12:42 am
Tags: , , , , , ,


A common issue that one might face while building html/js phonegap applications for the iPad is that
when the application launches on the device, one can actually scroll it up/down and left/right. The scrolling
reveals the fact that phonegap loads all of it up in a webview container, which is not the best thing to
reveal to the end user.

The good thing is , that there is a pretty easy and straightforward fix for it.

The first thing to do is to add a few meta tags to your page.
Note: The 3rd one might affect the scrolling and the size. Other one’s can be ignored.
Are more useful if you’re running the app in device browser. Still no harm throwing em
in there!

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name = "viewport" content = "user-scalable=no,width=device-width" />

Next in the tag add the following script block

<script type="text/javascript">
 document.ontouchmove = function(e){

That should do it 🙂


May 1, 2012

iPad – Mobile Safari – Resizes High Resolution Images to fit the browser window size.

Filed under: iOS — geekymaira @ 5:32 pm
Tags: , , , , , , ,

Hey guys,

I ran into an issue with Mobile Safari and its quirky behavior which forces a re size of a high resolution image.
The issue occurs even when doing any of the following simple things.

1) Load up the image as the body background
2) Load up the image as a div background
3) Load up the image in an img tag in the body.

In all the above, if the image resolution > that the browser’s it resizes the image to fit in.
In cases of the div/img, it resizes the div/img containers which cause the background-image/src to size automatically.

I kept searching for solutions online and found other important information pertaining to iPad web development
in the Apple Docs.

Lot of useful information there. I STRONGLY recommend that everyone goes through it.

The parts relevant to this post were found here :
Optimizing Content for Ipad Development – Apple Docs

Anyway, coming quickly to the solution – it was pretty straightforward. I’ll explain what worked for the body and the div background images.

Ok so this is how we had the body setup first (which didn’t work)

background: URL("media/test.jpg") no-repeat;

The problem with the above is that the image does not load up in its original size. Safari Mobile scales it down.

The solution is to give the body a background-size in the CSS which equals the size of the image.

background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;

The following code creates issues for the background image on the div.

background: URL("media/test.jpg") no-repeat;
<div id="img"></div>

The issue with the above is the same – The background image resizes.
The problem here doesn’t get fixed by applying a background-size to the css.
You also need to set the widht and height to a 100% each!!

background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
<div id="img"></div>

The above fixes the div too…
But another problem arises… What if you don’t want the div to be a 100% and a 100% width? What if you want to show only a part of the background image?
Like in case you’re loading up or animating a spritesheet? How does all of that work then ?

Well, you take a container div which houses your image div. And on the container div set the desired size you want.
Everything then falls in place.

Here’s how :

background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
<div id="imgHolder">
	<div id="img">

Hope that helps!! I know its going to serve me as a reference next time I get stuck with iPad!



March 16, 2012

Javascript : Unable to load up image files locally – Firefox / Chrome

Filed under: Browsers,Javascript — geekymaira @ 1:39 pm


So I found out that for some reason Firefox / Chrome do not allow Javascript to load up local files from the disk.
This is some sort of security restriction.  Maybe its the same with Safari but I haven’t found out a solution for that yet.

Solution (Chrome)  :  For local files to work on Chrome, it has to be started with--allow-file-access-from-files command line flag.
Solution (Firefox)   : For Firefox, there is a similar parameter security.fileuri.strict_origin_policy accessible via about:config.

reference :

Hope this helps!



October 24, 2011

Linking fl.* package in FDT

Filed under: ActionScript 3.0,Flash — geekymaira @ 4:22 pm

Hello fellows,

This is a rather simple post. It shows two methods in which you can use the fl.* package in your NON Flash IDE.

Method 1:

Method 2:

Hope this works.



October 11, 2011

Fast Masked! Scrolling! MovieClips – iPAD

Filed under: Mobile — geekymaira @ 11:58 am

Hello people,

I was asked to develop a dynamic 360 degree product viewer for the iPAD using a PNG sequence. I created the component but it was slugging on the device. I wasn’t getting the 60FPS that I should
have. After brainstorming with a few colleagues, I came across a new  Greensock API that did the job BRILLIANTLY. They claim upto 1000% smoother animations.

It’s called BlitMask.
Here’s the link

Another method to do the same thing is using
Here’s an example by Lee BrimeLow  using the above.

Other interesting links for Spriting/Blitting/Smooth Scrolling





September 12, 2011

How the hell do I deselect a RadioButton using code in as3?

Filed under: ActionScript 3.0 — geekymaira @ 9:08 am


So I found the need to use the RadioButton component the other day in one of the projects I was building.
I made it a part of the RadioButtonGroup and thus only one out of them could be selected at a time.

I wanted to reset all the radio buttons in a group once the group lost focus. ie. Wanted the icon to be blank.
I tried using btnInstance.selected=false. But that didn’t work.

After hunting for a solution on the internet for a while I came across this little trick that works fabulously well.

1) Just create another radio button and assign it to the same group.
2) When you want to set the selection of any of your groups radio buttons to false, just set the selected property of the new radio button added in step 1 to true!
3) Since this is a part of the RadioButtonGroup which means only 1 radiobutton can be active at all times, it deactivates all the other ones.

Short & Sweet 🙂


August 19, 2011

SWF in a SWF in a SWF SHELL = Exception fault: TypeError: Error #1034: Type Coercion failed:

Filed under: ActionScript 3.0,Flash — geekymaira @ 2:59 pm

Hello folks!!

I got stuck with this bugging bug!! and I just HAD to share it.
So, I had a Main SWF that loaded up a MapClass swf and a SHELL that loaded up the Main swf. Everything worked when I debugged the Main SWF alone. But as soon as I debugged the shell, I got the following error.

Exception fault: TypeError: Error #1034: Type Coercion failed: cannot convert a.b.c::MapEvent@c899eb1 to a.b.c.MapEvent.
	at com.iomedia.components::MapDocumentClass/onMapButtonClicked()
My Project structure was

        MapClass.fla   //SRC path set as   "../../src"   DOCUMENT CLASS: a.b.c.MapDocumentClass

Basically, I had 3 levels of nesting of swf's.

When I compiled the file it automatically compiled the event class and had it ready for the Erroneous Swf to use. So everything was peachy!
However, when I compiled the SHELL SWF, it didn't compile the Event Class because there was no reference to it in the class.

The solution :

1) Create  a dummy variable for the event in the class
2) Import the Event Class so that it gets compiled.

Everything worked after that!!
Next Page »

Create a free website or blog at