Grimmdude » Tutorials http://www.grimmdude.com Jammin 'till the jammin's through. Fri, 06 Jan 2012 23:09:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 menuFlip – jQuery Plugin for Flipping Navigation http://www.grimmdude.com/jquery-menuflip/ http://www.grimmdude.com/jquery-menuflip/#comments Sat, 13 Aug 2011 18:25:17 +0000 Garrett http://www.grimmdude.com/?p=2063   read more...]]> menuFlip is a jQuery plugin for adding a ‘flipping’ effect to text based navigational menu items when hovered over without needing to use background images, which can be a pain.

Menu Example

HTML

All you need is this simple markup.

<ul id="flip_nav">
	<li><a href="/home">Home</a></li>
	<li><a href="/web">Web</a></li>
	<li><a href="/blog">Blog</a></li>
	<li><a href="/contact">Contact</a></li>
</ul>

Calling the Plugin

$(function() {
	$('#flip_nav').menuFlip();
});

CSS

No extra CSS is required for this plugin to function, but you’ll probably want to define a width for the ul or float the li elements to the left so they are inline. Also, the flipped items have a class of flipped_item so you can style that puppy as you like. Here’s an example of the CSS for the above example:

ul#flip_nav li {
	float:left;
	text-align:center;
	margin:0px 10px 0px 0px;
}

/*this defines the styling of the new flipped menu item*/
ul#flip_nav a.flipped_item {
	background-color:#000000;
	color: #ffffff;
}

You can download this plugin from the GitHub repository here.

]]> http://www.grimmdude.com/jquery-menuflip/feed/ 4 Bouncing Ball Using Raphaël Javascript Library http://www.grimmdude.com/bouncing-ball-using-raphael-javascript-library/ http://www.grimmdude.com/bouncing-ball-using-raphael-javascript-library/#comments Thu, 11 Aug 2011 02:58:54 +0000 Garrett http://www.grimmdude.com/?p=2038   read more...]]> Today’s personal project was to create a simple bouncing ball using the Raphaël JavaScript library.  This is such a powerful library, if you’re not familiar with it you should check it out.

The Ball

Lots of hang time.

The Code

This short script creates and animates the ball and the shadow. When placed in the <head> of the document the bouncy ball animation will be inserted into a <div id="bouncy_ball"></div>. Remember to include the latest versions of Raphaël and jQuery in the <head> of the document before this script.

<script>
$(document).ready(function() {
	var paper = Raphael(document.getElementById("bouncy_ball"), 100, 200);
	var bouncy_ball = paper.circle(30, 115, 10).attr("gradient", "r#293df7-#1e2dbd");
	var bouncy_shadow = paper.ellipse(30, 120, 8, 8).attr({fill: "#484643", stroke:"none"}).toBack();
	function bounce_up() {
		bouncy_ball.animate({cy: 115}, 500, '<', bounce_drop);
		bouncy_shadow.animate({rx:8,ry:8,fill:"#484643"}, 500, '<');
	}	
	function bounce_drop() {
		bouncy_ball.animate({cy: 15}, 600, '>', bounce_up);
		bouncy_shadow.animate({rx:25,ry:10,fill:"#e7e7e7"}, 600, '>');
	}
	bounce_drop();
});
</script>
]]> http://www.grimmdude.com/bouncing-ball-using-raphael-javascript-library/feed/ 0 Image Replacement Script with jQuery for WordPress http://www.grimmdude.com/the-best-image-replacement-script-with-jquery/ http://www.grimmdude.com/the-best-image-replacement-script-with-jquery/#comments Tue, 02 Aug 2011 00:23:16 +0000 Garrett http://www.grimmdude.com/?p=1956   read more...]]> Here’s a script to ease the use of image replacements for WordPress users. When hovered, the src of the image will be replaced by a url which you define in the alt attribute in the image editor dialog. The image will swap without delay on a hover since the script pre-loads all of the swappable images. Once this script is in your site all you need to do is:

  • Add class=”image_hover” to the image.
  • Specify the URL of the swapped image in the ‘alt’ attribute. If using WordPress there’s an ‘alt’ field in the image editor dialog so it makes this easy to access.

