ilike2Flash

Drop down menu with ReactJS

noreply@blogger.com (iliketo) — Sun, 07 Feb 2016 22:15:00 +0000

I will be showing three code examples of drop down menus with ReactJS.

The first example will be pure static content. The drop down menu items will be loaded and rendered at run time. I have used the ‘isOpen’ state variable to toggle the dropdown menu content from visible to invisible upon button click.


import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isOpen:false
    };
    this.onDropDown = this.onDropDown.bind(this);
  }

  onDropDown(){
    this.setState({isOpen: !this.state.isOpen});
  }

  render() {
    return (
      <div className="dropdown">
        <button onClick={this.onDropDown}>Drop down example</button>
        <div className="dropdown-content" style={{display:(this.state.isOpen)? "block":"none"}}>
          <ul>
            <li>example 1</li>
            <li>example 2</li>
            <li>example 3</li>
          </ul>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

The second example is similar to the first one, however I will load the drop down items dynamically from state. I have added a ’dropItems’ array to the state to hold the contents of the drop down items. Note, I have used the javascript map() function to loop through the items in the ’dropItems’ array. A few things to remember when using the map() function with JSX: we have to wrap the code within a set of curly braces; the values to be rendered will also have to be wrapped in a set of curly braces and a special key attribute will need to be included. The key attribute helps React determine if items have be added, changed or removed. An error message will appear if the key attribute is not included.


import React, { Component } from 'react';
import { render } from 'react-dom';


class App extends Component {
  constructor() {
    super();
    this.state = {
      isOpen:false,
      dropItems:[
        'example 1',
        'example 2',
        'example 3'
      ]
    };
    this.onDropDown = this.onDropDown.bind(this);
  }

  onDropDown(){
    this.setState({isOpen: !this.state.isOpen});
  }

  render() {
    return (
      <div className="dropdown">
        <button onClick={this.onDropDown}>Drop down example</button>
        <div className="dropdown-content" style={{display:(this.state.isOpen)? "block":"none"}}>
          <ul>
          {
            this.state.dropItems.map(item => {
               return <li key={item}>{item}</li> 
            })
          }  
          </ul>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Finally, the last example will load the drop down menu items dynamically from an external source. I will be basing this example on my previous post: Loading external data in ReactJS. I will again be using the random Chunk Norris joke generator API with the Axios library. The joke API currently has over 500 jokes, I have limited the number of jokes to appear to only 5.


import React, { Component } from 'react';
import { render } from 'react-dom';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isOpen:false,
      dropItems:[]
    };
    this.onDropDown = this.onDropDown.bind(this);
  }

  onDropDown(){
    this.setState({isOpen: !this.state.isOpen});
  }

  componentDidMount(){
    axios.get("https://api.icndb.com/jokes").then((result) => {
        this.setState({dropItems: result.data.value});
    });
  }

  render() {
    return (
      <div className="dropdown">
        <button onClick={this.onDropDown}>Drop down example</button>
        <div className="dropdown-content" style={{display:(this.state.isOpen)? "block":"none"}}>
          <ul>
          {
            this.state.dropItems.map((item, index) => {
               if(index < 5){
                return <li key={item.id}>{item.joke}</li> 
               }
            })
          }  
          </ul>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Loading external data in ReactJS

noreply@blogger.com (iliketo) — Fri, 22 Jan 2016 22:10:00 +0000

A quick example of how to load an external JSON file in React. This post assumes you have ReactJS already set up. I will be using Axios to load the external data, but you can use any library you wish. Axios is a promise-style Ajax tool with similar API to jquery.

For the external JSON data I have used the api from ’icndb’ which will load a JSON containing a Chuck Norris joke.

var React = require('react');
var ReactDOM = require('react-dom’);
var axios = require('axios');

var App = React.createClass({

    getInitialState: function() {
        return {joke:""}
    },
    
    componentDidMount: function() {
        var _this = this;
        axios.get("https://api.icndb.com/jokes/random").then(function(result) {
            _this.setState({joke: result.data.value.joke});
        });
    },

    render: function() {
        return <p>{this.state.joke}</p>
    }
});

ReactDOM.render(<App/>, document.getElementById('root'));

Here is the same example written in ES6.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      joke:""
    }
  }

  componentDidMount(){
    axios.get("https://api.icndb.com/jokes/random").then((result) => {
        this.setState({joke: result.data.value.joke});
    });
  }

  render() {
      return <p>{this.state.joke}</p>
  }
}

Note, this is just purely an example of loading external data in React. It is generally bad practice to mix views with data fetching or manipulation - the two should stay separate.

JSX Gotchas

noreply@blogger.com (iliketo) — Sat, 02 Jan 2016 16:10:00 +0000

When working with JSX and React there are a few things to be aware. This list will avoid any headaches when trying to debug your application or website.

1. ClassName

In JSX any html tags with ‘class’ will have to be renamed to ‘className’. This is because ‘class’ is a reserved word in Javascript.

2. Self closing tags

All tags in JSX must be closed with a self closing tag, <Example /> or a corresponding closing tag, </Example>.

3. Inline Styles

Inline styles are not strings like standard HTML, they are Objects. The objects’s styles must be camel case, and the value as a string. Any vendor prefixes must be capital case.


var styles = {
textAlign:’center’,
color:’red’
}

<div style={styles}></div>

4. Render nested

The render method can only return one node. Therefore if you have more than one component inside the render method, it must be wrapped in a containing div, span or component.


var wrapper = React.createClass({
  render:function(){
    return (
      <div>
        <div></div>
        <div></div>
      </div>
    )
  }
});

5. Always use a key attribute for list components

When you are rendering a list of tags then you will need to use a key attribute.


var listExample = React.createClass({
  render:function(){
    <ul>
    {this.props.items.map(function(i){
      return <li key={i}>{items.name}</li>
    })}
    </ul>
 }
});

ReactJS simple example

noreply@blogger.com (iliketo) — Wed, 30 Dec 2015 22:55:00 +0000

The best way to learn a new Javascript library is to write a simple bare-bones example. In this post I have a written a simple ReactJS example that displays the classic ‘Hello World’ message.

Firstly, we have our basic HTML5 structure including a div tag with the id ‘container’. The external Javascript files included are: the React library itself, and the React-dom library which provides the DOM specific methods. The empty script tag is where we will add the ReactJS code.


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React Example</title>
</head>
<body>
<div id=“container”></div>
<script src="https://fb.me/react.js"></script>
<script src="https://fb.me/react-dom.js"></script>

<script>
//Code goes here
</script>

</body>
</html>

Inside of the empty script tag add the following code below. React is built on the idea of components. Essential everything in a React app is part of a component. Our main component in the example is the App component.

A component is created using the createClass method. Every React component must have a render() method which states the HTML to be added to the page. The ReactDOM render() method adds the content from the App component to the div with the id ‘container’. The first argument is the App component and the second argument is a reference to the div.


var App = React.createClass({
  render:function(){
    return (
      <div>
      <p>Hello World</p>
      </div>
    );
  }
});
ReactDOM.render(<App />, document.getElementById('container'));

You may have noticed the HTML content is inside the Javascript code. This is not official HTML, but is a new React concept called JSX which is basically a Javascript extension that allows you to write XML style tags. At runtime the HTML and Javascript get added to the DOM together.

We can also nest multiple components inside of the App component. In the following example I have created a ‘Hello World’ Component and added two instances inside of the App component.


var HelloWorld = React.createClass({
  render:function(){
    return (
      <p>Hello World</p>
    )  
  }
});

var App = React.createClass({
  render:function(){
    return (
      <div>
        <HelloWorld />
        <HelloWorld />
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('container'));

Youtube player HTML5 wrapper

noreply@blogger.com (iliketo) — Tue, 29 Dec 2015 21:36:00 +0000

To make the Youtube Player API easier to use, Ginpei, has created an excellent Youtube Javascript wrapper called html5-youtube.js. With this plugin, Youtube players can be embedded into your HTML page with ease. I have written a few examples below for future reference and for anyone else to learn.

The first example is self explanatory you replace the videoID with the Youtube video you want to use. For simplicity sake I have written all code on one page.


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Youtube player HTML5 wrapper example 1</title>
</head>
<body onload="init()">

    <div id="youtube-player"></div>

    <script src="html5-youtube.min.js"></script>
    <script>
        function init(){
            var playerElement = document.querySelector('#youtube-player');
            var videoId = 'YL9RetC0ook';
            var player = youtube({ el:playerElement, id:videoId });
        }
    </script>
</body>
</html

The second example swaps the Youtube video depending on the button clicked.


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Youtube player HTML5 wrapper example 2</title>
</head>
<body onload="init()">

    <div id="youtube-player"></div>

    <div>
        <button class="video1">Video 1</button>
        <button class="video2">Video 2</button>
        <button class="video3">Video 3</button>
    </div>
    
    <script src="html5-youtube.min.js"></script>
    <script>
        function init()
        {
            var playerElement = document.querySelector('#youtube-player');
            var videoId = 'YL9RetC0ook';
            var player = youtube({ el:playerElement, id:videoId });
            
            var button1 = document.querySelector('.video1');
            var button2 = document.querySelector('.video2');
            var button3 = document.querySelector('.video3');
            
            button1.addEventListener('click', swapVideo);
            button2.addEventListener('click', swapVideo);
            button3.addEventListener('click', swapVideo);
            
            function swapVideo(e)
            {
                switch(e.currentTarget.className)
                {
                    case 'video1':
                        player.src = "YL9RetC0ook";
                        break;
                    case 'video2':
                         player.src = "G-og553jauM";
                        break;
                    case 'video3':
                        player.src = "KK9bwTlAvgo";
                        break;    
                }
            }
        }
        
    </script>
</body>
</html>

Speed up Brackets editor

noreply@blogger.com (iliketo) — Fri, 06 Nov 2015 21:31:00 +0000

When I am working on large projects I often find that Brackets becomes increasingly slow as the number of files increases. For example in your project you may have a node_modules and vendors folders. These folders can be particularly huge with all the file dependencies. You may even see a message: "Error Indexing files... this project contains more than 30,000 files".

The slowness is caused by the indexing of all the files in a current project. I have found an extension called File tree exclude which ignores the large folders in a project which in turn will increase the speed of bracket.

Any suggestions leave a comment below.

Gulp image resize for multiple images

noreply@blogger.com (iliketo) — Mon, 02 Nov 2015 22:28:00 +0000

I was looking for a way to automate multiple image resizing and found a Gulp plugin called Gulp-image-resize. This plugin uses the GraphicsMagick and ImageMagicks image processing system for the resizing.

A few posts I read online suggest chaining multiple image-resize pipes together. However, this was causing some undesired results. To overcome this I suggest to separate the chained image-resize script into different tasks then call a master resize task to invoke the other tasks.

This post assumes you have knowledge of Gulp and have the relevant plugins installed on your machine. In the example below I used only use the width option for imageResize which will ensure the output image won’t exceed the value and height will be automatically adjusted. I have also used a few additional modules such as gulp-changed and gulp-rename.


var gulp         = require('gulp'),
var $            = require('gulp-load-plugins')();

var imgPaths = {
    src:'./images/**/*.{jpg,png}',
    dist:'./images/'
}

gulp.task('img-resize-large', function(){
    gulp.src(imgPaths.src)
    .pipe($.changed(imgPaths.dist))
    .pipe($.imageResize({width : 1436}))
    .pipe($.rename({suffix: '-1436'}))
    .pipe(gulp.dest(imgPaths.dist))
});

gulp.task('img-resize-medium', function(){
    gulp.src(imgPaths.src)
    .pipe($.changed(imgPaths.dist))
    .pipe($.imageResize({width : 790}))
    .pipe($.rename({suffix: '-790'}))
    .pipe(gulp.dest(imgPaths.dist))
});

gulp.task('img-resize-small', function(){
    gulp.src(imgPaths.src)
    .pipe($.changed(imgPaths.dist))
    .pipe($.imageResize({width : 474}))
    .pipe($.rename({suffix: '-474'}))
    .pipe(gulp.dest(imgPaths.dist))
  
});

gulp.task('img-resize', ['img-resize-large','img-resize-medium','img-resize-small']);

Setup Gulp with Browserify

noreply@blogger.com (iliketo) — Sun, 24 May 2015 21:36:00 +0000

After reading many long-winded posts online about setting up Gulp with Browserify. I have decided to write a basic no-frills example to setup Gulp with Browserify in only two steps. Before we begin I assume you have have some understanding of the terminal, npm and Gulp.

1 - Install dependencies

Firstly, we have to create our ‘package.json’ file and installed all our required dependencies. Run the following commands in the terminal.

npm init -y
npm install -save gulp browserify vinyl-buffer vinyl-source-stream

2 - Gulpfile

Type the following into the gulpfile.js

// ---------------------------------------------------------
// DEPENDENCIES
// ---------------------------------------------------------
var gulp         = require('gulp'),
    browserify   = require('browserify'),
    source       = require('vinyl-source-stream'),
    buffer       = require("vinyl-buffer");


// ---------------------------------------------------------
//SOURCE PATHS
// ---------------------------------------------------------
var BASEPATH = "./src";
var BUILDPATH = "./dist";


var jsPaths = {
  jsFile:"app.js",
  jsSrc:BASEPATH + "/js",
  jsDist:BUILDPATH + "/js"
}


// ---------------------------------------------------------
// JS - dev (BROWSERIFY)
// --------------------------------------------------------------
gulp.task('browserify', function(){
  return browserify({
    entries:jsPaths.jsSrc + jsPaths.jsFile,
    debug:true
  })
  .bundle()
  .on("error", $.notify.onError(function(error) {
        return "Browserify Error: " + error.message;
  }))
  .pipe(source('bundle.js'))
  .pipe(gulp.dest(jsPaths.jsSrc));
});

You should now have a bare-bones example of setting up Gulp with Browserify. I hope this post was self-explanatory and easy to understand. If you have any questions feel free to leave a comment below.

Git multi-line commit message

noreply@blogger.com (iliketo) — Sun, 24 May 2015 09:46:00 +0000

It is possible to write multi-line commit messages instead of one single line message. In the terminal you would type the following command.


git commit -m "this
> is a multi-line
> commit message"

As you can see above, instead of using a closing quotation mark, you would press the enter followed by this “>” symbol. This will put the commit message on a new line.

An alternative method is to use multiple -m symbols like the following command.


git commit -m “this is a multi-line” -m “commit message”

HTML5 image place holders

noreply@blogger.com (iliketo) — Thu, 09 Apr 2015 11:26:00 +0000

Occasionally I use place holder images for web projects when an image asset has not been created or signed off yet. Often this would entail locating a random image online or even creating a temporary one with Photoshop.

However, I found a useful website, placehold.it, that auto generates a place holder image based on the input value. For example, http://placehold.it/200x200 will generate an image that is 200 x 200 pixels and also display the image dimensions on the image.

To use in HTML, you would use the following code:


<img src="http://placehold.it/200x200">

Fast Android Studio emulator

noreply@blogger.com (iliketo) — Sat, 21 Mar 2015 22:05:00 +0000

The Android studio default emulator can run sluggish at times and can often take up to five minutes to start depending on the power of your machine. Due to the long waiting times I found a quick emulator solution called GenyMotion.

To get started with GenyMotion a few essentials things will have to be installed. Firstly, visit the website and register an account. Once you have registered you can download and install on your machine.

The Android Studio plugin for GenyMotion will also need to be installed. From the Android Studio Welcome page select Configure > Plugins. Then search for GenyMotion in the search box and install. When the plugin is installed you should see an icon like the image below in your toolbar.

The plugin will have to be configured so it can run when you test an application. In the plugin settings add the path to the GenyMotion application.

Finally the VirtualBox host will also have to be downloaded and installed. Ensure you select the correct operation system.

To get started with GenyMotion you firstly have to add a virtual device by selecting the Add button. Once you have selected the device you want to install, the files will be downloaded automatically and ready for use next time the application is run in Android studio.

Remove Node Modules from Git repo

noreply@blogger.com (iliketo) — Mon, 16 Feb 2015 20:12:00 +0000

On the rare occasion that anyone accidentally pushes the ‘Node_Modules’ folder into their Git repository. This snippet of code will remove and push the ‘Node_Modules’ folder back to your repository.

git rm -r --cached node_modules
git commit -m 'Remove the node_modules folder'
git push origin master

Of course you would also add the .gitignore file to exclude the ‘Node_Modules’ folder at this point.

Git delete remote branches

noreply@blogger.com (iliketo) — Fri, 13 Feb 2015 22:48:00 +0000

Often when a feature branch has been merged and deployed, the branch will still exist on the remote server until it has been removed. To remove all remote branches from a git server than no longer exist we can use the following Git command.

git remote prune origin

Pass data between activities in Android

noreply@blogger.com (iliketo) — Tue, 06 Jan 2015 23:52:00 +0000

Continuing on from using Intents to Start a new Activity in Android from my last post I will be passing data between activities using Intent. I will be passing string data with Intents however a collection of other data types are also possible. See the Intent API for full list.

I have the same setup from the last post with two activities, but this time I will add an Edit text field into the activity_main.xml file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:hint="Edit text messaga"/>
    
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/editText"
        android:text="Start new Activity"/>

</RelativeLayout>

In the MainActivity.java I have used the putExtra() method to pass string data to the SecondActivity.class.


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final EditText editText = (EditText) findViewById(R.id.editText);
        
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                intent.putExtra("MESSAGE", editText.getText().toString());
                startActivity(intent);

            }
        });
    }
}

In the SecondActivity.java I have used the getIntent() method to retrieve the data from the Intent in the MainActivity.java file. I also have a Textview in the activity_second.xml layout with the id “secondActivityText” which will display the text from the EditText.


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;

public class SecondActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        Intent intent = getIntent();
        String message = intent.getStringExtra("MESSAGE");

        TextView textView = (TextView) findViewById(R.id.secondActivityText);
        textView.setText(message);
    }

}

