onlyWebPro » JavaScript

Make A jQuery Sticky Header In 5 Minutes

admin — Wed, 03 Apr 2013 03:09:56 +0000

Many of us have seen this sticky page header effects – The page header is initially on its original place above the content, but as soon we start scrolling down the page, it sticks at the top of the page. When we scrolling up the page, the sticky header stops sticking and returns to its original position.

Still not understand what I’m talking about? No worry, I thought I should give you a simple example. Let’s take a look on the demo before we proceed to tutorial section.

View Demo

The HTML Structure

In this tutorial, we will create a sticky ribbon, where a normal looking ribbon suddenly sticks to the page when the page is scrolled. I’m sure you are already familiar with HTML elements. In this example, we are going to start out with the following:

Demo: jQuery Sticky Header On Scroll | onlyWebPro.com

Make Money

Investing-Basics
Bonds & Fixed Income
Forex
Fundamental Analysis

This is a demo page of "Make A jQuery Sticky Header In 5 Minutes" post. If you want to find out more about making jQuery Sticky Header, pleae log on to onlyWebPro.com.
Introduction To Growth Investing
People have many different styles and tastes when it comes to money, but making your money grow is typically considered the most fundamental investment objective. The best way to accomplish this goal will vary according to factors such as the investor's risk tolerance and time horizon. But there are some principles and techniques that are applicable for many different types of investors and growth strategies.

Image courtesy of Kadellar (Wikipedia.com)
Types of Growth Investments
Small-Cap Stocks

The size of a company is based on its market capitalization, or net worth. There is no exact, universal definition of what is considered to be "small cap" compared to micro, mid or large cap, but most analysts classify any company with a capitalization of between $300 million and $2 billion as a small-cap firm. Companies in this category are often still in their initial phase of growth and their stocks have the potential for substantial appreciation in price. Small-cap stocks have historically posted higher returns than their blue-chip cousins, but they are also considerably more volatile and carry a higher degree of risk. Small-cap stocks have also often outperformed large-cap stocks during periods of recovery from recessions.
Technology and Healthcare Stocks

Companies that develop new technologies or offer innovations in healthcare can be excellent choices for investors who are looking for a home-run play in their portfolios. The stocks of companies that develop popular or revolutionary products can rise exponentially in price in a relatively short period of time. For example, the price of Pfizer was just under $5 a share in 1994 before Viagra was released. This blockbuster drug took the company's stock price to above $30 a share over the next five years, thanks to FDA approval of the drug in 1998.
Speculative Investments

Thrill seekers and speculators look to high-risk growth instruments such as penny stocks, futures and options contracts, foreign currency and speculative real estate such as undeveloped land. There are also oil and gas drilling partnerships and private equity for aggressive investors in high income brackets. Those who pick the right choices in this arena can see a return on capital of many times their initial investment, but they can also often lose every cent of their principal.
The Bottom Line
Growth investing is a complex subject that is often closely coupled with other subjects such as fundamental analysis, technical analysis and market research. There are many more growth strategies used by individual and institutional investors, and a complete listing of them is far beyond the scope of this article. For more information on growth strategies for your investments, consult your broker or financial advisor.

Notes: Contents are retreives from Investopedia.com for demostration purpose only.

As you can observed from the above HTML structure, we have a main container with named “demo_wrapper“. Inside, we have “logo“, “stickyribbon” and “page_content” divisions. The “stickyribbon” is the main focus element in this tutorial. We are going to add some JavaScript later, to make it become “sticky” when users scrolling down the page.

The CSS

The CSS styling for this tutorial is pretty simple, I’m not going to go into details on every single style, let’s just concentrate on these two – “#demo_wrapper” & “#stickyribbon“. As you observed, the width of the #demo_wrapper & #stickyribbon is slightly different, we make the #stickyribbon wider than the #demo_wrapper to create the illusion of wrapping the #demo_wrapper.

Here is the ribbon that we are using. You can wither create your own or use the following image.

The JavaScript

Now is the time to apply some magic to our ribbon. At first, we include the latest jQuery library from Google directory. Next, we determine the offset of the “stickyribbon“. Once done that, we bind the scroll event to window object, then we start checking IF window.scrollTop exceeds the #stickyheader’s offsetTop, we simply set #stickyheader’s css as position: fixed; top: 0px. As soon as window.scrollTop drops below the offset, we make it stick back to its original position using position: static, the default positioning of the element.

We’ve done!

View Demo

Conclusion

You’ve just learned to make a jQuery ribbon, sticks at the top of the page when scrolling down and return to its original position when scrolling up the page.

Create Sequential Animations in jQuery

admin — Mon, 18 Feb 2013 03:24:27 +0000

In this tutorial, I will demostrate 3 easy ways to create sequential animations in jQuery. if you would like to display a set of elements sequentially using CSS3, please read our past tutorial – “Create Banner Using CSS Animation & Keyframe”.