It will apply to any image with class="image_hover" so it’s very scalable and great for sites using lots of image replacements. Using the alt attribute to store the swapped image url sort of makes sense too because it’s the alternate image.

Image Code Example

Hover over the WordPress logo below to see it magically switch between the black/white version to the color one.

http://www.grimmdude.com/wp-content/uploads/2011/08/Wordpress_118px.jpg

<img class="image_hover" src="default_image.jpg" alt="hover_swap_image.jpg" />

The Script

Of course, you’ll need to have the jQuery library loaded up for this to work…since it’s jQuery. You can copy & paste this script directly into the of your document below the call to jQuery.js

<script>
$(document).ready(function() {
  //preload each image for quick swaps
  $('img.image_hover').each(function () {
  	var image_url = $(this).attr('alt');
  	var image_preload = $('<img />').attr('src', image_url);
  });

  //on hoverin/hoverout replace src with alt
  $('img.image_hover').hover( 
  	function() {
  		var alt_url = $(this).attr('alt');
  		var src_url = $(this).attr('src');
  		$(this).attr('src',alt_url).attr('alt',src_url);
  	},
  	function() {
  		var alt_url = $(this).attr('alt');
  		var src_url = $(this).attr('src');
  		$(this).attr('src',alt_url).attr('alt',src_url);
  	}
  );
});
</script>

XD’s Suggestion

Optionally my friend XD provided a great script to use for those who don’t want to use the alt attribute to house the url of the swapped image. Using this method you will need to:

  • Add class=”xd_image_hover” to the image.
  • Give the two images the same name but append ‘-normal’ to the first image and ‘-hover’ to the swapped image. ie imagename-normal.jpg & imagename-hover.jpg

Image Code Example

Here’s a working example of XD’s alternative method:
XD's Image Replacement Example

<img class="xd_image_hover" src="imagename-normal.jpg" alt="XD's Image Replacement Script" />

The Script

<script>
/* ENABLE ROLLOVER ON TARGETED IMAGES (ALL BROWSERS) */
$(document).ready(function() {
	//preload each image for quick swaps
	$('img.xd_image_hover').each(function () {
  		var image_url = $(this).attr('src').replace("-normal","-hover");
  		var image_preload = $('<img />').attr('src', image_url);
  		alert(image_url);
  	});
  
	$('img.xd_image_hover').hover( 
			function() { jQuery(this).attr("src", jQuery(this).attr("src").replace("-normal","-hover")); }, 
			function () { jQuery(this).attr("src", jQuery(this).attr("src").replace("-hover","-normal")); } 
	);  
});
</script>

I edited it slightly to use the ‘image_hover’ class name as well as to preload the image for a quick swap without waiting.

]]> http://www.grimmdude.com/the-best-image-replacement-script-with-jquery/feed/ 4 Confirming a Link Click with jQuery http://www.grimmdude.com/confirming-a-link-click-with-jquery/ http://www.grimmdude.com/confirming-a-link-click-with-jquery/#comments Thu, 28 Jul 2011 05:29:50 +0000 Garrett http://www.grimmdude.com/?p=1920   read more...]]> Here’s a function I wrote while working on a project that pops up a box confirming whether or not the user is sure the want to go to a link they clicked, like this.

It may be simple, but I haven’t really used javascript’s confirm() function much in the past and everything I found only directed the user to a link predefined in the function. I wanted a function that would confirm any link I wanted it to without knowing the link destination in advance, in other words I wanted to confirm dynamic links.

The Code

This jQuery function will pop up a confirmation box on any link with the class ‘confirm’ and send the user to the destination of that link if they click ‘OK’.

