Friday, December 27, 2013

New Year 2014 wishes




May every day of the new year glow with good cheer and happiness for you and your family.

Spatial Unlimited wishes all its readers a a very
" Happy New Year "

Enjoy the Holiday Season...

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!

Sunday, December 1, 2013

Jquery Mobile 1.3.1 presentation

    We have been taking a look at several Jquery Mobile examples here and the the Jquery Mobile version that we were using was 1.2.0. The next stable version was 1.3.1 and included a few new features. I will be covering all the features of Jquery Mobile 1.3.1 in the presentation here and also other topics like:

  • Design constraints that we need to consider while developing our next mobile website or application
  • Different ways in which we can effectively debug our mobile website or web application from our desktop or using remote-debugging on the iOS and Android platforms.
    Take a look at the presentation below and you can redirect any queries to me here or tweet me @shreerangp or drop me a line on G+ +Shreerang Patwardhan. Hope you enjoy the presentation and also all the code samples that I have included as part of the presentation.

    The next stable release for Jquery Mobile would be 1.4.x. Once the Jquery Mobile team makes a release, I will put together a presentation that will talk about all the features of that version.


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, November 14, 2013

Tribute to Sachin Tendulkar



    Sachin Ramesh Tendulkar - The greatest batsman of this generation is playing his 200th test match starting today. This test match that is being played between India and West Indies at the "master blaster"'s home ground at the Wankhede Cricket Stadium in Mumbai is the final match that he will be playing. The legend of cricket, the little master, the master blaster, the GOD of Cricket retires after this test match at Wankhede.

    A billion hearts are praying for the great Sachin Tendulkar and everybody is paying their tribute to this great ambassador of the game of Cricket. Sachin has borne the burden of the entire nation throughout his entire career and has been the hope for a million cricket fans in India. I still remember, when I was a kid, I used to turn off the television when Sachin would be dismissed, knowing for sure that the Indian cricket team would loose the match after his dismissal. It would not be wrong, if I were to say that every Indian has wanted to be "Sachin Tendulkar" at some point in their lives.

    The holder of several cricketing records, Sachin Tendulkar started off his career at the age of 16. Ther on he has scored a 100 hundereds in international cricket and an extraordinary 51 hundreds in Test match cricket. I have put together a small simple map, displaying all the test centuries that he has scored across the globe against different opponents. This is my small effort to pay my tribute to the greatest of the great.

    There has never been a great player as Sachin Tendulkar and there probably will never be. A small token of appreciation to this great legend of Cricket from me. Hope you all enjoy the visual representation of Sachin's greatest achievements.

Link: Sachin's Test Centiries (My Tribute)
Click on the Sachin Icons on the map to view a photograph of that particular test match with the record below the picture.


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!

Saturday, November 2, 2013

Diwali Wishes 2013

Wishing all the readers of Spatial Unlimited a very Happy Diwali and a Prosperous New 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!

Friday, September 6, 2013

Jquery Mobile Toolbars - Header and Footer

    In Jquery Mobile there are 2 standard types of toolbars: Header and Footer. The header is typically the first element inside a mobile web page and the footer is typically the last. Both these toolbars usually contain buttons, links and text. In this post today, we will take a look at these 2 toolbars in Jquery Mobile. Lets's take a look at the code below.



    As you can see in the HTML above, the structure clearly shows that we have the header as the first element of the Jquery Mobile page and the footer as the last element of the page. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile "pages" may use a H1 element on the home "page" and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency as you can see in the above example, we have used H3.

    Now, let's see how we can add buttons to these toolbars. We will add 2 buttons in the header - the back button and another options button. In the footer we will just add a single button. Adding the buttons to the header and footer varies slightly. Let's take a look at the example below.



    jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. The header plugin looks for its immediate children and automatically sets the first link button the extreme left of the header and the next link button to the extreme right. So in the above example you will see the "Back" button aligned to the left and the "Options" button aligned to the right.

    Adding buttons to the footer is a little tricky. Any link or valid button markup added to the footer will automatically be turned into a button. To save space the buttons in the toolbars are set to inline styling so that the button is only as wide as the text and the icons in it. To include padding on the bar, we will be required to add a class "ui-bar" to the footer. You can try removing the class from the footer in the above example to see the results for yourself.

    With this we conclude our discussion on Jquery Mobile header and footer toolbars. Hope you have followed the code samples and hope this tutorial helps you use toolbars more effectively in your Jquery Mobile projects. There is a comprehensive list of examples that you might find exciting and helpful. Do leave a comment and share your thoughts.

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, August 29, 2013

