bavotasan.com » Plugin Code

Full Size Background Image jQuery Plugin: Redux

c.bavota — Mon, 07 Feb 2011 14:32:33 +0000

I just made a few changed to this plugin because it was acting a little weird. Tested it in Safari, Chrome and Firefox and it work perfectly now. All you need is an image that you want to have displayed as your background. Once you have that and use the plugin, the image will resize to the full width/height of the browser window. Every time the browser window resizes, so will the background image.

First comes the plugin code:

/**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);		
 
    function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();
 
      var winwidth = $(window).width();
      var winheight = $(window).height();
 
      var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;
 
      var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;
 
      if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });		
      }
    } 
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 
  };
})(jQuery)

There is only a little CSS needed for this one:

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
 
#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

If you want your background to stay fixed you can change the .fullBG CSS to this:

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
  
div>

To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:

<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
script>

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

Creating a jQuery Plugin to Increase Font Size

c.bavota — Wed, 06 Jan 2010 22:32:47 +0000

I have been spending a bit of time lately figuring out how to create my own plugins for jQuery. It doesn’t take much to accomplish and I thought it would be a good idea to put together a small tutorial to show everyone just how easy it can be. For this example, I will create a plugin to increase the font size of a selected div when a link is clicked.

To start, we are going to create a wrapper function which will allow us to use $ without conflicting with other JavaScript libraries:

(function($) {
  // our plugin goes here
})(jQuery);

Next we need to let jQuery know we are creating a new plugin by using $.fn. Let’s call our function increaseFontsize and give it a few variable, such as size, speed, easing and callback, so it works just like other jQuery functions.

(function($) {
  $.fn.increaseFontsize = function(size, speed, easing, callback) {
    // the guts of our plugin goes here
  };
})(jQuery);

Once you have done that, you can create the code that will make our plugin do what we want it to, which is increase the font size of a selected div.

The final plugin code looks like this:

(function($) {
  $.fn.increaseFontsize = function(size, speed, easing, callback) {
    return this.animate({fontSize: size}, speed, easing, callback);
  };
})(jQuery);

Now we can use our plugin just like any other jQuery function.

jQuery(function() {
  jQuery('a.increase').click(function() {
    jQuery('div.paragraph').increaseFontsize(16, 'fast');	
  });
});

Try it out below to see it work.

Increase Font Size | Decrease Font Size

Fusce eget diam purus, quis mattis dui. Proin volutpat velit at mi viverra id condimentum erat rhoncus. Aliquam eu nibh nisi. In hac habitasse platea dictumst. Nulla vel neque nulla, at lobortis nisl. Donec et erat orci. Mauris non semper libero. Curabitur euismod semper mi, at ornare ante sagittis eu. Nunc massa lacus, auctor facilisis tincidunt eu, euismod et massa. Nunc sit amet purus purus, non porttitor quam. In pulvinar erat sed libero vestibulum cursus. Nunc lobortis semper pellentesque. Nullam ut ligula non eros congue vestibulum.

Using jQuery to make an Expandable Code Box for WP-Syntax

c.bavota — Mon, 02 Nov 2009 17:43:00 +0000

You may have noticed that I’m using a new syntax highlighter for my code snippets. I installed Ryan McGeary‘s WordPress plugin WP-Syntax which uses GeSHi (Generic Syntax Highlighter), a simple highlighting class that supports multiple coding languages. It’s great but I’m not a fan of the horizontal scrollbar that appears if code extends past your site’s width. Instead, I decided to use jQuery to expand the box when you hover over it.

We need to make a few minor changes to the plugin code to get this to work. After you have downloaded, installed and activated the plugin, open up wp-syntax.php and go to line #113:

    if ($line)
    {
        $output .= "\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= " \"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }
    else
    {
        $output .= "\"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }

We need to add a table to the second output.

    if ($line)
    {
        $output .= "\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= " \"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }
    else
    {
        $output .= "";
        $output .= "\"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
        $output .= "
";
    }

Next we need to open up wp-syntax.css to change a few of the styles. Change this:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

to:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: hidden;
  width: 590px;
}

I put a fixed width of 590px because I have set that as the maximum width of my single posts.

Now comes the jQuery. Open up your theme’s header.php file and add the following between your tags.:


<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".wp_syntax").hover(function() {
	var width = jQuery("table", this).width();
	var pad = width + 5;
	if (width > 590) {
		jQuery(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: pad + "px"
			});
		}
	}, function() {
			jQuery(this).stop(true, false).animate({
				width: 590
		});
	});
});
script>

What we are doing above is creating an effect that will only occur when you hover over the code box. It finds the width of the table and animates the expansion to the full width. When you hover out, the box returns to the fixed width of your post. Be sure that you set the two references to 590 to whatever you set your width to in the CSS.

Done and done!

To see this in action check out How to Create a Twitter Feed on Your Web Site.

Resource: Making an Expanding Code Box by Chris Coyier

Hiding the WordPress Dashboard for Non-Admin Users

c.bavota — Fri, 12 Dec 2008 20:33:21 +0000

There are two plugins out there that I have found that help customize your WordPress install by removing the dashboard. Why would you want to do this? Well, perhaps you have installed and customized WordPress for a client who really doesn’t need the dashboard, or you don’t want users who login to see the dashboard. Either way, there are options. Something like this is best left to a plugin so that when you upgrade is still functions and you don’t have to go in and change everything.

Deep Wave has created a plugin called Hide Dashboard. It allows Admins to see the dashboard and removes it for regular users. There are a few options like allowing Authors and Editors to see the dashboard. I tried using this plugin on WordPress 2.7 and it did remove the dashboard for non-Admin users, but when they logged in it brought them straight to the dashboard even though the link was removed. Not really what you want.

Il Filosofo created a small plugin called Remove the Dashboard which worked great but hasn’t yet been updated for 2.7. I went in and made a few changes to get it to do what I wanted. Here is the original plugin code written by Austin Matzko and full credit is given to him for figuring it all out.


/*
Plugin Name: Filosofo Remove Dashboard
Plugin URI: http://www.ilfilosofo.com/blog/
Description: Make the Dashboard, that page that takes forever to load when you log in, disappear.
Version: 1.0
Author: Austin Matzko
Author URI: http://www.ilfilosofo.com/blog/
*/
 