$(document).ready(function() {
  $('a.confirm').click(function(event) {
    event.preventDefault()
    var url = $(this).attr('href');
    var confirm_box = confirm('Are you sure you want to click this link?');
    if (confirm_box) {
       window.location = url;
       //uncomment below and remove above if you want the link to open in a new window
       //window.open(url,'_blank');
    }
  });
});

Code Explained

//load once document is ready
$(document).ready(function() {

  //select all anchors with a class of 'confirm'
  $('a.confirm').click(function(event) {

    //prevent the default action of opening the link
    event.preventDefault()

    //grab the url of the current link
    var url = $(this).attr('href');

    //set the confirmation message
    var confirm_box = confirm('Are you sure you want to click this link?');

    //if the confirmation is true (user clicks ok) direct the browser to the link's url
    if (confirm_box) {
       window.location = url;
       //uncomment below and remove above if you want the link to open in a new window
       //window.open(url,'_blank');
    }
  });
});

Example

Because the link below has a class of ‘confirm’ you’ll have to confirm whether or not you want to go to the link’s destination.

Link Code

<a href="http://www.grimmdude.com/contact/" class="confirm">Link Example</a>

The Link

Link Example

]]> http://www.grimmdude.com/confirming-a-link-click-with-jquery/feed/ 5 Simple Form Submit with Ajax via jQuery http://www.grimmdude.com/simple-form-submit-with-ajax-via-jquery/ http://www.grimmdude.com/simple-form-submit-with-ajax-via-jquery/#comments Wed, 20 Jul 2011 16:20:06 +0000 Garrett http://www.grimmdude.com/?p=1792   read more...]]> Anyone who knows me knows I like to keep things simple. I’ve been working a lot lately forms that need some ajax magic to keep the site usage streamlined. Here’s what I found works best for me:

The Form

OK, so I’ll start with my basic form to add a name:

<div id="update_name_div" style="display:none;"><p>New name added.</p></div>
	<form action="handler.php">
			<label for="new_name">New Name</label>
			<input type="text" id="new_name" name="new_name" placeholder="Add Name..." /
		        <input type="submit" id="submit_name_form" class="button-primary" value="Add" />
	</form>
</div>

That will give us a form with a single input field and a submit button. We’ll make the hidden div at the top with id=’update_name_div’ show once the ajax submit process is complete.

The Ajax/jQuery

Now to bring them together using ajax via jQuery; be sure to include the jQuery library in your site for this to work. I’m using the $.get method to retrieve the results. See the comments for an explanation of what’s going on:

<script>
$(document).ready(function() {
	//when the 'add' button is clicked perform an ajax request to add the entered data
	$('#submit_name_form').click(function(event) { 
			
		//if field is empty setup an alert
		if ($('input[name="new_name"]').val() == '') {
			//prevent submit button to sending to the handler page
			event.preventDefault();
			//popup the alert
			alert('Please enter a name');
		}
		
		//otherwise perform ajax request
		else {
			//hide 'updated' div if it's already up.
			$('#update_name_div').hide();
			
			//prevent submit button to sending to the handler page
			event.preventDefault();
			
			//set the inputted value to a variable
			new_name_var = $('input[name="new_name"]').val();
			
			//send the value to the handler page via GET.  Can be retrieved in php as $_GET['name_input']
			$.get('handler.php', { name_input: new_name_var} );
			
			//show 'updated' div with a nice fade in.
			$('#update_name_div').fadeIn('slow');
			
			//reset the input field to empty
			$('input[name="new_name"]').val('');
		}
	}); 
});
</script>

Basically the script first checks to see if the field is empty. If it is the user will be alerted, otherwise it will collect the value of the input field and send it over to handler.php for handling. Once the process is complete a div will fade in at the top of the screen letting the user know their data was submitted. All this without ever leaving the page.

The Handler

Next we need a handler page which will take the data from this form and add it to the database (or do whatever else you want).  Here’s the handler.php:

handler.php

<?php
$new_name = $_GET[name_input];
echo $new_name;
?>

