CodeHQ

Archive for February, 2015

|

Disables scrolling with the mouse wheel on Google map

Thursday, February 26th, 2015

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

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

The CSS

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

Update:
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;
}

Tags: , , ,
Posted in CSS, HTML, jQuery | No Comments »

Responsive Google maps

Monday, February 23rd, 2015

The CSS

 .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

The HTML

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Tags: , , , ,
Posted in CSS, HTML | No Comments »

Execute function on defined vertical scroll position

Tuesday, February 17th, 2015

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 150;             
	// set to whatever you want it to be

    if(y_scroll_pos > scroll_pos_test) {
	   $("body").css("background-color","#000");
    }
	else
	{
		$("body").css("background-color","#FFF");
	}
});

Tags: , ,
Posted in jQuery | No Comments »

Strip content from a post (with character limit)

Monday, February 16th, 2015

<?php echo substr(strip_tags($post->post_content), 0, 140);?>

Tags:
Posted in PHP, WordPress | No Comments »