javascript

Disable Google Maps scrolling on mobile layout

Disable Google Maps scrolling on mobile layout

We want users to be able to drag the map on the tablet/desktop layout, but phone screens are too small, and when the user is scrolling the page he/she suddenly starts dragging inside the map. Since the map takes up almost all of the screen he/she is locked on the map and not able to scroll further down the page.

This is a pretty simple problem with a pretty simple solution, but most answers I found were complex, so I decided to share this tip:

In the javascript where you create the map:

function initMap(){
    // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false
    var isDraggable = $(document).width() > 480 ? true : false;
    var mapOptions = {
        draggable: isDraggable,
        scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page

        //... options options options
    };
}

If you need them to be able to navigate the map on mobile devices, you could set panControl: true in the same manner.

Of course, this only sets this option when initiating the map, so when users resize their browser to ‘mobile layout’ it doesn’t change. If you need this you could listen to the $(window).resize() event and then use setOptions() to change the  draggable  parameter according to your needs, but I think that’s not useful since people —except for web developers— don’t browse websites at 480px wide on a desktop 😉

Written by
Kenny Brijs

Source: Coderwall | Disable Google Maps scrolling on mobile layout

PHP_Logo

Return A Subfolder From URL Using PHP

Ever need to return a subfolder from a URL because the customer had different email addresses for associative subfolders? This seems to come up a lot here at work.

Eric, a co-worker gave me this nice lil snippet.  I needed to capture a subfolder name, not the entire query and filename, so I thought I would share.

$dir = explode('?', $_SERVER['REQUEST_URI']);
$campaignName = explode('/', $dir[0]);
echo $campaignName[1];

So, if I had a URL such as this: http://www.mysite.com/one, this would echo out ‘one‘.
All one would have to do at this point is put in some conditional statement so you could do whatever based on your subfolder.

In a practical application, I needed to determine the subfolder and use different email addresses based on the folder name. With this, I was able to put in an if statement and set the emails appropriately.

Thanks Eric!

How To Create A Child Theme In Wordpress

How To Create A Child Theme In WordPress

How To Create A Child Theme In WordPress

There are several reasons why one would want to create a child theme in WordPress. The main reason for most would be that you want to make some small changes but don’t want them overwritten if and when there is an update to your theme. This reason alone should have you following these very simple steps. Who wants to go back and repeat work every time a new update comes out?

Listed below is a step by step instruction on how to get a child theme set up so you can make CSS changes that will persist after an update.

What you will need

  1. You will need access to your WordPress Installation. Most people will be hosting their installations with a hosting provider, and these instructions are for them. This will include the connection information: the host, the username, and the password.
  2. FTP Software. I use Filezilla. It’s free, and it works, and it’s reliable. If you’re clicking on the link to download, you want to select the CLIENT, you do not require the SERVER.
  3. You will need a HTML / Text Editor of some sort. You don’t require anything fancy, notepad will do.
  4. Fearlessness. If you have never worked with code, you will see some. Don’t worry, it’ll be ok.

 

Step 1

Using your FTP software, make a connection to your WordPress installation. You may go right into the wordpress installation or you may be outside of it, depending on your hosting provider. What you are looking for is the following directory structure:

child-theme-step-1

 

Step 2

Open the wp-content directory. You will see the themes directory, open that one up as well. Inside the themes directory are all your installed themes.

child-theme-step-2

 

Step 3

Identify the theme you want to make a child of and create a directory in the themes directory with the exact name but add “-child” to it. In the picture above you can see that I created a child theme of “wpex-pronto“. I did this by adding a new directory in themes named “wpex-pronto-child“.

 

Step 4

Next, we need to create a new stylesheet in our new child theme folder. Using whichever program you are using, create a new document and name it “style.css“. We need to add a few comments this file as well as one line of code to bring in the existing style of the parent theme.

child-theme-step-4

 

Here is a quick explanation of these lines of code:

  1. Theme Name: This is the name of your child theme. You should name it with the word “child” in there somewhere to keep it straight from your other theme installations.
  2. Theme URI: This is the URL that you’re working with.
  3. Description: Just add a brief description.
  4. Author: Your name
  5. Author URI: Put the same URL
  6. Template: This needs to be named the same as the directory that you first set up. It should be the same name as the parent with ‘-child‘ added to the end.
  7. Version: Just give it a version number, no big deal

The last line in the image is where you will be importing the existing style into your new child theme. You should type this exactly the same but instead of ‘wpex-pronto’ you should put in your parent directory name.

Here is another example if I was working on a child theme for twentyfifteen:

@import url('../twentyfifteen/style.scc');

That’s it. Save your file and upload it into the folder you just created in the last step.

 

Step 5

Now, if you go back to your WordPress backend and look under Appearance | Themes you will see your new child theme. When you activate it, everything will be the same but now you are free to edit the style.css file in your child theme directory and your changes will not be overwritten when you update the theme.

child-theme-step-5

 

This is the first few steps to really customizing your WordPress theme. You can also create new templates from existing templates, have pages function differently, etc. I urge you to go to Youtube and watch some videos on child themes, you will be surprised on how easy it is to really change the look and feel of your WordPress theme.

 

javascript

Generate A Random Number in Javascript

Generate A Random Number in Javascript

Here is a very easy function in Javascript to generate a random number.

function getRandomNumber(upper) { 
return Math.floor( Math.random() * upper ) + 1; 
}

All you need to do is pass in a value that will be the limit that it goes up to.

How To Apply It

Listed below is a little program that generates a random number then the computer tries to guess it. Once it does, it writes out the number and the number of attempts.

var upper = 20;
var randomNumber = getRandomNumber(upper);
var guess;
var attempts = 0;
function getRandomNumber(upper) {
 return Math.floor( Math.random() * upper ) + 1;
}
while(guess !== randomNumber) {
 guess = getRandomNumber(upper);
 document.write("My guess is: " + guess + "</p>");
 attempts +=1;
}
document.write("<p>The random number was: "+ randomNumber + "</p>");
document.write("<p>It took the computer "+ attempts + " attempts to get it right.</p>");