Tag Archives: jQuery

3 column fluid layout with header, sticky footer and 100% height columns

By Ben Pearson | Leave a reply

I recently had need of a site layout with the following features

a header
3 fluid columns
100% or full height columns
a sticky footer
correct source order of columns
IE8 compatible

The only existing solutions I could find either used table based layouts or background image techniques to get the columns to display at 100% or full height.

So I decided to code my own version of the layout. Inspired by some of the CSS techniques I came across in my hunt and using jQuery to get the required column heights.

Demo and the code

References

wp_enqueue_script() – the recommended method of adding JavaScript to WordPress

By Ben Pearson | 2 Replies

This function includes the script if it hasn’t already been included, and safely handles dependencies (scripts that must be loaded before the script).

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );?>

$handle is the name of the script in lowercase.

$src (optional) URL to the script. This parameter is only required when WordPress does not already know about this script. You should never hardcode URLs to local scripts, use get_template_directory_uri() (for Themes) and plugins_url() (for Plugins).

$deps (optional) array of handles (lowercase names) of any script that this script depends on. This parameter is only required when WordPress does not already know about this script.

$ver (optional) string specifying the script version number. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available.

$in_footer (optional) boolean of whether or not the script should be loaded at the bottom of the <body>. Default is false.

This following code will load the version of jQuery that comes with WordPress on both the front end and the admin side. It will only load if jQuery it has not yet been included. This code needs to be placed before wp_head().

<?php wp_enqueue_script('jquery'); ?>

The example below

only loads the fancybox script on the front end, via use of the wp_enqueue_scripts action hook
uses get_stylesheet_directory_uri() for the path to the fancybox script
loads the script’s dependency jquery before loading the fancybox script
loads version 1.2.6 of the fancybox script

<?php
function my_scripts_method() {
    wp_enqueue_script('jquery');
    wp_enqueue_script(
        'jquery.fancybox',
        get_stylesheet_directory_uri() . '/js/jquery.fancybox.js',
        array('jquery'),
        '1.2.6'
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

wp_enqueue_scripts() in the WordPress Codex

Using jQuery in WordPress

By Ben Pearson | Leave a reply

Loading the jQuery that comes with WordPress

Add this PHP code to header.php before wp_head()

<?php wp_enqueue_script( 'jquery' ); ?>

What not to do – Using a Google served jQuery instead

Add this PHP code to functions.php but make sure it’s the latest version.

<?php function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method'); ?>

Adding your own jQuery

Wrap your jQuery in the following to use the default jQuery shortcut of $ instead of the jQuery that Wordpess uses to avoid conflicts. Note this must go after wp_head() and you may need to use type="text/javascript" in the script tags if you’re not using HTML5.

<script>
    jQuery(document).ready(function($) {
        $('#site-title').addClass('Testing');
    });	
</script>

$() will work as an alias for jQuery() inside the function above.