Window orientation detection

Ref

I think the following codes would be useful when I want to make iDangerous swiper responsive to toggle mode between vertical and horizontal.

CSS3 :

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

Sorting array of strings & objects

Ref: http://stackoverflow.com/questions/6712034/sort-array-by-firstname-alphabetically-in-javascript

[array].sort(function(a, b){
 var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase()
 if (nameA < nameB) //sort string ascending
  return -1 
 if (nameA > nameB)
  return 1
 return 0 //default return value (no sorting)
});

CDN for Useful JS and CSS library

Some useful JS and CSS libaries I use a lot.

CSS:

• Bootstrap

• FontAwesome
• http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Javascript:

• jQuery
• 
  
• jQuery Mobile
• 
  
• Dygraphs
• 
  
• Angular JS
• 
  
• Angular UI
• 
  
• Angular Material

indexDB Polyfill

localForage

 A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB. 

indexedDB Wrapper

/*****************************************************************************
Ref:
http://www.dexie.org/

Starting point:
http://rawgit.com/dfahlander/Dexie.js/master/samples/codeproject-article/DexieAlgorithmsSamples.html

http://blog.nparashuram.com/2012/10/indexeddb-example-on-cordova-phonegap_12.html
http://nparashuram.com/IndexedDBShim/

    
    
*****************************************************************************/
//
// App global database instance and schema
//
        var db = new Dexie("MyDB");
        db.version(1).stores({
            friends: "++id,name,shoeSize"
        });
        db.open();
//
// Populate some data
//
        function populateSomeData() {
            log("Populating some data", "heading");
            return db.transaction("rw", db.friends, function () {  // objectStore??
                db.friends.clear();
                db.friends.add({ name: "David", shoeSize: 43 });
                db.friends.add({ name: "Ylva", shoeSize: 37 });
                db.friends.add({ name: "Jon", shoeSize: 44 });
                db.friends.add({ name: "Måns", shoeSize: 42 });
                db.friends.add({ name: "Daniel", shoeSize: 39 });
                db.friends.add({ name: "Nils", shoeSize: 45 });
                db.friends.add({ name: "Zlatan", shoeSize: 47 });
                // Log data from DB:
                db.friends.orderBy('name').each(function (friend) {
                    log(JSON.stringify(friend));
                });
            }).catch(function (e) {
                log(e, "error");
            });
        }

// Query Example

db.friends.where('name').equalsIgnoreCase('david')
                             .each(function (friend) {
                                 log(JSON.stringify(friend));
                             });

//  Modify
db.friends.where('name').equalsIgnoreCase('david')   // query (read) only
                             .each(function (friend) {
                                 log(JSON.stringify(friend));
                             });


db.transaction("rw", db.friends, function () { // read (query) & modify    
    db.friends.where("name").equalsIgnoreCase('david').modify({shoeSize: 100});
})
 

FileSystem API

• Ref: HTML5: FileSystem API
• Outdated. But tells you how to view FileSystem in Chrome DevTool.

• Application: Building an HTML5 Text Editor with the FileSystem APIs

• API: Filer.js

• Another ref: FileSystem API
• Show you how to handle errors
• An overview to off-line APP

html table to CSV file

Ref: http://andrew-b.com/view/article/44

//Get row data
for (var j = 1; j < rowLength; j++) {
    for (var k = 0; k < colLength; k++) {
        tableString += table.rows[j].cells[k].innerHTML.split(",").join("") + ",";
    }
    tableString += "\r\n";
}

//Save file
if (navigator.appName == "Microsoft Internet Explorer") {
    //Optional: If you run into delimiter issues (where the commas are not interpreted and all data is one cell), then use this line to manually specify the delimeter
     tableString = 'sep=,\r\n' + tableString;

     myFrame.document.open("text/html", "replace");
     myFrame.document.write(tableString);
     myFrame.document.close();
     myFrame.focus();
     myFrame.document.execCommand('SaveAs', true, 'data.csv');
 } else {
    csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(tableString);
     $(event.target).attr({
         'href': csvData,
         'target': '_blank',
         'download': 'my_data.csv'
     });
 }

html table with fixed header

# Operation principles: 
ref: http://stackoverflow.com/questions/11499973/how-to-fixed-table-header-no-jquery


# Plug-in: 
ref: https://github.com/jmosbech/StickyTableHeaders 


 # Plug-in 2: with throttle.js for smoother scroll 
to-do: beautify scroller 
ref: http://tympanus.net/Tutorials/StickyTableHeaders/index3.html 


 # Plug-in doesn't work for me 
ref: http://www.fixedheadertable.com/

jQuery Table Manipulations

• Add  to table

Ans. 1: prepend

Ref: http://stackoverflow.com/questions/23291138/add-thead-and-insert-first-tr-from-tbody-for-parent-table-only

$("document").ready( function() {
    $('table').each(function(){
    $(this).prepend('')
    $(this).find('thead').append($(this).find("tr:eq(0)"));
})});

Ans. 2: append & appendTo

Ref: http://stackoverflow.com/questions/12781886/jquery-add-thead-and-add-tbody

var myTable = jQuery("#myTable");
var thead = myTable.find("thead");
var thRows =  myTable.find("tr:has(th)");

if (thead.length===0){  //if there is no thead element, add one.
    thead = jQuery("").appendTo(myTable);    
}

var copy = thRows.clone(true).appendTo("thead");
thRows.remove();

Download files and store them locally with Phonegap/jQuery Mobile Android and iOS Apps

Ref: 

• stackoverflow
• MDN: Local File System
• http://stackoverflow.com/questions/12748920/simple-example-with-window-requestfilesystem-function
• HTML5 Rocks

If you're calling requestFileSystem() for the first time, new storage is created for your app. It's important to remember that this file system is sandboxed, meaning one web app cannot access another app's files. This also means you cannot read/write files to an arbitrary folder on the user's hard drive (for example My Pictures, My Documents, etc.).