/*  Copyright 2006  Austin Matzko  (email : if.website at gmail.com)
 
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
 
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
*/
 
function remove_the_dashboard () {
global $menu, $submenu, $user_ID;
$the_user = new WP_User($user_ID);
reset($menu); $page = key($menu);
while ((__('Dashboard') != $menu[$page][0]) && next($menu))
$page = key($menu);
if (__('Dashboard') == $menu[$page][0]) unset($menu[$page]);
reset($menu); $page = key($menu);
while (!$the_user->has_cap($menu[$page][1]) && next($menu))
$page = key($menu);
if (preg_match('#wp-admin/?(index.php)?$#',$_SERVER['REQUEST_URI']) && ('index.php' != $menu[$page][2]))
wp_redirect(get_option('siteurl') . '/wp-admin/' . $menu[$page][2]);
}
add_action('admin_menu', 'remove_the_dashboard');
?>

I made some minor changes so that now it works in WordPress 2.7 and Admins have the ability to view the dashboard when they login.


/*
Plugin Name: Filosofo Remove Dashboard
Plugin URI: http://www.ilfilosofo.com/blog/
Description: Make the Dashboard, that page that takes forever to load when you log in, disappear.
Version: 1.0
Author: Austin Matzko
Author URI: http://www.ilfilosofo.com/blog/
*/
 
/*  Copyright 2006  Austin Matzko  (email : if.website at gmail.com)
 
    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 
*/
 
/*	
 
Update 12/12/2008
 
Modified by c.bavota of http://bavotasan.com for WordPress 2.7 and to allow the dashboard for Admins.
 
*/
 
function remove_the_dashboard () {
	if (current_user_can('level_10')) {
		return;
	} else {
 
global $menu, $submenu, $user_ID;
        $the_user = new WP_User($user_ID);
        reset($menu); $page = key($menu);
        while ((__('Dashboard') != $menu[$page][0]) && next($menu))
                $page = key($menu);
        if (__('Dashboard') == $menu[$page][0]) unset($menu[$page]);
        reset($menu); $page = key($menu);
        while (!$the_user->has_cap($menu[$page][1]) && next($menu))
                $page = key($menu);
        if (preg_match('#wp-admin/?(index.php)?$#',$_SERVER['REQUEST_URI']) && ('index.php' != $menu[$page][2]))
                wp_redirect(get_option('siteurl') . '/wp-admin/post-new.php');
}
}
add_action('admin_menu', 'remove_the_dashboard');
?>