Setup HTML Structure

First of all, we need to create a basic HTML structure for applying sequential animation later. Here is how our HTML looks like:





Demo: Display Elements Sequentially with jQuery | onlyWebPro.com


	ABC
    DEF
    GHI
    JKL

Method 1: Using jQuery .ep() Method

Here is how we create sequential animations in jQuery. Let’s say we want all the elements fade in sequentially. So, the first thing is to hide all elements when the DOM is ready. then we instruct the browser to self-executing a function named “displayImages” which contains the fade in method.

The elem.eq(i++) refers to the elements. The .eq() method constructs a new jQuery object from one element within the set. The supplied index identifies the position of the element in the set.

When the elem.eq(i++) refers to an element that DOESN”T EXIST in the wrapped set, then the subsequent methods in the chain (example: fadeIn method) will never be called.

View Demo Method 1

Method 2: Using jQuery .ep() & .slice() Method

This method is slightly different than method 1. This method contains .slice() method, which used to reduce the set of matched elements to a subset specified by a range of indices.

View Demo Method 2

Method 3: Silly But Not Stupid (Manually Creating Effects)

Let’s say we only want the first element to SLIDE IN from top, then the rest of the fade in right after the first element appeared on screen, so how can we achieve that? Here is the most simple method to do that:

We need to apply some CSS styles to our first element before applying any jQuery function. Following tells the browser to positioned the first element out of the viewport when the page is loading.

Next, we apply the following jQuery code to achieve the effects that we just mentioned above:

That’s it! Save your document and preview it on browser! You will see the first element SLIDE IN from top, then the rest of the fade in right after the first element appeared on screen!

View Demo Method 3

Follow us on either Facebook, Twitter, Google+ or subscribe to the onlyWebpro RSS Feed for the best web development tutorials on the web.

Develop A jQuery Parallax Scrolling Framework

admin — Mon, 28 Jan 2013 02:15:50 +0000

Introduction to Parallax Scrolling

The Parallax Scrolling effect is one of the popular design trend in web industry. It is a technique to create an illusion of depth by using multiple background images that move at different speeds as the user scrolls down or up a website.

Still not understand how it works? Let’s check out the demo!

View Demo

The Concept

As you viewed the demo above, the page contains 4 main content layers, which is text, bg1, bg2 and bg3. Each of these layers are given an z-index, so that the foreground layers appear above the background layers. Let’s sorting all layers in this way:

bg1: The background layer.
bg2: The secondary background layer appears above bg1.
bg3: This layer appear above bg2. We use it to store the main object / image.
text: This is the foreground layer that contains the text.

As user scrolls down the page, the 4 main layers are animated independently of one another to create an illusion of depth.

The HTML Markup

Following is the HTML structure of our page:






jQuery Parallax Scrolling Effects | onlyWebPro.com




	
    	
            The Demo of jQuery Parallax Scrolling
            This is a demo page that shows you the simplest parallax scrolling technique you've ever came across!
        

        
            What is Parallax Scrolling?
            Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s, and was popularized in the 1982 arcade game Moon Patrol.
        

        
            Example of Parallax Scrolling?
            As you scroll up / scroll down the page, all the objects are animated independently of one another to create an illusion of depth.

The CSS

There are 2 important CSS properties that we are going to use for creating illusion of depth for our page, which is position and z-index. Following is how our CSS code looks like:

As you see above, we use z-index to control the parallax effect.

Within each individual main layers elements are absolutely positioned. We can arrange the content in different ways according to the topic of the section.

The JavaScript

Ok, here is the section for us to apply some magic to our page.

First of all, what we need to do is to bind a scroll event to the window object. Next, we tell the browser to run a function with named “parallaxScroll” when user scrolls down or up. Then inside the parallaxScroll function, we get the current vertical position of the scroll bar by using .scrollTop() API, and use it for the calculation of layer’s position. So that, the foreground layer is always aligned to the top of the document, while the movement of other layers is adjusted according to their depth.

Save your document and view it on web browser.

View Demo

Create HTML5 Canvas Drawing Board Within 5 Minutes!

admin — Thu, 10 Jan 2013 01:50:25 +0000

Welcome to “Create HTML5 Canvas Drawing Board Within 5 Minutes!” tutorial. We are going to create a drawing board using HTML5 Canvas API. This is an easy to follow tutorial, and I’ll try not to lose anyone, though, I promise. If you’re not entirely sure what HTML5 Canvas is, please read HTML5 Canvas For Absolute Beginners, before you continuing this tutorial.

Please check out the demo before we start our tutorial.

View Demo

HTML Structure

Ok, let’s start our tutorial by creating a div named “board” which will contains a canvas element and a color picker dropdown box. The canvas element will contains an id named “myCanvas” and 500px as value for its height and width property; Same to the color picker dropdown box, each child elements of color picker dropdown box contains an id, which allows us to access it later via JavaScript.