You can have the handler do whatever you want; insert information into the database, email information to yourself, or in this case just echo out the inputted information.

Again, this is a very simple implementation that works.  Feel free to post any questions or suggestions to make it better.  Blizam.

]]> http://www.grimmdude.com/simple-form-submit-with-ajax-via-jquery/feed/ 1 Javascript Toggle Checkbox to Hide/Show Text http://www.grimmdude.com/javascript-toggle-checkbox-to-hideshow-text/ http://www.grimmdude.com/javascript-toggle-checkbox-to-hideshow-text/#comments Wed, 09 Jun 2010 03:50:58 +0000 Garrett http://www.grimmdude.com/?p=1396   read more...]]> I was working the other day on creating some text that would appear and disappear at the check of a checkbox.  I realized it’s pretty simple to accomplish with a little javascript!  There are a few ways of accomplishing this, but here’s the method I used.

<head>

Insert this bit of script in the head of your document:

<script language="javascript">
function checktoggle() {
var textboxid = document.getElementById('checktoggle');
if (textboxid.innerHTML == "") {textboxid.innerHTML = "here's my text!";}
else {textboxid.innerHTML = "";}
}
</script>

<body>

Then, in the <body> tags of your document create an empty div with an id of “checktoggle” , and a checkbox.  On the checkbox, be sure to add the onclick=”checktoggle()” action so when clicked it will run the above function.:

<div id="checktoggle"></div>
<input onclick="checktoggle()" type="checkbox"/>

That’s it, try it out:

To change the text which displays just modify the “here’s my text!” portion (inside the quotes only) of the javascript which you inserted into the head of your document to read whatever you like.

]]> http://www.grimmdude.com/javascript-toggle-checkbox-to-hideshow-text/feed/ 1 How To Create a Popup Music Player Using the Simple Popup Plugin and XSPF Player for WordPress http://www.grimmdude.com/how-to-create-a-popup-music-player-using-the-simple-popup-plugin-for-wordpress/ http://www.grimmdude.com/how-to-create-a-popup-music-player-using-the-simple-popup-plugin-for-wordpress/#comments Wed, 18 Nov 2009 14:58:39 +0000 Garrett http://www.grimmdude.com/?p=1204   read more...]]> Requests have been abundant when it comes to using my Simple Popup Plugin for WordPress to create a popup music player.  Thus, I have written this guide to help you on your journey of musical satisfaction.

Here’s what we’re going for:

Popup Music Player

Download the Plugins

Download and install/activate the XSPF Music Player plugin and this Simple Popup plugin.

Create Page Template

Create a page template to be used for the page that you intend to popup.  This should be very minimal, ie no sidebar, navigation, etc.  You basically just want an empty page with maybe a background color and possibly some links associated with your music (facebook, myspace,…).

The XSPF Player plugin requires you to add this tag in the body of this template for the player to show:

<?php xspf_player::start('playlistname'); ?>

For info on creating a page template see the WordPress documentation.  If you like you can download this music player popup page template which already contains the XSPF Player tag and place it in your current theme’s folder for it to work.

Page Template

Create New Page

Create a new page (not page template) in WordPress with no text in the body and choose the page template you just created from the template pull-down menu.

Create New Page

Link it Up

Using the Simple Popup Plugin shortcode, template tag, or widget create a link to your newly created page wherever you desire.  Set the dimensions for the pop up in the Simple Popup Plugin’s options page.

And that’s it!  Ain’t no thang.

]]> http://www.grimmdude.com/how-to-create-a-popup-music-player-using-the-simple-popup-plugin-for-wordpress/feed/ 27 Creating Two Column Unordered <ul> Lists http://www.grimmdude.com/creating-two-column-unordered-ul-lists/ http://www.grimmdude.com/creating-two-column-unordered-ul-lists/#comments Thu, 05 Nov 2009 14:15:15 +0000 Garrett http://www.grimmdude.com/?p=1105   read more...]]> Creating Two Column Unordered ListsI’ve been searching like mad how to split an unordered list <ul> into two columns and haven’t found an easy solution.  By using combined info from a few sites I figured out an easy way to do it.  If you already know how to do this then mozie on down folks.  Here it is:

Make a <div class=”double_column_list”> and put a <ul> in it with some list items.   Set the <li> class to display at 50% width and float it to the left.

CSS

.double_column_list li {float: left; width: 50%;}

HTML

<div class="double_column_list">
<ul>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
</ul>
</div>

Result

  • Awesome Stuff
  • Awesome Stuff
  • Awesome Stuff
  • Awesome Stuff

Boosh, 2 column unordered lists.

]]> http://www.grimmdude.com/creating-two-column-unordered-ul-lists/feed/ 15 WordPress 2.7 Enhanced Comments for Dummies http://www.grimmdude.com/wordpress-27-enhanced-comments-for-dummies/ http://www.grimmdude.com/wordpress-27-enhanced-comments-for-dummies/#comments Thu, 22 Jan 2009 14:40:22 +0000 Garrett http://www.grimmdude.com/?p=476   read more...]]> I, like many others, have recently upgraded to WordPress 2.7 because of all the added features.  My particular interest was in the enhanced comments which included threading and paging, but of course themes created before the release of 2.7 aren’t built for it so you can’t take advantage of these new features without some modification.  After reading the Migrating Plugins and Themes to 2.7/Enhanced Comment Display on WordPress.org I knew what needed to be done but unfortunately didn’t really have the php skillz to pull it off.  So what did I do?  I knew that the WordPress Default theme that was upgraded with 2.7 was a shining example of what the code was supposed to look like (see at the bottom of this post for the code), so here’s what I did:

  1. Enabled comment threading in the settings menu.
  2. Highlighted/copied all the code on my current theme’s comments.php file and pasted it into a plain text document as a backup.
  3. Highlighted/copied all the code on the WordPress Default theme.
  4. Went back to the comments.php file for my current theme, erased all the code, and replaced it with the code from the WordPress Default theme’s comments.php file (I made the backup just in case it didn’t work out).
  5. Opened my current theme’s header.php file and added the following code for the JavaScript immediately before the call to wp_head().

JavaScript Code:

[sourcecode language='php']< ?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>[/sourcecode]

That left me with a perfectly good working comments that thread upon command.  The only problem was the comments didn’t really display right because of lack of css.  I have basic css knowledge but still needed some help, that’s where Matt Jab’s blog post came in mad handy.  He lays out his own blog’s css for comments very clearly which makes a great foundation for tweaking on your blog.

Hope that helps!

WordPress 2.7 Default Theme comment.php Code:

[sourcecode language='php']< ?php
/**
* @package WordPress
* @subpackage Default_Theme
*/

// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');

if ( post_password_required() ) { ?>

This post is password protected. Enter the password to view comments.

< ?php
return;
}
?>

< ?php if ( have_comments() ) : ?>

< ?php comments_number('No Responses', 'One Response', '% Responses' );?> to “< ?php the_title(); ?>”

< ?php previous_comments_link() ?>
< ?php next_comments_link() ?>
    < ?php wp_list_comments(); ?>
< ?php previous_comments_link() ?>
< ?php next_comments_link() ?>

< ?php else : // this is displayed if there are no comments so far ?>

< ?php if ('open' == $post->comment_status) : ?>

< ?php else : // comments are closed ?>

Comments are closed.

< ?php endif; ?>
< ?php endif; ?>

< ?php if ('open' == $post->comment_status) : ?>

< ?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?>

< ?php cancel_comment_reply_link(); ?>

< ?php if ( get_option('comment_registration') && !$user_ID ) : ?>

You must be /wp-comments-post.php” method=”post” id=”commentform”>

< ?php if ( $user_ID ) : ?>

Logged in as ” title=”Log out of this account”>Log out »

< ?php else : ?>

/>

/>

Website

< ?php endif; ?>