Web Development Blog Posts | Web Design and Marketing Blog

Making flowplayer.swf files play in IE where gzip is enabled

Posted on Aug 20, 2010 by Bill to Web Development

In an effort to make some websites and applications load faster, some developers may have implemented gzip compression to enable to page to load significantly faster. Be it because of the amount of data that the page displays; i.e. images, text and so on. Although it may be in good practice to enable gzip compression on your website, some may have faced the dilema of their swf videos having trouble playing; especially in the dreaded IE browser.

If you have come across it and decided, “Well maybe I will just remove gzip and save the headache”, then go ahead and enable it once again! There IS a fix!

But first lets see what gzip is exactly. The current definition is as follows: GZip is a compression method often used in web applications and software such as phpBB to improve speed. Most modern browsers support this on-the-fly algorithm. Gzip is also used to compress an archive of files. Higher compression levels, however, will increase server load.

If you have all our swf files in one folder, then go ahead and create an .htaccess file inside that folder with the following:

Options +FollowSymLinks
RewriteEngine on
RewriteRule . - [E=no-gzip:1]

This previous code will only disable gzip for the swf file type. So that there is no compression or cache of the file types. You can also use it on a per folder basis. Of course the .htaccess is only applicable if you are hosted on an apache based server.
With apache just add a .htaccess file with the above commands in it to the folder you’re storing your flowplayer.swf files in that way gzipping will only be disabled for that folder.

If you would like more information about this there’s tons of additional information on the subject via google: http://www.google.com/#hl=en&&sa=X&ei=QnAWTJH0OISdlgfxr-GFDA&ved=0CBEQBSgA&q=htaccess+disable+gzip+swf&spell=1&fp=610e7dd948e54cca

Add print ability to fancybox jquery plugin

Posted on Apr 6, 2010 by Rich to General, Web Development

In this post, I will show you how to add a nice print button to the fancybox jquery plugin. Of course like many of the posts I write, the idea came about from one of our clients who wanted to be able to have their users open the lightbox, show the coupon or whatever promotion they are doing and give the user the option to print said promotion.

Click here to view to working demo or go ahead and download the zip file.

To begin, there were a couple of things that we had to do. First, we needed to download the fancybox jQuery plugin. At this point I am assuming you have jQuery javascript file downloaded, if you dont, go get it at jQuery.com

The Breakdown

The javascript required is 3 main pieces. The fancybox plugin, the jquery file and the third piece that handles the printing functionality.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".promo").fancybox();
});
</script>

<script type="text/javascript">
var win=null;
function printIt(printThis)
{
	win = window.open();
	self.focus();
	win.document.open();
	win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
	win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
	win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
	win.document.write(printThis);
	win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
	win.document.close();
	win.print();
	win.close();
}
</script>

If you are familiar with the fancybox plugin, this is not too far fetched. basically what I added was the “print” image to the plugin itself as well as added some css too to position the image where I wanted it to appear.

FULL HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Print with Fancybox</title>
<link rel="stylesheet" media="all" type="text/css" href="fancybox.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".promo").fancybox();
});
</script>
</head>
<body>
<a class='promo' href="img/thatagency-full.jpg"><img src="img/thatagency-tile.jpg" alt="THAT Agency - West Palm Beach" border="0" /></a>
<script type="text/javascript">
var win=null;
function printIt(printThis)
{
	win = window.open();
	self.focus();
	win.document.open();
	win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
	win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
	win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
	win.document.write(printThis);
	win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
	win.document.close();
	win.print();
	win.close();
}
</script>
</body>
</html>

Click here to view to working demo or go ahead and download the zip file.

Tags: jQuery, jQuery examples, jQuery tutorial

Rotated Background with Slide Up Menu using JQuery and CSS

Posted on Mar 3, 2010 by Rich to Web Development

So you’re not really into flash?
Don’t know how to code flash?
Don’t want to know how to code flash?
Love jQuery?

