SricharanBlog

Interactive maps are neat. It’s not hard to get a basic map embedded on your page, but Google provides a rich and easy to use API for embedding and decorating maps on your web page, so there should be no excuse for boring default maps. There are two options for creating a Google map overlay: KML, or custom javascript. KML is an XML file format used by Google Earth and maps that can specify placemarks and other overlays. It is great for standardization and for efficiently displaying large amounts of data in an overlay, but it limits your metadata and customization options. For the other option, Google provides an API to add placemarkers and other features in real time to a map. This is what we will be using in this article. Note that we are using version 3 of the API—many tutorials you will find on the internet are using an older version which has been deprecated. The Basics To get started, we need to load up jQuery and the Google Maps API library. Note that when includi...

Inline events These were the first event handlers browsers supported: <p><a id="link" href="#" onclick="EventHandler();">click me</a></p> <script> function EventHandler() { console.log(this); } </script> In this case, we’re simply running a function when the onclick event occurs and ‘this’ will be the global window object. We can make a minor change to our inline handler so the <a> element is passed: <p><a id="link" href="#" onclick="return EventHandler(this);">click me</a></p> Note that we’ve also added ‘return’. If our EventHandler returns false, the click event will be canceled. important:  Never use inline event handlers! I’ve said this before but it needs repeating. Inline event handlers are limited, clunky, and can bulk up your HTML code. They cause maintenance complications since the invoking of the event and its handler are defined in...

In HTML section, I always want to keep it nice and clean, well, at least easy to understand. It's recommended to use UL list for menu. In this Lava menu tutorial, we will need some extra html elements after the list to make the floating bubble. Also, you need to set the default selected item, This is how the HTML looks like: <div id="lava"> <ul> <li><a href="#">home</a></li> <li><a href="#">lava lamp menu</a></li> <li><a href="#">queness.com</a></li> <li class="selected"><a href="#">jQuery</a></li> </ul> <!-- If you want to make it even simpler, you can append these html using jQuery --> <div id="box"><div class="head"></div></div> </div> When you want to make some animation, position absolute and relative are the key thing. If we ...