We believe the SAF is an important resource for Spokane creatives. The SAF helps to educate, inspire, and motivate our creative community. This in turns raises the image of Spokane and all regional companies that rely on the SAF members for their marketing and advertising needs.

This year we had the privilege of hosting the judging for the Yakima Advertising Federation at our office on Madison Street here in Spokane. It was a great event. There were a number of good entries from both students and professionals.

The judges for the event where:


Kevin Armstrong – Addison/Kimberly

Jesse Pierpoint – Pierpoint Design & Branding

Rick Hosmer – Klündt | Hosmer
Ryan Stemkoski – Zipline Interactive

Judging took several grueling hours but in the end kings were crowned. We won’t share the winners now but hopefully once they are announced we can share some of this great work with you.

No related posts.

Original
Below is the original script that had the problem with larger files, it works great with local files and also with short remote files. Check it out here:

<?PHP
	$file = fopen("http://www.ietf.org/rfc/rfc2396.txt", "rb");
	$output = fread($file, 8192);
	fclose($file);
	echo($output);
?>

Improved
If you have a longer file then you can solve the packet issue by concatenating the file together in several groupings. An example of the revised and working script has been included below:

<?PHP
	$file = fopen("http://www.ietf.org/rfc/rfc2396.txt", "rb");
	$output = '';
	while (!feof($file)) {
	 	$output .= fread($file, 8192);
	}
	fclose($file);
	echo($output);
?>

Note: I have no idea what the text file used in this example is for. I just grabbed it from a Google search because it was large enough to demonstrate the problem I am illustrating.

No related posts.

Years ago I had a software program that would copy down an entire HTML site fairly accurately. Unfortunately, as the web transitioned to dynamic websites this software package could not keep up with the advances.

Today, I discovered a website backup utility that has done a fantastic job in my tests. I backed up several of our complicated dynamic websites and it has done a great job making them work in an HTML version. If you run into a situation where your website, or your customers website is being held hostage by a web design company this could be the perfect solution for you.

The software is called HTTrack Website Copier and it is a free GPL licensed software package.

Click here to download HTTrack

If you have any comments or questions please leave a comment below.

No related posts.

a:hover, a:focus, a:active {
    outline: none;
    -moz-outline-style: none;
}

You may need to modify this accordingly to your application. The command outline: none; removes the border in current versions of Firefox and the hack -moz-outline-style: none; applies to older browsers.

No related posts.