Well all this is pretty much me. Now a days most of the things you can do in flash, you can know do with jQuery; well somewhat. But that doesn’t stop us developers from trying right? One of latest clients wanted a cool feature that I thought would be nicely shared with the rest of my web development community.

Let’s think of a box with rotating images inside. along with the images, we have a navigation menu that slides up / down while the images rotate. Pretty cool huh? well lets show you how I made this happen.

Check out the Demo

Lets begin with the Basics of what is needed:

1. JQuery/ custom js
2. css/html/images

Javascript

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="bg-rotate-slide-up-js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	mainImageFlow();
});
</script>

CSS

body{margin:0;padding:0;}
#mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%;}
#mainImageBox img{float:left;position:absolute;margin:0;padding:0;border:1px solid #6a39b3;}
#mainImageBox img.show{z-index:100}
.snapShot{margin:0;padding:9px;left:0;position:absolute;top:0;z-index:0;}
#mainImageBox #subNavBox{position:absolute;z-index:200;top:1px;left:1px;width:650px;height:300px;}
#mainImageBox #subNavBox .sNavWrap{float:left;position:relative;bottom:0;background-color:#6a39b3;margin:0 0 0 20px;padding:0;font-size:12px;text-align:center;top:269px;}
#mainImageBox #subNavBox .sNavWrap a{margin:0;padding:8px 10px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#f9f9f9;text-decoration:none;text-align:center;display:block; text-transform:uppercase;font-weight:bold;}
#mainImageBox #subNavBox .sNavWrap .sSub{border-top:1px solid #ddd;margin:0;padding:0;}
#mainImageBox #subNavBox .sNavWrap .sSub a{display:block;margin:5px 0;padding:5px 0 8px 0;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#080808;text-decoration:none;text-align:center;display:block;text-transform:uppercase;font-weight:normal;}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}

HTML

<!-- begin main image box -->
<div id="mainImageBox">
    <img src="one.jpg" alt="One" width="650" height="300" class="snapShot show" />
    <img src="two.jpg" alt="Two" width="650" height="300" class="snapShot" />			
    <img src="three.jpg" alt="Three" width="650" height="300" class="snapShot" />
    <!-- begin sub nav slide up box -->
    <div id="subNavBox" class="sNav">
        <!-- list 1 -->
        <div class="sNavWrap">
          <div class="sHead">
            <a href="#">Header Link 1</a>
            <div class="sSub">
                <a href="#">sub link for 1</a>
                <a href="#">sub link 2 for 1</a>
                <a href="#">sub link 3 for 1</a>
            </div>
            <div class="clear"></div>
          </div> 
          <div class="clear"></div>                 
        </div>               
        <!-- list 2 -->
        <div class="sNavWrap">
          <div class="sHead">
            <a href="#">Header Link 2</a>
            <div class="sSub">
                <a href="#">sub link for 2</a>
                <a href="#">sub link 2 for 2</a>
                <a href="#">sub link 3 for 2</a>
            </div>
            <div class="clear"></div>
          </div> 
          <div class="clear"></div>                 
        </div> 
    </div>
    <!-- end sub nav slide up box -->
</div>
<!-- end main image box -->

Well building off of a carousel foundation I found, I stripped down to the bare minimum and ran from there. Here is all the Javascript written for this example:

Javascript (bg-rotate-slide-up-js.js)

$(document).ready(function(){
	/*****************************************************************************
		dealing with the navigation
	*****************************************************************************/	
 
	$(".sSub").each(function(){
		var newWidth = $(this).width();
		$(this).prev().css("width",newWidth);
		$(this).css("display","none");
		//alert( 300 - $(this).height() );
	});
	// Deal with Sub Nav
	$(".sNavWrap").hover(function(){
		// I Loath you IE fix
		if ($.browser.msie && $.browser.version.substr(0,1)<8){var minusPX = "33";}
		else{var minusPX = "32";}
 
		var newHeight = (300 - $(this).children().children(".sSub").height() ) - minusPX +"px";
		//alert(newHeight);
		$(this).animate({
			top: newHeight
		}, 300, function() {
			$(this).children().children(".sSub").show();
		}).stop(true, true);
		$(this).children().children(".sSub").slideDown(300);
	},function(){
      	$(this).animate({
			top: '269px'
		}, 300, function() {
			$(this).children().children(".sSub").hide();
		}).stop(true, true);
		$(this).children().children(".sSub").slideUp(300);
    });
 
 
 
}); // END THE DOM
 
 
 