HTML5 Canvas Drawing Board | onlyWebPro.com




Color picker:

CSS Styles

The CSS for this tutorial is simple and easy, following is how the CSS codes looks like:

First of all, we have to offset the body’s margin; horizontally center the div with named “board”; and apply 3px width of border to the canvas element.

The JavaScript

Here is the section where we convert our canvas into a drawing board. First of all, please include the jQuery library into our HTML document. You can either download the library from jquery.com or use Google hosted jQuery library.

Next, we will have a window.onload event to executes all the codes when the window has loaded. We will check whether the canvas element is exist or supported by the browser or not, if yes then our canvas will start listen to the user’s mouse activity via “mousedown“, “mousemove” and “mouseup” events.

As you can seen above, there is a variable called “isDown“. This variable is used to store the current status of the mouse click. The boolean value of “isDown” variable is set to TRUE when the mouse click is down and will set to FALSE when the mouse click is up. Besides that, we also prepare a variable called “curColor” to store the color that picked by the user using color picker dorpdown box.

Save your document, run it in canvas supported browser and start to draw something on your canvas drawing board!

View Demo

HTML5 Storage: IndexedDB (Simple Easy to Understand)

admin — Sun, 23 Dec 2012 01:44:54 +0000

Please note: This only works as intended in browsers that support the HTML5 IndexedDB API. Browser compatibility: Firefox 16 onwards, IE 10 and Chrome 12 onwards

What is IndexedDB?

The IndexedDB Database or better known it as IndexedDB, a new HTML5 web database that allows our HTML5 web application to store data inside a user’s browser. Unlike HTML5 localstorage which lets us store data using a simple key-value pair only, the IndexedDB is more powerful and useful for applications that requires to store a large amount of data. In addition, with its rich queries abilities, these applications can load faster and more responsive than ever.

Why Using IndexedDB?

The W3C has announced that the Web SQL database (another option of HTML5 storage) is a deprecated specification, and web developers should not use the technology anymore. Instead, web developers should use the replacement – IndexedDB, a new HTML5 data storage to manipulate their data on client-side.

The Key Concept of IndexedDB

IndexedDB is NOT same as a Relational Database: Please keep in mind that IndexedDB is Object-Oritend, which differs from relational database. This important and fundamental difference affects the way you design and build your applications.
IndexedDB store key-value pairs: The value is an object that can have 1 or more properties. The key can be based on a key generator or derived by a key path that defines the path to the key value.
The IndexedDB API is mostly asynchronous: Tha API doesn’t return any values, instead we need a callback function to get the returning data.
IndexedDB does not use Structured Query Language (SQL): It uses queries on an index that produces a cursor, which you use to iterate across the result set.
IndexedDB prevents applications from accessing data with a different origin: You can only retrieve the data from the same origin (domain / port).

The Outline of This Article

Following decribes exactly what you will learn in this article:

Open a database and start the transaction.
Create an object store.
Record and read data.
Listen to the DOM event.
Display the data(result) from the indexedDB

*Here is an important message for you, the IndexedDB is still an experimental technology, and this technology is not yet solidified at the moment, so every browser vendors may have different implementations of the IndexedDB API.

Please check out the demo before we start the tutorial.

View Demo

Get Started

Since we know that the IndexedDB API is still evolve, so we need to include the following prefixes of implementation. Besides, for best practice, we should always provide fallback content for unsupported browsers.

//prefixes of implementation that we want to test
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

//prefixes of window.IDB objects
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

Opening an IndexedDB Database

Before we create the database, the very first thing to do is to prepare some data for the database. Let say we have some customer information as shown below:

const customerData = [
  { id: "00-01", name: "Bill", age: 35, email: "bill@company.com" },
  { id: "00-02", name: "Donna", age: 32, email: "donna@home.org" }
];

2 data enetries, each entry consists of the information of ID, name, age and email of the customer.

Before we can insert the data into the database, we need to open our database using the open() method as shown below:

var db;
var request = window.indexedDB.open("newDatabase", 1);

request.onerror = function(event) {
  console.log("error: ");
};

request.onsuccess = function(event) {
  db = request.result;
  console.log("success: "+ db);
};

request.onupgradeneeded = function(event) {

}

As you can see we have opened a database with the name “newDatabase” and the version of the database. All IndexedDB databases are stored in the same origin with the web application / website. Example, if myblog.com might has a database named “newDatabase” and mybusiness.com also might has a totally distinct database named “newDatabase”.

The open() method has accepts 2 parameters, the first is the name ofthe database. It will checks whether the database named “newDatabase” is already exist or not, if it is exist, then it will open the database, else it will create a new one. The second paramter of open() method is the version of the database, which allows you to update the schema of the database.