Start a new Activity in Android

noreply@blogger.com (iliketo) — Sun, 04 Jan 2015 16:13:00 +0000

I will be showing how to start a new activity in Android with Android studio. Firstly, this post assumes Android studio is already installed on your machine and a new project has already been setup with a Black Activity.

My activitiy_main.xml layout has one button with the id "button" with the text "Start new Activity". This button will open up a new Activity when it is clicked.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start new Activity"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

In my MainActivity.java file I have added a click event listener to the button. Inside my onClick function I have used an Intent Object. An Intent object "provides runtime binding between component" which basically means you can use it to pass data between activities. The intent has two parameters, the first is the current activity and the second is the Activity to be started. The "SecondActivity.class" will be created in the next step.

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                startActivity(intent);

            }
        });
    }
}

To create the secondActivity, in your Project panel, right click on the java folder and select New > Activity > Blank Activity. Give the activity name: "SecondActivity" Android studio should automatically fill in the other fields for you. Click Finish to add the SecondActivity to the project.

Run the App and click the "Start new Activity" button. The new activity will open up.

Portrait or landscape screen in Android

noreply@blogger.com (iliketo) — Sat, 03 Jan 2015 21:51:00 +0000

The screen orientation of an Android application can be locked to portrait or landscape mode. It is relatively easy to set the screen orientation by using the screenOrientation property in the manifest file. Each activity to be locked will need to have screenOrientation property added.

