Skip to main content

Jquery Mobile - Customizing the listview

    In the examples on Basic Listviews that we have seen in the previous posts, you must have observed that the listview is sticking to the top of the screen. You will probably not have only the listview in your web application, but anyways you will have some divs before the listview and the listview will stick to the bottom of the div above it. Many a times, you would like to have some blank space between the div before the listview and the actual listview and this is the time when you would start over-riding the default Jquery Mobile CSS.

    The example that we will be seeing today is a very basic example of using custom CSS to override the default JQuery Mobile CSS to suite our own web application or website.



    As you can see in the result above, the listview has some margins around it. If you take a look at the CSS for this example, you will notice the following CSS.

.ui-listview{
    margin: 30px 70px 0 !important;
}

    As you can see, we have used !important to override the margins from the ui-listview JQM class. Doing this you can have your own styles applied to the default JQM controls.

Note: Overriding the entire JQM class is not advisable. This is because, doing so would affect that component; in our case the listview across the entire website or web application that you are working on. The right was of overriding the the JQM classes is by appending the JQM class by your own custom class or id.

    Hope you can now start customizing your Jquery Mobile based websites with ease. Do leave a comment in case you have any doubts and I will be happy to answer them for you. Do hit the like button on Facebook to show your encouragement.

Comments

Recommended for You

Is Google cheating?

               I found this piece of interesting fact, accidently while browsing the internet. Google shows different maps for India, China and USA. Confused hun! Well don’t be…Just read on… In Indian version of Google Maps, you can see Arunachal Pradesh and eastern part of Jammu and Kashmir as integral part of India. In US version of Google Maps, you can see Arunachal Pradesh and Jammu and Kashmir as a disputed region. In the Chinese version of the Google Maps, you can see Arunachal Pradesh and JnK as not a part of India.                 Many people complained this issue to Google. A Google employee responded : “ We do show different versions of this border, because we required to by law. Indian law requires us to show it one way, and the Chinese law requires us to show it another way . If we can legally do so, we strive to present borders in a neutral and objective manner, which is why the US version avoids taking either side and simply labels the border as disputed. ”   

GIS Technology to identify all properties in BBMP Limits

          The Bruhat Bangalore Mahanagara Palike (BBMP) has for the last two years, been in the process of conducting a massive exercise to map the 13.87 lakh properties in the 198 wards in the city. Geographical Information System (GIS) has proven to be an effective tool for analysing and displaying thematic maps of all the roads for proper evaluation and correction of zones.            As of now, 11 lakh properties have come under the tax net. The aim of this programme, which is perhaps the first such exercise being conducted in the country on such a large scale, covering 800 square km, is to bring all properties under the tax net and ensure that the BBMP has accurate information pertaining to the properties’ dimension, built-up area, land use and classification. The process of validation of GIS maps will be completed in January 2011.           The process uses satellite digital maps of the BBMP area to generate a vector map from the information obtained. These high r

Custom online cards from Google Maps...

            Share a message of holiday cheer with custom online cards from Google Maps this New Year! Think Green, Go Green this New Year. Save paper and that too with a difference! This new year you can send your friends, family and loved ones an e-card which is out of the box!             You can choose from 10 different online holiday cards and add your personal message. Now, after reading this you will think what's so different here! The surprise is yet to unfold...You can include specific directions, a Street view image or your favorite place on the inside of the card!             So now planning your New Year party will become easier. You can send an e-card with directions from your friend's place to the place where you are hosting your New Year party! Won't that be fun!             You can send your personalized Google Maps New Year Cards from here !             Warm wishes for a great holiday season and wish you a Happy Mapping Year...

Map Loading...

    The blank web page seems so boring and dull when the map is still loading. You will come across such a situation quite often where you will be having a slow internet connection! We cannot do anything about the slow internet connection, but we can surely avoid the dull blank web-page by using a simple trick. We can place a "loading" image at the center of the web page so that the page doesn't look blank! An image like this:             The following code will show you how this can be done and here it is!     As you all can see the code is very very simple and the output will look as seen in the results section above. The image below shows the loading stage of the map.       Do let me know what you think about the examples shared here! Do leave your comments here! Till the next example, happy mapping!

Ground Truth - How Google Builds Maps

    Todays's article is cross posted from The Atlantic 's Tech section. The article was posted by Alexis Madrigal who is a senior editor at The Atlantic , where he oversees the Technology channel. So, thanks to The Atlantic and Alexis Madrigal, we will have an exclusive look inside Ground Truth , the secretive program to build the world's best accurate maps.     Behind every Google Map, there is a much more complex map that's the key to your queries but hidden from your view. The deep map contains the logic of places: their no-left-turns and freeway on-ramps, speed limits and traffic conditions. This is the data that you're drawing from when you ask Google to navigate you from point A to point B -- and last week, Google showed me the internal map and demonstrated how it was built. It's the first time the company has let anyone watch how the project it calls GT, or "Ground Truth," actually works.     Google opened up at a key moment in its evo