Onsuccess handler

If everything succeeds, then a success event “onsuccess” is fired with request as its target and we have save the request’s result for later use by assigning it to db variable.

Onerror handler

If the process of opening database fail, then an error event “onerror” is fired.

Onupgradeneeded handler

If you want to update the database, or to create, delete or modify the database, then you have to implement the onupgradeneeded handler or which will be called as part of a versionchange transaction that allows you to make any changes on the database. Please bear in mind that, the “onupgradeneeded” handler is the only place for you to alter the structure of database.

Structuring the Database

Again, IndexedDB is NOT same as a Relational Database. IndexedDB uses object stores to store data rather than tables. Whenever a value is stored in an object store, it is associated with a key. The interesting of IndexedDB is it allows us to create indices on any object store. An index lets us to access the values stored in object store using the value of a property of the stored object. This may sound confusing now, but you may know it better after go through the entire lesson.

The following code illustrates how we create the object store and insert the pre-prepared data into it:

request.onupgradeneeded = function(event) {
	var db = event.target.result;
	var objectStore = db.createObjectStore("customers", {keyPath: "id"});
	for (var i in customerData) {
		objectStore.add(customerData[i]);	
	}
}

We create an object store using createObjectStore() method. This method accepts 2 parameters: – name of the store and a parameter object. In this case, we have named the object store as “customers” and defined a keyPath that is the property that makes an individual object in the store unique. In this example, we have use the “id” as keyPath, which is unique value in the object store, and you must make sure that the “id” property must be present in every objects in the object store.

Once the object store is created, we can start adding the data into it using for loop.

Manually Adding Data

You may probably want to manually add extra data into the database, then here is how you should write the function:

function add() {
	var request = db.transaction(["customers"], "readwrite")
                .objectStore("customers")
                .add({ id: "00-03", name: "Kenny", age: 19, email: "kenny@planet.org" });
				
	request.onsuccess = function(event) {
	  	alert("Kenny has been added to your database.");
	};
	
	request.onerror = function(event) {
		alert("Unable to add data\r\nKenny is aready exist in your database! ");	
	}
	
}

We have just manually added a new data named with “Kenny” to the object store “customer” using add() method.

Before we can do anything (read, write, modify) to our database, we have to start use a transaction. The transaction() method is used to specify which object stores you want the transaction to span. The transaction() mthod accepts 3 parameters (second and third are optional): – First is the list of object store you want to deal with, second is whether you want to read only or read and write to the object, third is the versionchange.

The transaction method let you have the object store that you specified and insert, modify or delete the data that you need. In this case, we insert the data using add() method.

Retrieving Data

Let’s retrieve the data from the database. We can retrieve the data using get() method.

function read() {
	var transaction = db.transaction(["customers"]);
	var objectStore = transaction.objectStore("customers");
	var request = objectStore.get("00-03");
	request.onerror = function(event) {
	  alert("Unable to retrieve daa from database!");
	};
	request.onsuccess = function(event) {
	  // Do something with the request.result!
	  if(request.result) {
	  	alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
	  } else {
		alert("Kenny couldn't be found in your database!");  
	  }
	};
}

We use get() method to retrieve the data we need from object store. Since we already set the id of object as keyPath earlier, so the get() method will look up the object that has the same id value. This will return us the object named “Kenny”which is the object that we manually added in the previous function.

Retrieving All Data

If you want get all data instead of one from object store, then you may need to use a cursor. Here is another function that using cursor to retrieve all data from object store:

function readAll() {
	var objectStore = db.transaction("customers").objectStore("customers");
 
	objectStore.openCursor().onsuccess = function(event) {
	  var cursor = event.target.result;
	  if (cursor) {
		alert("Name for id " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email);
		cursor.continue();
	  }
	  else {
		alert("No more entries!");
	  }
	};	
}

As you can see, we implement the openCursor() method to accomplish the goal. The openCursor() is used to iterate over multiple records in a database. It can accepts several parameters, such as limit the range items, the direction that we want to iterate and etc. In this case, we leave it no parameters.

The cursor object itself is the result of the request. We have implement the continue() function to continues with the next iteration in the loop. When the loop reached end, then we will get the alert with content “No more entries!”.

Removing Data

Removing data from object store is very similar to other functions that we have just learnt. Here is how the code looks like:

function remove() {

	var request = db.transaction(["customers"], "readwrite")
                .objectStore("customers")
                .delete("00-03");
	request.onsuccess = function(event) {
	  alert("Kenny's entry has been removed from your database.");
	};
}

If you want to remove data from object store, then you may need to use delete() method. You have to pass the keyPath of the object that you want to remove as paramter to the delete() method. In this case, we remove the object with named “Kenny” which we added via add function just now.

The HTML

We have just wrote all the functions, and now is the time to display the data using the onclick event that binded to HTML button.