/*****************************************************************************
	dealing with the rotating images
*****************************************************************************/	
function mainImageFlow()
{
	// set the opacity of image(s) to 0 (can't see them)
	$('#mainImageBox img').css({opacity: 0.0});
	// set the first image to be seen
	$('#mainImageBox img:first').css({opacity: 1.0});
	// set the function for 'mainImageGallery' to run every 3 seconds.
	setInterval('mainImageGallery()',3000);
}
function mainImageGallery()
{
	// if the images have no class (class='show') then show the first one anyway
	var current = ($('#mainImageBox img.show')?  $('#mainImageBox img.show') : $('#mainImageBox img:first'));
	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('sNav'))? $('#mainImageBox img:first') :current.next()) : $('#mainImageBox img:first'));	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	$("#subNavBox").removeClass('show');
}

Check out the Demo

OR

Download the zip file

Tags: CSS, html, jQuery, jQuery examples, jQuery HTML, jQuery tutorial

5 Development Firefox Plugins that Make Development Life a Little Easier

Posted on Feb 5, 2010 by Rich to Web Development

With so many plugins in use now a days, it is impossible to actually see what the best ones are and why we should use them.

Well I stick to a couple of them that I use (on Firefox) when I develop websites. Here is the list.

Firebug
integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Inspect and Edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile javaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScipt. http://getfirebug.com/

Screengrab!
saves webpages as images…It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard. http://www.screengrab.org/

394 MeasureIT
Draw out a ruler to get the pixel width and height of any elements on a webpage.
https://addons.mozilla.org/en-US/firefox/addon/539

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. http://fireftp.mozdev.org/

FirePHP enables you to log to your Firebug Console using a simple PHP method call. All data is sent via response headers and will not interfere with the content on your page. FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required. http://www.firephp.org/

Tags: Firefox plugins

Simple Google Map Example part 1

Posted on Jan 25, 2010 by Rich to Web Development

I think the more examples people post out there, the overwhelming some things might get. Google maps and the interaction between the code and the functionality behind it has for the most part, been something that some developers might might a little hard to deal with.

Well I am not trying to add to the confusion, but hopefully shed some light on this matter. I believe this example and straight to the point and pretty easy to understand.

Here we go.

What Does it do?

This example is pretty simple. It will render a map on a web page based on items that it sees in an XML file.

What Do I need?

You will need a couple of things.

1. First you are going to need a Google Map API Key. Dont worry this is way less complicated than you might think, but remember that an API key is based on a domain. So if you are testing everything on mysitedev.com you will need a new API key when you launch live to mysite.com.

2. You will need to get lattitude and longitude coordinates for the location(s) you wish to plot. I do it using google maps itself, but maybe there is something easier out there than you can share?

google-map-example

code for actual map file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map Example</title>
<style>
*{margin:0;padding:0;}
body{background-color:#d9d9d9;text-align:center;}
.mapBox{width:640px;height:480px;display:block;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY"></script>
<script type="text/javascript">
//<![CDATA[
function load(lat, lng){
	if (GBrowserIsCompatible())
	{
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.setCenter(new GLatLng(lat, lng), 6);
 
		function createMarker(point, name, address, index)
		{
			// Create a lettered icon for this point using our icon class
			var letter = String.fromCharCode("A".charCodeAt(0) + index);
			var icon = new GIcon(baseIcon);
			icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
			var marker = new GMarker(point, icon);
			GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml("<p><strong>" + name + "</strong><p><p>" + address + "</p>");
		});
		return marker;
	}
	// Create a base icon for all of our markers that specifies the
	// shadow, icon dimensions, etc.
	var baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);
	// Grab actual information from the properties xml to use.     
	GDownloadUrl("properties.xml", function(data, responseCode)
	{
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			map.addOverlay(createMarker(point, markers[i].getAttribute("name"), markers[i].getAttribute("address"), i));
			}
	});
	}
}
//]]>
</script>
</head>
<body onload="load(28.551957,-81.419678)" onunload="GUnload()">
    <div id="map" class="mapBox"></div>
