Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 7, 2019 at 8:51 pm #1116495
    deeennis90

    Hello,

    i found the following js to remove the scrolling in my iframe with a google map.
    Can you tell me how to put the js in the functions.php?
    I tried several ways and also replaced the $ with jQuery like you say in the Documentation

    JS

    $('.map-container')
	.click(function(){
			$(this).find('iframe').addClass('clicked')})
	.mouseleave(function(){
			$(this).find('iframe').removeClass('clicked')});

    Best,
    Dennis

    July 8, 2019 at 10:35 pm #1116780
    Basilis

    Hey deeennis90,

    Show us what you tried please, so we can help you fix it.

    Best regards,
    Basilis

    July 8, 2019 at 11:28 pm #1116788
    deeennis90

    Hi Basilis,

    i copied the following code in the functions.php.

    function mapcontainer(){
?>

<script>
jQuery('.map-container')
	.click(function(){
			jQuery(this).find('iframe').addClass('clicked')})
	.mouseleave(function(){
			jQuery(this).find('iframe').removeClass('clicked')});
</script>
<?php
}

    Unfortunately it doesn’t work.

    Best,
    Dennis

    July 10, 2019 at 8:42 am #1117330
    Ismael

    Hi,

    You defined the function, but you didn’t add the hook part.

    add_action('wp_footer', 'mapcontainer');

    What is that script for? Where did you find it?

    Best regards,
    Ismael

    July 10, 2019 at 10:34 pm #1117613
    deeennis90

    Hi Ismael,

    i have a google map implemented in an iframe and wrapped it in a div container:

    <div class="map-container">
<iframe width="100%" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de/maps/ms?msa=0&ie=UTF8&vpsrc=6&fll=49.490124,10.798531&fspn=0.013297,0.034332&st=109146043351405611748&rq=1&ev=zo&split=1&sll=48.850258,13.178101&sspn=2.754455,8.453979&q=&msid=215565028450110778478.0004aad8bd13a7b82a4a0&ll=48.810481,11.310425&spn=2.17056,3.839722&z=8&output=embed"></iframe>
</div>

    I also use this css to activate the pointer-event only when the container is clicked:

    .map-container iframe{
	width: 100%;
	pointer-events: none;
	
}
.map-container iframe.clicked{
	pointer-events: auto;
}

    Thank you for the missing part in my JS. It now seems to work as expected.

    Best,
    Dennis

    • This reply was modified 5 years, 5 months ago by deeennis90.
    July 11, 2019 at 1:19 pm #1117799
    Jordan Shannon

    Hi,

    Did you need additional help, or shall we close this topic?

    Best regards,
    Jordan Shannon

    July 31, 2019 at 3:44 pm #1123562
    deeennis90

    Hi Jordan,

    thanks, you can close this topic as solved.

    Best,
    Dennis

    July 31, 2019 at 10:50 pm #1123656
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘jQuery for GoogleMap no scrolling’ is closed to new replies.