Unfortunately, much to my dismay jQuery does not have a built in function to strip HTML from a string like the handy strip_tags() PHP offers. I did some searching online and was able to track down a couple functions written by other developers that were able to do this task. I have taken my two favorites and combined them into the solution provided below.

	/***************************************************
	STRIP HTML TAGS
	****************************************************/
	function strip_tags(html){
 
		//PROCESS STRING
		if(arguments.length < 3) {
			html=html.replace(/<\/?(?!\!)[^>]*>/gi, '');
		} else {
			var allowed = arguments[1];
			var specified = eval("["+arguments[2]+"]");
			if(allowed){
				var regex='</?(?!(' + specified.join('|') + '))\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			} else{
				var regex='</?(' + specified.join('|') + ')\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			}
		}
 
		//CHANGE NAME TO CLEAN JUST BECAUSE 
		var clean_string = html;
 
		//RETURN THE CLEAN STRING
		return clean_string;

If you are using this function you probably know your way around JavaScript well enough you don’t need a complete example but if you do here is a quick and dirty one:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
 
	/***************************************************
	STRIP HTML TAGS
	****************************************************/
	function strip_tags(html){
 
		//PROCESS STRING
		if(arguments.length < 3) {
			html=html.replace(/<\/?(?!\!)[^>]*>/gi, '');
		} else {
			var allowed = arguments[1];
			var specified = eval("["+arguments[2]+"]");
			if(allowed){
				var regex='</?(?!(' + specified.join('|') + '))\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			} else{
				var regex='</?(' + specified.join('|') + ')\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			}
		}
 
		//CHANGE NAME TO CLEAN JUST BECAUSE 
		var clean_string = html;
 
		//RETURN THE CLEAN STRING
		return clean_string;
	}
 
</script>
</head>
<script type="text/javascript"> 
	var sample_html = '<h1><a href="http://www.gozipline.com">Zipline Interactive</a></h1>';
	document.write('Without Stripping Tags : ' + sample_html);
	var demo = strip_tags(sample_html);
	document.write('With Stripping Tags: ' + demo);
</script>
<body>
</body>
</html>

No related posts.

To make life easier on both you and I have zipped up a MySQL dump of the 50 states and also the District of Columbia which isn’t technically a state. It is available free here for download without any viruses, spam, or special offers.

DOWNLOAD HERE

Note: The District of Columbia is the last record in the database. If you don’t want to include it in your application you can easily find and delete it.

No related posts.

About Big Green Ape – Cartoon Strip
So far, the cartoon is really still in the development phase but Shawn has a couple of the characters created and several more in various sketch stages. The first installment of Big Green APE can be found at: http://biggreenape.com/?p=146. Shawn has been taking input from everyone in our office, our vendors (Ed), our clients, and as of this week even his mom. The sexy character to your right is me! Currently I am the only human in this cartoon strip, everyone else is some variety of animal.

So far the list of characters includes:
Shawn as the Big Green Ape – View
Thomas as Skat Kat – View
Me as Myself complete with polo and iPhone – View
Deanna as an Unnamed Kangaroo – View Sketch

Characters Still to come:
Kate possibly as a Flamingo
Karen as ?
Jessica as ?
Sheldon as a Kiwi or ?
Megan as ?
Random Cliet as ?
Random Sales as ?

If you have any good ideas for a strip or for characters leave a comment and I will pass it on. Hopefully as soon as the strip gets up and running I will be featuring each installment here so that my subscribers can enjoy them. If you want to keep up with the development of the cartoon strip you can find more information on it at Shawn’s Blog http://www.biggreenape.com.

No related posts.

I have found many of the existing accordion menu systems to be bloated and difficult to understand. I knew there had to be an easier way to create an accordion menu. Instead of using a list like most alternate systems, this system uses a grouping of DIV elements with specific names.

ORIGINAL VERSION: DEMO | DOWNLOAD

UPDATED VERSION: DEMO | DOWNLOAD *

* Note: The updated version was released on 3/25/10 and it is slightly different than the example detailed in this post, however, installation is virtually the same. The updated version addresses a number of frequent feature requests from fans of the script. These include use of jQuery 1.4.2, adding a mouseover effect, adding a selected effect, and the ability to close open menus by clicking their header.

Note: Here is an example of how to pin open the first item and an example of how to select any item to pin open on load.

How to implement this jQuery accordion style menu:

Step 1 – Include jQuery:

For a jQuery beginner the first thing you need to do is to include the jQuery library. Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>

Step 2: – Create the JavaScript

Next you need to create a blank JavaScript file. For the example, this file is called javascript.js. This file will contain the jQuery code required for the menu. Once you save the file include it in the head of your document with the proper path just as we did the jQuery library in Step 1. An example of the JavaScript code to include in this document is shown below:

$(document).ready(function() {
 
	//ACCORDION BUTTON ACTION	
	$('div.accordionButton').click(function() {
		$('div.accordionContent').slideUp('normal');	
		$(this).next().slideDown('normal');
	});
 
	//HIDE THE DIVS ON PAGE LOAD	
	$("div.accordionContent").hide();
 
});

Step 3 – Create the CSS:

Now we need to create a CSS document with our two selectors accordionButton and accordionContent and then include that in the head of the document. Examples of these selectors are included below. The color, contents, and visual formatting can all be manipulated. It is important these elements retain their float: left or display: inline-block property so that they will display inline.

#wrapper {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}
 
.accordionButton {	
	width: 800px;
	float: left;
	background: #003366;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	}
 
.accordionContent {	
	width: 800px;
	float: left;
	background: #95B1CE;
	display: none;
	}

Step 4 – Create the HTML:

Now we need to create the HTML we’re going to manipulate. For this example we will keep the page very, very simple. In a more complicated HTML document you need to make sure the two classes used for the accordion DIV items are not used elsewhere. jQuery will be looking for the class of the element so if it is present elsewhere in the HTML document it will cause some unexpected problems. The full HTML document also displaying the includes is shown below:

<!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=iso-8859-1" />
<title>jQuery Accordion Style DIV Menu</title>
<link href="style/format.css" rel="stylesheet" type="text/css" />
<link href="style/text.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="includes/javascript.js"> </script>
</head>
 
<body>
	<div id="wrapper">
		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
		<div class="accordionButton">Button 2 Content</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">Button 3 Content</div>
		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">Button 4 Content</div>
		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
	</div>
</body>
</html>

Notice that we have alternating rows with the styles accrodionButton and accordionContent. Clicking accordionButton will trigger the drop of the next instance of accordionContent. It is very important these elements alternate properly with nothing inbetween for the system to function properly. Each element can contain HTML, nested divs, or other styling elements.

Step 5 – Check out the Result!:

Now we have all of our code we need. View the system in the browser and it should work great. Clicking on each button will cause the content below it to drop. The content will retract if another button is clicked. (Note: If you needed to keep the content elements open after a click on a seperate button instead of having them retract you can do this easily by removing this line from the javascript.js include:

$('div.accordionContent').slideUp('normal');

View a complete example or download a complete example:

Click here to view the demo of the accordion style jQuery menu

Click here to download the demo files for the jQuery accordion style menu

No related posts.

Example 1: Change the Style of a DIV element on Mouseover

Lists are a great tool for navigations but many times they don’t work or are too difficult to style. Lets say you wanted to make a vertical navigation out of DIV elements but you wanted them to change styles on rollover. Your HTML may look something like:

<div id="leftColumn">
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 1</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 2</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 3</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 4</a></div>
</div>

Very simple and clean. Notice there is no inline JavaScript for the rollover effect. The beauty of jQuery is it can handle events for elements without nasty inline JavaScript. Here is the jQuery JavaScript to add rollover effects to this navigation:

    $("div.sidenavOff").mouseover(function(){
    	$(this).removeClass().addClass("sidenavOver");
    }).mouseout(function(){
    	$(this).removeClass().addClass("sidenavOff");		
    });

Easy aye? Analyzing the code you can see simple mouseover and mouse out functions where we’re removing the current class and adding the proper one for the time in the event. This will effect any DIV with the class of .sidenavOff on mouseover.

Example 2: Including HTML content in a Page using jQuery and Ajax

Suppose we had a div on our page with the ID of #lookup. When clicked #lookup1 we wanted the content from a file called search.htm to load in another DIV with the id #lookupContent.

With HTML you could link to a new HTML file that had this adjustment made. With standard JavaScript you could make a very lengthy AJAX request to load the page or with jQuery you can do it with ease. For example:

	$('#lookup').click(function() {
		$('#lookupContent').load('search.htm');
	});

This code will load the file search.htm and replace the contents of #lookupContent with whatever is in the search.htm file. Cake.

I will give a few more, simple jQuery examples in the near future. I am trying to convince as many developers as I can to take a look at the various JavaScript frameworks. There is a reason they’re such a hot topic these days.

No related posts.

Luckily there is an easy workaround to this problem. Much like with their CURL functionality GoDaddy has a relay server that can be used to send email. The address for the GoDaddy dedicated server email relay is:

k2smtpout.secureserver.net

I did read in the documentation that the relay server limits you to 1000 emails per day so if you need to send more than that I would suggest contacting GoDaddy support. Below are some instructions on how to setup the relay on both Linux and Windows servers. This text was pulled directly from the GoDaddy website.

In Linux, Plesk uses qmail as the default mail server. The configuration file /var/qmail/control/smtproutes needs to have the line :k2smtpout.secureserver.net in it so that it will work properly (the colon is necessary).

In Windows, if Plesk is installed, MailEnable uses a “smarthost” of k2smtpout.secureserver.net.

This solution seemed to work fine. Also, as a note, from the documentation I found it would appear that most GoDaddy dedicated servers come pre-configured to use the relay. However, if you’re reading this yours probably didn’t, or some tool has screwed up your settings and now you have to fix them. Good Luck.

No related posts.