jQuery .on() method with multiple event handlers

If you need multiple event handlers attached to the same selector executing the same function, you could use:

Learn more about jQuery events here.

What does this function really do? We have two div elements on our page and two different classes .field and .spn. When we click or mouseover over the .field class, the .spn div is showing the “Hello world!” text added via jQuery .text() method.

Try it Yourself / Demo

Responsive Google Map (Javascript & Google API V3)

This tutorial uses HTML5 and JavaScript to implement a responsive Google Maps map, no iframes or css code needed.

The main idea of this tutorial is to make the pointer on the map responsive / keep the pointer fixed on the chosen location on the map as we change the size of the window/map layout

Implementation guide

  • Get a Key/Authentication – Google Maps JavaScript API here
  • Edit the header line https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap and replace [KEY] with your unique Google Maps Key
  • Use Google Maps or other aplication to find the GPS coordinates of the location/pointer on the map and paste them on line 22 and 32 here like this: new google.maps.LatLng(51.506767, -0.1244953)

 

See a live DEMO or Download the code.