Wednesday, June 14th, 2017
See the Pen Cross-browser horizontal mousewheel scroll by Matt Seymour (@mwseymour) on CodePen.
Tags: Cross browser, Horizonal, Mouse wheel, scroll
Posted in jQuery | No Comments »
Friday, June 3rd, 2016
Tags: javascript, jQuery, Repository, scroll, Vanilla
Posted in jQuery | 1 Comment »
Monday, April 11th, 2016
$(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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
});
Tags: Anchor, Bind, Click, Event, Link, scroll
Posted in jQuery | No Comments »
Thursday, February 26th, 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;
}
Tags: Bug fix, Google, Maps, scroll
Posted in CSS, HTML, jQuery | No Comments »
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: javascript, scroll, vertical
Posted in jQuery | No Comments »