</body>
</html>

Please note that the line load(num,num) is the center of the map.

<body onload="load(28.551957,-81.419678)" onunload="GUnload()">

code for properties XML file.

<?xml version="1.0" encoding="utf-8"?>
<markers>
	<marker name="Walt Disney World Resort" address="7100 Municipal Drive Orlando, FL 32819" lng="-81.419678" lat="28.551957" />
	<marker name="Sea World Orlando" address="Orlando, FL 32821" lng="-81.458044" lat="28.420844" />
	<marker name="THAT Agency" address="120 S. Dixie Hwy WPB, FL 33401" lng="-80.049219" lat="26.725144" />
	<marker name="Art Deco Welcome Center" address="1200 Ocean Drive Miami Beach, FL 33139" lng="-80.125952" lat="25.795718" />
	<marker name="Daytona International Speedway" address="1801 W Internatl Speedway Blvd Daytona Beach, FL 32114" lng="-81.058674" lat="29.215856" />
</markers>

Click Here View a Working example using the code noted here

Later on we can look at how to create the properties.xml file dynamically using php as well as some other goodies. Stay Tuned.

Tags: Google Map, Google Map Api, html, Javascript

Base model for a PHP based website

Posted on Jan 7, 2010 by Rich to Web Development

There are characteristics that every web developer has. One of those things is the way a project is started. While some developers might use open source Content Management Systems / Blogging software like: Wordpress, Joomla, Movable Type or any of the other systems out there, some developers chose to have a foundation to their projects.

Here at THAT Agency, we write alot of custom code for our clients, but I personally still like building off of my own foundation. Here is my breakdown.

Note that we usually build in PHP.

css/
inc/
js/
img/
template.php

Seems pretty simple right? well lets look inside the folders themselves.

css

This folder includes 2 files (which you can merge into 1, but i like the two files). We have been really utilizing the 960 Grid System for our development standards, so the first css file (reset-960.css) is pretty much what you expect. It contains the condensed versions of reset as well as the 960 grid. I opted not to use the text.css file that is included in the 960 grid download but wrote my own (this you can change to your own).

The next file site.css contains some regular standard css elements:

/* important */
html{background-color:#F9F9F9;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.3em;}
*{margin:0;padding:0;}
/* headers */
h1{font-family:Georgia, "Times New Roman", Times, serif;font-size:24px;font-weight:normal;}
h2{font-family:Georgia, "Times New Roman", Times, serif;font-size:22px;font-weight:normal;}
h3{font-family:Georgia, "Times New Roman", Times, serif;font-size:20px;font-weight:normal;}
h4{font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;font-weight:normal;}
h5{font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;}
h6{font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;}
h1,h2,h3,h4,h5,h6{margin:10px 0;padding:0;display:block;clear:both;}
/* Text and links */
p{font-family:Arial, Helvetica, sans-serif;line-height:1.5em;margin:0 0 10px 0;padding:0;}
blockquote{font-style:italic;display:block;margin:20px 0;padding:10px;background-color:#fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
a,a:link,a:visited{color:#21759B;}
a:hover{color:orange;}
ul{margin:0 0 0 10px;}
ul li{margin:0 0 0 10px;padding:0;}
/* clear pieces */
.clear5{height:5px;}
.clear10{height:10px;}
.clear15{height:15px;}
.clear20{height:20px;}
.clear25{height:25px;}
.clear50{height:50px;}
.clear100{height:100px;}
/* Text Classes */
.textRight{text-align:right;}
.textLeft{text-align:left;}
.textCenter{text-align:center;}

inc

The inc(ludes) folder for starters contains 3 files:

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEVELOPMENT TEMPLATE</title>
<link rel="stylesheet" media="all" type="text/css" href="/css/reset-960.css" />
<link rel="stylesheet" media="all" type="text/css" href="/css/site.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/site.js"></script>
</head>

analytics.php
This file was created to house your analytics code for your website. I find it annoying to have to copy and past something as simple as that on every page of your website.

footer.php

</body>
</html>

Like the idea? Check it out for yourself and download the zip file. It contains 2 folders. 1 for HTML and the other PHP

Download the template-foundation zip

Tags: html, jQuery, php

jQuery validate plugin plus PHP equals captcha

Posted on Oct 22, 2009 by Rich to Web Development

With all the captcha’s out there right now why would anyone reinvent the wheel and write another one. Well I did and here is why.

When I build forms, my go-to validation is 9 out of 10 times its jQuery plugin: Validation. Keeping with that and their built in functionality to basically = something to something. I used that to my advantage and use PHP to create a simple captcha.

How it works

Let’s start with what you will need. 1. A Form, 2. The PHP, 3. The jQuery. Cool we got that? let’s move on.

Lets begin with the simple PHP that builds the math

<?php
$randomNum = rand(0,9);
$randomNum2 = rand(0,9);
$randomNumTotal = $randomNum + $randomNum2;
?>

Here we are basically setting two different numbers (randomNum and randomNum2) and getting their total in (randomNumTotal). You can read up on the rand() php function, but basically what it’s doing here is giving me a random 1 digit number from 0-9.

Now we need to set up our jQuery pieces. so here is what you would need to include inside of your <head> tag.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
	$.validator.methods.equal = function(value, element, param) {
		return value == param;
	};
	$(document).ready(function(){
		$("#yourform").validate({
				rules: {
					lastName: "required",
					math: {
						equal: <?php echo $randomNumTotal; ?>	
					}
				},
				messages: {
					lastName: "*",
					math: "*"
				}
			});
	});
	</script>

Now with that javascript done, all we need to is create the form and style it up. Here is a really simple form with a person’s first name and last name and the captcha.

THE CSS

<style>
table td{height:30px;}
form label.error, label.error{color:red;padding:0 0 0 10px;}
input.error,select.error,textarea.error{border:1px solid red;}
.required {color:red; font-weight:bold;}
</style>

THE FORM

<form action="" enctype="multipart/form-data" method="post" id="yourform">
<table cellpadding="0" cellspacing="0" border="0" width="500">
	<tr>
    	<td width="150" valign="top">First Name</td>
    	<td valign="top"><input name="firstName" id="firstName" type="text" size="25" maxlength="255"></td>
    </tr>
    <tr>
	    <td width="150" valign="top">Last Name</td>
		<td valign="top"><input name="lastName" id="lastName" type="text" size="25" maxlength="255"> <span class="required">*</span></td>
    </tr>
    <tr>
        <td width="150" valign="top" height="30">Security <input type="text" name="captchaImage" size="6" value="<?php echo $randomNum ?> + <?php echo $randomNum2 ?>" disabled="disabled" /></td>
        <td valign="top" height="30"><input type="text" name="math" id="math" size="6" maxlength="6" /> Please enter the correct result.</td>
    </tr>
    <tr>
        <td width="150">&nbsp;</td>
        <td valign="top"><input name="submit" type="submit" value="submit information" /></td>
    </tr>
</table>
</form>

And thats pretty much it. I would pressume that this can be changed for a bunch of other uses. maybe creating an array of the alphabet. selecting 1 letter, then the letter that follows and having the answer be the one after that (ex: A,B — answer: C). Or selecting two letters that are one letter apart and having the user select which one is in the middle (ex: A,C — answer: B).

-> Check out the live version of jQuery validate plugin plus PHP equals captcha

Well Here is the whole code for you. Remember it needs to be a PHP file.

<?php
# Set both random numbers you want to add
$randomNum = rand(0,9);
$randomNum2 = rand(0,9);
# Get the total.
$randomNumTotal = $randomNum + $randomNum2;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using jQuery and PHP to create random addition problem as a captcha</title>
<style>
table td{height:30px;}
form label.error, label.error{color:red;padding:0 0 0 10px;}
input.error,select.error,textarea.error{border:1px solid red;}
.required {color:red; font-weight:bold;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
	$.validator.methods.equal = function(value, element, param) {
		return value == param;
	};
	$(document).ready(function(){
		$("#yourform").validate({
				rules: {
					lastName: "required",
					math: {
						equal: <?php echo $randomNumTotal; ?>	
					}
				},
				messages: {
					lastName: "*",
					math: "*"
				}
			});
	});
	</script>
</head>
<body>
<p>Example of using jQuery and PHP to create random addition problem as a captcha</p>
<br/>
<form action="" enctype="multipart/form-data" method="post" id="yourform">
<table cellpadding="0" cellspacing="0" border="0" width="500">
	<tr>
    	<td width="150" valign="top">First Name</td>
    	<td valign="top"><input name="firstName" id="firstName" type="text" size="25" maxlength="255"></td>
    </tr>
    <tr>
	    <td width="150" valign="top">Last Name</td>
		<td valign="top"><input name="lastName" id="lastName" type="text" size="25" maxlength="255"> <span class="required">*</span></td>
    </tr>
    <tr>
        <td width="150" valign="top" height="30">Security <input type="text" name="captchaImage" size="6" value="<?= $randomNum ?> + <?= $randomNum2 ?>" disabled="disabled" /></td>
        <td valign="top" height="30"><input type="text" name="math" id="math" size="6" maxlength="6" /> Please enter the correct result.</td>
    </tr>
    <tr>
        <td width="150">&nbsp;</td>
        <td valign="top"><input name="submit" type="submit" value="submit information" /></td>
    </tr>
</table>
</form>
</body>
</html>

Tags: jQuery examples, jQuery plugin, jQuery tutorial, jQuery Validation

Using jQuery to create a minimal sitemap section slider

Posted on Oct 21, 2009 by Rich to Web Development

Have you ever gone to a website and visited their sitemap page only to find an elongated page that you have to scroll forever to try to find what you are looking for? If you answer is “yes” then we are in the same boat. Well that got me to thinking. Why couldn’t we use the power of jQuery to basically organize the sitemap into sections and expand the section when you click on the link.

I have created this quick piece of code to accomplish just that.

Website Section Slider using jQuery

Well here is the fancy of it all:

First the guts. Here is the call to your jQuery file; of course we use the one google hosts and the actual jQuery Javascript code that makes this all possible. Note that this code should go inside the <head> tag.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#sitemap h3").each(function(){
                $("#sitemap div").css("display","none");
		$(this).addClass("resting");
		$(this).click(function(){
			var question = $(this).attr("class");
			var answer = $(this).next();
			if(question === "resting"){
				$(this).removeClass("resting");
				$(this).addClass("active");
				}
			else{
				$(this).removeClass("active");
				$(this).addClass("resting");
				}
			$(answer).slideToggle();			
		});
	});
});
</script>