IndexedDb Demo | onlyWebPro.com

We have prepared 4 HTML buttons. Each of the button is used to trigger the Javascript function that we wrote earlier in this article. Save your document and view it in supported browser. Have fun!

The Final Code




IndexedDb Demo | onlyWebPro.com

View Demo

Conclusion

The HTML5 IndexedDB API is very useful and powerful. You can leverage it to create rich, online and offline HTML5 application. In addition, with IndexedDB API, you can cache data to make traditional web applications especially mobile web applications load faster and more responsive without need to retrieve data from the web server each time.

Animating Sprites In HTML5 Canvas

admin — Fri, 05 Oct 2012 13:15:50 +0000

When you want to build your own web games using the HTML5 Canvas element, you will need to find a way to handle your sprites animation. In this article, we will introduce HTML5 Canvas animation and walks you through creating an animation of character walking.

View Demo

If you are new to HTML5 Canvas element, I suggest you to read this article first “HTML5 Canvas For Absolute Beginners“.

We are going to use the following PNG file as source of our sprite sequence:

PNG sprite sequence

HTML5 Structure


    
    	
        Animating Sprites In HTML5 Canvas | onlyWebPro.com

We will create a canvas for displaying our sprites and set the width, height of the canvas to 100px. Please bear in mind that, the width and height of each frame of the PNG sprite sequence is 100 pixel:

Besides, please remember to assign an id for our canvas element. For this case, we named it as “myCanvas“.

And that’s all for the HTML structure! Now, let’s take a look at the JavaScript section.

JavaScript

As you seen above, the first thing we do in JavaScript section is to define the variables:

width: The width of the canvas.
height: The height of the canvas.
frames: The total frames of the animated sprites.
currentFrame: The current frame of the animated sprites.
canvas: For accessing the rendering context element.
ctx: Render canvas’s context in 2D format.
image: A variable to hold our PNG file.

To animate the sprite, we need just display each frame of the sprite using drawImage() method. The drawImage() is a method that allow us to draw image or video onto canvas. Below is the syntax and parameters of drawImage():

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Parameter	Description
img	Specifies the image, canvas, or video element to use
sx	Optional parameter. The x coordinate where to start clipping
sy	Optional parameter. The y coordinate where to start clipping
swidth	Optional parameter. The width of the clipped image
sheight	Optional parameter. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional parameter. The width of the image to use (stretch or reduce the image)
height	Optional parameter. The height of the image to use (stretch or reduce the image)

Next, we write a conditional statement to check if the currentFrame is less than total frames, then increment the currentFrame. The currentFrame is used to decide which frame of the sprite should we display on the canvas via drawImage() method.

Lastly, we use “setInterval()” to run the draw function every 100 milliseconds.

That’s it! Save your document and run it on supported browser!

JQuery Mobile for Absolute Beginners – Part 4

admin — Mon, 17 Sep 2012 02:05:14 +0000

The Full Series

Hi guys! Welcome to the part 4 of jQuery Mobile for Absolute Beginners. In this lesson,you will learn to create a simple interactive page using Touch Event provided by jQuery Mobile framework. If you haven’t already, be sure to read the previous articles of this series first!

Touch Event in jQuery Mobile

jQuery Mobile offers several touch events that allows user to interact with jQuery page that look and feel like native mobile application. Following is the list of touch events that we could use for our jQuery Mobile project.

tap: Tap event triggers after a quick, complete touch event.
taphold: Tap Hold event triggers after a held complete touch event. By default, user must hold their tap for 750 milliseconds before the taphold event is fired on the target element.
swipe: Swipe event triggers when a horizontal drag of 30px or more (and less than 75px vertically) occurs within 1 second duration.
swipeleft: Swipe Left event triggers when users swipe from right to left on the target element.
swiperight: Swipe Right event triggers when users swipe from left to right on the target element.

Creating An Interactive Page Using Touch Events

Ok, let’s create an interactive page using the touch events that we just learned. The idea is to have a face illustration and reveal more facial expression when swipe & tap hold on it. You can check out the demo before we proceed.

Note: Best viewed in iOS Safari & Android browser.

View Demo

HTML Structure



	
	jQuery Mobile Touch Event Demo From onlyWebPro.com
	
	
	
	



	
		Interactive Facial Expression
	


	
    	
            

            Instruction:

            Swipe Left / Right to change the facial expression.

            Tap & Hold for a second to change back its original facial expression.
        

	


    
		© Copyright 2012 by onlyWebPro.com

We will have a basic structure of jQuery Mobile Page where consists of header bar, content region and footer bar. Within the content region, we will have a division called “swipe_area” which contains a picture division and instruction. The picture divison contains class that gives us ability to control the facial expression using jQuery and CSS later.

CSS Style

We have given width and height for the picture division, and assign a CSS sprites (The facial expression graphic) as background image to it.

