Custom Dropdown

The functionality of our drop-down will mimic that of a regular dropdown box with one exception. Since we can not style the scrollbar, our drop-down will never display one. Instead, it will just keep expanding as you add new links.

HTML
To start off with, our select needs a few different elements to work properly. First off, we need a container that will hold our select. We will also require a list of elements that we want to appear when you click the drop-down. Finally, we need a default element to hold the current selected item and an arrow to signify that we can click on it to display more options. I’ve assigned the classes and Id’s to the elements as necessary. clair-select-active is the default item that will be displayed as well as what is displayed when an element is clicked on.

<div class="clair-select-container">
  <div class="clair-select">
    <div id="clair-select-active">Where My.Feet Have Been</div>
    <ul class="clair-select-links">
      <li><a href="#">Nookish</a></li>
      <li><a href="#">Orange Pine Co</a></li>
      <li><a href="#">Where My.Feet Have Been</a></li>
      <li><a href="#">Your Website</a></li>
    </ul>
  </div>
</div>

CSS
Before we get to the clair specific styles, these are the default ones applied to the entire page:

body{
  font-family: Arial, sans-serif; 
  font-weight: normal;
  font-size: 14pt; 
  background-image: url('bg.png'); 
  margin: 0px;
}
a {
  color: #CCC;
  font-weight: bold;
  text-decoration: none;
}

The first style we get is the clair-select and the clair-select-container These style our entire select container.

.clair-select-container{
  position: relative;
  padding: 10px 0px;
  margin: 0px 0px 40px;
}
.clair-select {
  background-color: #000; 
  color: #CCC;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -o-border-radius: 12px;
  -khtml-border-radius: 12px;
  border-radius: 12px;
  padding: 10px 12px 5px;
  font-size: 14px;
  display: inline-block;
  border: solid #555; 
  border-width: 1px 0px 0px 1px;
  width: 230px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0.7;
  filter: alpha(opacity = 70);
  position: absolute;
  z-index: 2;
}

The purpose of clair-select-container is to make sure when we expand our select dropdown it doesn’t push elements out of the way. Instead of floats nicely above them, and our slight opacity setting will display a faint outline of what it’s coverting.

There is a lot of vendor specific styling going on in clair-select, but the only one that I think warrants explanation is box-sizing and filter.

• box-sizing: is a CSS3 spec that allows us to change the way that the browser interprets the “box-model” I’ll have to do another post to fully explain the box-model, but essentially it is the difference between including padding and border sizes within the “width” element, or adding it on afterwards. This forces Firefox to render the box-model the way Internet Explorer would ¹.
• filter: is a Microsoft proprietary spec that allows us to use a number of IE only effects. The particular effect I am utilizing is alpha-blending which allows us to change the opacity of the element. I’ve turned the opacity done just a little so that things are still readable, while allowing us to see the background. This has the added benefit of a neat visual effect whereby it looks like our element is slightly inset.

The next style we’re going to add is that of the active element. All we do here is add the arrow as a background image and position it to appear on the right side of the element.

#clair-select-active{
  background-image: url('down.png'); 
  background-repeat: no-repeat;
  background-position: right;
}

Finally, we’re going to style all the links. Nothing too fancy here. We’re just getting rid of bullets, spacing everything out a little and treating the anchor tags as block elements within our li’s.

.clair-select-links {
  margin: 0px; 
  padding: 5px 0px 0px;
  display: none;
}
.clair-select-links li{
  list-style: none;
  padding: 1px;
  margin: 0px;
  overflow: hidden;
}
.clair-select-links li a{
  font-weight: normal; 
  display: block;
  padding: 5px;
  margin: 0px;
}
.clair-select-links li a:hover{
  background-color: #282828;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  color: #DDD;
}

JavaScript
To add functionality to our drop-down we need a bit of JavaScript. I’m utilizing jQuery, but your own JavaScript library should have similar functions. We need to add two kinds of functionality.

1. We need to switch between minimized and maximized states whenever a user clicks on the clair-select-active element.
2. We need to switch to minimized and populate clair-select-active with the text from the menu item

$(document).ready(function(e) {
  // This is just for cross-browser prettiness
  $('#clair-select-active').css('cursor','pointer');
 
  // This will toggle everything as necessary
  $('#clair-select-active').click(function(e) {
    if($('.clair-select-links').css('display') == 'block') {
      $('.clair-select-links').slideUp(); 
    }
    else {
      $('.clair-select-links').slideDown();
    }
  });
 
  // This will populate clair-select-active with whatever you click on
  $('.clair-select-links a').click(function(e) {
    e.preventDefault(); 
    $('#clair-select-active').html($(this).html()); 
    $('.clair-select-links').slideUp(); 
  });
});

And that’s it, you’ve built a custom select drop-down. With a little JavaScript trickery, we can even go so far as to include it within forms. We’d just need a hidden form element and then when we populate clair-select-active we would also populate the value attribute of our form element.

This solution works in the following scenarios:

• IE 7+
• Firefox 3.5+
• Chrome 3+
• Opera 10+

You can download all the files used in this tutorial here: Custom Select Files

At some point in your web programming or web design career you will inevitably encounter the dreaded file upload “utility”. This piece of crap, is only present to allow users to select a file on their machine and eventually transfer it to your servers. Of course, this is a vital piece now, but perhaps at the time it was something that was easily overlooked. After all, at a time when your ISP speeds were approaching the 14.4kbps mark, uploading files was really something only the computer geeks did.

