Develop Reference

Prevent a Google Maps iframe from capturing the mouse's scrolling wheel behavior [duplicate]

This question already has answers here:
Disable mouse scroll wheel zoom on embedded Google Maps
(30 answers)
Closed 7 years ago.
If you're browsing with an embedded maps iframe using your trackpad or mouse, you can potentially trap yourself into the Maps' zooming capabilities, which is really annoying.
Try it here: https://developers.google.com/maps/documentation/embed/guide#overview
Is there a way to prevent this?

This has been answered here => Disable mouse scroll wheel zoom on embedded Google Maps by Bogdan. What it does is that it will disable the mouse until you click onto the map and the mouse start working again, if you move the mouse out from the map the mouse will be disabled again.
Note: Does not work on IE < 11 (Working fine on IE 11)
CSS:
<style>
.scrolloff {
pointer-events: none;
}
</style>
Script:
<script>
$(document).ready(function () {
// you want to enable the pointer events only on click;
$('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
$('#canvas1').on('click', function () {
$('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$("#map_canvas1").mouseleave(function () {
$('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
});
</script>
HTML: (just need to put correct id as defined in css and script)
<section id="canvas1" class="map">
<iframe id="map_canvas1" src="https://www.google.com/maps/embe...." width="1170" height="400" frameborder="0" style="border: 0"></iframe>
</section>

I'm re-editing the code written by #nathanielperales it really worked for me. Simple and easy to catch but its work only once. So I added mouseleave() on JavaScript. Idea adapted from #Bogdan And now its perfect. Try this. Credits goes to #nathanielperales and #Bogdan. I just combined both idea's. Thank you guys. I hope this will help others also...
HTML
<div class='embed-container maps'>
<iframe width='600' height='450' frameborder='0' src='http://foo.com'> </iframe>
</div>
CSS
.maps iframe{
pointer-events: none;
}
jQuery
$('.maps').click(function () {
$('.maps iframe').css("pointer-events", "auto");
});
$( ".maps" ).mouseleave(function() {
$('.maps iframe').css("pointer-events", "none");
});
Improvise - Adapt - Overcome
And here is an jsFiddle example.

yes, it is possible through scrollwheel:false.
var mapOptions = {
center: new google.maps.LatLng(gps_x, gps_y),
zoom: 16,//set this value to how much detail you want in the view
disableDefaultUI: false,//set to true to disable all map controls,
scrollwheel: false//set to true to enable mouse scrolling while inside the map area
};
source

Is it possible to disable mouse scroll wheel zoom on embedded Google Maps?
Here is preety good answer.
In my case it need to be fixed with jquery to work perfect.
My code is:
HTML
<div class="overlay"></div>
<iframe src="#MAP_LINK#" width="1220" height="700" frameborder="0" style="border:0; margin-top: 20px;" ></iframe>
CSS
.overlay {
background:transparent;
position:relative;
width:1220px;
height:720px; /* your iframe height */
top:720px; /* your iframe height */
margin-top:-720px; /* your iframe height */
}
JQUERY
$('.overlay').click(function(){
$(this).removeClass('overlay');
});

I`ve created a very simple jQuery plugin to resolve the problem.
This plugin automatically wraps the map with a transparent div and a unlock button, so you'll must longpress them to activate navigation.
Check it at https://diazemiliano.github.io/googlemaps-scrollprevent/
Here's some example.
(function() {
$(function() {
$("#btn-start").click(function() {
$("iframe[src*='google.com/maps']").scrollprevent({
printLog: true
}).start();
return $("#btn-stop").click(function() {
return $("iframe[src*='google.com/maps']").scrollprevent().stop();
});
});
return $("#btn-start").trigger("click");
});
}).call(this);
Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
position: relative !important;
padding-bottom: 56.25% !important;
height: 0 !important;
overflow: hidden !important;
max-width: 100% !important;
}
.embed-container iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
.mapscroll-wrap {
position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a> <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

Taken from
How to disable mouse scroll wheel scaling with Google Maps API
You can just disable the scroll wheel functionality
options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

I had many maps within my website so I modified #Ronaldinho Learn Coding answer to a more general one.
$( document ).ready(function() {
$('.scroll-safe-map').addClass('scrolloff');
$('.map-control-scroll').on('click', function() {
$('.scroll-safe-map').removeClass('scrolloff');
});
$('.map-control-scroll').mouseleave(function() {
$('.scroll-safe-map').addClass('scrolloff');
});
});

You can disable it with css.
iframe {
pointer-events: none;
}

you can set
scroll-wheel: False;
in the css property of the tag or tag to disable scrolling from Google maps when zoomed-in & zoomed-out.

Googlemap iframe not looking good in a display:none DIV and hide/show via javascript

I'm trying to add a google map to my website. It works like a charm if I keep the map always visible. The issue is that I want to hide/show it when users click on a button. In order to do that I created a div called #googlemap with display:none, then a few JS lines makes the DIV visible when I click on a button. The issue is that for some reason the map does not look OK at all with this solution (see pictures, looks like the address is not taken into consideration with the hide/show solution). I created a JSFiddle for this http://jsfiddle.net/PwyLF/ Thanks for your help
Not OK:
OK (if I remove display:none)
CSS
.block {
width: 100%;
height:200px;
background: red;
}
#googlemap {
width: 800px;
height:600px;
display: none;
}
HTML
<div class="block"><a href="#" id='link'>Click here to show map</a></div>
<div id="googlemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2624.9983685732213!2d2.29432085!3d48.85824149999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sgoogle+map+paris+eiffel+tower!5e0!3m2!1sfr!2sbe!4v1387990714927" width="800" height="600" frameborder="0" style="border:0"></iframe>
</div>
JS
$('html').click(function() {
$('#googlemap').hide();
})
$('.block').click(function(e){
e.stopPropagation();
});
$('#link').click(function(e) {
$('#googlemap').toggle();
window.scrollTo(0, document.body.scrollHeight);
});

is this what you are looking for?
http://jsfiddle.net/cancerian73/T7jLf/20/
$(".button").on("click", function () {
$("#googlemap").slideToggle("slow");
$(this).text($(this).text() == "Hide map" ? "Show map" : "Hide map");
});

I can't get my Jquery to work: Need to add img tag dynamically upon click

For the below code, I am trying to get an img tag to load somewhere on the page when you click on a button. This is just for testing purposes, but I need to get it to work. The img tag is a 1 by 1 pixel that is supposed to track that something was clicked on. I know that an a tag would be better suited for this purpose, but for reasons I can't explain here, this cannot be used.
Any advice you can give to get the below code working would be great. I will test in Fiddler to confirm.
If you need more information or clarification, please let me know.
I appreciate your help!
Thanks,
<html>
<style type="text/css">
#button {
display: inline-block;
height: 20px;
width: 150px;
background-color:orange;
font-family:cursive, arial;
font-weight:bold;
color: brown;
border-radius:5px;
text-align:center;
margin-top:2px;
}
#output {
font-family:garamond;
color:black;
height:450px;
width:320px;
border-radius:2px;
border-color:black;
background-color:white;
overflow: auto;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function(){
document.getElementById('output').innerHTML +=('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');
});
});
</script>
<body>
<div id="button">Test</div>
<div id="output"></div>
</body>
</html>

Replace this:
$(document).ready(function() {
$('#button').click(function(){
document.getElementById('output').innerHTML +=('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');
});
});
With this:
$(document).ready(function() {
$('#button').click(function(){
$('#output').append('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');
});
});
Using .append("<img..) will add another img every time you click. If this is not what you're expecting then edit your question with more details about how you want it to work.

$('#output').prepend('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');

$(function() {
$('#button').on('click',function(e) { //.on() preferred, click() is a short-hand for this
e.preventDefault(); //if you change from div to `A` someday
var timestamp = Math.round(new Date().getTime() / 1000);
//creating IMG on-the-fly, adding css and appending it
$('<img />', {
'src': 'http://view.atdmt.com/action/AAA_ImageTest?ts='+timestamp
}).css({
'width':'1px',
'height':'1px',
'border':0
}).appendTo('#output');
});
});
Instead of making the HTML on had and adding as HTML, I'm creating the img on-the-fly, adding it's CSS and appending to #output.
e.preventDefault it's just for blocking default behavior of an item. That's just a bonus if someday you change from <div id="button">Test</div> to an actual anchor <a id="button" href="#">Test</a>.
Update:
#Kamui To prevent image caching (thus not making a second call when adding another one), I've added a timestamp on the image URL.

If you want to append the pure-jQuery way:
jQuery("#output").append(
jQuery("<img>")
.attr("height", "1")
.attr("width", "1")
.attr("src", "http://view.atdmt.com/action/AAA_ImageTest")
);
This will create an img object in the jQuery world, then append it to your output div. This method (as opposed to writing one big long string) is nice because it keeps everything clean - no worrying about escaping quotes, and it would be very easy to add dynamic values in there for some of the attributes.

Enlarge image on hover using Twitter Bootstrap

I am new to bootstrap and would like to enlarge all images with class img-rounded on hoverring
I implemented it like this:
<div class="container">
<div class="row">
<div class="span4">
<div class="well">
<img src="MyImage.png" class="img-rounded">
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$('.img-rounded').popover({
html: true,
trigger: 'hover',
placement: 'bottom',
content: function () {
return
'<img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
+$(this)[0].src + '" />';
}
});
});
</script>
Unfortunately the bounding box around the enlarged image is not enlarged. How to fix this?

This is caused by the popovers default max-width: 276px. Simply add
<style type="text/css">
.popover {
max-width: 1000px;
}
</style>
(or any other value, auto does not work here) and the popover will fit the image.

You could do this easily just using css.
#img1{
height:200px;
}
#img1:hover{
height:400px;
}
Also you can apply a number of additional effects as needed with far less code.
You can also manage the parent div accordingly to match this css rule. Not ALL things require JS.

Take snapshots of flash videos

How do I link to snapshots of embedded flash videos instead of the actual flash videos to reduce loading times of a site?

Yes, and in fact this is a method that is often employed. You start with an image with a play button overlay. When it's clicked, the image element is replaced with a flash element that plays the video.
Perhaps something like the following:
<script>
$(function () {
$("img.thumbnail").click(function (e) {
$(e.parentNode).addClass("play");
});
});
</script>
<style>
.toggler .player { display: none; }
.toggler.play .player { display: block }
.toggler.play .thumbnail { display: none }
</style>
<div class="toggler">
<img class="thumbnail" src="thumbnail.jpg">
<div class="player">
<!-- embed your player here -->
</div>
</div>