We have re-position the background image to just show the part of the image we need when user swipe left /swipe right / tap hold on the page.

jQuery Code

Here is the section where we make our page look lively.

We have bind the swipeleft, swiperight and taphold events to the swipe_area division. If user is swipe the page from right to left, a new class “left” will be added to the picture holder; Conversely, if user is swipe the page from left to right, a new class “right” will be added to the picture holder.

To change back original facial expression, user is requires to tap and hold for a second for triggering taphold event.

That’s it! Save your document and view it in your smart devices!

Conclusion

You have just learned about the usage of Touch Events of jQuery Mobile. You know how to make your jQuery Mobile page lively by implementing touch events such as swipe left, swipe right and tap hold.

Stay tuned for more.

JQuery Mobile for Absolute Beginners – Part 3

admin — Fri, 31 Aug 2012 02:56:09 +0000

The Full Series

Hi guys! Welcome to the part 3 of jQuery Mobile for Absolute Beginners. In this lesson, we will discuss on the form elements that used in jQuery Mobile. If you haven’t already, be sure to read the previous articles of this series first!

Form in jQuery Mobile

The jQuery Mobile automatically converts the HTML form elements into finger-friendly, more attractive and useable on a mobile device. jQuery Mobile requires all form elements must be wrapped in a valid

tag that has an action and method, all form elements be paired with a meaningful label, and all form elements should have unique id across the pages in a site, and please keep in mind that, the form data submission for jQuery Mobile is automatically handled via AJAX.

Text Input & Textareas Element

Constructing a text input or textarea in jQuery Mobile is same as you coded with standard HTML elements.


Username:


Textarea:

Outcome

This will produce a basic text input & textarea with default styles, which set the width of the elements to 100%.

With jQuery Mobile, you can apply HTML5 input types such as password, email, number, tel into your input text elements. By specifying input types, mobile device users can speed up their data entry with specialized keyboard provided automatically by their browser. Example:

If you want to visually group your text input elements, you can wrap the text input in a container with the data-role=”fieldcontain” attribute as shown below:


    Username:

Outcome

Using data-role=”fieldcontain” attribute, aligns the input and associated label side-by-side, breaks and divide elements into 2 rows below 480px.

Search Input Field

By settings an text input as search input field, jQuery Mobile styles a text input with a magnified search icon and provides an “x” icon to clear the field once you start typing.

Search:

Outcome

Select Menus

jQuery Mobile leverages native OS option menu by default, which means when select menu is tapped, the native OS menu will open.

The framework also provide option for us to use custom-styled select menus instead of the native OS menu. To use custom-styled select menu, you just have to add data-native-menu=”false” attribute to your select menu.

Select Menu:

Then your select menu will become like this:

Outcome

Flip Toggle Switch

The flip toggle switch is used for true or false data input. To construct a flip toggle switch, start with a select menu with ONLY 2 options and add data-role=”slider” to the select menu. Remember that? Flip toggle switch is used for true or false data input! So, the first option will be styled as “on” status and the second will be “off” status.

Flip switch:

Outcome

Slider

To use a slider in your jQuery Mobile page, add an input with the type=”range” attribute. The jQuery Mobile will automatically style and enhance the slider without any need to apply a data-role attribute.

Input slider:

Outcome

There are some other attributes that you can use with slider such as:

step: To force the slider to snap to a specific increment.
data-highlight: Have a highlight on the slider.

Extras: If you like to find out more about constructing jQuery slider for desktop, please read our previous tutorial – Build A jQuery Range Slider Within 5 Minutes!

Checkboxes & Radio Button

To construct checkbox and radio button, you can write your code as same as standard HTML elements.

Windows

Mac



Car

Van

Outcome

For the radio button, the framework allow us to turn it into grouped button sets / tabs navigation where only a single button can be selected at once. To construct a tabs, what you need to do is just to wrap radio tag in a

tag, add the data-role=”controlgroup” and the data-type=”horizontal” to the fieldset.

 

Car

Van

Outcome

Conclusion

You have just learned about the usage and the attributes of form elements in jQuery Mobile. You know how the framework styles the element, and you also know when to use the element and how to use them with jQuery Mobile.

Stay tuned for more.

JQuery Mobile for Absolute Beginners – Part 2

admin — Sun, 15 Jul 2012 09:36:49 +0000

The Full Series

Hi guys! Welcome to the second part of jQuery Mobile for Absolute Beginners. In this lesson, we will discuss on how the HTML5 data-* attributes that jQuery Mobile relies on to support various UI elements, transitions, and page structure. If you haven’t already, be sure to read the previous articles of this series first!

Introduction to HTML5 data-* attributes

The data-* attribute is a HTML5 elements that allow you to define and store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler. If you like to know more about the HTML5 data-* attributes, please read our previous article, to find out more. The jQuery Mobile uses the data-* attribute to transform basic markup into an enhanced and styled widget. Example, you are required to define the “data-role” for the header, body content and footer, when you are working with jQuery Mobile.

To learn more about HTML5 data-* attributes, please visit our previous article – A Complete Guide Of Using HTML5 Data Attributes (Data Set)

Supported data-* Syntax For jQuery Mobile.
Here is the supported list of data-* syntax that you should know when you are trying to transform your HTML markup into styled widget.

Header, Body Content & Footer

If you want to create header, body content & footer for your mobile website or application, then you should write your HTML markup as shown like below:

As you can seen above, “data-role” attribute has been used to inform jQuery Mobile to assign the specific role to the specified div.

Button

Let say, we want to create a click-able button, then we should assign “button” as a value for “data-role” attribute.

Button

Output:

The markup above will turn the link element into a button so it’s easy to click. Besides that, you can add an icon with the “data-icon” attribute and set its position with the “data-iconpos” attribute. Example:

Button With Icon

Output

The framework has provided ample of icons for us to use it in our projects, you can click here to see the complete list of available icons for button.

Grouped Buttons

Sometimes, we may want to visually group a set of buttons together to form a single block that looks like a navigation component. With jQuery Mobile framework, we can easily get the effect by writing our code in this way:


Yes
No
Confirm Later

Output

Just wrap all the buttons in a div container with ‘data-role=”controlgroup”‘ attribute. The “controlgroup” will tell the framework to remove all margin and drop shadow between the buttons and grouped them all together.

By default, the grouped buttons presented as a vertical list, but the framework do also allow us to arrange the grouped buttons horizontally by adding the ‘data-type=”horizontal”‘.

Output

List Views

A list views is an unordered list that contains click-able list of items with a ‘data-role=”listview”‘ attribute. By declaring a


    Home
    About
    Contact

Output

Usually, web designers will add thumbnails or icons to the left of a list item. By adding thumbnails into the list views, the jQuery Mobile framework will scale the image to 80 pixels square.


    Home
    About
    Contact

Output

For the icons, if you want to add a standard size 16 x 16px of icon into the list item, then you could specify it by adding “ui-li-icon” to the image element.

Dialogs

We can present a page into a modal dialog by adding ‘data-rel=”dialog”‘ to the click-able link. Usually diaogs is used for confirmation of a decision, such as money transaction. Example:

Open dialog

Output

By default, the dialog will open by a “pop” transition, but the framework do allow us to specify any page transition using “data-transition” attribute.

Page Transitions

Here is a list of page transitions that available for us to apply to any page link or form submission with Ajax navigation.

fade
pop
flip
turn
flow
slidefade
slide
slideup
slidedown
none

Example of usage, open a dialog with “flip” page transition:

Open dialog

You can view the set of demos on supported browser such as latest Chrome and Firefox.

View Page Transition Demo

Conclusion

You have just learned to apply HTML5 data-* attributes to the HTML elements to transform them into fingers friendly elements. And you also learned that how the jQuery Mobile relies on the data-* attributes to support various UI elements, transitions, and page structure.

In the next coming tutorial, we will discuss more on the form elements that used in jQuery Mobile. Please follow us on either Facebook, Twitter, Google+, Stumble Upon or LinkedIn for upcoming updates!

JQuery Mobile for Absolute Beginners – Part 1

admin — Fri, 29 Jun 2012 06:52:49 +0000

The Full Series

Over the past few years, the iPhone 3GS gains attention from the public, smart devices started to appear that allowed us to do personal email, virtual social, e-commerce and the mobile era began to grow. We have seen a tremendous growth in browser and OS support for mobile websites, most notably is Apple iOS devices and Google Android Devices.

Due to multiple platforms, screen sizes, browsers, up until recently it was still very difficult to design and develop a single piece of mobile theme that able to work across all these platforms and deceives. Thanks god that, jQuery mobile has come to solve all these problem for us.

Introduction to jQuery Mobile

The jQuery Mobile is a framework that built on top of the jQuery and jQuery UI foundation. The framework allow us to develop a single mobile web applications that work across smartphones, platforms and tablets. In addition, one for the great features that jQuery Mobile is “Progressive enhancement and graceful degradation“, which means that jQuery Mobile will fully leverages the latest HTML5, CSS3, and JavaScript on the supported modern devices and will still provide the best possible experience, basic functionality and basic content for less capable devices as well.

The framework itself is a separated from jQuery core, which you have to download it from jQuery Mobile Official Website.

List of Supported Mobile Devices / OS Platforms

The jQuery Mobile framework currently is supporting 3 graded devices:

A Grade

The framework will provide full experience with Ajax-based animated page transitions to all platforms that fall under this category. Some of the common platforms that fall under this category are:

