Category Archives: Javascript

javascript, js

How it feels to learn JavaScript in 2016

“I need to display data on a page, not perform Sub Zero’s original MK fatality.” https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.67qnsecr5

Writing static typed style code in dynamic type language

I am not sure who else is doing this but I have a static typed language background and I tend to write code in static type style. Don’t assign different value types to the same variable Let’s see what dynamic type in the simplest form in Python:

variable_a = True
if variable_a:
    variable_a = 'Result'

variable_a = True

if variable_a:

variable_a = 'Result'

While this is perfectly legitimate, but it’s… Read More »

RequireJS + Zurb Foundation

"use strict";

require.config({
    baseUrl: 'static',
    paths: {
        jquery: 'bower_components/jquery/dist/jquery',
        foundation: 'bower_components/foundation/js/foundation',
    },
    shim:
    {
        'foundation': {
            deps: ['jquery']
        },
    }
});

require(['foundation'], function(f){
    $(function(){
        alert(1);
    });
});

"use strict";

require.config({

baseUrl: 'static',

paths: {

jquery: 'bower_components/jquery/dist/jquery',

foundation: 'bower_components/foundation/js/foundation',

shim:

{

'foundation': {

deps: ['jquery']

}

});

require(['foundation'], function(f){

$(function(){

alert(1);

});

1945 Game Development Progress

Finally I have some free time to continue my javascript/mobile game. Tonight I have added a health bar, score and sounds! Also some minor adjustments on the sprites and animations. Check it out at https://bitbucket.org/jameslin/crafty-1945-reloaded

Quick update about my game project

It’s been about a month since I started the project and I encountered some Math difficulties. But I managed to ask around and have it solved. So now the enemies will aim at the player and also they moves too! Head to http://1945.lin.net.nz to check it out!

Javascript Snippet: Play next video

There is a requirement from one of my project to insert video ads before the actual video gets played. There are ways to do it, one is to use JWPlayer and OVA plugin, or the other way is to write your own javascript to control the playback. In the following demo, shows how you can… Read More »

Javascript game project test run on iOS

I have quite a few goals (ok, things) I want to achieve before I die, couple of those are writing an iOS app and writing a game. I have had an attempt to write a 1945 style vertical scroll shooting game in python using pygames, and I cannot remember why I stopped and the source… Read More »

NZ Yellow website, written in Django, by us, running live

How to extend JQuery UI plugin

The existing dialog plugin doesn’t have an option to close dialog on clicking modal overlay, how to add an option to provide the functionality?

(function($){
   var _init = $.ui.dialog.prototype._init;
   $.ui.dialog.prototype._init = function(){
        var self = this;
        _init.apply(this,arguments);
        $('.ui-widget-overlay').live('click', function(){
            if (self.options['overlay_close']){
                self.destroy();
            }
        });
    }
})($);

(function($){

var _init = $.ui.dialog.prototype._init;

$.ui.dialog.prototype._init = function(){

var self = this;

_init.apply(this,arguments);

$('.ui-widget-overlay').live('click', function(){

if (self.options['overlay_close']){

self.destroy();

}

});

}

})($);

Google Map v3 OverlayView Code Sample

Today I was writing some google map javascripts and had to implement the icons via OverlayView class, so I think I might share it in case anyone need some sample code.

//"gmap" is an instance of the google map

//creating the class to exntend the google map OverlayView class
function MapLocationIcon(id,lat,lng,title,icon_class){
    this.lat = lat;
    this.lng = lng;
    this.title = title; //eg. A,B,C.D
    this.icon_class= icon_class; //the position of the spritesheet for the icon background
    this.pos = new google.maps.LatLng(lat,lng);
}

//make a copy of the OverlayView to extend it
MapLocationIcon.prototype = new google.maps.OverlayView();
MapLocationIcon.prototype.onRemove= function(){}

//prepare the overlay with DOM
MapLocationIcon.prototype.onAdd= function(){
    div = document.createElement('DIV');
    $(div).addClass('map_icon').addClass(this.icon_class);
    $(div).text(this.title);
    $(div).click(function(){
    });
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
}

//set position
MapLocationIcon.prototype.draw = function(){
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    panes.overlayImage.style.left = position.x + 'px';
    panes.overlayImage.style.top = position.y - 30 + 'px';
}

//to use it
var icon = new MapLocationIcon('id', -34.123,78.999, 'A', 'gold');
icon.setMap(gmap);

//"gmap" is an instance of the google map

//creating the class to exntend the google map OverlayView class

function MapLocationIcon(id,lat,lng,title,icon_class){

this.lat = lat;

this.lng = lng;

this.title = title; //eg. A,B,C.D

this.icon_class= icon_class; //the position of the spritesheet for the icon background

this.pos = new google.maps.LatLng(lat,lng);

}

//make a copy of the OverlayView to extend it

MapLocationIcon.prototype = new google.maps.OverlayView();

MapLocationIcon.prototype.onRemove= function(){}

//prepare the overlay with DOM

MapLocationIcon.prototype.onAdd= function(){

div = document.createElement('DIV');

$(div).addClass('map_icon').addClass(this.icon_class);

$(div).text(this.title);

$(div).click(function(){

});

var panes = this.getPanes();

panes.overlayImage.appendChild(div);

}

//set position

MapLocationIcon.prototype.draw = function(){

var overlayProjection = this.getProjection();

var position = overlayProjection.fromLatLngToDivPixel(this.pos);

var panes = this.getPanes();

panes.overlayImage.style.left = position.x + 'px';

panes.overlayImage.style.top = position.y - 30 + 'px';

}

//to use it

var icon = new MapLocationIcon('id', -34.123,78.999, 'A', 'gold');

icon.setMap(gmap);

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this: