Thursday, March 28, 2013

Jquery Mobile - Readonly listview

    The Jquery Mobile Listview that is used generally used to link each list item to a new page in the application or to link that list item to another list. However, it is not always necessary to have a linked list. Sometime we need to display a list that does not have to be linked to anything else.

    Using Jquery Mobile, we can have non-interactive, read-only listviews in our web pages. This list can be generated using the ordered or un-ordered lists that don't have any linked items, i.e. we basically do not include any anchor tags within our list item tags. This will render the listview as a non-interactive, read-only listview.

    Take a look at the JsFiddle below. The code and the actual result will give you a better picture of how you can implement the non-interactive, read-only listviews.



    Hope you find this example useful. Please drop a comment if you face any problems or have any queries. I would be happy to help and learn more. You can take a look at more examples on Jquery Mobile 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!

Tuesday, March 26, 2013

Happy Holi...

Wishing all the readers of Spatial Unlimited a very happy and a colorful Holi. May this Holi bring loads of joy and colors to your life!!!

 
 
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!

Side-scrolling web pages issue with Jquery Mobile - Issue #5748

    While developing a Jquery mobile based application, I came across a issue that is observed only on the iOS 6 devices and Android 4.2.2 devices.

    What is the issue?
        Web pages are side scrolling on iOS6 and Android 4.2.2 devices.

    How did I debug the issue?
        This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face.

    Workaround
        I reduced the width of the textbox with the placeholder from 100% to slightly less and then the web pages stopped side-scrolling. I checked for the issue across the web, but did not find any reports on this issue. I have now reported this issue on Jquery mobile github and you can check out the issue report at http://goo.gl/KNFBX

    This issue is a bit weird and you will know why I say so. Take a look at the following jsfiddle that I have created to demonstrate this issue.



    Now lets get down to the steps to reproduce this.
1. Click on http://goo.gl/IszAn keeping the device in portrait mode.
2. Once the page has completely loaded, rotate the device from portrait mode to landscape mode.
3. Rotate the device back to the portrait mode from the landscape mode.
4. Lo and behold your webpage is now side-scrolling.

    Hope another developer does not spend sleepless nights over this issue now and hope Jquery Mobile takes a note of this issue and fixes it in their next release.

UPDATE:
    This issue has been fixed and is part of the new version of JQuery Mobile 1.4.0. You can currently check the status of this issue and it's fix inclusion status on Github!

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, March 11, 2013

Jquery Mobile - Numbered Listview

    Jquery Mobile Listview is probably the most popular component used in a lot of mobile web applications. The listview that is generally used is a ul-li structure. But Jquery Mobile allows the usage of the ol-li structure as well. The ol-li HTML structure will give the user a numbered listview. We will take a look at the following example to understand, how the numbered listview works.



    As you can see in the result above, every list gets a number before the the list title. The numbered listview is useful when presenting items that are in a sequence like search results or a movie queue.

    Hope you have followed this short tutorial and hope it helps you in your web application. In case, you have any doubt, comment or you come across any error, fell free to leave a comment and I will be happy to take a look at it. You can see a full list of Jquery Mobile examples 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!

Tuesday, March 5, 2013

Jquery Mobile - Nested Listview

    The Jquery Mobile listview is nothing but a ul-li HTML structure styled to appear as a list on a web browser. The plain ul-li structure can be modified to create the nested listview structure. Take a look at the example below, to understand the nested listview structure of Jquery Mobile.



    By nesting child ul or ol inside list items, you can create nested lists. When a list item with a child list is clicked, the Jquery Mobile framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation.

    Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the page-events will trigger.

    Hope you followed the post and can now implement the nested lists in your Jquery Mobile project. Drop a comment in case you have any doubts and I would try and answer those.

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!