Simple Page Peel Effect with jQuery & CSS

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.

1. HTML – Page Peel Wireframe

The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg_block” wrapped in an <a> tag.

Note – If you don’t have any conflicting absolute/relative positioning properties, you technically don’t need the “pageflip” container at all.

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

2. CSS – Page Peel Styles

Set the image property to a smaller size (50px by 50px) by default and set the absolute positioning to be in the top right corner. The image will be used similar to the “masking” technique in Photoshop or Flash, where it will be placed on top of the hidden message, so only a portion of the message will be shown. Check out the image below for a visual:

The actual message behind the “peeling” effect, is all within the “msg_block” class. By default, it will start at 50px by 50px, positioned on the top right corner of the page. The text-indent will shoot the text off of the page for anyone with CSS enabled.

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

Note that the “msg_block” height is off by 2px compared to the image property – this is taking in consideration of the drop shadow that the image has.

3. jQuery – Animating Page Peel

All we are doing here is expanding the image and msg_block on hover, then retracting to its default size on hover out.

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ //Animate and expand the image and the msg_block (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //On hover out, go back to original size 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //On hover out, go back to original size 50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

13 jQuery WordPress Plugins

jQuery allows for impressive animations and interactions that are easily created and utilized in your WordPress blog. If used wisely, these plugins can enhance your blog by making it far easier for your readership to read your words of genius, and participate in your blog.

This articles details some of the better plugins that utilize jQuery. [Read more...]

WordPress plugins to help your commenter’s promote their social network

Further to our post on enhancing your WordPress blog through social networking, we have realised that this the flip side to that is, WordPress plugins to help your commenter’s’ spread the word about their social network sites. Any help you give them helps you, as they get a chance to have their say and tell the world about what they do, by directing traffic to their social network profiles, and in the process you get to make your pitch as well. Here are some useful plugins you can use to help that process. [Read more...]

Can you ever have enough SEO for your blog?

We all know that search engine optimization is the way to promote your work via your WordPress blog, so together with SEO plugins for your blog, and more SEO plugins for your blog, we now have more SEO plugins for your blog. So altogether you should now be able to attract lots of traffic, manipulate your blogs and pages to do just about anything that is remotely SEO related. That can’t be bad can it?

So here are some more plugins which should make your day. [Read more...]

10 Useful WordPress plugins

WordPress plugins and their usefulness do not really require an explanation, but in case you are new to the blogging world, let us enlighten you. In short they enhance your blog both in appearance, and its manageability. Both of these factors will serve you, and your readership.

The easier, clearer, and more appealing your blog is to read and manage by your readers, the more likely people will subscribe, follow, and spread the word about your blog. It also helps you stand out from the crowd, and considering there is around twelve million blogs, getting ahead is a challenge.

These plugins though, should help you do exactly that, and make you, and your readers, happier. Some of these plugins we have touched upon already, but reminders are always good, for well, reminding you.

Dedicated Site Plugins. [Read more...]

3 Methods To Exclude WordPress Categories In A Post

Sometimes, we may want to exclude some categories from display in our main page or sidebar. There are a lot of methods to exclude these categories. Here i would like to share 3 types of different method to do so.

Use WordPress Category Visibility Plugin

This plugin will let you to exclude any tag and category at different pages. For example, you can exclude selected category in the front page, search results, archives, and feeds. Simply activate the plugin and go to your Manage->Category Visibility to manage them. (There are some users who claim this plugin may has conflict with other WordPress plugins.)

wp_list_categories() template tags

You may use this template tags to list out all categories at your website’s navigation bar or your sidebar. The template tags tutorial website actually teach us how to include or exclude categories by adding parameters when we call this template tags.

Hack the default widgets.php

I read this tutorial from Simple Solution For smart People website. You need to make a backup of wp-includes/widgets.php file before proceed.

  1. After you backup the file. Open it using any text-editor and try to look for function wp_widget_categories. I am using WordPress 2.6.x and it is around line 703. This is the only function that you need to modify.
  2. Find the following line:
    $d = $options[$number]['dropdown'] ? '1' : '0';

    Add $exclude = ‘17′; below this line. You may replace 17 with the Category ID that you want to exclude. You may exclude more than one category by adding a “,” between the number.

  3. Next, look for
    $cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h);

    And replace it with

    $cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h, 'exclude' => $exclude);

Done. You can change the “17″ to any category ID that you want to exclude anytime. I had pasted my codes at the end of this tutorial, in case you don’t understand my tutorial.

function wp_widget_categories($args, $widget_args = 1) {
    extract($args, EXTR_SKIP);
    if ( is_numeric($widget_args) )
        $widget_args = array( 'number' => $widget_args );
    $widget_args = wp_parse_args( $widget_args, array( 'number' => -1 ) );
    extract($widget_args, EXTR_SKIP);

    $options = get_option('widget_categories');
    if ( !isset($options[$number]) )
        return;

    $c = $options[$number]['count'] ? '1' : '0';
    $h = $options[$number]['hierarchical'] ? '1' : '0';
    $d = $options[$number]['dropdown'] ? '1' : '0';
    $exclude = '17';

    $title = empty($options[$number]['title']) ? __('Categories') : apply_filters('widget_title', $options[$number]['title']);

    echo $before_widget;
    echo $before_title . $title . $after_title;

    $cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h, 'exclude' => $exclude);

    if ( $d ) {
        $cat_args['show_option_none'] = __('Select Category');
        wp_dropdown_categories($cat_args);
?>

Hope you enjoying reading my tutorial. Please choose any method that suit you.