Grimmdude » Tutorials

Javascript Toggle Checkbox to Hide/Show Text

Garrett — Wed, 09 Jun 2010 03:50:58 +0000

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.

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

Then, in the 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.:


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.

How To Create a Popup Music Player Using the Simple Popup Plugin and XSPF Player for WordPress

Garrett — Wed, 18 Nov 2009 14:58:39 +0000

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:

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:

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.

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.

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.

Creating Two Column Unordered
Lists

Garrett — Thu, 05 Nov 2009 14:15:15 +0000

I’ve been searching like mad how to split an unordered list

Make a

and put a

class to display at 50% width and float it to the left.

CSS
```
.double_column_list li {float: left; width: 50%;} 
```
HTML
```
Awesome Stuff
Awesome Stuff
Awesome Stuff
Awesome Stuff
```
- Awesome Stuff
- Awesome Stuff
- Awesome Stuff
- Awesome Stuff
Boosh, 2 column unordered lists.

WordPress 2.7 Enhanced Comments for Dummies

Garrett — Thu, 22 Jan 2009 14:40:22 +0000

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:

Enabled comment threading in the settings menu.
Highlighted/copied all the code on my current theme’s comments.php file and pasted it into a plain text document as a backup.
Highlighted/copied all the code on the WordPress Default theme.
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).
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:

< ?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

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:

< ?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 logged in to post a comment.
< ?php else : ?>



< ?php if ( $user_ID ) : ?>

Logged in as < ?php echo $user_identity; ?>. Log out »

< ?php else : ?>

 />
Name < ?php if ($req) echo "(required)"; ?>

 />
Mail (will not be published) < ?php if ($req) echo "(required)"; ?>


Website

< ?php endif; ?>






< ?php comment_id_fields(); ?>

< ?php do_action('comment_form', $post->ID); ?>



< ?php endif; // If registration required and not logged in ?>


< ?php endif; // if you delete this the sky will fall on your head ?>

How to Properly Drink a Beer

Garrett — Mon, 12 Jan 2009 15:02:55 +0000

I thought, since I’ve been purchasing 24oz Budweisers at next to nothing here in Shanghai, I would share some of my beer drinking secrets to the working class peoples. Below you will find a few tips for increasing your beer drinking satisfaction.

Choose the right beer for the occasion – While I have been known to drink a Natty Ice at a formal gala, selecting the right beer can make a big difference in personal gratification and social perception. My rule of thumb is nothing cheaper than Sierra Nevada at a black tie event, and nothing more expensive than Miller while chillin at home. Now I know a lot of you beer aficionados are saying:

I like to drink a heavy micro brew while browsing the web.

Totally cool, I used to do the same myself but the stuff can get expensive. I’m happy with college grade brews for recreational enjoyment.
Location location location – Next step is to find a suitable location for brew consumption. My personal favorite is on my most comfortable chair with my laptop…on my lap. Put on my iTunes beer drinking play list and roll it out it flat.

Drinking the beer – Alright, let’s slow down a little. This is the most important part! The moment of truth. Are you comfortable? Got that music playing? OK, pop the cap on the brew and make it happen. Start with just a sip. Let your mouth taste the delicious flavor and crave more. Then give it what it wants, take a nice healthy gulp and think to yourself:

So this is what it’s like.

Because this is what’s it’s like. Enjoy.

Picture by uberculture