To set the orientation to portrait mode. You can use portrait property like below.

<activity android:name=".MainActivity" android:screenOrientation="portrait" />

If you want to set the orientation to landscape mode. You can use the landscape property like below.

<activity android:name=".MainActivity" android:screenOrientation="landscape" />

The screen orientation can also be set programmatically with code using this below.

this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

Or this below.

this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

Draggable container in EaselJS

noreply@blogger.com (iliketo) — Fri, 12 Sep 2014 21:24:00 +0000

I needed to create a dragging container in EaselJS whereby all objects in the container are moved by the mouse.

I found a solution online and it suggested creating a rectangle shape the size of the stage and adding ‘mousedown’ and ‘mousemove’ events to the shape. The only problem with this solution is that the container child objects will not be clickable because the draggable rectangle shape is covering the clickable objects.

To overcome this issue I decided not to use the rectangle shape, but to add ‘stagemousedown’ and ‘stagemousemove’ events onto the stage. This way the container child objects will still be clickable as well as draggable.

Here is the example code below, and an live example can be seen here.


<!doctype html>
<html>
<head>
    <style> 
        html,body{padding:0; margin:0;}
        #canvas{background-color: #000000;} 
    </style> 
    <script src="easeljs.js"></script>
</head>
    <body onload="init()">
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
    var stage, containerDrag, dragOffset;
    
    function init(){
        //setup stage
        stage = new createjs.Stage('canvas');
        createjs.Ticker.addEventListener("tick", tick);
        createjs.Ticker.setFPS(60); 
        
        //drag container
        containerDrag = new createjs.Container();
        stage.addChild(containerDrag);
        
        //stage listeners 
        stage.addEventListener("stagemousedown", startDrag);   
        stage.addEventListener("stagemouseup", stopDrag); 
        dragOffset = new createjs.Point();

        
        //add random shapes to container
        for(var i = 0; i < 100; i++){
            var rect = new createjs.Shape();
            rect.graphics.beginFill('#ff0000').drawRect(0,0,getRandom(10, 30), getRandom(10, 30));
            rect.x = getRandom(0, stage.canvas.width);
            rect.y = getRandom(0, stage.canvas.height);
            containerDrag.addChild(rect);
        }
      
    }    
    
    //draggable listeners
    function startDrag(){
        dragOffset.x = stage.mouseX - containerDrag.x;
        dragOffset.y = stage.mouseY - containerDrag.y;
        stage.addEventListener("stagemousemove", moveDrag);   
    }   
        
    function stopDrag(){
         stage.removeEventListener("stagemousemove", moveDrag);   
    } 
        
    function moveDrag(e){
      containerDrag.x = e.stageX - dragOffset.x;
      containerDrag.y = e.stageY - dragOffset.y;
    }    
    
    //random utility function    
    function getRandom(min, max){
        return min + (Math.random() * (max-min));
    }  
        
    function tick(e){
        stage.update();
    }
    </script>
