zooming and draggable

Draggability 

https://draggabilly.desandro.com/

Zooming:

https://stackoverflow.com/questions/17440196/zoom-in-and-zoom-out-functionality-in-jquery-mobile-or-javascript

Looping through objects

Object.keys(myElement).forEach(function(el, index) {
     console.log(index);
 });

How to fit all images within content and yet maintain aspect ratio

Use this css:

img{
 min-width: 100%;
 height: auto;
}

How to debug apk using Chrome

Use type this in the url :

chrome://inspect/#devices

It will debug all devices including emulators eg, nox player and also physical devices connected via usb:

How not to blank out background when JQuery Mobile dialog loads

Good read:

https://a.kabachnik.info/jquery-mobile-transparent-background-for-dialogs.html

Sadly, it doesn't work.

How to close a JQuery Mobile Dialog

How would you close this JQuery Mobile dialog:

Easy, just add this attribute:

data-rel="back"

to the anchor markup.

You can read it here:

http://demos.jquerymobile.com/1.4.5/pages-dialog/

Javascript life cycle events

Nice article on javascript life cycle events:

https://cordova.apache.org/docs/en/latest/cordova/events/events.html

When to use deviceready and how it works.

Getting Started with Framework 7

git clone Framework 7's kitchen sink:

https://github.com/framework7io/framework7/

Open the kitchen sink index.html inside visual studio code and run Live Server

Function inside jquery selector

From:  https://stackoverflow.com/questions/6454631/jquery-newbie-what-does-jqueryfunction-means


All three below are the same:

$(function(){})

jQuery(function(){})

 $(document).ready(function(){})

Ajax: Simplest json call

The simplest of all:

var url = 'http://test.com/php/getnews.php';

  $.getJSON(url, function(result) {
    console.log(result);
    $.each(result, function(i, field) {
      console.log(i + ':' + field.title);
    });
  });

and the corresponding php on the server:

$query = "SELECT * FROM news";
  $rows = array();

  if($result = mysqli_query($link, $query)) {
      while($r = mysqli_fetch_assoc($result)) {
        $rows[] = $r;
      }
   
      header('Content-Type: application/json');
      print json_encode($rows,
      JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_FORCE_OBJECT );
   
  }

Ajax with Cross Domain

Another ajax example:


var url = 'http://test.com/php/getnews.php';


$.ajax({
   type: 'GET',
   url: url,
   crossDomain: true,
   cache: false,
   success: function(result) {

        / / var obj = $.parseJSON(result[0]);
        console.log(result);
 
         $.each(result, function(i, field) {
              console.log(i + ':' + field.title);
         });
     }
});

Ajax Simple Example

$.ajax(
  'https://api.wmata.com/Rail.svc/json/jStations?LineCode=BL&api_key=' + key
)
.done(function(data) {
     console.log(data);
     var stationList = new Array();
     console.log('Length: ' + data.Stations.length);
     for (var x = 0; x < data.Stations.length; x++) {
     console.log(x);
     var name = data.Stations[x].Name;
     var id = data.Stations[x].Code;
     var thisStation = new Station(name, id);
    stationList.push(thisStation);
}

for (var x = 0; x < stationList.length; x++) {
   var out = "<option value='" + stationList[x].stationId + "'>";
   out += stationList[x].stationName;
   out += '</option>';
   document.getElementById('stationListSelector').innerHTML += out;
}
})
.fail(function() {
   alert('error');
});

Ajax Complete Example: Full Headers

$.ajax({
    url: 'https://api.wmata.com/Rail.svc/json/jStations?' + $.param(params), //LineCode=BL
    beforeSend: function(xhrObj) {
      //Request headers
      xhrObj.setRequestHeader('api_key', key);
    },
    type: 'GET',
    // Request body
    data: '{body}'
  })
    .done(function(data) {
      console.log(data);
      var stationList = new Array();
      console.log('Length: ' + data.Stations.length);
      for (var x = 0; x < data.Stations.length; x++) {
        console.log(x);
        var name = data.Stations[x].Name;
        var id = data.Stations[x].Code;
        var thisStation = new Station(name, id);
        stationList.push(thisStation);
      }
      for (var x = 0; x < stationList.length; x++) {
        var out = "<option value='" + stationList[x].stationId + "'>";
        out += stationList[x].stationName;
        out += '</option>';
        document.getElementById('stationListSelector').innerHTML += out;
      }
    })
    .fail(function() {
      alert('error');
    });

Ajax Basic Template

$.ajax('http://www.somewebsite.com')
.done(function(){})
.fail(function(){});

Ajax: Search Pokemon

https://github.com/paulchin/hc-webdev-notes/blob/master/4-jquery/searchpokemon.html

Fetching Blobs from MySQL

Here is the php script to fetch blob from MySQL database:


<?php

  header('Access-Control-Allow-Origin: *');

  $link = mysqli_connect("host","username","passwd", "database");

  mysqli_set_charset($link, "utf8");

  if(mysqli_connect_error()) {
    die("There was an error");
  }

  $query = "SELECT pic FROM news WHERE id=1";

  $rows = array();

  if($result = mysqli_query($link, $query)) {
      while($r = mysqli_fetch_assoc($result)) {
        $rows[] = $r;
      }
      echo '<img src="data:image/jpeg;base64,'.base64_encode( $rows[0]['pic'] ).'"/>';
  }

?>

Proper window size and layout size for Construct 2 Mobile Games

When creating a new mobile game, make sure to select:

That is, the windows size is 16:9  aspect ratio, i.e. windows size: 480 x 854 either landscape or portrait:

Also, be sure to set the Fullscreen in browser to:  Scale inner.

After building the apk files, testing on Samsung Galaxy Tab4 tablet and Redmi Note2, below is the result: