Tuesday, April 30, 2013

Jquery Mobile Form - Text inputs

    In this post on "form text input's" styling and usage using Jquery Mobile we will cover various input types and textarea styling using JQM. We will also cover the various attributes that can be used with the input types. Text inputs and textareas are coded with standard HTML elements, then enhanced by Jquery Mobile to make them more attractive and useable on a mobile device.

    The text input elements are available in 2 flavors/sizes - regular and mini. Following is a standard HTML syntax for an input element.


    Adding a data attribute data-mini="true" to the input tag renders a smaller sized input element. Let's take a look at the code sample below to understand the working in a better way.

    Apart from the regular input type, to accept multi-line input, use the textarea element. The advantage of using textarea in Jquery Mobile is that, the framework auto grows the height of the textarea, avoiding the need for the content in the textarea to be scrolled internally. In the example below, you will see to implementations of textareas - one with label and textarea on 2 separate lines and the other with the label and textarea on the same line.



    In the code above, you will see 4 different implementations of the input element. The first one is a regular input of type text with the label and the textbox one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attribute "data-mini="true"" which reduces the size (basically height) of the textbox.

    The third implementation gets the label and the textbox on the same line. This implementation is done using a div with data attribute data-role="fieldcontain" around the label and input tags. This div has to be within a form tag. Maintaining the HTML structure is very important when using JQuery Mobile framework.

    In the fourth implementation, we have used the HTML5 placeholder property and done away with the label completely. However, for the sake of accessibility, we have included the label tag with class="ui-hidden-accessible" so that the label is not displayed but is present in the HTML structure. This implementation is popularly used on mobile sites as this reduces the amount of scroll.

    To disable the input field just add the keyword "disabled" to the input tag and your input type would be disabled.

    A note on accessibility:
    For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself. While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

    You can use the various input types supported in HTML5. The advantage of using the HTML5 input types is that keybords default to the particular input type are displayed by default. The following example demonstrates the various HTML5 input types that you can use. Try out the example on a mobile device and you will see for yourself the various keyboards that default the particular input type.



    The mobile browsers that do not support the new HTML5 input types will fall back to the default input type="text" and show the default alpha-numeric keyboard. Adding the images (screenshots) of default keyboards displayed for different input types on the Android and iOS devices, to this post would make the post really long and so I have included these images here.

    Hope this post has been informative to you and helps you use the various input types effectively in your next Jquery Mobile based application. Drop a comment to let me know what you feel about this post as well as the earlier series on Jquery Mobile listview. Share the post if is has helped you, so that maximum developers benefit from this one. Till next time, happy coding!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Default keyboards for HTML5 input types

    Following is the list of default keyboards that are displayed for the various HTML5 input types. These screenshots have been taken on the Android and iOs devices.

Input type="color"







Input type="date"






Input type="datetime"





Input type="datetime-local"






Input type="email"







Input type="month"







Input type="number"







Input type="number+pattern"




Input type="password"




Input type="tel"




Input type="time"




Input type="url"




Input type="week"





If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Friday, April 26, 2013

Jquery Mobile - Introduction to form elements

    Jquery Mobile framework provides a complete set of finger-friendly form elements that are based on native HTML form elements. In the posts that will follow, we will take a look at the various form elements and the various properties that we can apply to these form elements.


   We will be taking a look at all the form elements like input types, textareas, slider control, toggle switch, radio buttons, checkboxes and select menus. We will also be covering how to use the mini versions of each of these input elements, how to disable them, how to initialize them and how to use the refresh method on the form elements.

    Hope you all enjoy the series on form elements like you loved the series on Jquery Mobile listview. Do drop a comment to let me know what you would want from this series and I would be happy to include those points. Share the word! Happy coding!



If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Jquery Mobile Listview enhancements and customization

    In this post today, we will take a look at the various enhancements and customization that we can do to the standard listviews. All these enhancements or customization are questions asked by various people on the Jquery Mobile forum. I have tried to put together a solution to some of them.

    Let's take a look at a few of them. Some questions are really amazing like "When i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview?" Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution that I had put together.

    Another really nice question was "Listview with collapsable listview inside". This is really a good example to try out. Take a look at the solution that was proposed and also taken from other jsfiddles. There is this another enhancement where we can "Add a count bubble to a collapsible listview header ". We had see an example on listviews with count bubbles. We can add the class "ui-li-count" to only list dividers or simple listview. We cannot add it to a collapsible list. Here is a solution wherein we can achieve it with the closest possible style.

    Some minor looking style changes like "Changing collapsible div color" can also be easily achieved with something as seen in this solution. On a number of occasions when we are deep into coding something really complex we tend to forget the most basic stuff and then end up facing issues like "Adding a missing icon to a listview". Well the solution to this was very obvious and simple. The link/anchor tag that is required to get an "arrow-r" icon on the listview was definitely missing. Here is a link to the details of the issue.

    Hope it has been a fun ride for you all so far. Hope you have enjoyed the series on listview and enjoying exploring the Jquery Mobile framework. Drop a line to appreciate, criticize, comment or ask a doubt and share if you have enjoyed the post. I would be happy to help!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, April 25, 2013

Jquery Mobile accordions - Collapsible listviews

    "How do I add a collapsible list to my Jquery Mobile application?" If this is the question that's bothering you, then JQM has a solution to this and a pretty simple one. You can style the listviews as collapsibles very easily and you can have individual collapsible lists or a set of collapsible lists (accordions). We will take a look at how we can achieve both of these.

    Let us begin with the individual collapsible listviews. You can achieve a collapsible by merely adding a div with data-attribute data-role="collapsible". This will style the div as a collapsible block with a default "plus" icon positioned to the left end of the list. To add a heading to the collapsible list add a heading tag (h1-h6) and you will have a left-aligned title for your collapsible header. After you have added the header, you can now have any content that you wish to include in the collapsible.

    Let's take a look at the example below to better understand the collapsible list implementation. We have 3 individual collapsible lists with different data-theme attributes. You can have a list open by default by including data-collapsed="false" attribute. By adding the data-content-theme attribute, you will get a border to the collapsible container.


    Now that we have created individual collapsible lists, we can club them together to create a collapsible set or an accordion as it is more commonly know. To do this add a div with data-role="collapsible-set" attribute around the collapsible divs and you will get an accordion. In the collapsible-set or the accordion, only one collapsible list would be open at a time. Refer to the following example to understand the implementation of a collapsible-set or an accordion.


    Hope you have followed how to create a collapsible list and a collapsible set. Do drop a comment in case you have liked this post or have some suggestions on the same. Let me know in case you have any problems and I would be happy to help! In the next post we will see some of the various issues that I came across on the Jquery Mobile official forum and their resolutions.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Jquery Mobile listview with custom icon

    This is the last post in the series of Jquery Mobile listviews before we move on to Jquery Mobile accordions (collapsibles) and then a series on form elements in Jquery Mobile. Today we will see how to add a custom made, third-party icon in listview instead of the standard icons provided by Jquery mobile.

    Wondering how to customize a list view, or adding a custom icon to a listview. Well there are 2 ways in which you can do this and we will see both.

    The easy way #1:
    Jquery Mobile provides the developers with creating a custom icon class something like a .ui-icon-custom and then adding data attribute data-icon="custom" to the list item. Let us take a look at the example that follows. This example would make things all the more clear.



    The difficult way #2 (My personal favourite):
    Now adding a custom icon to listview done in this way would help you explore how Jquery Mobile works or resolve some issues like "How to change the default "X" icon in the dialogs header" where you cannot use the easy way #1. Let's take a look at the example below and see how we can customize the listview.



    Hope you find this customization process important. I enjoy customizing the JQM defaults, challenges your mind! Hope you enjoy it too. Do let me know in case of any concerns regarding this post. Drop a comment in case you are facing any issues with customizing your Jquery mobile listviews; I would be happy to help!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Tuesday, April 23, 2013

Jquery Mobile - Theming listview icons

    After exploring all the standard listview types in the series of examples on listview, you must have observed that for a linked list, Jquery Mobile displays a standard "arrow-r" icon to the extreme right of the list. However, you don't want the standard "arrow-r" icon and you need some custom icon there.

    Jquery Mobile provides a set of icons that can be used along with listviews in place of the standard "arrow-r" icon. To override the standard icon, set the data-icon attribute on the desired list item to the name of a standard icon. We will see a complete list of icons in the following example.

    However, before proceeding to the example, let us also consider a case where we do not wish to have any icon on the list item. This too can be achieved by setting the value of data-icon attribute to false. We will also include this in our example that follows.



    Hope you have followed this post. Do drop a line in case you find any errors with this post or need more information on this. We will take a look at how we can customize the listview by adding a third party custom icon to it in the next post. Stay tuned for a complete customization of the listview!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, April 18, 2013

Jquery Mobile - Listview with thumbnail images

    In the earlier post we took a look at how we can add an icon to the listview. In the example that follows, we will be taking a look at how to add a thumbnail to the list item. The process of adding a thumbnail is pretty much similar to adding an icon to a list item.

    Just add an image tag inside of the list item as the first child. The image would scale to a 80x80 pixel square image and positioned to the left of the list item text.

    Lets take a look at the example below to understand exactly how this is done.


    The above example is how Jquery Mobile displays thumbnails. But clients or the web designers never design what can be developed easily and so even I thought of having a variation for this example. How about adding responsive images as thumbnails? Images that will scale with the increase in width of a mobile device. I have set up a fiddle that we help us understand how this can be achieved. Let's take a look at the example that follows.


    Check out the CSS as it is the only thing that has been changed from the previous example. Overriding the JQM CSS helps in customizing your application to a great extent.

    Hope you have followed both the code samples. Drop a comment in case you need a solution to a problem you are struggling with. Also do mention if you are finding this series of examples helpful!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Jquery Mobile - Listview with icon images

    We have seen a number of examples on Jquery Mobile's listview and in continuation to the series of these examples, we will take a look at how we can add an icon to a listview. This icon will be positioned to the extreme left of the listview as we have the regular right arrow icon on the right of the listview.

    Adding an icon to the left of the text in a list item is pretty simple. Just add an image tag inside of the list item as the first child and add class ui-li-icon to this image element. The image would scale to a 16x16 pixel icon and positioned to the left of the list item text.

    Let's take a look at the example below to understand how this is actually implemented.



    Hope you have followed the example above. Drop a line in case you need further explanation on this or have any doubts. I would be more than happy to help!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Tuesday, April 9, 2013

Jquery Mobile - Text formatted listview

    "The regular listview looks plain. I want to add a few other details in my list item." Have you also faced this requirement from your client? Well, for those who have and also for those who haven't yet, you can keep in mind that you can create a text formatted listview using JQM and design accordingly for your next project.

    Let's take a look at the following example to understand how text-formatting can be achieved seamlessly.



    As you can see in the HTML code above, to add text hierarchy, you need to use headings to increase font emphasis and use paragraphs to reduce the font emphasis. Supplemental information like "Last update: April 9, 2013" can be added to the right of each list item by wrapping content in an element like 'div' or 'p' with a of class ui-li-aside.

    Now let's take a look at the CSS part. You will notice that I have included some CSS on id "no-ellipsis". If you have noticed, in the first list item, the description has been truncated and ellipsis (...) have been added at the end of line. This is the default behavior of JQM framework. However, you can over-ride this and display the complete description as you can observe in the second list item.

    Hope you have followed the code sample. In case you have any doubts regarding this code sample, feel free to drop a comment and I would be happy to help. If you have liked the post, remember to comment and let me know and also share the post so that others learn from it too.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Jquery Mobile - Listview with count bubbles

    Today we will take a look at how to add count bubble for a list item. Jquery Mobile includes text formatting conventions for a list item with count bubble. The count bubble appears at the right end of the list item just before the right arrow icon, if it is a linked list item.

    Like any other feature in JQM, adding the count bubble is a pretty simple task. Wrap the value that you want to display in the count bubble, in an HTML element like div and add the class ui-li-count to it. Doing this will add a count bubble to your list item. Take a look at the example below which will help you understand the implementation better.



    Hope you have followed this example and have grasped the implementation. Drop a comment in case you have any doubt and need something to be explained better in this post. In case you want to check more jquery mobile examples you can find a complete list of code samples here.


If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Monday, April 8, 2013

Jquery Mobile - Filtering the Listview

    So you have a very long list of items and you want to provide the users with a searching facility. There is nothing to worry here. Jquery Mobile provides a very simple solution to a very difficult and time-comsuming looking problem. jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...".

    Now again, this is not going to satisfy the client. The client will not like the default search and will ask for customization. No problem again. We can do it very easily again by virtue of the Jquery Mobile framework. To configure the placeholder text in the search input, use the data attribute "data-filter-placeholder" on your listview. By default the search box inherits its theme from its parent. The search box theme too can be configured using the data attribute "data-filter-theme" on your listview. So now you have a customized filterable listview.

    Following is a simple example of how the search works with the listview. Hope you have follow the example here. Do drop a comment in case you have any doubt or want to see something more in this post or on the blog in general.



If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Friday, April 5, 2013

Jquery Mobile - List dividers

    How about organizing your listview items? You can organize your listview items by adding the list dividers to have a well organized listview page. In the example that follows, let us take a look at how we can achieve this.

    Like any other Jquery example this too can be achieved in a very simple and easy way. Just add the data-role="list-divider" to any list item that you want to specify as a list divider. Adding data-role="list-divider" will style that list item as a blue bar - blue being the default swatch theme. In the example that follows, we have 3 list divider list items (li) which are - "Interesting Articles", "Google Maps API" and "Jquery Mobile"



    Hope you have followed the example above. We still have got a few more listview examples in the pipeline before we take the next step in Jquery Mobile framework. In case you have any doubts or have not followed the example, drop a comment and I will be happy to help!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Wednesday, April 3, 2013

Captain Kidd's treasure unveiled on Google Maps

    Another April Fools prank by our very own Google Maps Team. Unlike last time, when they created a 8-bit nintendo version of the Google Map, this time it was a visit to the history with a treasure map overlayed on the Google Maps. Google posted on it's Google Lat Long blog that the Google Street View team that was on an expedition in the Indian Ocean, recovered one of history's long lost relic - the treasure map of the infamous pirate Captain "William" Kidd.


    Captain Kidd was rumored to have buried his treasure around the world, and tales of a long-lost treasure map have lingered for generations. Google further blogged that, since the map was confirmed to be authentic and since it contained a lot of encrypted symbols, they had digitized the and made it accessible to everyone, so that all can help in finding the long lost treasure.

    The treasure mode - accessible in the top right-hand corner of the Google Maps window - includes a telescope-style Street View function, with sepia-tinged images of streets across the globe as can be seen below in a street view shot from the USA.


    Google further claimed that hidden symbols can be uncovered by shining sunlight on a computer screen, by joining phone and tablet maps together like a puzzle, or even by heating a laptop over the hob. The treasure map appears very intuitive as any other Google product. Hope you all enjoyed the Google Maps prank this year.


If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Tuesday, April 2, 2013

Jquery Mobile - Split button listview

    Today we will be taking a look at a listview example where we can include 2 clickable items instead of the usual 1 clickable item. In all the listview examples that we have seen till date, we have had only 1 clickable item per list, i.e. only 1 anchor tag included within the li tag. We will now take a look at an example where we will see, how to add 2 clickable items in the same list.

    In case where there are more than 1 possible action per list item, a split button can be used to offer two independently clickable items - the list item and a small icon in the far right. To make a split list item, we simple need to include a second link inside the li tag and JQM framework will do the rest for you. It will add a vertical divider line, style the link as an icon-only button and set the title attribute of the link to the text of the link for accessibility as you can see in the result section in the jsFiddle below.



    You can set the icon on the extreme right by specifying the data-split-icon attribute on the listview with an icon name you want. The default icon is "arrow-r" but can be configured with the splitIcon listview options. I have used the "star" icon in the above example. By adding a data-icon attribute to the list item, you can set individual icons for each split. The theme swatch color of the split button defaults to "b" but can be set by specifying a swatch letter with the data-split-theme attribute at the list level as I have used the "c". For individual splits, you can apply the swatches with data-theme attribute at the link level.

    The icon that we have used for the split need not be from the JQM default icon set. We can have our own icon and we will see how to customize the icon on the listview in subsequent examples. Stay tuned for more examples on Jquery Mobile. Hope you have followed this one. Drop a comment in case you have any issues regarding this code sample and I would be happy to help.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!