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!

Comments

Recommended for You

Fusion Table - Heat Map Layer

In continuation with the previous example on Fusion Table, we will have a look at another Fusion Table layer example. Today's point of discussion is heat map! What is a heat map? A heat map is geographical representation of data where the values taken by a variable in two-dimensional map are represented as colors. Higher the value of the variable, that place on the map would be represented with a deeper color. This example is very much similar to the previous one, just for one minor change! Let us have a look at the code. I have just used a readily available Google Fusion Table for this example. Any anomalies in the data is not my responsibility! Copy the above code in an html file and open it in your browser! You will see the fusion table heat map layer in action! The only change in this code from the previous one is that, the heatmap property of the fusion table layer is made true! The output of the above code looks as s...

Playing with the markers and info window bubbles...

In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase! So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life! The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .

Integrated GPS cameras...

GeoSpatial Experts has introduced three new GPS Camera bundles designed specifically for geotagging and mapping digital photographs. The firm now offers its popular GPS-Photo Link 5.0 photo-mapping software with the new Ricoh G700SE, Sony A55, and Casio EX-H20G GPS cameras. All of the GPS cameras below will provide you with geotagged photos, additionally, some can also offer the ability to capture the direction the photo was taken with a built-in compass, or the ability to collect attribute data in the field. WiFi and Bluetooth will allow you to communicate with laser range finder equipment to measure exact distance from the photographer to the item being photographed. Some GPS cameras provide a ruggedized camera to withstand harsh conditions. In 2007, Ricoh introduced its 500SE model as the first GPS-eq...

Panoramio Layer...

Let's start with the obvious question first...What is Panoramio? Panoramio is a geolocation-oriented photo sharing website. Panoramio website was officially launched on October 3, 2005 by Joaquín Cuenca Abela and Eduardo Manchón Aguilar, two Spanish entrepreneurs and was acquired by Google in July 2007. Accepted photos uploaded to the site can be accessed as a layer in Google Maps, with new photos being added at the end of every month. The site's goal is to allow Google Maps and Google Earth users to learn more about a given area by viewing the photos that other users have taken at that place. The website is available in several languages and can be viewed here . You may add photos from Panoramio as a layer to your maps using the PanoramioLayer object. The PanoramioLayer renders a layer of geotagged photo icons from Panoramio on the map as a series of large and small photo icons. Let us now have a look at the following code t...

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...

The UI Dev

Search This Blog