</body>
</html>

Sync browser and devices

noreply@blogger.com (iliketo) — Wed, 27 Aug 2014 09:42:00 +0000

I found a really good open source tool called Browser sync that syncs multiple browsers and devices at the same time. This means if you make a change in the HTML/CSS/JS all the browsers and devices you have linked up will update live without having to refresh. This makes if useful for cross-device testing and development.

To use Browser sync you firstly need to have Npm installed on your machine. Open up a terminal, I’m using a mac, and type the following command.

npm install -g browser-sync

This will install Browser sync globally on your machine so will be available for all your projects. Once Browser sync is installed you will have to ‘cd’ into the folder and use the following command.

browser-sync start --server --files

Another impressive feature of the Browesr sync is the ‘Interaction sync’ where the click, scroll and form data entry and all mirrored in the devices and browsers.

Display location weather in Javascript

noreply@blogger.com (iliketo) — Sat, 05 Jul 2014 21:54:00 +0000

This is an example of a HTML/JS app to display the weather based on the current location using the public API from openweather.org. If the user denies permission to share the location, a dialog window will appear for the user to enter a postcode.

In my HTML file I have essentially two main div’s. One of the divs displays the current weather if the user accepts the Geolocation permissions, and the other div shows a dialog box if the user does not accept the Geolocation permissions.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Weather</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="container">
        
        <div class="weather"></div>
        
        <div class="noweather">
            <div class="postcodeContainer">  
                <p class="postcode-msg">Please enter postcode</p>
                <input type="text" class="postcodeText" id="postcode" placeholder="Postcode search" val=""/>
                <input type="submit" class="postcodeSubmit" value="Go" id="postcodeBtn"/>
                <p class="postcode-error">Invalid postcode</div>
            </div>
        </div>
        
    </div>

    <script src="js/ jquery-1.11.2.min.js"></script>
    <script src='js/main.js'></script>
