JSjQuery - Code HQ code snippets

Disables scrolling with the mouse wheel on Google map

26th February 2015

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

Execute function on defined vertical scroll position

17th February 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");
	}
});

Expand and collapse widget

15th December 2014

The jQuery

$(document).ready(function() {
  //Initially hide all the expandable content with class name "content" 
  $(".content").hide();
  
  //Toggle the component when parent class "heading" is clicked on 
  $(".heading").click(function() {
    
    var header = $(this);
    
    //Toggle the arrow image based on whether the content <p> is expanded or not
    header.children('#arrow').toggleClass('plus_sign minus_sign');
    
    //Expand or collapse the content <p> with slide mode animation 
    header.next(".content").slideToggle(500);
  });
});

The CSS

* {
	margin: 0;
	padding: 0;
	background: transparent;
}

.layer {
	width: 460px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.95em;
	background-color: #fafafa;

}
 
.heading {
	margin-top: 2px;
	color: #fff;
	padding: 5px 10px;
	background: #B72A31;
}

.content {
	padding: 10px;
}

h1 { 
	padding: 0 5px;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.2em;
}

.arrow {
	width: 26px;
	height: 26px;
	display: inline-block;
	vertical-align: middle;
}

.plus_sign {
	background-image: url('images/plus_icon.png');
}

.minus_sign{
	background-image: url('images/minus_icon.png');
}

The markup

<div class="heading">
	<div id="arrow" class="arrow plus_sign"></div>
	<h1>A Statement</h1>
</div>
<p class="content">The result of this aesthetic way of working is the original Artisan: Primarius'city bike. This bike combines classic shapes with modern design: A visual masterpiece con-taining DNA of authenticity, agility, finesse and crafts-manship. Primarius' Artisan proves that along with the perfection of the industrial revolution, we have also lost something substantial: authenticity.
</p>