Now however, with profile pictures, online resumes, cloud storage and so much more, the file upload feature is front and center. Some places have gone so far as to eliminate the default HTML object and instead go with a Flash equivalent. This doesn’t really fix the issue, it’s like me saying “oh your computer doesn’t work? Here, use my iPad” ¹ It’s just a bypass. We need to fix this now! It’s already too late, we’re just playing catch up.

Understanding the Process
File uploading is one of those features that, if you’re unlucky, you’ll have to design a layout around. That’s because, for some reason, every browser has decided that the File upload object is completely immune to CSS. No amount of styling can ever achieve what you want. It will always look like ass.

File upload in Firefox and IE

There is no easy way to style it, there is no way to replace it (unless you use flash, but that’s a whole different issue) and the only way to get around it is to hide it or integrate it directly into your design. There is absolutely no way to pretty it up. You can’t adjust the size of the button or the size of the input box. You are essentially stuck, with what you see. No way around it. Or is there?

Short of changing your entire design to work with default form elements (euych!) the only way to fix the file upload feature is to hide it completely. See, because we can still apply some style features to an encapsulating element ². So we could technically just hide the entire form field, and absolutely position it over our custom designed field. If we do it all right (we WILL have to use either a custom IE stylesheet or a bunch of hacks) we can make it look like our pretty file upload field is actually doing the work!

The Code
The code for this is primarily CSS with some JavaScript sprinkled in to make sure that everything is positioned where it should be. I am utilizing the jQuery library for a lot of this simply because I use it in a lot of my projects. If you use any other libraries, they should all have equivalent methods and if they don’t, you should ditch them and switch to something else. If you are trying to follow along in straight JavaScript good luck. One of the primary reasons I work with a JavaScript library is because of cross browser inconsistencies. With a library, I can be sure that someone has gone through the painstaking task of setting up different kinds of math and implementation for the different browsers.

<html>
<head>
  <title>File Upload</title>
  <style type="text/css">
 
  </style>
</head>
<body>
<div id="fake-file">
  <input type="text" id="fake-file-title" name="fake_file_title" value="">
  <button>Browse</button>
</div>
<div id="file-constraint">
  <input type="file" id="real-file">
</div>
 
</body>
</html>

The CSS below is what we will be using to style our new input fields.

#fake-file input {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 2px;
  }
  #fake-file button {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 1px 8px;
    background-color: #FFF;
  }

Now it’s as simple as adding some positioning values to our file-constraint field. We will also alter the z-index and position it higher vertically than our fake file upload. Then we can simply utilize some JavaScript to make things work like it should.

#file-constraint {
position: absolute; 
top: 0px; 
left: 0px;
z-index: 2;
display: none;
}

Bam instant hidden. Based on the position of your actual fake file field the top/left attributes will obviously change. The JavaScript is just as simple. I am utilizing jQuery to hook in to the onChange event for the real-file field, but it’s not necessary. You can do the same without a library. I just prefer jQuery because it means I can target all browsers the exact same way.

$('#real-file').change(function(e) {
var str = $(this).val(); 
str = str.split('\\')[str.length-1]; 
$('#fake-file-title').val(str);
});

Basically we get the value of the file upload field. In Firefox this is just the name of the file, while in IE it contains the complete path to the file. I prefer stripping out the path, but that is up to you. Basically the value from the real file field is just assigned to the fake file field.

Working with file uploads are a hassle and this really only covers a portion of the client-side. There are still many things to take into account such as temporary file locations, file permissions, fake-ajax / standard uploading etc. This tutorial isn’t meant to be a complete compendium of all things file uploading, but merely to point out some annoying UI inconsistencies.

Array.prototype.indexOf = function(val) {
	for(i = 0; i < this.length; i++) {
		if(this[i] == val) {
			return i; 
		}
	}
	return -1;
};
 
Array.prototype.has = function(val) {
	return this.indexOf(val) > 0 ? true:false;
};
 
Array.prototype.remove = function(val) {
	var x = this.indexOf(val), y = 0;
	for(i = 0; i < this.length; i++) {
		if(i != x) {
			this[y]= this[i];
			y++;
		}
	}
	this.pop();
};

indexOf()
Often times you have a string and you need to figure out where in the array it appears. Since JavaScript doesn’t technically support associative arrays (array object conversion does occur implicitly) you can either loop through the array every time, or just extend array!

Example for indexOf()
var myArray = ["an","array","with","a","bunch","of","words"]; 
document.Write(myArray.indexOf("a"));   // returns 3
document.Write(myArray.indexOf("491"));  // returns -1

has()
Sometimes you just need to know if a value is present within an array. has() takes care of that returning a simple true:false boolean. Rather than re-inventing the wheel, it works in conjunction with indexOf()

Example for has()
var myArray = ["an","array","with","a","bunch","of","words"]; 
document.Write(myArray.has("with")); // returns true
document.Write(myArray.has("feet")); // returns false

remove()
Finally, sometimes removing a single element from an array is necessary.

Example for remove()
var myArray = ["an","array","with","a","bunch","of","words"]; 
myArray.remove("array"); // myArray now contains ["an","with","a","bunch","of","words"]

Hopefully the functions are of help! If there are a lot of people confused over Prototypal Inheritance, maybe that would be an interesting topic.

while($r[] = mysql_fetch_array($resource)){}

you would then pass $r as the source to the DataGrid. You have the ability to set some options (like specifying specific style sheets, JS libraries for AJAX editing or defining and renaming visible columns) and then a single build(); command will output the table. Of course, you can also build(true); to return the table incase you’re using some sort of theme system.

