CodeHQ

Posts Tagged ‘scroll’

|

Cross-browser horizontal mousewheel scroll

Wednesday, June 14th, 2017

See the Pen Cross-browser horizontal mousewheel scroll by Matt Seymour (@mwseymour) on CodePen.

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

Vanilla List: The Vanilla Javascript Repository

Friday, June 3rd, 2016

Tags: , , , ,
Posted in jQuery | 1 Comment »

Scroll to anchor | Javascript

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: , , , , ,
Posted in jQuery | No Comments »

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 »

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 »