Apple iOS 3.2-5.0
Android 2.1-2.3
Android 3.1 (Honeycomb)
Android 4.0 (ICS)
Windows Phone 7-7.5
Blackberry 6.0, 7
Blackberry Playbook (1.0-2.0)
Firebox Mobile (10 Beta)
Opera Mobile 11.5
Kindle 3 and Fire

B Grade

The devices / platforms that fall under grade B, are able to view jQuery Mobile page with enhanced experience EXCEPT without Ajax navigation features.

Blackberry 5.0
Opera Mini (5.0-6.5)
Nokia Symbian^3

C Grade

Lastly, grade C devices / platforms users are able to view the basic content and access basic functionality of page. The devices / platforms are:

Blackberry 4.x
Windows Mobile
All older smartphone platforms and feature phones

For full list of updated devices / platforms, please visit jQuery Mobile site for more information.

The Basic Structure of jQuery Mobile Page

Ok, let’s start to build our first jQuery Mobile page. Before we start, we have to get to know the basic structure of a jQuery Mobile page. Basically, a jQuery Mobile page should consists of 3 sections, which is:

Header bar: Usually contains page title and back button.
Content region: All your page content should be placed under this section.
Footer bar: Contain footer navigation and copyright information.

That’s it! Simple enough right? Let’s start to build it!

Open up your web authoring tools, and place the following HTML code:

 
 
	 
	jQuery Mobile Tutorial From onlyWebPro.com 
	 
	
	
	
 
 

	
		Page Title
	


		
		Hello world		
	

    
    
		Footer

Explanation:

At the first line, we have define the document type as HTML5 using
At line 05, we use the viewport meta tag to set the screen width to the pixel width of the device
At lines 06, 07 and 08, we load 3 necessary jQuery Mobile components into the document
At line 11 – 23, a div with a data-role of “page” is the wrapper used to delineate a page, and the header bar with data-role=”header”, content region div with data-role=”content” and footer bar with data-role=”footer” are added inside to create a basic jQuery Mobile page.

Do you notice that from the page wrapper, header bar till the footer bar, every one of it has an attribute call “data- “. These data- attributes are HTML5 attributes that used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget. We will cover the details on the upcoming tutorial.

Save your file and preview it on supported browser, you should see your document displayed exactly as the following image:

Yeah! You have just created a jQuery Mobile Page, which is work across devices, platforms and screen sizes.

Conclusion

You have just learned about the jQuery Mobile framework and how the framework optimized and rendered your mobile page on smartphones, tablets and less capable devices. Besides, you have also learned to create a jQuery Mobile page.

In the next tutorial, we will discuss on how the HTML5 data-* attributes that jQuery Mobile relies on to support various UI elements, transitions, and page structure as well. Stay tunes!

onlyWebPro » JavaScript

Make A jQuery Sticky Header In 5 Minutes

The HTML Structure

Make Money

Introduction To Growth Investing

Types of Growth Investments

The Bottom Line

The CSS

The JavaScript

Conclusion

Create Sequential Animations in jQuery

Setup HTML Structure

Method 1: Using jQuery .ep() Method

Method 2: Using jQuery .ep() & .slice() Method

Method 3: Silly But Not Stupid (Manually Creating Effects)

Develop A jQuery Parallax Scrolling Framework

Introduction to Parallax Scrolling

The Concept

The HTML Markup

The Demo of jQuery Parallax Scrolling

What is Parallax Scrolling?

Example of Parallax Scrolling?

The CSS

The JavaScript

Create HTML5 Canvas Drawing Board Within 5 Minutes!

HTML Structure

CSS Styles

The JavaScript

HTML5 Storage: IndexedDB (Simple Easy to Understand)

What is IndexedDB?

Why Using IndexedDB?

The Key Concept of IndexedDB

The Outline of This Article

Get Started

Opening an IndexedDB Database

Onsuccess handler

Onerror handler

Onupgradeneeded handler

Structuring the Database

Manually Adding Data

Retrieving Data

Retrieving All Data

Removing Data

The HTML

The Final Code

Conclusion

Animating Sprites In HTML5 Canvas

HTML5 Structure

JavaScript

You may also like:

JQuery Mobile for Absolute Beginners – Part 4

The Full Series

Touch Event in jQuery Mobile

Creating An Interactive Page Using Touch Events

HTML Structure

Interactive Facial Expression

CSS Style

jQuery Code

Conclusion

JQuery Mobile for Absolute Beginners – Part 3

The Full Series

Form in jQuery Mobile

Text Input & Textareas Element

Outcome

Outcome

Search Input Field

Outcome

Select Menus

Outcome

Flip Toggle Switch

Outcome

Slider

Outcome

Checkboxes & Radio Button

Outcome

Outcome

Conclusion

JQuery Mobile for Absolute Beginners – Part 2

The Full Series

Introduction to HTML5 data-* attributes