$data = array(
  array('id'=>0,'f_name'=>'Angelo','l_name'=>'Rodrigues'), 
  array('id'=>1,'f_name'=>'Darth','l_name'=>'Vader'),
  array('id'=>2,'f_name'=>'Luke','l_name'=>'Skywalker'),
  array('id'=>3,'f_name'=>'Han','l_name'=>'Solo'),
);
 
$DataGrid = new DataGrid(); 
$DataGrid->configure(
  array(
    'primary_key' => 'id', 
    'sortable' => true, 
    'striped' => true,
    'even_row' => null, 
    'odd_row' => 'striped'
    )
);
 
// This not only defines display fields, but the order as well 
$fields = array( 
  'f_name' => 'First Name',
  'l_name' => 'Last Name',
);
$DataGrid->setDisplayFields($fields);
$headers = $DataGrid->Headers();
echo $headers['css']; 
echo $headers['js']['object'];
echo $headers['js']['function'];
 
 
$DataGrid->source($data); 
$DataGrid->build();

The code can be further simplified by using a new class called ControlObjectManager (or COM for short). COM can be used to instantiate multiple Controls at once and even assign shortcuts to commonly used Controls. For example, if you need DataGrids a lot, you can initiate them via a simple call like $COM->init(array('dg')) and as long as you set up that dg means DataGrid in the configuration for COM, you’re good to go.

I’ll post up some more on the COM when it’s done, but for now, here’s a link to the latest iteration of DataGrid v2.

View on Pastebin – Just note that this is the debug version of the script, so there are tons of comments and explanations.

The original DataGrid actually tied in to MySql directly and required the MySqlAdapter control to even function. This latest iteration removes all ties to any database instead focusing on a simple multi-dimensional array of data. As well it drops the code-base down quite a bit and condenses a lot of functionality. For example: originally you would have had to set the display columns and then order them, but by compressing them into a single function it not only makes MORE sense, but is easier to read.

Essentially you’ll create a javascript array containing allowed values. Whenever a user types in some characters, we can use some regex coupled with a quick iteration to see if whatever the user entered is valid. If it is, we can easily return the matched values.

The function below is written in straight JavaScript. I monitor my keypress events via jQuery, but any way you want to do it is fine. Just make sure you call arrayFind() with the string you want to find and the array you want to search in.

function arrayFind(needle,haystack) {
var matchList = [];
var regex = new RegExp(needle,'gi');
for(i in haystack) {
	if(haystack[i].match(regex)) {
		matchList[matchList.length] = haystack[i];
	}
}
return matchList;
}

If you didn’t need to use a variable for the regex you could eliminate that line and just use /searchterm/gi for a global case-insensitive search of the array. Since we are however, we need to make use of the RegExp object.

In web development, every page will have it’s own Model, View and Controller. This is to ensure that only the information you are requesting is loaded. A lot of those new to the MVC approach will attempt to create a master controller which will then delegate this information to each Model as requested. In MVC, this approach doesn’t quite work. By creating separate entities for each requested page you will find that not only is it easier to maintain and update, but that MVC isn’t that hard to understand at all.

The Big Picture
The easiest way to understand MVC is to step back and look at the whole picture in terms of real-life. In this example, our Controller is going to be the Librarian, the Model is going to be the Library Catalogue and the View is going to be a Book. A user will come up to the Librarian and say “Hey, do you have Book XYZ?” The Librarian of course has no idea. It’s not their job to know where each Book is, but simply to know where to find the information that you are requesting. Regardless of what you are requesting the Librarian will look through a Library Catalogue, but they may look in different kinds of Catalogues. For example, if you say “Hey, do you have the Horror Book XYZ?” they can ignore every other category except Horror. Likewise if you say “Hey, do you have the Romance Book XYZ?” they can ignore every other category except Romance.

The Pieces of the Puzzle – The Controller
The Controller the is the primary building block of an MVC system. Everything you build is managed by the Controller (it Controls see? Programmers love these little word games). The Controller figures out what the user is trying to do and accordingly it goes through the appropriate Model and returns those results to the appropriate View. You can think of the Controller as a messenger. Basically when the user visits a page they are saying “I would like to see the [Gallery] page”. The Gallery Controller will see this and go right over to the GalleryModel and say “The user has requested this information”. It then waits for GalleryModel to respond, and then it takes those results and runs over to GalleryView and goes “Pretty this up”. It then shows you the prettied-up version.

The Model
The Model is also known as your Data Manipulation layer. This should contain functions that interface with the database. Insertion, Updating and Deletion should all occur here, with the results of each passed back to the caller. This centralizes all your DB calls to a single file for a single controller. In this way you know that modifying your “Gallery” table means only modifying your GalleryModel and GalleryView. It doesn’t seem like a big issue to inter-twine your database manipulation and controller at this stage simply because it isn’t. Of course you can integrate your Model directly with the Controller, but by segmenting these you can ensure a much easier re-use of code. Think about it this way – a gallery model can be copied and modified a little to turn it into a blog model. Since the Model doesn’t care about what to DO with the fields, you just need to update what fields it SHOULD be dealing with.

The View
The View is the easiest piece to explain. It simply acts as a display mechanism. It accepts some values from the Controller, mixes it with HTML and spits the result back to the controller. Think of it is a node-based theme engine. For example, you could have a function in your GalleryView that just accepted the URL of a thumbnail and added some HTML which, when styled, made it resemble a Polariod. At a later point in time, if you want to change this, modifying this single function will ensure that everything is changed uniformly.

The Big Picture – Now with the right words
So now we can revisit our Librarian and ask for a new book. We ask the LibraryController for “Horror book XYZ”. The LibraryController invokes the LibraryModel and executes the findBook() function passing it the genre (horror) and book name (XYZ). The LibraryModel executes a quick Database Query to figure out the results. Just so happens there are 5 books in that genre that contain XYZ (XYZ, WXYZ, AXYZ, XYZZ, XXYZ). It passes the result set BACK to LibraryController. LibraryControlled takes the result set and invokes LibraryView, calling the formatBookList() function using the result set as the argument. formatBookList() adds some HTML mockup to each entry and makes everything look good and then passes the HTML back to LibraryController. LibraryController shows you the result.

Variations
Some descriptions of MVC will modify it so that the Controller ignores the view and instead the Model is what passes the data to the View. Either way still conforms with MVC standards, which really just involve separting everything.

Advanced Concepts

Routers
When dealing with server-side languages on the web we have to remember that things don’t work the same as in a desktop environment. Event-driven programming may work fine for C# and Java, but doesn’t work the same way for PHP. In PHP, our equivalent fo Event-driven programming would be URL-based programming. An “event” as far as PHP is concerned, is the user trying to visit a page. This page should trigger some kind of action. In most MVC frameworks (all I would think), you get something called a “Router”. This Router class is essentially a way of registering URLS to certain Controllers. For example visiting www.example.com/gallery/view/48 would cause the Router (or page that invokes the Router) to invoke the GalleryController and make a call to the view() function passing it 48 as an argument. In this way they abstract away explicitly invoking galleryies and can have a single index.php page which invokes the Router and makes the calls as necessary.

Multiple Inheritance
While PHP doesn’t allow for Multiple inheritance (ie GalleryController extends c1, c2, c3) it does allow for cascading inheritance (GalleryController extends c3; c3 extends c2; c2 extends c1; and now GalleryController can do everything c1, c2 and c3 can). Because of this we can actually speed up our Model/Controller creation by extending a singple base Model or Controller class. These classes would ideally have common functions that all Models or Controllers could potentially need at some point. One example would be to force all Models to inherit from BaseModel which could be a custom created Database Manipulation functions that all Models would need.

Once you begin researching you’ll notice that while a lot of browser-based text games take into account Collision detection, they seem to be missing Aggro detection. Aggro stands for either aggravation or aggression and is essentially a way to tell if a monster will attack you or not.. As you’ve probably noticed some monsters tend to rush at you from across the map, while others seem to completely ignore you until you attack them. This is Aggro.

One of the easiest ways to detect aggro is to simply add a variable to your monsters to signify “sight”. This sight variable will dictate how far away you need to be before a monster will attack you. Set this to 100 to have a monster rush at you from across your map or set it to 0 so that it will never attack unless you attack first.

Detection aggro is as simple as following two formula’s. The first will be to figure out the distance between you and the monster and the second will simply be a quick check to see if you fall within the monsters aggro radius. To start off, you need to grab the jQuery javascript framework. While you CAN do this from scratch, jQuery lets you do it a lot easier, plus you can probably add a bit more jazz to your current game if you’re not already using it. If you’re unsure of how jQuery works, take a look at our quick intro to jQuery or just check out the jQuery documentation. Now just cobble together a quick webpage and include the jQuery library. I’m using the minified version 1.3.2 of jQuery, so if you’re not using the same one, make sure you replace that line.

<html>
<head>
	<title>Collision Detection</title>
	<style type="text/css">
	table#grid{
		border-style: solid; 
		border-width: 0px 1px 1px 0px; 
		border-color: #CCC; 
		padding: 0px;
	}
	table#grid tr th{
		border-style: solid; 
		border-width: 1px 0px 0px 1px; 
		border-color: #CCC; 
		text-align: center; 
		color: #333; 
		font-size: 0.7em; 
		font-weight: bold; 
		font-family: "Arial";
		background-color: #EDEDED;
	}
	table#grid tr th.run{
		width: 12px;
	}
	table#grid tr td{
		width: 50px; 
		height: 50px; 
		border-style: solid; 
		border-width: 1px 0px 0px 1px; 
		border-color: #CCC; 
		text-align: center; 
		color: #E0E0E0; 
		font-size: 0.7em; 
		font-weight: normal; 
		font-family: "Arial";
	}
	table#grid tr td:hover{
		color: #333;
		background-color: #F3F3F3;	
	}
	.player{
		background-color: #333; 
	}
	.monsterA{
		color: #333; 
		background-color: #AA0000;
	}
	div#debug{
		border-style: solid; 
		border-color: #333; 
		border-width: 1px; 
		float: right; 
		border-color: #EDEDED;
		text-align: left; 
		color: #333; 
		font-size: 0.9em; 
		font-weight: normal; 
		font-family: "Arial";
		width: 300px; 
		padding: 10px;
	}
	.monsterN{
		background-color: #00AA00;
	}
	</style>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
 
</body>
</html>

You’ll notice a bunch of CSS in there, but you can ignore that. It’s pretty straight forward and really it’s just meant to pretty things up a little. Now we’re going to add a quick grid so that you can get an easy visual representation of where you are and where your monsters are and if they will aggro or not. You can copy and paste the following line a few times, and change the y coordinate (x,y) to match which row you’re on.

<tr>
	<td>0,1</td><td>1,1</td><td>2,1</td><td>3,1</td><td>4,1</td><td>5,1</td><td>6,1</td><td>7,1</td><td>8,1</td><td>9,1</td>
</tr>

Finally, I’ve just added a “debug” section, so you can get a textual representation of what’s going on. It’s just a div placed above the grid.

<div id="debug">
	<b>Debug</b><br><br>
</div>

The Code
Now for the code that will give us a visual representation of our player and our monsters. First off we are going to initiate a few variables that we will be using throughout our script. They’re pretty self explanatory.

var playerPlaced = false; 
var monster = []; 
var player = [];

Now we’re going to set it up so that when we click a square it will check if our player is already placed or not. If he is NOT placed, then we are going to place him and update our “debug” section.

$('#grid tr td').click(function(){
	var distance;
});

if(!playerPlaced){
	player['loc'] = $(this).html().split(','); 
	player['sight'] = 0; 
	$(this).html('@'); 
	$(this).addClass('player'); 
	playerPlaced = true; 
	$('#debug').append('Player: '+player['loc']+'<br>');
}

Notice that we’ve set player['sight'] to 0. Why? Simply because your player doesn’t have an aggro radius. He may or may not attack at your discretion, so it’s irrelevant. A monster however, will ALWAYS attack if you get within its aggro radius (assuming no other modifiers).

The next bit will just place our monsters if there is already a player on the field. When we do, however, we are going to call some functions that will take care of calculating distance and checking if the monster will aggro. We’ll go over those first, since they’re more complicated.

Distance
To calculate the distance of two points we are simply going to take the x,y coordinates of both our monster and player and perform some math on them. The formula that we will be using is actually the distance formula between two points (and you wondered when you would ever use it…) and something that’s been drilled into us in every math class. The formula itself is a basically sqrt(sq(x1-x2)+sq(y1-y2)) so translating that to our game code it will look more like

sqrt(sq(player[x]-monster[x])+sq(player[y]-monster[y]))

The squaring and square rooting would take us a lot more work, if JavaScript didn’t already have those built in! Our actual distance formula in JavaScript (after being placed in a function) will look like this:

function getDistance(from,to){
	distance = Math.floor(Math.sqrt(Math.pow((from[0]-to[0]),2) + Math.pow((from[1]-to[1]),2))); 
	return distance; 
}

Intersection
Basically intersection in our scenario will take a look at the player and see if he falls within the aggro radius of the monster. It’s a very simple check that just goes if (distance < aggroRad) then it will aggro.

function willAggro(aggro,distance){
	if(distance > aggro){
		return false; 
	}
	else{
		return true;
	}
}

Monster Insertion
Finally, we’re going to do our check to see if a monster will aggro a player or not depending on its distance to the player.

monster['loc'] = $(this).html().split(','); 
monster['sight'] = 1; 
$(this).html('X');
 
distance = getDistance(player['loc'],monster['loc']); 
if(willAggro(monster['sight'],distance)){
	$(this).addClass('monsterA');
}
else{
	$(this).addClass('monsterN');
}
$('#debug').append('<b>Monster:</b> '+monster['loc']); 
$('#debug').append(' <b>Distance:</b> '+distance+''); 
$('#debug').append(' <b>Aggro:</b> '+willAggro(monster['sight'],distance)+'<br>');

And that’s all there is to it. If you run this page and take a look, you’ll notice that clicking a grid will place your player and clicking anywhere else will cause the monsters to appear in either green (if too far away to aggro) or red (if it will aggro). This is also noted in the debug section!

Here is our completed javascript section

$(document).ready(function(){
	var playerPlaced = false; 
	var monster = []; 
	var player = [];
 
	$('#grid tr td').click(function(){
		var distance;
		if(!playerPlaced){
			player['loc'] = $(this).html().split(','); 
			player['sight'] = 0; 
			$(this).html('@'); 
			$(this).addClass('player'); 
			playerPlaced = true; 
			$('#debug').append('Player: '+player['loc']+'<br>');
		}
		else{
			monster['loc'] = $(this).html().split(','); 
			monster['sight'] = 1; 
			$(this).html('X');
 
			distance = getDistance(player['loc'],monster['loc']); 
			if(willAggro(monster['sight'],distance)){
				$(this).addClass('monsterA');
			}
			else{
				$(this).addClass('monsterN');
			}
			$('#debug').append('<b>Monster:</b> '+monster['loc']); 
			$('#debug').append(' <b>Distance:</b> '+distance+''); 
			$('#debug').append(' <b>Aggro:</b> '+willAggro(monster['sight'],distance)+'<br>'); 
		}
	}); 
}); 
 
 
function getDistance(from,to){
	distance = Math.floor(Math.sqrt(Math.pow((from[0]-to[0]),2) + Math.pow((from[1]-to[1]),2))); 
	return distance; 
}	
 
function willAggro(aggro,distance){
	if(distance > aggro){
		return false; 
	}
	else{
		return true;
	}
}

This is a very simple way to check aggro and the reason I placed it in its own function was incase you needed to modify it in any way (for example if a monster was under 10 levels its aggro would be 0 always). 

Client-side functionality essentially translates itself to “using JavaScript to do some funcy (eh? get it? Funcy? Functional?) things”. It will allow us to add a level of interaction that users are familiar with and that they come to expect from applications. We want them to have the ability to minimize or maximize the windows, as well as close them. We also want to do all of this without page refreshes. Since actions like this are on a per-session basis, we don’t need to have any server-side code to handle it. We can let the browsers do all the work for us.

For this section we’ll be making some heavy use of jQuery and some rather complex DOM manipulation. I’ve also opted to use the long-hand version of everything instead of shorthand. This is so that you guys will be able to read the code and such. I’ve opted to use the production version of jQuery, but if you’re just getting started, you may as well download the development version. The bonus of this is that if you’re just learning you can easily pop in to the jQuery code and see how things are done. As well, if you are using an advanced IDE (such as Dreamweaver) you’ll get full code hinting. You can do this by heading to this website and downloading the appropriate version. I also recommend that you bookmark the documentation for jQuery (http://docs.jquery.com) as you’ll end up using it a lot.

Setup jQuery in whatever folder you’ve stored the HTML/CSS file from the previous tutorial (setup is actually just copy/paste). You’ll then need to link the script in your HTML by adding the following line of code to your HTML file in the head section of the code

<script src="jquery.min.js" type="text/javascript"></script>

Note the src attribute contains the name of the jquery file that I am using. You may have to edit it so that the name of the file matches the name of the file you downloaded.

Directly below that you can add this line as well

<script src="im.js" type="text/javascript"></script>

That line of code will link to our not-yet-created javascript file which will hold all the client-side functionality for our IM script. Once that’s done you can pop open your editor and get started with the actual jQuery code. However, before we continue with the tutorial note that this is NOT a jQuery primer. This tutorial is expecting you to have some knowledge of jQuery and javascript syntax. If you do not, please read this jQuery primer tutorial first before continuing.

The first thing we are going to do is ensure that our “information” window has a toggle-state. Instead of using jQuery’s built in toggle() method, I’ve decided to go with a simple boolean check.

$(document).ready(function){
var windowOpen = false;
$('.info').click(function(){
			if(windowOpen){
				$('.more').fadeOut('fast');
				$(this).children('span').children('img').attr('src','/icon/bullet_arrow_up.png');
				windowOpen = false;
			}
			else{
				$('.more').fadeIn('fast');
				$(this).children('span').children('img').attr('src','/icon/bullet_arrow_down.png');
				windowOpen = true;
			}
	});
});

Basically, this will apply the “onclick” event to our main window launching button. When clicked it will check if the window is already open and depending on the value of windowOpen, it will close/open it accordingly.

This next section of code will handle opening the chat windows. Since we want to make sure that only windows that AREN’T opened can be opened (redundant? yes, but completely necessary). This will ensure that if a window is already open, it won’t open it again.

	$('.contacts span').live('click',function(){
		var id = $(this).attr('id'); 
		var name = $(this).attr('name'); 
		var found = false; 
		for(i in openWindows){
			if(openWindows[i] == id+name){
				found = true;
			}
		}
 
		if(!found){
			$('.im-bar').prepend('<span class="task" id="'+id+'"><div class="convo"><img src="/icon/cancel.png" id="close-win" alt="Cancel"><span class="system">You have entered a conversation with '+name+'</span><textarea name="message" id="message"></textarea></div><div class="win" name="'+name+'">'+name+'</div>');
			$('#'+id).children('.convo').css('display','inline');
			openWindows[openWindows.length] = id+name;
			$('#'+id).children('.win').css('padding-top','50px');
			convoOpen = true;
			var offset = (openWindows.length*50)+(openWindows.length*15);
			$('#'+id).children('.convo').css('right',offset+'px');
			$('#'+id).children().children('textarea').focus();
		}
 
		$('.more').fadeOut('fast');
		$('.info').children('span').children('img').attr('src','/icon/bullet_arrow_up.png');
		windowOpen = false;
	});

The code itself remains fairly straightforward albeit long. First it does some variable assignment and then checks the openWindows array to see if it can find this particular window. If it can’t, it simply continues with the code. First it creates the new window and places it at the front of the open-window list. Then it just adds it to the openWindows array and does a bit more manipulation to create a text-box and align it properly with the current tab. It also opens the window and focuses on the text area. Finally it fades out the main information window and resets the image and boolean var.

Something to note here: Since we want openWindows and convoOpen to be accessible to ALL our functions, we can place it next to the “openWindow” declaration at the top of the script. It would look like this:

var openWindows = new Array(); 
var convoOpen = false;

This next bit will just pop open the window if you click on the tab, and minimize it again if you click again.

$('.task .win').live('click',function(){
		if(convoOpen){
			$(this).prev().css('display','none'); 
			$(this).css('padding-top','5px'); 
			convoOpen = false;
		}
		else{
			$(this).prev('.convo').css('display','block'); 
			$(this).css('padding-top','50px');
			convoOpen = true;
		}		   
	});

We’re nearing the end of our code. This block of code will handle the “Close” button on a conversation window. If it is clicked, the window is removed from the tab bar and the openWindows array and the remaining positions are re-calculated.

	$('.task .convo #close-win').live('click',function(){
		var id = $(this).parent().parent().attr('id');
		var name = $(this).parent().next().attr('name');
		for(i in openWindows){
			if(openWindows[i] == id+name){
				openWindows.splice(i,1);
				break;
			}
		}
		$(this).parent().parent().remove(); 
		convoOpen = false;
		var i = openWindows.length;
		$('.im-bar').children().children('.convo').each(function(){
			var offset = (i*50)+(i*15);
			$(this).css('right',(offset)+'px');
			i--;
		});	
	});

This last block of code will take any text in our textarea and submit it to the server when you press enter. The AJAX portion of this tutorial will be following, so in the mean-time everything else is showed here. The message is sent to the server, and then it is also automatically placed into the conversation window. We also strip out all tags from the code to ensure that nothing breaks our layout or is able to get through.

$('.task .convo #message').live('keyup',function(e){
		if(e.which == 13){
			data = $(this).val();
			data = data.replace(/<\/?[^>]+>/gi, '');
			// Send message
			$(this).val('');
			$(this).prev().addClass('text');
			if($(this).prev().hasClass('system')){
				$(this).prev().removeClass('system');
				$(this).prev().text('');
			}
			if(data != '' && data != '\n'){
				$(this).prev().append('<p><b>'+yourName+':</b> '+data+'</p>');
				$(this).prev().attr({ scrollTop: $(this).prev().attr("scrollHeight") });
			}
		}
	});

