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.

But what about a full featured blog? I’m talking comments, categories, tags, a wysiwyg editor coupled with a theme engine to make it all look pretty. Those are a little rarer to come by, and most people just hop straight to WordPress. After all, it’s easier.

Over the weekend I began work on my own blog engine and I will hopefully be transitioning Where My Feet Have Been over to it sometime later this month. I want to force myself to finish it, so I will be porting over before everything is done. So there will be a lot of features implemented and tested before being pushed live. I’m also going to be doing a quick tutorial on the insides of the thing.

The new engine is tentatively nicknamed PHP Blog & Journal or PB&J and I’m hoping that it will provide all the features I need in a blog engine while still being easy to use and skin. The default theme is a minimalist one called Shipyard, and hopefully you’ll get a screenshot soon enough!

Here’s a list of planned features:

• Theme Engine (Mostly done)
• Posts (Being worked on continuously. I have the database set up with the necessities and will be expanding it as I go.
• Comments
• Unlimited Nesting Categories
• Tag with easy Tag Cloud support (it’s really just a count of how many times a tag appears. I’m surprised more blogs don’t do this to cut down on DB queries)
• Static Pages
• Basic Hook System – think Drupal but less stupid

I think one of the things that I REALLY like about it so far is the easy of skinning everything. I’ll post a more detailed overview, but there really is no limit to what you can do. You need a few files (header.php, footer.php, main.php, single.php, sidebar.php, Themename.php) and you can do whatever you want. Want to get all the posts? $blog->getPosts(); Want posts in specific categories? $blog->getPosts(array('cat1','cat2','cat3').

From the administration point of view there really doesn’t need to be much. A way to list posts, categories and tags and a way to edit/create/delete them. And then a way to set global settings, such as the website name.

This is going to be the first major project I’ve undertaken utilizing my GridView and MySqlAdapter classes so I’ll be able to flesh them out and optimize them before re-releasing them. Wish me luck!

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.

And days is simply too long. Often when a customer comes to me with computer problems it goes a little like this:

1. Sit down and get the customer to explain what happened
2. Keep pressing for more details. More often than not the customers description is very high level. “I clicked ok and it just showed up” isn’t very accurate. I need to know every detail leading up to the error. Most times that alone can identify a potential set of problems, or at least rule some things out.
3. Research. Contrary to popular belief, IT professionals don’t know every problem that could occur. We know the common ones and we know ones that we’ve experienced before, and we know some of the stranger ones. ¹ We need to look into other cases of your problem, we need to find patterns between occurrences and then apply them back to your case. We are not just Googling hoping to stumble across an answer. Although, we do use Google.
4. Come up with a solution

Sadly, a lot of times the solution we come up with is simple: Reformat.

Yes I could spend 8 or 9 hours for the next 3 days removing all traces of the virus from your computer. Yes I could find the exact file that is corrupted on both your CD and your computer. Yes I could bake a pizza from scratch. But it’s not worth it. Not when there’s a solution that is fairly easy to follow and can get you back and computing faster than ever. Not to mention reformatting not only saves you time, it also saves you money, because I don’t charge you for solutions, I just charge for implementation.

That being said, every so often one of those really strange problems pop up and you can’t help but spend countless hours fixing it – but hey, we’re geeks.

See?! It’s just so damn awesome. I can’t get over it. Every time I see this commercial I get excited. It’s filled with levels of awesome I wasn’t even sure existed. Never mind the technical aspect of it (which is mind-boggling itself), it’s just friggin awesome. I was so excited the first time I saw it that I punched my sister and then watched it 7 or 8 more times laughing the entire time.

Dammit Weiden+Kennedy, you’ve done it again.

Back then I was just starting out and just couldn’t bring myself to say “I’m a programmer, you don’t know what you’re talking about”, even if I felt that way. I couldn’t correct a guy who talked about “href” tags or someone who called a computer a “CPU”. And I got to thinking. Why. Why was I, who KNEW my stuff (not to sound like a complete ass) not nearly as confident as the other guy who clearly didn’t? Why did I not call him out when he blatantly BS’d his way through explanations? Why couldn’t I just be more confident? And I realized it stemmed from two fundamental truths.

1. He was always told that he could do anything he wanted
2. I was afraid of failure

One of those I obviously couldn’t do anything about, but I could try and fix the other.

The only thing we have to fear is fear itself
In order to fix this fear of failure I had to try and figure out why I was afraid. The obvious “because you’ll fail” wouldn’t cut it this time, so I had to delve deeper than that. I had to figure out why exactly failure was such a bad thing. After all everyone talks about how you only learn if you make mistakes etc. etc. blah blah, so clearly making mistakes and failing is a good thing. I began to look back at previous times I had failed. I looked at everything, from falling down stairs (walking fail?) to not being able to deliver a project on time to formatting my hard-drive. The only thing these things had in common was that I had failed. That and they caught me off guard.

Wait what? That last bit seems pretty significant.

I looked at more times I failed and noticed the recurring trait. I never thought I would fail, I never even considered it and when it happened I was caught off guard. I didn’t know how to respond and it seemed like every failure inevitably ended with me doubting myself a little more. And now, it had gotten to the point where the apprehension about failing was far more intimidating than actually succeeding.

So I made a list. A list of all the things I could do to not be caught of guard. It was a very short list. It basically involved either being psychic or making another list of all possible points of failure. Clearly neither would be happening. So I decided to make a list of the most obvious things I could fail at for a task. I cut out anything I wouldn’t have any control over, like “friend moves away, has borrowed hard-drive, now you have no hard-drive” and left the generalized stuff on. And you know what? It didn’t help one bit. I still wasn’t confident, I still was afraid to speak my mind about anything.

Knowing the failures didn’t help. In fact just knowing them made them all seem so much worse. Gradually however, I started coming up with contingency plans for each point of failure. At first they started as reasons for why they couldn’t be counted as “real” failures. They weren’t excuses, but rather ways to deal with something if that particular failure came about. And the suddenly, once I had a contingency plan for a failure, there was no reason to worry about it. Sure it could happen, but so what? I had a back-up plan. And a back-up plan of my back-up plan was in the works. A failure just wasn’t that daunting anymore.

Sure a client could say “I’m not paying you for that.”, but then I could say “Well why don’t we meet and discuss your reservations about paying and see if we can come up with something where both of us are happy.” I could also say “Screw you buddy, see you in small claims.” It didn’t matter WHAT I said, it just mattered that I had various plans in case I failed. And that gave me a sense of confidence that I’ve never had before.

And the confidence brought something else that I hadn’t counted on. Success. I hadn’t suddenly gotten better at anything, but I wasn’t so afraid of failing and people responded to it. I spoke my mind at meetings and offered my input. Sometimes I was right and sometimes someone said I was wrong. It didn’t matter because my backup plan for saying something wrong was simple “Ask why.” And people suddenly realize you’re not just like everyone else. You want to know more, you’re willing to offer ideas and have them killed, you just want to know why.

And just like that, I was suddenly confident in my own abilities. Not just as a developer or a designer, but as a guitarist, as a gamer, as a person. I knew what I could and could not do, and I knew how to deal with both.

—-
I realized this is sort of a random shift away from coding and stuff, but as a fellow blogger once pointed out to me. It’s my goddam blog.

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.

This post is about the iPhone4 and how it’s turning out to be Apple’s Vista.

“Hold on Angelo”, you may say. “The iPhone4 is glorious! It’s the most amazing thing out there. It’s an-BBBZZZZZZZZZZZZZZZ” and that’s about as far as you’d get before I started playing my vuvuzela to drown you out. Those of you who haven’t lined up yet? There’s a serious flaw in the iPhone where IT STOPS FUNCTIONING AS A PHONE DEPENDING ON HOW YOU HOLD IT.

I really WANT to continue bashing it, but I’m not even sure if I need any more ammunition. It’s a phone that ceases to be a phone if you hold it wrong. If that’s not an epic fail, I don’t know what is. You know what the best part is? It doesn’t seem like Apple is intending to fix it just yet. In fact, the Gospel according to Steve states

“Gripping any phone will result in some attenuation of its antenna performance, with certain places being worse than others depending on the placement of the antennas. This is a fact of life for every wireless phone. If you ever experience this on your iPhone 4, avoid gripping it in the lower left corner in a way that covers both sides of the black strip in the metal band, or simply use one of many available cases.” – Steve-us

Is it just me or did Steve say that this is unavoidable and that calls get dropped regardless of the phone? I’ve had my Blackberry for a while now (almost 2 years) and I’ve only dropped calls when I move into spaces where my carrier doesn’t provide coverage. I’ve never dropped calls standing in Downtown Toronto if I held my phone wrong. Congratulations you early adopting, line-standing, online reserving (if the website worked for you) mac fanboys. You have a phone that decides it doesn’t like being a phone if you hold it wrong.

Just to make the connection for those of you who couldn’t: Microsoft shipped a sub-par OS then fixed it up a few months later with a free download. Apple shipped a sub-par phone and then Steve-us himself told you you’re holding it wrong.

You can check out the original email and emailer here – http://www.sampletheweb.com/2010/06/24/steve-jobs-to-lefties-hold-the-iphone-4-differently-or-buy-a-case/

You can check out Engadgets little apple-rail here:  http://www.engadget.com/2010/06/25/hey-apple-youre-holding-it-wrong/