Skip to main content

Jquery Mobile

jQuery Mobile List of articles

Following is a list of articles part of the jQuery Mobile series.

Introduction 😀 😀

  1. Introduction to Jquery Mobile
  2. Features of Jquery Mobile

jQuery Mobile Page Structure 😀 😀

  1. Jquery Mobile - Single page structure
  2. Jquery Mobile - Multi-page structure
  3. The mobile meta tag
  4. Jquery Mobile - Multiple Titles problem

Jquery Mobile Listview 😀 😀

  1. Basic Listview
  2. Listview with data-inset property
  3. Customizing the listview
  4. Jquery Mobile - Nested Listview
  5. Jquery Mobile - Numbered Listview
  6. Jquery Mobile - Readonly Listview
  7. Jquery Mobile - Split button listview
  8. Jquery Mobile - List dividers
  9. Jquery Mobile - Filtering the listview
  10. Jquery Mobile - Listview with count bubbles
  11. Jquery Mobile - Text formatted listview
  12. Jquery Mobile - Listview with icon images
  13. Jquery Mobile - Listview with thumbnail images
  14. Jquery Mobile - Theming listview icons
  15. Jquery Mobile listview with custom icons
  16. Jqeury Mobile accordions - Collapsible listview
  17. Side-scrolling web pages issue with Jquery Mobile - Issue #5748
  18. Jquery Mobile listview enhancements and customization

jQuery Mobile Form Elements 😀 😀

  1. Jquery Mobile - Introduction to Form Elements
  2. Default keyboards for HTML5 input types
  3. Jquery Mobile Form - Text Input
  4. Jquery Mobile Form - Search Input
  5. Jquery Mobile Form - Customizing the search box
  6. Jquery Mobile Form - Slider Control
  7. Jquery Mobile Form - Flip toggle switch control
  8. Jquery Mobile Form - Radio buttons
  9. Jquery Mobile Form - Checkboxes
  10. Jquery Mobile Form - Select menus Part I
  11. Jquery Mobile Form - Select menus Part II

Recommended for You

Difference between word-break: break-all versus word-wrap: break-word

The 2 CSS properties word-break: break-all and word-wrap: break-word appear to work in the same way or generate the same output, but there is a slight difference between the 2 and we will be discussing these differences today.



    Take a look at the example above. The difference is quite evident, however I will try to explain it further.

word-break: break-all Irrespective of whether it’s a continuous word or many words, break-all breaks them up at the edge of the width limit even within the characters of the same word
word-wrap: break-word This will wrap long words onto the next line.break-word adjusts different words so that they do not break in the middle.
    So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).     In case you want to exp…

Two maps on the same page - Side-by-side

How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.

    Let's see the code. Here it is!



    The output of the above code will be as seen in the result section above.

    As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the the first

Google Street View Image API

Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.
    Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views.
    The Google Stre…

Onclick polygon

Yesterday we had a look at a simple polygon example. But that example was not exciting as it was all hard-coded with no user interaction and which means no fun! Today's example will deal with creating a polygon on the fly, i.e. an on-click polygon in action!

    The code for creating a polygon is very much similar to creating a polyline! The only difference is that you need to replace "Polyline" by "Polygon" in such examples. Let's head on to our code.


    The output of the above code can be viewed in the result section above. If you have any doubts or queries regarding the above code then please comment here or feel free to drop me a mail! Till then, happy mapping!

jQuery Mobile's Next Big Step

Spatial Unlimited changes to The UI Dev


After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io
This means a few things for you, dear reader!

You will be redirected to the new page shortly! ⏩ ⏩ ⏩


Once crapy HTML is now better looking Markdown! 😍 😍


The entire blog is a Github repo! 😍 😍


Spatial Unlimited is now The UI Dev 😍 😍