eli--za: February 2015

Saturday, February 28, 2015

Make Google Maps Embeds Responsive

This is the default embed code for the new Google Maps:


<!-- Height=450px; Width=600px -->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>

As specified in the height and width parameters of the embed code, the default height for medium embeds is 450px or 75% of the default width (600px).

If you wish to transform this static sized Google Map into one that is responsive, all you have to do is add a few CSS rules to your web page and wrap the embed IFRAME inside these rules.

The new embed code with responsive style will be something like this. You can change the value of padding-bottom (line #4) from 75% to something for a different aspect ratio.


<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>
 
<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

A similar technique can be used to embed Instagram videos and photosresponsively.

Thursday, February 19, 2015

responsive text

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Saturday, February 14, 2015

Thursday, February 12, 2015

Ajax

There are two common methods for sending HTTP requests:

GET. Used for most requests. Browser uses the GET method whenever it requests a new web page, CSS file, image, and so on. Use GET when you want to "get" something from the server.
POST. Used frequently with web forms to send data to store in a database. Use POST when sending data that will store, delete or update information from a database.

Resources

Wednesday, February 11, 2015

Insert an Item at a Specific Index with JavaScript

// The original array
var array = ["one", "two", "four"];
// splice(position, nrOfItemsToRemove, item)
array.splice(2, 0, "three");

array;  // ["one", "two", "three", "four"]

If you aren't adverse to extending natives in JavaScript, you could add this method to the Array prototype:

Array.prototype.insert = function (index, item) {
  this.splice(index, 0, item);
};

Monday, February 2, 2015

add custom font to wordpress using the wp_enqueue_style function.

If you build a child theme, it inherits all of its theme templates from the parent theme, unless you give it its own copy of a particular template. So if you copy your parent theme’s header.php into your child theme, so that you can add the Google Web Fonts code to it, then any changes made to the parent theme’s header.php will no longer be applied to your child theme.

Once you’ve chosen your font, and any additional styles and character sets, Google provides you with a <link> tag which you are told to add to the <head> section of your page.

So what we want to do is insert the code dynamically into the header, so that we don’t need to edit the header.php template at all. We do this in functions.php

The difference here is that in a child theme, functions.php doesn’t override the parent functions, it runs in addition to them. So any functions in your child theme will be run after all the functions in the parent theme have been run.

So, to dynamically insert the Google Web Fonts code into the header, we use thewp_enqueue_style function, because the code Google gives us is a stylesheet declaration.

    function load_fonts() {
            wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Rock+Salt|Neucha');
            wp_enqueue_style( 'googleFonts');
        }
    
    add_action('wp_print_styles', 'load_fonts');

eli--za

Saturday, February 28, 2015

Make Google Maps Embeds Responsive

Thursday, February 19, 2015

responsive text

Saturday, February 14, 2015

css best practices

CSS Architecture

CSS Resets

Formatting CSS

Vendor Prefixes

Helpful Tools