</body>
</html>

The CSS file will display the weather in the centre of the screen with the ‘Roboto’ Google font. The styling for the postcode dialog box is also styled.


body {font-family: 'Roboto', sans-serif;}
p, input { padding: 0; margin: 0; }
.container { position: absolute; top: 50%; left: 50%; padding: 20px; }
.weather { position: relative; width: 600px; height: 200px; margin: -70px 0 0 -120px; display: none; }
.noweather { color: #999999; 
position: relative; display: none; width: 200px; height: 128px; height: 128px;
margin: -70px 0 0 -120px;
border: 4px solid #cccccc; 
-webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.5); 
-moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.5); }
.postcodeContainer {text-align: center;}
.postcode-msg { font-size: 14px; padding: 16px 0 10px 0; letter-spacing: 0px; }
.postcodeText { width: 170px; padding: 5px 0 5px 0px; margin-bottom: 2px; }
.postcodeSubmit { width: 174px; padding: 5px 0 5px 0; background: #000000; color: #ffffff; margin-bottom: 5px; border: none; }
.postcodeSubmit:hover {background: #999999;}
.postcode-error { color: #ff0000; font-size: 12px; display: none; }

In the main.js Javascript file, I firstly detect if the browser supports geolocation. If the geolocation is supported then I called the getWeather() function along with the current longitude and latitude to display the current weather. Conversely if the geolocation is not supported then I display the postcode dialog box, and use the isPostcodeValid() helper function to check if the postcode is valid. I will again reuse the getWeather() function along the postcode to display the current weather. Note, I have used the getWeather() function for both the geolocation and postcode options. I have a pass a parameter which can use either the geolocation or postcode API.


$(document).ready(function() {
    'use strict';
    
    var App = {
        geolocationStr:"http://api.openweathermap.org/data/2.5/weather?lat=",
        postcodeStr:"http://api.openweathermap.org/data/2.5/weather?zip=",
        init:function(){
            App.getLocation();
        },
        getLocation:function(){
                
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(App.geoSuccess, App.geoError);
            }else {
                 $('p').text('GeoLocation not supported').appendTo('body');
            }
            
        },
        geoSuccess:function(e){
            App.getWeather(App.geolocationStr+e.coords.latitude+"&lon="+e.coords.longitude);   
        },
        geoError:function(e){
         
            $('.noweather').show();
            
            $('#postcodeBtn').on('click', function(){
                
                var postCodeValue = $('#postcode').val();
            
                if(isPostcodeValid(postCodeValue)){
                    $('.postcode-error').hide();
                    $('.noweather').hide();
                    App.getWeather(App.postcodeStr+postCodeValue +",uk");  
                    
                }else{
                    $('.postcode-error').show();
                }
            })
            
        },
        getWeather:function(url){
            
            $.ajax({
                url: url,
                dataType: 'jsonp',
                jsonpCallback: 'jsonCallback',
                success: function (data) {   
                    $('.weather').show();
                    $('<h1>').text('The weather is ' + data.weather[0].main.toLowerCase()).appendTo('.weather');
                }});
        }
    }
    
    App.init();
    
});

function isPostcodeValid(postcode){
    var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}\s*([0-9][a-zA-z][a-zA-z]){1}$/;
    return regPostcode.test(postcode);
}

HTML templating with Handlebars js

noreply@blogger.com (iliketo) — Thu, 12 Jun 2014 21:30:00 +0000

I was working on a small HTML project where small amount of data needed to be updated frequently. The updates could have been updated manually, but this was too much hassle as the updates were so small. To solve this issue I used a Javascript library called Handlebars. Handlebars is a templating library that loads JSON data with the template design of your choice. This is a simple working example of Handlebars with external JSON data loaded with jquery.

JSON

The "jsonCallBack" or JSONP is used to load data from different domains without any cross domain issues. This can be removed if you are loading data from the same domain.


jsonCallback({

    "example":
    [
        {
            "name": "Mr A"
            "image": "images/mra.jpg"
            "link": "http://www.example1.com"
        },
        
        {
            "name": "Mrs B"
            "image": "images/mrsb.jpg"
            "link": "http://www.example2.com"
        },
        
        {
            "name": "Miss C"
            "image": "images/missc.jpg"
            "link": "http://www.example3.com"
        }
    ]

});

HTML

The "{{ }}" (double curly braces) indicate where we want Handlebars to generate the code for us. The Handlebars template uses the MIME type text/x-handlebars-template rather than text/javascript to prevent the browser from running the Handlebars code.


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mustache JS Example</title>
</head>
<body>

    <script src="js/handlebars.js"></script>
    <script id="HJ-Template" type="text/x-handlebars-template">
   {{#each example}}
        <div class="example">
            <div class="example-image"><img src={{image}}></div>
            <p class="example-text">{{name}}</p>
            <a href={{link}}>Click link</a>
        </div>
    {{/each}}
    </script>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>

</body>
</html>

Javascript

This loads the example.json file with jQuery and uses the Handlers.compile() method to compile the template in Javascript. The results are added to the body of the HTML.


$(function(){
    
    $.ajax({
        url: example.json,
        dataType: 'jsonp',
        jsonpCallback: 'jsonCallback',
        success: function (data) {   

            var source = $('#HJ-Template').html(),
            template = Handlebars.compile(source),
            html = template(data.example);

            $("body").append(html);
        }

    });
            
});

Preload images with Javascript

noreply@blogger.com (iliketo) — Fri, 30 May 2014 15:34:00 +0000

It is useful to preload large or multiple images to avoid long waiting times. I have used the Javascript plugin called 'imagesLoaded' which can trigger an event when all images have been loaded. While the images are loading a preloaded gif can be displayed until the images have loaded. The preloader will be removed once all the images have been loaded. This will give the user feedback so they know content is loading.

Firstly, in HTML file I have added the class 'loading' to the body tag. This class will show the preloader gif when the images are loading and will be removed once the images have loaded. I have added the images to be preloaded inside a div with the class 'preload'. This div will be hidden until the images have loaded.

<!doctype html>
<html lang="en" class="no-js">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Preload image Javasript</title>
   <link rel="stylesheet" href="css/style.css">
   <script src="js/vendor/modernizr-2.7.1.min.js"></script> 
</head>
<body class="loading">

   <div class="preload">
       <img src="img/img1.jpg">
       <img src="img/img2.jpg">
       <img src="img/img3.jpg">
       <img src="img/img4.jpg">
   </div>
    
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src="js/imagesloaded.js"></script>
   <script>
       //add javascript code here
   </script>

</body>
</html>

In the css file, the loading class displays the preloaded gif positioned at the centre of the page. The preload class uses the 'display none' to hide the images. Once the images have loaded the body opacity will be opaque.

body{
     opacity: 0;
}    

.loading {
    background: url('../images/loading.gif') no-repeat center center;
}

.preload {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.loaded, .no-js  {    
    opacity: 1;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}

Finally, in the HTML file I have added the following Javascript code using the imagesLoaded plugin. This code will remove the class 'loading' from the body an add the 'loaded' class.

$(function() {
 $('body').imagesLoaded(function() {
      $('body').removeClass('loading').addClass('loaded');
 });
});

3D CSS3 transitions and transforms

noreply@blogger.com (iliketo) — Sat, 17 May 2014 21:29:00 +0000

These are 3D examples of CSS3 transitions and transforms continuing on from the last post with 2D examples. I have again used the template HTML structure with inline style. This time I have included the container class in the styles. We are using 3D, so the perspective class will be added to the container. I have used the value of 1000 to prevent distortion on screen. Again the transitions and transforms effects are added to the hover state of the div.


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D CSS3 transitions and transforms</title>
    
    <style>
    body{padding:0; margin:0;}
    p{padding:0; margin:0; text-align: center; position: relative; top:110%;}
    .box{width:150px; height:150px; background-color: #ff0000; display: inline-block; margin:0 50px 50px 0;}   

    .container{
       -webkit-perspective: 1000; 
       -moz-perspective: 1000; 
       -o-perspective: 1000; 
       perspective: 1000; 
    }        

</head>
<body>

<div class="container">
    <div class="box box1"><p>3D Scale</p></div>
    <div class="box box2"><p>Rotate Y</p></div>
    <div class="box box3"><p>Rotate X</p></div>
    <div class="box box4"><p>Rotate Z</p></div>
    <div class="box box5"><p>3D Rotate</p></div>
</div>

</body>
</html>

This example scales up the div with the scale3d transform property and reduces the opacity. The scale3d has three parameters: x, y, and Z.


.box1{
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
}     

.box1:hover{
    -webkit-animation:scaleup 1s ease-out forwards;
    -moz-animation:scaleup 1s ease-out forwards;
    -o-animation:scaleup 1s ease-out forwards;
     animation:scaleup 1s ease-out forwards;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}  

@-webkit-keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; -webkit-transform: scale3d(2,2,2);}
}    
@-moz-keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; -moz-transform: scale3d(2,2,2);}
}    
@-o-keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; -o-transform: scale3d(2,2,2);}
}    
keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; transform: scale3d(2,2,2);}
}

