The popularity (and rightly so) of responsive web design is growing and while it’s fairly easy to set up flexible grids and text styling via medi queries, images tend to be harder to work with in a responsive design. Slow loading images can be a big deal to users especially when your site it trying to load images that just aren’t being used – like different header backgrounds for different display sizes. A great way to make sure you images load quicker is to preload your images in the background while the rest of the page is loading.

I found the following snippet at Engineered Web after I failed to find any snippets that worked correctly. View the source code here for the full explanation of the code.

Use this script:

(function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery)

Call the script by:

jQuery.preLoadImages("largeHeader.png","medHeader.png","smallHeader.png");

Good luck!

So you designed a slick WordPress theme for a client, you set up WordPress for them and installed all the plugins and you have even gone the extra mile and designed a sweet video player and built a new custom content type for them. Then, about a month later you get a call that says the video posts aren’t showing up in their RSS feed – what is a designer to do?

Add your custom post type to you feed silly. Its really pretty easy, just add another little function to your functions.php file, way easier than building the custom post type in the first place. Here is the code, good luck ya’ll.

function myfeed_request($qv) {
    if (isset($qv['feed']) && !isset($qv['post_type']))
        $qv['post_type'] = array('post', 'videos');
    return $qv;
}
add_filter('request', 'myfeed_request');

source for snippet: wp-snippets.com

This is a cool snippet to add image reflections using CSS, it only works in Webkit so far, but should be coming to Firefox soon. Its really just using the new box-reflect CSS property to create the CSS reflection:

-webkit-box-reflect: direction offset mask-box-image;

The first parameter (direction) defines the direction of the CSS reflection, values include; below, above, left and right. The second parameter (offset) defines the distance or offset of the CSS reflection from the the image or element just in case you need a little space between your reflection and the image. The parameter (mask-box-image) is used to set the mask of the CSS reflection, basically to set the gradient so that your reflection fades out, in the example below we are using the -webkit-gradient property to define this. Also, if you you don’t set this parameter then no mask will be set.

img {
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
}

Example (only in Safari and Chrome):

Thanks to Nettuts for this great snippet.

This is a snippet I’ve been looking for for a very long time now but have never found a legit solution. Some script functions do a warning pop up or only partially disable right-click, but this little snippet completely disables it. To disable right-click is really great if you are trying to protect photos from getting stolen or things like that and I know a lot of designers and developers hate when a web site takes control over basic browser functions. But privacy is becoming a huge deal on the internet and in some case its important to protect yourself, your images and your designs from being blatantly stolen right off your digital property.

Here’s the snippet, sweet and simple – oh, don’t forget to include jQuery: (big thanks to Codrops.com for this fantastic snippet)

<script>
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>

There are a ton of different ways to include jQuery in your WordPress theme, but after I stumbled upon this snippet I have never turned back. Brought to us by the pure genius of Chris Coyer – CSS Tricks – this snippet is a simple PHP function to add to your functions.php file. The real benefit to this is that you can avoid loading jQuery multiple times if you have plugin, widgets or anything else that requires jQuery.

Here’s the code:

if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
}

Thanks CSS-Tricks.com!!!

Today’s Kick Ass Snippet is a nifty little WordPress snippet that allows you to add pagination to your posts anywhere without using a plug in. I was working on a project recently and needed a better solution for pagination, I tried a few plug-ins but never fell in love with any of them and then I found this snippet on WP-snippets.com and it solved my problem.

This snippet creates a pagination style just like the WP-PageNavi plugin and its pretty easy to install. You’ll just need to start by adding this snippet to your functions.php:

function pagination($prev = '«', $next = '»') {
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => __($prev),
'next_text' => __($next),
'type' => 'plain'
);
if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );

if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array( 's' => get_query_var( 's' ) );

echo paginate_links( $pagination );
};

Then add this code – pagination() - to where you want to add your pagination, outside the loop but inside the if( have_post() ) statement, like this:

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
// post goes here
<?php endwhile; ?>

<div><?php pagination('»', '«'); ?></div>

<?php endif; ?>

Here are the CSS classes to use when styling:

<pre><code>.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers { font-size: 14px; color: #3888ff; }

Thanks WP-Snippets.com and @pjrvsWP for the great snippet!

This weeks kick ass snippet of the week is purely just a fun and simple one. Using CSS transition and text-shadow you can create a nifty little CSS hover blur effect on hover:

<h1 class="blur">Hover to watch the blurring magic happen</h1>

.blur{
color: #444;
font-size:24px;
font-family: sans-serif;
/* set the transition */
transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
}

.blur:hover{
color:transparent;
/*set the amount of blur with text-shadow */
text-shadow: #555 0 0 5px;
cursor: pointer;
}

Hover over me to watch the blurring magic happen right before your very eyes

A pullquote is a great way to add more interest in your web content, its like a blockquote accept it’s generally a smaller, styled quote floated to the left, right or center within content blocks. Creating a pullquote is pretty simple, just build yourself a .pullquote class and ad it to the paragraph you want quoted. Here is how to create pullquotes in CSS:

.pullquote {
width: 300px;
float: right;
margin: 0px 8px 5px 8px;
padding: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.1em;
font-weight: bold;
font-style: italic;
text-align: center;
color: #aaa;
border: 1px solid #ccc;
-moz-box-shadow: 0 0 12px #bbb;
-webkit-box-shadow: 0 0 12px #bbb;
box-shadow: 0 0 12px #bbb;
}

Example of This Pullquote Class

In blandit, nulla varius rutrum aliquet, justo purus pharetra tortor, non eleifend tortor mauris lacinia sapien! Nunc porta congue mauris et ultricies? Cras sed viverra ipsum. Curabitur vitae augue id tellus rutrum dapibus. Sed varius imperdiet ipsum, eget sollicitudin neque venenatis ac. Etiam eu neque magna, quis mattis dui. Praesent porta sagittis urna, ut malesuada magna hendrerit et? Phasellus volutpat pellentesque orci, a condimentum dolor congue ac.

“This is the pullquote. It’s a great way to highlight a quote or a paragraph in your article content. When readers scan you article for something interesting their eyes will be drawn to this section. Pullquotes are a great idea to create flow and eye direction in your article content.”

Nam imperdiet nisi et mauris consequat consequat. In blandit, nulla varius rutrum aliquet, justo purus pharetra tortor, non eleifend tortor mauris lacinia sapien! Nunc porta congue mauris et ultricies? Cras sed viverra ipsum. Curabitur vitae augue id tellus rutrum dapibus. Sed varius imperdiet ipsum, eget sollicitudin neque venenatis ac. Etiam eu neque magna, quis mattis dui. Praesent porta sagittis urna, ut malesuada magna hendrerit et? Phasellus volutpat pellentesque orci, a condimentum dolor congue ac.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam imperdiet nisi et mauris consequat consequat. In blandit, nulla varius rutrum aliquet, justo purus pharetra tortor, non eleifend tortor mauris lacinia sapien! Nunc porta congue mauris et ultricies? Cras sed viverra ipsum. Curabitur vitae augue id tellus rutrum dapibus. Sed varius imperdiet ipsum, eget sollicitudin neque venenatis ac. Etiam eu neque magna, quis mattis dui. Praesent porta sagittis urna, ut malesuada magna hendrerit et? Phasellus volutpat pellentesque orci, a condimentum dolor congue ac.

This is a great snippet for creating inputs that remember the original helper value of the input. After the users clicks inside the input the helper value will disappear allowing them to type, but if they don not type anything, the helper value comes back.

Great snippet to improve the usability of your site. I just added this to one of my projects and it works awesome. Give it a try:

var origValue = [];
$('input.remember').each ( function (currentIndex)
{
origValue.push ( $(this).val () );
$(this).focus ( function ()
{
$(this).removeClass("unfocused");
var defaultText = $(this).val();
if ( $(this).val () == origValue [ currentIndex ] )
{
$(this).val('');
}

$(this).blur(function()
{
var userInput = $(this).val();
if (userInput == '')
{
$(this).val(defaultText);
$(this).addClass("unfocused");
}
});
});
});

Reference URL

This kick ass snippet is a beautiful little CSS3 snippet for styling individual links. You can style links by file type, so the user knows if they are linking Read ★ More