Posts in category JavaScript

Form Validation with Javascript and PHP

By admin on Feb 01st, 2012 | Posted in HTML/CSS | Leave a Comment

Tags: , ,

Form Validation with Javascript and PHP

Form Validation with Javascript and PHP

In this tutorial, I will show you how to create an attractive, pleasant to look form for your website and then I will explain you how to dynamically validate them using Javascript. We’ll also cover server-side validation with PHP to make everything 100% safe. This tutorial will help you to add more functionality to your forms which leads to better user experience and better quality of your website. You may also enhance your already existing forms by adding them some fancy effects presented in this tutorial. Let’s get started! Info: If you’d like to modify already existing form by adding some javascript to it then skip HTML and CSS part of this tutorial and go to step five. Otherwise, if you’re planning to create new form start reading here.
READ MORE »

Fullscreen Javascript Slide navigation

By admin on Jan 10th, 2012 | Posted in HTML/CSS | 1 Comment
Fullscreen Javascript Slide navigation

Fullscreen Javascript Slide navigation

Today – new pure javascript tutorial-demonstration. Result page will contain 16 slides (pages). Four in each row, four columns, plus we will add animated navigation to them through css3 arrows (at sides of screen). Plus, we will have mini-navigation bar for better navigation.

READ MORE »

HTML5 Face Builder

By admin on Dec 12th, 2011 | Posted in HTML5 | Leave a Comment

Tags: , , ,

HTML5 Face Builder

HTML5 Face Builder

This is another interesting application of HTML5. Today I have developed a little ‘toy’. This little toy can be enhanced into something big. Welcome to test new HTML5 tool – Face Builder (canvas). This tool will allow your members (visitors) to compose their faces, you can select through predefined elements (face, eyes, nose, mouth), and in end – you can ‘export’ result into image (like crop tool).
READ MORE »

Pure HTML5 file upload

By admin on Dec 09th, 2011 | Posted in AJAX, HTML5 | 5 Comments

Tags: , , , ,

Pure HTML5 file upload

Pure HTML5 file upload

Today we will be developing a great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but today’s application don’t require jQuery at all. All made in pure HTML5 Javascript. I’m going to use FileReader (html5) to implement live preview (without uploading to server), and, going to use XMLHttpRequest to send data to server.
READ MORE »

HTML5 animation – patterns with loops

By admin on Dec 03rd, 2011 | Posted in HTML5 | Leave a Comment

Tags: , , , ,

HTML5 animation - patterns with loops

HTML5 animation – patterns with loops

I have prepared new HTML5 tutorial for you. This is not quite regular ‘html5 game development’ tutorial, but I like to show you another demonstration of html5 canvas animation. We will create patterns with loops and animate it. Today I have prepared nice demo with the sun and with three cars.
READ MORE »

HTML5 Game Development – Lesson 4

By admin on Nov 21st, 2011 | Posted in HTML5 | 9 Comments
HTML5 Game Development - Lesson 4

HTML5 Game Development – Lesson 4

Today we continue a series of articles on game development in HTML5 using canvas. Today we going to learn next elements: animation with sprites and basic work with sound. In our demonstration you will see a flying dragon. We will hear the sounds of wings all time (we will loop this sound), and another sound – dragon’s roar (on mouseup event). And finally we will teach our dragon be closer to the mouse cursor (when we hold down the mouse).

Our previous article you can read here: Developing Your First HTML5 Game – Lesson 3. Our new script is new enhanced version of previous one.
READ MORE »

Creating an Image Zoomer in HTML5 Canvas

By admin on Oct 20th, 2011 | Posted in HTML5 | 2 Comments

Tags: , , , , , ,

HTML5 canvas - Image zoomer

HTML5 canvas – Image zoomer

New interesting tutorial – I will show you how you can create nice and easy Image zoomer using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mousemove, mousedown and mouseup (to move the enlarged area of ??the motion while holding the mouse).
READ MORE »

HTML5 Game Development – Navigating Your Spaceship- Lesson 3

By admin on Oct 19th, 2011 | Posted in HTML5 | 1 Comment

Tags: , , , ,

HTML5 Game Development - Lesson 3

HTML5 Game Development – Lesson 3

Today we continue a series of articles on game development in HTML5 using canvas. Finally, today we will start adding animation, and few more interesting features. Our demonstration will include a spaceship flying through space, and a new element – the Dialogue. The dialogue will contain two pages, and our button will toggle the dialog pages + hide the dialog on the second click.

Our previous article you can read here: Developing Your First HTML5 Game – Lesson 2. Our base script will taken from previous letter.
READ MORE »

Creating a Photo Array in WebGL

By admin on Oct 18th, 2011 | Posted in HTML5 | Leave a Comment

Tags: , , , ,

Creating photo array in WebGL

Creating photo array in WebGL

Today we continue HTML5 WebGL examples. I prepared a nice photo gallery for you. Images in this gallery will be replaced by a mouse click.
READ MORE »

Creating HTML5 Image Effects App – Adding Horizontal Flip

By admin on Sep 26th, 2011 | Posted in HTML5 | 2 Comments

Tags: , , , ,

HTML5 Image Effects App - Adding Horizontal Flip

HTML5 Image Effects App – Adding Horizontal Flip

Today we going to continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that you like this too. Today we will be adding new filter – Horizontal Flip.
READ MORE »

Page 1 of 512345