Another feather in the cap


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, August 14, 2013

SASS - Nesting the CSS

    To begin with SASS we need Ruby to be installed on our machine. To set up Ruby and SASS on your machine refer to the following steps.

    If you’re using OS X, you’ll already have Ruby installed. Windows users can install Ruby via Windows installer, and Linux users can install it via their package manager. Once you have Ruby installed, you can install Sass by running:
gem install sass

    To translate your Sass file into a CSS file, run
sass --watch style.scss:style.css

    Now whenever you change style.scss, Sass will automatically update style.css with the changes. Later on when you have several Sass files, you can also watch an entire directory:
sass --watch stylesheets/sass:stylesheets/compiled

    We don't need to do so many things to get up and running. We just need our good old friend jsFiddle. We will take a look at the various features of SASS today onward. Let's discuss the most basic and an important feature today - Nesting. In all I will be covering the following features in various posts on this blog.

  1. Nesting
  2. Parent References
  3. Variables
  4. Operations and Functions using variables
  5. Interpolation
  6. Mixins (You'll love this!)
  7. Arguments based Mixins (You'll thoroughly enjoy this!)
    Enough of the intro and the overview. Let's get our hands dirty, right? So here we are...Let's start with the nesting feature today.

    Often when writing CSS, you’ll have several selectors that all begin with the same thing. For example, you might have “#navbar ul”, “#navbar li”, and “#navbar li a”. It’s a pain to repeat the beginning over and over again, especially when it gets long. SASS allows you to avoid this by nesting the child selectors within the parent selector.

    Let's take a look at the example that follows to understand the nesting feature in further detail. Before that, let's understand what we are trying to achieve. We want to create what we see in the image below.


    Now that we are clear with what has to be the output,let's dive into the code.


    As you can see in the above fiddle, we have got what we wanted to create. Take a look at the HTML. What we have is a ul-li within a div with id="navbar" and then there is an anchor within the li. I have created the HTML in such a way so that we can come to appreciate the advantages of SASS's nesting feature.

    In the CSS tab, you will find SASS CSS and the commented regular CSS. The uncommented SASS CSS is where you can see that the CSS properties for ul, li and a are all nested within the "navbar"'s properties. If we hadn't used SASS, we would have to written CSS in our regular way which is commented in the example above. The SASS CSS when compiled results in our regular CSS only.

    Hope you have followed the post and now understand the nesting feature of SASS. SASS makes life easier where you have large amount of CSS to write or maintain. Hope you enjoyed the post and you can take a look at the Jquery Mobile and Google Maps API examples that I have posted on the blog. Stay tuned for more SASS examples.

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, August 13, 2013

SASS: Syntactically Awesome Stylesheets - An Introduction


    I had some free time today, and decided to explore into SASS, which I had planned on doing for a long time. SASS is really cool and it really is simple styling with a lot of attitude. SASS really makes CSS so much fun. I loved it and am putting up a few posts to talk about the various features of SASS.

    SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance and much more. The SASS CSS is required to be compiled before it is transformed into standard CSS using a command line tool or a web-framework plugin. Let's not worry about this for now.

    SASS CSS can be written using 2 types of syntaxes. The most popularly used syntax is known as "SCSS", rightly named "Sassy CSS" and is a superset of CSS3's syntax. This means that every CSS3 stylesheet is valid SCSS as well. The second syntax is an older one known as the "indented syntax" or just SASS. This syntax is for people who do not love brackets and semicolons as it uses indentation of lines to specify blocks. Both of these syntaxes are supported by SASS, but we will be taking a look at examples using the SCSS syntax.

    Hope you love all the examples coming your way detailing every feature of SASS in the next couple of days. You can browse through a long list of Jquery Mobile and Google Maps API examples that have been discussed on this blog.

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, August 8, 2013

Jquery Mobile Buttons

    Buttons - an integral part of a form is styled really well and consistently using the Jquery Mobile framework. We will discuss and take a look at the different buttons, their styling and usage in today's post. Buttons are coded with standard HTML anchor and input elements, then enhanced by Jquery Mobile to make them more attractive and touch friendly for mobile usage. Let's discuss this and more in the example that follows.



    You must have already observed that the styling for the first 5 buttons is the same, even though the HTML markup for each is different. The first one is created using an anchor tag. The next one using a button element and further using input elements of type button, submit and reset. To create a button out of the anchor element, you need to include a data attribute data-role="button" with the anchor element. The framework now styles the anchor element as a button. Now the question arises as to when to use a anchor based button and when to use the input element based button. The answer is pretty simple here - if you are using a button for navigation purpose, use an anchor link based button and if you want one for form submission use the input elements. Adding data-mini="true" will render a smaller sized button as seen in the example by the black colored button.

    In several scenarios we require the buttons to be inline or basically on the same line and not stretched to the full width of the device. This can be achieved very easily with the help of Jquery Mobile framework. Just add data-inline="true" attribute to the buttons that you want to be displayed inline and you will have the buttons on the same line.

    The Jquery Mobile framework includes a selected set of icons most often needed for mobile applications. An icon can be added to a button by adding data-icon attribute on the anchor specifying the icon to display. You can view a full list of icons that can be used here. You can also position the icon by adding data-iconpos attribute to the anchor element. By adding data-iconpos="notext" you can even create an icon-only button as seen in the example above.

    To create a group of images clubbed vertically or horizontally is also possible by wrapping the buttons with in a div with data-role="controlgroup". This will group the buttons vertically. In case you want to group the buttons horizontally, you just need to add data-type="horizontal" attribute to the div along with data-role="controlgroup". Just add the "disabled" HTML keyword to disable a button. A disabled button would be styled with grey color for the background and will not be clickable.

    This ends our discussion on button styles using Jquery Mobile. Drop a line to let me know if you have any queries or suggestions on this post. Check out a comprehensive list of examples that is now available here. Till next time keep enjoying JQM 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!

Wednesday, August 7, 2013

Jquery Mobile Form - Select Menus Part II

    In part II of this tutorial on creating select menus using Jquery Mobile, we will discuss some customization techniques like overriding the default native OS select menu or disabling an option or creating a multi-select select box. It is advisable that you take a look at part I of this tutorial where we have discussed the basics of the select menu. In case you have decided to proceed with this part, then we are ready to take a look at the code that follows.



    In the example code above, you will observe 2 different selects. We will be discussing the following data attributes and HTML5 properties that will enhance the select menus further.

1. data-native-menu="false"
2. data-placeholder="true"
3. disabled
4. multiple

    As seen in the first implementation, by adding the data attribute data-native-menu="false" we can simply override the native OS menu control and display a pop-up containing the options in a listview. If there are a large number of options, the framework will automatically create a new "page" populated with a standard listview for the options.

    To create a placeholder for the select we just need to include a data attribute data-placeholder="true" to an option which holds the placeholder text. This option will then be styled accordingly and will not be selectable. In case you want to disable an option just add disable to that option and that option will be styled as a disabled listview. All the above three things are part of the first implementation in the above example.

    Lets now take a look at how to create a multi select select box. It is as simple as it sounds a big task. Just add keyword multiple to your select element (as seen in the second implementation) and the framework will style each of your option as a listview with a checkbox and you can select multiple options. Each of the options selected will be populated as comma seperated list on the custom select button. To top this off Jquery Mobile framework will aslo add a count bubble on the select button indicating how many options are selected.

    Hope you have enjoyed this post and the other form elements tutorials. Drop a line in case this has helped you, or if you have any concerns, comments on the post or the series of examples that I have shared so far. You can also check out the comprehensive list of examples on Jquery Mobile listview. Till next time, keep sharing - Sharing is Caring.

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 Form - Select Menus Part I

    Today we will take a look at the select boxes styling and usage using Jquery Mobile. Select menus has a little more explanation and examples than other controls and so I am dividing the select menus tutorial into 2 parts. In the first part, we will take a look at the basics of the Jquery Mobile select menus and in the second part we will take a look at the more complex examples involving the select menus.

    The Jquery Mobile select menu is based on the native HTML select element, which is styled and modified to suite the Jquery Mobile framework's style. By default, the framework leverages the native OS options menu to use with the custom select button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value. The framework also offers the possibility of having custom (non-native) select menus; which we will discuss in part 2 of this tutorial. Refer to the screenshots below to understand how the native select menus work.

The Native menu - Android 4.1.1/ HTC One X


The Native menu - iPhone 4S/ iOS 6.1.3


    The select boxes can be used singularly or in a vertical group or can be even grouped horizontally. These select boxes can be used along with data-mini="true" too, which renders the select boxes in a smaller size. We will take a look at all this in the example that follows.


    The first implementation of the select box in the above code is the regular, simple select box. The framework styles this select element as per the Jquery Mobile framework styles displaying a button with custom down arrow and using the native OS menu. The second implementation is exactly similar to the first one with the only difference of data-mini="true" attribute. Addition of this data attribute to the select element renders a smaller select box..

    In the next implementation we have the label and the select box aligned side-by-side. To achieve this, we need to wrap the select element with in a div with data-role="fieldcontain". Adding this data attribute to the div tells the framework to align the label and the select box side-by-side.

    In the fourth implementation we have the regular select element with the optgroup used for the options. Including options within the optgroup element, groups these options visually under a single optgroup label. However, the support for this feature in mobile selects is a bit spotty, but is improving by the day.

    Multiple select boxes can be grouped together like checkboxes or radio buttons to achieve visual grouping of the select elements. The select boxes can be grouped vertically as well as horizontally. To achieve this the select elements need to be wrapped within a fieldset element with data-role="controlgroup". Doing this would group the select boxes vertically (which is the default grouping technique). To group the select boxes horizontally as seen in the last implementation, you need to add another data attribute data-type="horizontal" to the fieldset element.

    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.

    Hope this post has cleared out your basics of the Jquery Mobile select menus. In part 2 of this tutorial, we will take a look at the advanced select menu options where we can override the default menu behavior and create differently styled select menus. Stay tuned for the advanced topics on select menus in the next post and you can also look at the complete list of Jquery mobile listview and form elements examples. Fun is on it's way!

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, August 6, 2013

Jquery Mobile Form - Checkboxes

    Checkboxes - popularly used in forms for multi-option selection, pose a problem in the mobile web world! The checkboxes being so small as they are, reduce the touch area and it becomes really difficult for selection. Jquery Mobile styles these checkboxes in such a way that they become touch friendly and gel with their overall framework design. Jquery Mobile styles the label for the checkboxes so that they are larger and clickable. A custom set of icons representing the checkboxes is added to provide additional visual feedback.

    The checkboxes can be used singularly or in a vertical group or can be even grouped horizontally. These checkboxes can be used along with data-mini="true" too, which renders the checkboxes in a smaller size. We will take a look at all this in the example that follows.


    In the first implementation you will see, 3 singular checkboxes which are not attached to each other like in the second implementation. These 2 implementations differ by the usage of the "fieldset" and the data-role="controlgroup". Adding the fieldset with data-role="controlgroup" around the input tags will group the checkboxes together giving them the right visual grouping. Using the data-mini="true" attribute with fieldset will render smaller sized checkboxes as seen in the third implementation.

    In the next implementation, we have the label and the checkboxes control group aligned next to each other. To achieve this you need to wrap your fieldset with dat-role="controlgroup" within a div with data-role="fieldcontain". All of these 4 implementation have a vertical grouping of checkboxes.

    In the next and final implementation of checkboxes we will see how to create a horizontal set of checkboxes  This again is pretty simple like all the above implementations. You need to create a fieldset with data-role="controlgroup" and another data attribute data-type="horizontal". This data-type attribute will inform JQM to render the checkboxes in a horizontal group.

    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.

    Hope this post has been informative to you and helps you use 
checkboxes 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 and Jquery Mobile form elements. Share the post if is has helped you, so that maximum developers benefit from this one.

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 Form - Radio buttons

    Radio buttons - popularly used in forms for single option selection, pose a problem in the mobile web world! The radio buttons being so small as they are, reduce the touch area and it becomes really difficult for selection. Jquery Mobile styles these radio buttons in such a way that they become touch friendly and gel with their overall framework design. Jquery Mobile styles the label for the radio buttons so that they are larger and clickable. A custom set of icons to represent the radio button is added to provide additional visual feedback.

    The radio buttons can be used singularly or in a vertical group or can be even grouped horizontally. These radio buttons can be used along with data-mini="true" too, which renders the radio buttons in a smaller size. We will take a look at all this in the example that follows.


    In the first implementation you will see, 3 singular radio buttons which are not attached to each other like in the second implementation. These 2 implementations differ by the usage of the "fieldset" and the data-role="controlgroup". Adding the fieldset with data-role="controlgroup" around the input tags will group the radio buttons together giving them the right visual grouping. Using the data-mini="true" attribute with fieldset will render smaller sized radio buttons as seen in the third implementation.

    In the next implementation, we have the label and the radio buttons control group aligned next to each other. To achieve this you need to wrap your fieldset with dat-role="controlgroup" within a div with data-role="fieldcontain". All of these 4 implementation have a vertical grouping of radio buttons.

    In the next and final implementation of radio buttons we will see how to create a horizontal set of radio buttons. This again is pretty simple like all the above implementations. You need to create a fieldset with data-role="controlgroup" and another data attribute data-type="horizontal". This data-tupe attribute will inform JQM to render the radio buttons in a horizontal group.

    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.

    Hope this post has been informative to you and helps you use radio buttons 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 and Jquery Mobile form elements. Share the post if is has helped you, so that maximum developers benefit from this one.

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, August 5, 2013

Jquery Mobile Form - Flip toggle switch control

    A binary flip switch is a very common UI element in the mobile web world and was made popular by our very own iOS. This flip switch is used mostly for binary on/off or true/false data inputs. To create a flip switch or a toggle switch, start with a select with data-attribute="slider" and two options. Jquery Mobile would style this select as a regular flip switch with capsule corners and a a circular handle which can be either dragged from one end to the other or tap either sides of the switch.

    The flip toggle switch is available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized flip switch. Let's take a look at the code sample below to understand the working in a better way.


    In the code above, you will see 4 different implementations of the flip switch. The first one is a regular flip switch with the label and the toggle button 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 flip switch.

    The third implementation gets the label and the slider on the same line. This implementation is done using a div with data attribute data-role="fieldcontain" around the label and select tags. This div has to be within a form tag. Maintaining the HTML structure is very important when using JQuery Mobile framework. T
o disable the input field just add the keyword "disabled" to the input tag and your input type would be disabled.

    Since this flip switch is nothing but a select with two options, we can make either one of the options selected by default by just writing "selected" for that particular option in the select. This can be seen in the code above, where the last last flip switch is disabled and is "ON"

    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.

    Hope this post has been informative to you and helps you use the range input type effectively to create the range slider 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.

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 Form - Slider control

    Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider. The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute. As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.

    The range input elements are available in 2 flavors/sizes - regular and mini. 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.


    In the code above, you will see 5 different implementations of the input range element (slider control). The first one is a regular input of type range with the label and the range slider 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 range slider.

    The third implementation gets the label and the slider 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 a 
regular input of type range with the label and the range slider one below the other. Here we have introduced a new data attribute data-highlight="true". Using this data attribute sets a default blue color to the selected value on the slider.

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


    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.

    Hope this post has been informative to you and helps you use the range input type effectively to create the range slider 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.

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, May 16, 2013

Jquery Mobile - Customizing the search box

    Customizing the Jquery Mobile default styles is often required to match the design visuals provided by your designer and approved by your client. Such is the case with the Jquery Mobile search box as well. The designers often use customized icons for the default search box icons. In the example that follows, we will take a look at how this done and we will use custom icons for the search box in place of the default icons.



    As seen in the example above, in the CSS, we need to use the !important keyword to override the default styles of the Jquery Mobile class.

    Customizing the search box or any other element in Jquery mobile is pretty simple. Hope you have followed the post and followed how to customize the Jquery Mobile default styles for  the HTML5 search input box. Drop a comment in case you need to know more or need help with your Jquery Mobile application. 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!

Jquery Mobile Form - Search input

    Input field of type search is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the search input type with capsule-corners and adds a 'x' icon to the right end, which clears the text in the search box.

    The seacrch input elements are available in 2 flavors/sizes - regular and mini. 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.



     In the code above, you will see 4 different implementations of the input search element. The first one is a regular input of type search with the label and the searchbox 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 saerchbox.

    The third implementation gets the label and the saerchbox 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.


    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.

    In the next post that follows, we will take a look at how we can customize the search box styling. This would include using custom icons for the the 'magnifying glass' and 'x' icon in the search box and reducing/removing the rounded corners property on the search box.

     Hope this post has been informative to you and helps you use the search input type 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. Stay tuned for the post on customizing the search box using Jquery Mobile.

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 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!