That is the basics of our Client-Side functionality to our Simple Website Instant Messenger system. The next installment will cover adding the AJAX function and modifying this last section sightly to reflect it.

What is it?
If you go by their website jQuery touts itself as being able to do damn near everything. And in truth, it does. It simplifies otherwise tedious tasks and allows you to add huge amounts of functionality to your website without much code. What it IS, however, is a Framework that provides you the ability to perform these tedious tasks in a way that’s simple and concise while achieving cross-browser support. This means that you can write your code quickly while knowing that it will work exactly how you expect it to in every browser. This cuts down on the amount of development time that you spend. Another bonus is the way that jQuery naming conventions make sense. Things like adding onclick handlers are as simple as adding .click(); to a selector (more on this later). This means that the learning curve is very shallow allowing you to literally just jump right now.

Getting started
Your first step will be to download jQuery. To do that, just head over to their website (http://www.jquery.com) and you can download it. It will be up to you whether you want to download the production or development versions. Both are the same, it’s just that the production code has been minified so it results in a much smaller file size. If you are just starting out however, I’d recommend going with the development version. If you have a full fledged IDE then your code hinting will come into play and you’ll be able to see descriptions of what the arguments are and such. However, even if you don’t, the development code will definitely be something you’ll want to peruse through in your spare time. You can learn a lot from looking at other peoples code. Once you have it downloaded, you can use it by simply including the following:

<script type="text/javascript" src="path/to/jquery.js"></script>

I’ve intentionally left the “src” attribute pointing to a random file as you will have to change it to point to wherever your jQuery file is.

First Steps
When using jQuery you have to remember that you’ll be spending a lot of time manipulating the DOM. In order for this to occur, you’ll have to wait till the DOM is loaded. However, because of where your script files are generally located, they may load before the DOM has completely finished. If this happens then your scripts will just run in to a lot of errors. jQuery comes with a built in way to check that the DOM is ready for use. All your jQuery scripts should run only AFTER the DOM is ready. In a separate script tag, you can add the following

$(document).ready(function(){ })

jQuery makes use of anonymous functions quite a bit, so you may want to make a note of that. You don’t NEED to have a function name in JavaScript. $ is a global variable created by jQuery as an accessor to all of its methods. This means that all your scripts in jQuery will utilize $ to perform it’s functions. $ will accept multiple types of arguments. You can either provide an ID, a Class or even an html tag for jQuery to work its magic on. I recommend you read up on the documentation for $ as it is one thing that you will definitely need to understand to perform complex manipulations.

You can go ahead and add

<a href="#">Link</a>

to the body section of your code. This is so that we have something to work with in jQuery.

Going back to our anonymous function, you can change it so that it looks like this

$(document).ready(function(){
$('a').click(function(){ alert('Works!'); }); 
}

Because of how powerful jQuery is, that will actually apply itself to EVERY anchor tag in the DOM. You can pick and choose which ones by applying numerous selectors. There are so many involved that that itself is the topic of another discussion. However, if you are looking to work on a particular id the code would be

$('#id')

and if you were working on a class you could use

$('.class')

Keep in mind that jQuery will always work on EVERYTHING that matches the selector that you have provided.

jQuery is also chainable. Because of how the code is written, you can keep tacking on different functions. For example, if we look through the effects section of the documentation you’ll see things like slideDown() and fadeIn(). These effects can be chained together to create multiple tiers of animations or events.

My recommendation is that you definitely check out the full documentation and spend a lot of time playing around with it. There will be a few more jQuery tutorials popping up on the website as I start preparing the gradual jump from no jQuery experience to enough experience to write the client-side functionality of our SWIM!

The Vision
I wanted to create a completely self contained Website IM system. Apart from an installation file that would handle the database setup, I wanted developers to be able to copy a few lines of code into their current websites and have the client up and running. It would consist of a little bar along the bottom of the screen that would allow the user to easily keep track of their contacts as well as any open conversations. From the beginning the idea was the integration with a website had to be simple. If I ever felt the need to include it in a website I was developing, I didn’t want the hassle of actually integrating it. I wanted to be able to say something like swim_ui(); and have it take care of everything else. I knew it wouldn’t be THAT simple, but simplicity was something I was aiming for. Here are a few examples of what I expected the app to look like.

Refining
Once I had established a rough look to the IM client I took a moment to re-evaluate the different elements involved. It is something, that as a designer, I find essential to do. I had to make absolutely sure that every element in the prototype was required 100%. If it could do without, it was useless and removed. The reason was simple. I didn’t want a massive file included with every page. It would become a problem as websites grew.  Even the use of images was something I didn’t want to get in to. As I said before, my motto with this was “If it could do without, it was useless” and there was no room for useless elements.

The Static Mockup
This is another step that I absolutely have to go through. Before I start adding the dynamic PHP and even Javascript, I build a completely static version of what I want to eventually build. For one thing it lets me re-evaluate everything in the design, and when deadlines start coming up, it’s easy to find things that will give you problems later on. As well, actually having a finished product really boosts your morale and makes you want to work more. The static mockup was very simple. Even though I eliminated the chat taskbar, you’ll notice (or maybe not, since the screenshot is rather hard to read) I left the chat taskbar text in place. This is because that even though we won’t have a physical task bar, it will still exist in our code. This lets us position things properly.

<div class="im-bar">
	<span class="task" id="'user-id'">
		<div class="convo">
			<img src="/icon/cancel.png" id="close-win" alt="Cancel">
			<span class="system">You have entered a conversation with Name</span>
			<textarea name="message" id="message"></textarea>
		</div>
		<div class="win" name="Name">Name</div>
	</span>
	<div class="more">
		<div class="user-info">
			Angelo R. 
			<span><img src="/icon/bullet_green.png" alt="Online" id="status"></span>
		</div>
		<div class="contacts">
			<span id="cname1" name="Name">
				<img src="/icon/user.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name</li>
					<li class="status">Status</li>
				</ul>
			</span>
			<span id="cname2" name="Name 2">
				<img src="/icon/user_gray.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name 2</li>
					<li class="status">Status</li>
				</ul>
			</span>
			<span id="cname3" name="Name 3">
				<img src="/icon/user_gray.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name 3</li>
					<li class="status">Status</li>
				</ul>
			</span>
		</div>
		<div class="bottom-bar">
			<img src="/icon/add.png" id="add" alt="Add User">
			<a href="#">Settings</a>
		</div>
	</div>
	<div class="info">
		<img src="/icon/bullet_green.png" alt="Online" align="top">Online 
		<span><img src="/icon/bullet_arrow_up.png" alt="More"></span>
	</div>
</div>

As you can see I’ve tried to keep the code as self explanatory as possible. It’s very simple HTML without the use of Tables or any inline CSS. This was to ensure that even skinning the SWIM system would be as simple as editing a single file.

The CSS for this file is where things will get a lot more confusing. Because of the fact that this will be included in your website, I had to ensure that my css wouldn’t overwrite any of your css. So everything is explicitly stated. When I wanted to style the .info class, I pointed to it through it’s full “path” of .im-bar .info This was to ensure that only that element would get skinned. The CSS is a little advanced, and has an added line for webkit based browers that the gecko ones won’t see. This is also only going to look exactly as planned in those browsers. Sorry Trident users, I’ll be updating this code once I sort out a few more bugs.

.im-bar{
	position: absolute; 
	right: 20px; 
	bottom: 10px; 
	z-index: 100;
	font-family: "Arial", sans-serif;
	font-size: 0.8em;
	color: #555;
}	
.im-bar a{
	color: #333;
	font-weight: bold; 
	text-decoration: none;
}
	.im-bar a:hover{
	text-decoration: underline;
}
.im-bar .info, .im-bar .win{
	display: inline;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border: 1px solid #EFEFEF;
	width: 100px;
	padding: 5px 10px 5px 5px;
	background-color: #F0F0F0;
	margin: 0px 6px;
	cursor: default;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .win{
	width: reset;
}	
.im-bar .info span{
	float: right;
}
.im-bar .info:hover, .im-bar .win:hover{
	background-color: #E7E7E7;
}
.im-bar .more{
	display: none; 
	border: 1px solid #EFEFEF;
	width: 200px;
	height: 350px;
	position: absolute; 
	right: 0px;
	bottom: 30px;
	background-color: #F0F0F0;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding: 10px;
	padding: 0px;
	z-index: 100;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .more .contacts{
	background-color: #FFF;
	height: 86%;
	width: 100%;
}
.im-bar .more .contacts span{
	display: block; 
	margin: 0px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #F0F0F0;
	text-align: left;
}
.im-bar .more .contacts span:hover{
	background-color: #FAFAFA;
}
.im-bar .more .contacts span img{
	float: right;
	padding: 3px; 
	width: 40px; 
	height: 40px;
	border: 1px solid #F0F0F0;
	margin: 2px;
}
.im-bar .more .contacts span ul{
	padding: 10px;
	margin: 0px;
}
.im-bar .more .contacts span ul li{
	list-style: none;
	cursor: default;
}
.im-bar .more .contacts span ul li.status{
	color: #CCC; 
	font-style: italic;
}
.im-bar .more .user-info,.im-bar .more .bottom-bar{
	padding: 4px;
}
.im-bar .more .user-info span,.im-bar .more .bottom-bar a{
	float: right;
}
.im-bar .task .convo{
	display: none; 
	width: 250px;
	height: 300px;
	position: absolute; 
	bottom: 30px; 
	right: 0px;
	display: block;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border: 2px solid #EFEFEF;
	background-color: #FFF;
	padding: 10px;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .task .convo #close-win{
	position: relative; 
	bottom: 20px; 
	left: 250px;
	cursor: pointer;
}
.im-bar .task .convo #message{
	width: 100%;
	font-family: "Arial", sans-serif;
	font-size: 1em;
	color: #555;
	height: 60px;
}
.im-bar .system{
	color: #CCC; 
	font-style: italic;
	height: 75%;
	display: block;
}
.im-bar .task .convo .text{
	font-style: normal;
	height: 75%;
	display: block;
	overflow: auto;
}
.im-bar .task .convo .text p{
	padding: 0px;
	margin: 2px;
}

You’ll notice that everything in the stylesheet is actually really simple. Other than a few pieces such as the overflow attribute in the .im-bar .task .convo .text selector which just adds a scrollbar to the chat window if necessary. The z-indexes are also used to place windows on top of each other (obviously) but keep things in the high 90′s. This is so that incase you have an z-indexed elements on your website, this will hopefully not interfere.

Finally, here’s a screenshot of what our HTML mockup looks like. Stay tuned for the next part in which we add jQuery into the mix to really get our Prototype up and running!

SWIM - Minimized Convo Windows with Open Chat Window

SWIM - Open conversation window