We continue by getting some basic CSS to 1. hide the actual website pages from the user and 2. to make it pretty. This should also go inside your <head> tag.

<style>
#sitemap h3{cursor:pointer;font-family:Arial, Helvetica, sans-serif;font-size:20px;font-weight:normal;margin:0 0 5px 0;padding:0;}
#sitemap h3.resting{color:#cc0;}
#sitemap h3.active{color:red;}
#sitemap div{margin:0;padding:5px 10px;}
#sitemap div{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.3em;font-weight:normal;}
#sitemap div ul{margin:0 0 0 15px;padding:0;}
#sitemap div ul li a{display:block;color:#333;padding:3px 5px;margin:0;height:20px;line-height:20px;}
</style>

Now we can go ahead and add the actual sitemap pieces for the sitemap page. Granted this is html, but it wouldnt take too much work to convert it into php and get the info from mySql if your using some kind of content management system.

<!-- begin sitemap -->
<div id="sitemap">
	<!-- begin section -->
	<h3>Website Section 1</h3>
    <!-- begin pages -->
	<div>
    	<ul>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
            <li><a href="#">Page 5</a></li>
        </ul>
    </div>
	<!-- begin section -->
	<h3>Website Section 2</h3>
    <!-- begin pages -->
	<div>
    	<ul>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
            <li><a href="#">Page 5</a></li>
        </ul>
    </div>