The next three examples rotate the div around the x,y and z-axis.


.box2{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box2:hover{
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    transform:rotateY(-180deg);    
}
        
.box3{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box3:hover{
    -webkit-transform:rotateX(-180deg);
    -moz-transform:rotateX(-180deg);
    -o-transform:rotateX(-180deg);
    transform:rotateX(-180deg);    
}         

.box4{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box4:hover{
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
    -o-transform:rotateZ(360deg);
    transform:rotateZ(360deg);    
}

The final example rotates in 3D and the parameters are x, y, z and angle.


.box5{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box5:hover{
    -webkit-transform:rotate3d(1,0,1, 360deg);
    -moz-transform:rotate3d(1,0,1, 360deg);
    -o-transform:rotate3d(1,0,1, 360deg);
    transform:rotate3d(1,0,1, 360deg); 
}

2D CSS3 Transitions and Transforms

noreply@blogger.com (iliketo) — Mon, 12 May 2014 13:57:00 +0000

I have written a few examples of 2D CSS3 transitions and transforms for future reference. I will firstly cover single transitions and transforms on a single element. Then move onto multiple transitions and transforms on a single element.

I have used a template HTML structure with inline CSS styles for demonstrational purposes shown below. The styles should ideally be placed in a separate CSS file. The effects will be added onto the hover state on the div’s

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2D CSS3 transitions and transforms</title>
    
    <style>
    body{padding:0; margin:0;}
    p{padding:0; margin:0; text-align: center; position: relative; top:110%;}
    .box{width:150px; height:150px; background-color: #ff0000; display: inline-block; margin:0 50px 50px 0;}   
    </style>
    
</head>
<body>
    <div class="box box1"><p>Colour Change</p></div>
    <div class="box box2"><p>Opacity</p></div>
    <div class="box box3"><p>Scale</p></div>
    <div class="box box4"><p>Rotate</p></div>
    <div class="box box5"><p>Colour and opacity</p></div>
</body>
</html>

To create a transition for changing the background colour, I have used the background-color property to smoothly change the colour.


.box1{
    background-color: #ff0000;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;
}     

.box1:hover{
    background-color: #ffff00;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;
}

The opacity can be transitioned in the same way as the background-color using the opacity value.


.box2{
   opacity: 1;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}     

.box2:hover{
   opacity:0.3;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}

The scaling uses the transform property instead of the transition. This will increase the size upon hovering over the div. The webkit-backface-visibility property is added to remove any glitches with the webkit browsers.


.box3{
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition: all 1s ease-out;
} 

.box3:hover{
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-backface-visibility: hidden; 
}        

.box4{
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition: all 1s ease-out;
}

.box4:hover{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform: rotate(360deg);
}

Multiple properties are added in the same way as single properties.


.box5{
    background-color: #ff0000;
    opacity: 1;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;

    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}     

.box5:hover{
    background-color: #00ff00;
    opacity:0.3;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;

    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}

Simon Says game in EaselJS

noreply@blogger.com (iliketo) — Sun, 27 Apr 2014 12:00:00 +0000

I have ported over one of my older post, the Simon Says game in Actionscript 3 to EaselJS. The code can be seen below and an example can been seen here.

<!DOCTYPE html> 
<html> 
 <head> 
  <style> 
  html,body{padding:0; margin:0;} 
  #canvas{background-color: black;} 
  </style>
  
  <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
  <script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
  <script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
  <script>
   var stage,
    coloursArray = [],
    userArray,
    computerArray,
    sequenceEnd,
    timer,
    count,
    score,
    playText,
    guessText,
    st,
    manifest;
    
   
   function init()
   {
    stage = new createjs.Stage('canvas');
    stage.enableMouseOver(10); 
    
    createjs.Ticker.addEventListener("tick", stage);
    createjs.Ticker.setFPS(30); 
    
    //colour blocks
    var b1 = createBlock( '#ff0000', 'tl', 45, 18);
    var b2 = createBlock( '#00ff00', 'tr', 155, 18);
    var b3 = createBlock( '#FFFF00', 'bl', 45, 128);
    var b4 = createBlock( '#0000FF', 'br', 155, 128);
    stage.addChild(b1, b2, b3, b4);
  
    coloursArray.push(b1, b2, b3, b4);
    
    for(var i = 0; i < coloursArray.length; i++){
     coloursArray[i].id = i;
     coloursArray[i].cursor = 'pointer';
     coloursArray[i].addEventListener('click', buttonHandler);
    }
    
    
    //play text
    playText = new createjs.Text();
    playText.text = 'CLICKn TO PLAY';
    playText.color = '#ffffff';
    playText.font =  'bold 18px Arial';
    playText.textAlign = 'center';
    playText.x = stage.canvas.width/2;
    playText.y = stage.canvas.height/2 - 20;
    playText.hitArea  = new createjs.Shape(new createjs.Graphics()
                       .beginFill("#f00")
                       .drawRect(-stage.canvas.width/2,-stage.canvas.height/2 + 20,300,250)); 
    playText.addEventListener('click', playHandler);
    stage.addChild(playText);
    
    //guess text
    guessText = new createjs.Text();
    guessText.text = '';
    guessText.color = '#ffffff';
    guessText.font =  'bold 55px Arial';
    guessText.x = stage.canvas.width/2;
    guessText.y = stage.canvas.height/2 - 25;
    guessText.textAlign = 'center';
    guessText.visible = false;
    stage.addChild(guessText);
                
    stage.update(); 
                
                
    //load sounds
    if (!createjs.Sound.initializeDefaultPlugins()) { return; }
        var audioPath = 'sounds/';
        manifest = [
        {id:'chicken_sfx', src:'chicken_sfx.ogg'},
        {id:'cow_sfx'    , src:'cow_sfx.ogg'},
        {id:'oink_sfx'   , src:'oink_sfx.ogg'},
        {id:'sheep_sfx'  , src:'sheep_sfx.ogg'}
        ]
        createjs.Sound.alternateExtensions = ['mp3'];
        createjs.Sound.registerManifest(manifest, audioPath);
                
   }
   

   function playHandler(e)
   {
    playText.visible = false;
    start();
               
   }
   

   function start()
   {
    userArray = [];
    computerArray = [];
    guessText.text = '0';
    guessText.visible = true;
    count = 0;
    score = 0;
    sequenceEnd = false;
    newRound();
   }
   
   
   function newRound()
   {
    var r = Math.floor(Math.random() * coloursArray.length);
    userArray.push(r);
    
    st = setInterval(checkColours, 1000);
   }

   
   function checkColours()
   {
    if(count < userArray.length){
     var value = userArray[count];
     createjs.Tween.get(coloursArray[value]).to({alpha:0.5}, 300).to({alpha:1},300);        
     createjs.Sound.play(manifest[value].id);
     count++;
     
    }else{
     clearInterval(st);
     computerArray = userArray.concat();
     sequenceEnd = true;
    }
   }
   
   
   function buttonHandler(e)
   {
    
    if(sequenceEnd){
     
     var computerChoice = computerArray.shift();
     var userChoice = e.target.id;
     
     if(userChoice == computerChoice){
      
      createjs.Tween.get(coloursArray[userChoice]).to({alpha:0.5}, 300).to({alpha:1},300);
      createjs.Sound.play(manifest[userChoice].id);
                        
      if(computerArray.length == 0){
       newRound();
       count = 0;
       sequenceEnd = false;
       score++;
       guessText.text = String(score);
      }
      
     }else{
      guessText.text = '';
      guessText.visible = false;
      playText.visible = true;
     }
     
    }
   }
   
   
   function createBlock(colour, direction, xpos, ypos)
   {
    var g = new createjs.Graphics();
    g.beginFill(colour);
    
    switch(direction)
    {
     case 'tl':
      g.lineTo(0, 0);
      g.lineTo(100, 0);
      g.lineTo(100, 60);
      g.quadraticCurveTo(60, 60, 58, 100);
      g.lineTo(0, 100);
     break; 
     
     case 'tr':
      g.lineTo(0, 0);
      g.lineTo(100, 0);
      g.lineTo(100, 100);
      g.lineTo(47, 100);
      g.quadraticCurveTo(40, 60, 0, 58);
     break;
      
     case 'bl':
      g.lineTo(0, 0);
      g.lineTo(57, 0);
      g.quadraticCurveTo(60, 50, 100, 49);
      g.lineTo(100, 100);
      g.lineTo(0, 100);
     break;
     
     case 'br':
      g.moveTo(47,0);
      g.lineTo(100,0);
      g.lineTo(100,100);
      g.lineTo(0, 100);
      g.lineTo(0, 50);
      g.quadraticCurveTo(40, 50, 47, 0);
     break; 
    } 

    var s = new createjs.Shape(g);
    s.x = xpos;
    s.y = ypos;
    return s;
   }

  </script>
  
 </head>
 
 <body onload="init()">
  <canvas id="canvas" width="300" height="250"></canvas> 
 </body>
</html>

SwipeJS example

noreply@blogger.com (iliketo) — Mon, 03 Mar 2014 23:14:00 +0000

I needed a quick and simple touch page slider for a project and decided to use to the SwipeJS library. This library is compatible with all browsers from IE 7+ and supports the usual left/right touch swipes as well as an automatic slideshow feature.

The SwipeJS setup is straightforward. You need a two divs, one for each slide and one as a wrapper. Some minor CSS styling will be needed to display the slides inline. Finally, the Javascript swipe function needs to be called to start touch swipes. There are a number of additional parameters available to tweak the behaviour of the slider such as speed of transitions, auto slideshow and continuous slides.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SwipeJS Example</title>
    
    <style>
    html,body{padding: 0; margin:0;}
        
    .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
    }
    .swipe-wrap {
      overflow: hidden;
      position: relative;
    }
    .swipe-wrap > div {
      float:left;
      width:100%;
      position: relative;
    }
    </style>
    
</head>
<body onload="init()">

    <div id='mySlider' class='swipe'>
      <div class='swipe-wrap'>
        <div><img src="images/pic1.jpg"/></div>
        <div><img src="images/pic2.jpg"/></div>
        <div><img src="images/pic3.jpg"/></div>
        <div><img src="images/pic4.jpg"/></div>
        <div><img src="images/pic5.jpg"/></div>
      </div>
    </div>

    <script src="swipe.js"></script>
    <script>
    
        function init(){
            var mySwipe = Swipe(document.getElementById('mySlider'), {
               speed:400,
               continuous: true,
            }); 
        }
        
    </script>
</body>
</html>

Currently, the slides are only swipe on mobile and tablet devices. To make this compatible with desktop, buttons will need to be added to navigate to the previous and next slides.


<span id="left" onclick="slideLeft()">left</span>
<span id="right" onclick="slideRight()">right</span>

<script>

    var mySwipe;

    function init(){  
        mySwipe = Swipe(document.getElementById('mySlider'),{
           speed:400,
           continuous: true,
        });   
    }

    function slideLeft(){
        mySwipe.prev();
    }

    function slideRight(){
         mySwipe.next();
    }

</script>

The jquery version uses the following code.


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

        var slider = $('#mySlider').Swipe({
            speed:400,
            continuous: true,
        }).data('Swipe');

    });
}