Grimmdude

asciibin – ASCII to Binary to ASCII Converter

Garrett — Sun, 27 Nov 2011 02:03:54 +0000

Behold the raw power of ASCII to binary conversion done via a small JavaScript function. Enter text in the left box and convert it into binary to tabbing out of the box or clicking the ‘update’ button. You can also convert binary into text if you’re so inclined.

Text	Binary

The JavaScript function behind this can be found on GitHub: GitHub Repo

menuFlip – jQuery Plugin for Flipping Navigation

Garrett — Sat, 13 Aug 2011 18:25:17 +0000

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.


	Home
	Web
	Blog
	Contact

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.

Bouncing Ball Using Raphaël Javascript Library

Garrett — Thu, 11 Aug 2011 02:58:54 +0000

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 of the document the bouncy ball animation will be inserted into a

. Remember to include the latest versions of Raphaël and jQuery in the of the document before this script.

Image Replacement Script with jQuery for WordPress

Garrett — Tue, 02 Aug 2011 00:23:16 +0000

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.

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

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:

The 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.

Confirming a Link Click with jQuery

Garrett — Thu, 28 Jul 2011 05:29:50 +0000

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

Link Example

The Link

Link Example

Simple Form Submit with Ajax via jQuery

Garrett — Wed, 20 Jul 2011 16:20:06 +0000

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:

New name added.
	
			New Name

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:

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

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.

WordPress Simple Auto Delay Popup Plugin

Garrett — Tue, 19 Jul 2011 18:23:56 +0000

Simple Auto Delay Popup is a lightweight WordPress plugin for easily creating modal popup windows that automatically display after a certain amount of time, defined by you.

Popup content can be the content of a page on your site or any other url.

Usage is very straight forward and it’s very scalable.

Increase Sales!

Think of the possibilities! The attention demanded by these popups can help your site be more successful in converting visitors into clients and patrons. Some ideas of what to popup:

New product info
Hot limited time offers
Surveys
Contact forms.
Important information

How to Use

Using this plugin is as simple as adding this shortcode anywhere within a post or page.

This will create a popup, 400px high & 600px wide, which will popup three seconds after the page has loaded. The contents of the popup will be the content of the page with the ID you specified (the ’3′ above is just for the example). If you’re not sure how to find a page’s ID see below.

Displaying Page Content

Create and publish a new page, this will be the content of the popup. Take note of this new page’s Id (see below if you’re not sure how to find this).
On the post or page where you want the popup to appear add the shortcode and specify the ID of the page you just created.

How to Find the Page ID

View the list of all your site’s pages at Pages > All Pages. Hover over the page you want to use and check the url at the bottom of the page. The ID of the page is the number following ‘post=’.

Further Customization

If the default dimensions, delay time, or content setting isn’t doing it for you they are completely customizable. Here are all the available attributes you can use:

id = the ID of the page that you want displayed in the popup.
url = (optional, use instead of ID) – the url of the website you want displayed in the popup. *use either id or url
delay = (optional, defaults to 3 sec) – amount of time in seconds the popup will delay before it opens.
height = (optional, defaults to 400px) – height of the popup in pixels.
width = (optional, defaults to 600px) – width of the popup in pixels.
frequency = (optional) – a number representing how often the popup will appear in days. ie: 1: appears once per day, 2: appears once every two days, etc…

*Note use id or url depending on if you’re displaying a page or a url. If you use both together the url will take priority.

Displaying a Specific URL

Simply use url=” instead of id=” in the shortcode, like so:

Of course, you would replace ‘http://www.google.com’ with the url of your choosing.

Purchasing the plugin includes simple support and any future updates. You will be directed to the download page after purchase.

Only $9.99

Changelog

7/20/11 – First release!
11/27/11 – Some code cleanup and added ‘frequency’ feature.

Great Bowls of Fire Plays Jimi Hendrix’s Little Wing – Video

Garrett — Fri, 10 Jun 2011 15:19:14 +0000

Trouser replacement may be an order.

SuperSeedz

Garrett — Wed, 08 Jun 2011 16:44:23 +0000

Music in Interesting Places – NYC Subway

Garrett — Tue, 07 Jun 2011 12:38:44 +0000