Pretty simple right? of course. Well here is the live example of the jQuery Quick Sitemap Section Slider for you too see what it looks like.

Click the link if you would like to DOWNLOAD the jQuery Quick Sitemap Section Slider

Note: If javascript is disabled, the sitemap will show everything on the page; which goes back to the sitemaps everyone is used to.

Tags: jQuery, jQuery examples, jQuery tutorial

Wordpress hacks you can actually use

Posted on Sep 25, 2009 by Rich to Web Development

Lately I have been on this wordpress theme kick. I have created a couple of new themes currently in the process of being added to the wordpress themes section. And since I never really worked with wordpress too much, I spent some time looking at “how to’s” and other peoples theme development. Some I found great, some I didn’t. All in All the power of wordpress is amazing and with that being said, I decided to put a little list together. A small roundup of some hacks and enhancements that I found useful and hopefully you do too.

Adding Author Avatar to posts

the ‘55′ is basically the width. So you can change that to what you want according to your design.

1	<?php echo get_avatar( get_the_author_email(), '55' ); ?>

Adding User Comment Avatars

the ‘40′ is basically the width. So you can change that to what you want according to your design.

1	<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '40'); } ?>

Highlight Admin Comments

Replace this:

1	<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"></li>

For this:

2	<li class="<?php if ($comment->user_id == 1) $oddcomment = "authorCommentBox"; echo $oddcomment; ?>"></li>

CSS:

2	.authorCommentBox{ background-color: #ecf584 !important; }

Simple Social Network Links

Had some issues with the title of the post including

%20

and such, so wrote something quick to handle that Plus creating a bit.ly URL on the Fly for the post:

<?PHP
/* make a URL small */
function make_bitly_url($url,$login,$appkey,$format = 'xml',$version = '2.0.1')
{
	//create the URL
	$bitly = 'http://api.bit.ly/shorten?version='.$version.'&longUrl='.urlencode($url).'&login='.$login.'&apiKey='.$appkey.'&format='.$format;
 
	//get the url
	//could also use cURL here
	$response = file_get_contents($bitly);
 
	//parse depending on desired format
	if(strtolower($format) == 'json')
	{
		$json = @json_decode($response,true);
		return $json['results'][$url]['shortUrl'];
	}
	else //xml
	{
		$xml = simplexml_load_string($response);
		return 'http://bit.ly/'.$xml->results->nodeKeyVal->hash;
	}
}
/* usage */
//$short = make_bitly_url('http://yoursite.com','USERNAME','API-KEY','json');
//echo 'The short URL is:  '.$short; 
// returns:  http://bit.ly/11Owun
?>
<?php
$permaURL = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 
$post_url = make_bitly_url($permaURL,''USERNAME','API-KEY','json');
?>

Add This:

<a href="http://twitter.com/home?status=@that_agency <?php the_title();?> <?php echo $post_url; ?>">Twitter</a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>">Facebook</a>
<a href="http://delicious.com/save?url=<?php the_permalink() ?>&title=<?= urlencode(the_title()); ?>">de.licio.us</a>
<a href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>&title=<?= urlencode(the_title()); ?>" rel="external">Digg</a>
<a href="http://stumbleupon.com/submit?url=<?php the_permalink() ?>" rel="external" title="StumbleUpon">StumbleUpon</a>
<a href="http://technorati.com/faves?add=<?php the_permalink() ?>" rel="external" title="Technorati">Technorati</a>
<a href="http://scriptandstyle.com/submit?url=<?php the_permalink() ?>&title=<?= urlencode(the_title()); ?>">Script&amp;Style</a>

Using Normal Quotes Instead of Curly Quotes

Add this to your functions.php (If you don’t have one, then create one.)

1	<?php remove_filter('the_content', 'wptexturize'); ?>

Display Feedburner Subscriber Count

via (wprecipes)

<?php
	$fburl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=feed-id";
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_URL, $fburl);
	$stored = curl_exec($ch);
	curl_close($ch);
	$grid = new SimpleXMLElement($stored);
	$rsscount = $grid->feed->entry['circulation'];
	echo $rsscount;
?>

As you can see, wordpress offers a wide variety of integration to customize your own theme. This list is just the tip of the iceberg. There are so many other things, that wordpress is able to do.

Do you know of any more? Let me know.

Tags: wordpress, Wordpress Hacks

jQuery THAT rocks – October 2009

Posted on Sep 22, 2009 by Rich to Web Development

If you know me, you know that I am a huge fan of jQuery. I love the ease of use and the simple learning curve. One of the great things I love about jQuery is the ability to implement plugins. And with a huge community behind it, there are many plugins that you can use to create more interactive websites.

jGrow

jGrow is a jQuery plug-in that makes the textarea adjust its size according to the length of the text.
It works smoothly with jQuery 1.2.x and 1.3.x. It was tested on IE6+, Firefox 2+, Opera 9.x+ (including 10.00 beta), Safari 3.x+ (including 4 Public Beta), Google Chrome 2.x (including developer release) and no bug was spotted yet.

__________________________________________________________________

jQuery Link Nudge Plugin

It started with a MooTools version and shortly thereafter a jQuery version. Just recently Drew Douglass premiered a jQuery plugin that aimed at producing the same type of effect. I’ve taken some time to put together my own version of the jQuery nudging plugin.

__________________________________________________________________

jQuery Tools

jQuery Tools is a collection of the most important user-interface components for today’s websites. This single JavaScript file weighs only 5.59 Kb

__________________________________________________________________

FriendFeed JSONP Widget

A simple JSONP based widget to get a user timeline. Support for optional overrides.

__________________________________________________________________

Internal Links with Favicon using jQuery

jQuery Plugin that would allow all the internal links in your website to actually have your own favicon implemented on the left side of the link.

__________________________________________________________________

Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

__________________________________________________________________

myPrintArea

PrintArea sends a specified dom element to the printer, maintaining the original css styles applied to the element being printed. 2 different modes of printing, iframe and popup, now give greater flexibility! Along with several popup options.

__________________________________________________________________

Pan View

Creates a pan view, hold down your mouse button and start moving.

__________________________________________________________________

Simple Modal

SimpleModal is a lightweight jQuery plugin that provides a simple interface for creating a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Know any more? let us know.

Tags: jQuery examples, jQuery plugin, jQuery tutorial

Click here to view to working demo or go ahead and download the zip file.

The Breakdown

FULL HTML

Click here to view to working demo or go ahead and download the zip file.

Javascript

CSS

HTML

Javascript (bg-rotate-slide-up-js.js)

What Does it do?

What Do I need?

css

inc

How it works

-> Check out the live version of jQuery validate plugin plus PHP equals captcha

Well here is the fancy of it all:

Adding Author Avatar to posts

Adding User Comment Avatars

Highlight Admin Comments

Simple Social Network Links

Using Normal Quotes Instead of Curly Quotes

Display Feedburner Subscriber Count

jGrow

jQuery Link Nudge Plugin

jQuery Tools

FriendFeed JSONP Widget

Internal Links with Favicon using jQuery

Uploadify

myPrintArea

Pan View

Simple Modal

Categories

Newsletter Signup

THAT Client List

Free Wordpress Themes

Find Us On...