Block zooming of Google maps

Google maps are used almost everywhere to either implement an address of a business, club, store or anything else on a lot of pages on the internet. It’s a nice and convenient way to do it.

BUT… almost on all pages where this is done, when you scroll down using the mouse wheel, once the mouse ends up inside the Google map, the map starts zooming out instead of the page continuing to scroll down.

Here’s how to make a Google map not zoom in or out when you scroll down a page with the mouse wheel and only zoom, pan or do anything with the Google map as soon as you click inside the map. The following workflow also blocks zooming again once the mouse leaves the Google map area.

I got this from Stackoverflow, reproducing it here in case the zombie apocalypse breaks out and stackoverflow goes bun bun.

First you want to add the following style to your website or custom CSS script in your WordPress installation:

.scrolloff {
  pointer-events: none;
}

Then you want to add the following JavaScript to the page:

<script type="text/javascript">
    jQuery(document).ready(function($) {
    console.log("allLoaded");
        // you want to enable the pointer events only on click;
        jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
	console.log("scrolloffAddedA");
        jQuery('#canvas1').on('click', function () {
	    console.log("clickDetected");
            jQuery('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
	    console.log("scrolloffRemoved");
        });
        // you want to disable pointer events when the mouse leave the canvas area;
        jQuery("#map_canvas1").mouseleave(function () {
	    console.log("mouseLeft");
            jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
	    console.log("scrolloffAddedB");
        });
    });
</script>

Note that I have a whole lot of echo’s in the code which let’s you debug the code. You might want to consider switching that off for efficiency.

And finally that’s how you want to embed the map itself:

<section id="canvas1" class="map">
<iframe id="map_canvas1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d87147.27677140976!2d7.324830610654608!3d46.95476576996358!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478e39c0d43a1b77%3A0xcb555ffe0457659a!2sBern!5e0!3m2!1sde!2sch!4v1462400079917" width="100%" height="485" frameborder="0" style="border:0" allowfullscreen></iframe>
</section>

Here is how this looks like in the end:


Posting source-code on self hosted WordPress

Psoting code on your WordPress Blog or Website

There’s a very easy, nice way to show source code on your blog or website.

If you are hosting your site on WordPress.com it’s even natively implemented.

Read the article on WordPress.com

If you self host your website or blog, you will need this plugin.

Here’s some examples of source code:

Some CSS code:

.scrolloff {
  pointer-events: none;
}

A JavaScript:

<script type="text/javascript">
    jQuery(document).ready(function($) {
    console.log("allLoaded");
        // you want to enable the pointer events only on click;
        jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
	console.log("scrolloffAddedA");
        jQuery('#canvas1').on('click', function () {
	    console.log("clickDetected");
            jQuery('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
	    console.log("scrolloffRemoved");
        });
        // you want to disable pointer events when the mouse leave the canvas area;
        jQuery("#map_canvas1").mouseleave(function () {
	    console.log("mouseLeft");
            jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
	    console.log("scrolloffAddedB");
        });
    });
</script>

And here’s the list of supported languages:

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

Parallax with Ultimatum theme

Here’s a blog post from the Ultimatum theme developers about using parallax layers in Ultimatum. I was curious if we could use parallax backgrounds within a page/post and asked the dev’s this question. After getting an answer on my question I continued the discussion with their support via private messaging. Here’s the technique that came from this discussion.

First, following the blog post, create a div and add the class “parallax” to it.

That should look something like this:

<div class="parallax">
	...
</div>

NOTE: You don’t need to call it “parallax”. You can call it whatever. You just have to use the same name in the css code. Because you will have to add the calls to the stellar java script as well for the parallax to work. Ultimatum uses Mark Dalgleish’s Stellar Java script.

So your html will loke like this:

<div class="parallax"  data-stellar-background-ratio="0.5">
	...
</div>

The number on the ratio actually defines how fast the parallax layer will move. At a value of 0.5 the parallax moves at medium speed. If you go higher the parallax will move slower. At a value of 1 the parallax layer is not moving at all. But at a value of 2.0 it will move fast. Besides that you can use all the arguments/calls listed here.

In your CSS script you can talk to the parallax layer like this

.myTopParallax {
  background-image: url("http://the-path-to-your-background-image.jpg");
  background-size: cover;
  padding-bottom: 40%;
}

The most important is to set the background image. Everything else is optional.

Font Pull -Down Menu

Ever had clients that could not decide on which font to use on their website?

here’s solution to implement choice!


Header Type 1

Header Type 2

Header Type 3

Header Type 4

Text Blocksatz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.

Text Linksb├╝ndig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Rechtsb├╝ndig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Zentriert

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Email

Lorem ipsum dolor sit amet Kontaktformular

 


 

This is a technique to implement a pull-down menu to test fonts on a web page

The html for the pull-down menu:

<link href='https://fonts.googleapis.com/css?family=Abel|Crimson+Text:400,400italic,600,600italic,700,700italic|Varela+Round|Patua+One|Gudea:400,400italic,700|Lora:400,400italic,700,700italic|Open+Sans+Condensed:300,300italic,700|Fjalla+One|Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<select id="input-font" class="input"  onchange="changeFont (this);">
  <option value="Times New Roman" selected ="selected">Times New Roman</option>
  <option value="Abel">Abel</option>
  <option value="Crimson Text">Crimson Text</option>
  <option value="Varela Round">Varela Round</option>
  <option value="Patua One">Patua One</option>
  <option value="Gudea">Gudea</option>
  <option value="Lora">Lora</option>
  <option value="Open Sans Condensed">Open Sans Condensed</option>
  <option value="Fjalla One">Fjalla One</option>
  <option value="Arvo">Arvo</option>
</select>

The Javascript function:

<script>
    function changeFont(font){
        document.getElementById("output-text").style.fontFamily = font.value;
    }
</script>

And the html for the content:

<h3>Lorem ipsum dolor</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.</p>
<p style="text-align: justify;">Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.</p>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
&nbsp;
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="mailto:alex@fullframestudios.ch">Email</a></strong></p>
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet <a href="#">Kontaktformular</a></strong></p>