Find elements on page by their CSS Properties

Drop this in to your console in dev tools and all elements with position: absolute will render with a border.

var absElements = [];
$("*").css("position", function(i, pos){
   if(pos==="absolute") absElements.push(this);

$(absElements).css({border:"5px solid red"});

Remove spaces in tel href links

/* Remove all spaces in tel: href links so click to call works */
$('a[href^="tel:"]').attr('href', function(_,v){
    return v.replace(/\(0\)|\s+/g,'')

jQuery in the footer

Add this to your functions.php

function my_init()   
    if (!is_admin())   
        // Load a copy of jQuery from the Google API CDN  
        // The last parameter set to TRUE states that it should be loaded  
        // in the footer.  
        wp_register_script('jquery', '', FALSE, '1.11.0', TRUE);  
add_action('init', 'my_init');  

Scroll to anchor | Javascript

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
          scrollTop: target.offset().top
        }, 800);
        return false;

Disables scrolling with the mouse wheel on Google map

Original article

Solved this putting a div with an .overlay exactly before each Google map iframe insertion. The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!

The markup

  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="" width="640" height="480"></iframe>


.overlay {
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */

There is a jQuery solution for this if you do not embed the map via iFrame.

$(function() {
    $('#map').click(function(e) {
        $(this).find('.gm-style').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('.gm-style').css('pointer-events', 'none');

And a little bit of CSS

.gm-style {
	pointer-events: none;