I forgot to post about this. The project that has been consuming me at work for two months is finally done. It’s a site where you can search for Christian colleges. (We have a few other faiths up there, but it’s mostly various denominations of Christianity.) I didn’t design it, but I built the site and managed the content (and wrote some of it).

For those familiar with web development, this was my first foray into developing in an MVC framework (in this case, CodeIgniter). There was definitely a learning curve, but I have to say, I’m going to use that for every large site I build from here on out.

And if you’re wondering, we’re hoping to add a lot more clients to the site. Right now, the selection of schools you can actually request information from is pretty slim (although there’s at least a mention for every major faith-based higher learning institution in the country). We had to have a site before we could sell clients on it, though. So if you know of a faith-based school that should have a more prominent listing here, let me know and I’ll get it routed to the right place.

I had a portfolio and résumé on my old site, but I never created one for this site. I’m coming back around to wanting one online. This site doesn’t count, because (a) it’s in WordPress, so I’m not showing off my coding skills, and (b) I want to show more examples of my work. I also don’t necessarily want my personal blog tied to my professional portfolio. So I started work tonight on a smaller portfolio site. You can preview it here. It’s just an image now, but when it’s built, each of the sections will be a larger box than the initial page.

I welcome any feedback, especially from my designer friends. So far, it’s only an hour of work, so it’s not at all a complete look and feel—more like a rough sketch.

Just a sneak peek at something I’m throwing together—Dennis the Menace comics with quotes from Hannibal Lecter. I’ll work on making it look a little nicer tomorrow.

Some of my favorites so far:

• Comic 1
• Comic 2
• Comic 3
• Comic 4
• Comic 5

I am a genius. They said it couldn’t be done, but here it is.

At work, we occasionally have to deal with exceptionally long item names in drop-down menus. We came up with a trick to control the width of the initial box, but the drop-down expanded to normal, bloated size when clicked. We’ve been searching frantically for some way to wrap long item names in select boxes, but kept hitting a wall.

Well, with some outside-of-the-box thinking, I came up with a solution. It functions just like a select box, but it’s a scrolling div full of a long set of radio buttons. Here’s an example:

Here’s a link to the trick in action.

Looks like a select box, but it’s actually much more complicated. Try it out. Also, it’s set up to work with tableless forms, so you’re encouraged to use those.

Anyway, here’s the code for the above:

CSS

#programs_container {
  float: left;
}
#programs {
  position: absom��WFS�Р�v�GF��3��Р�FF��s�'��Р�&�&FW#��6�ƖB3tc�D#��Р�&6�w&�V�B�6���#�4ddc�Ч�Т7&�w&�2F�b�Р��&v����Р�f��B�vV�v�C�&��C�Ч�Т7&�w&�2F�bF�b�Р�f��C�&�v�C�Ч�Т7&�w&�6Ɨ7B�Р�F�7������S�Р��V�v�C�#��Р��fW&f��s�WF�Ч�Т7&�w&�6Ɨ7B��WB�Р�f��C����S�Р��&v�����Ч�Т7&�w&�6Ɨ7B�&V��Р�F�7���&��6��Р�f��C����S�Р��&v����Р�FF��r��VgC�3w��Р�FW�B֖�FV�C��3w��Р�FW�B�Ɩv��VgC�Р�f��B�vV�v�C���&�ðЧ�Т7&�w&�6Ɨ7B�&Væ��fW"�Р�&6�w&�V�C�43S$c�Ч�РФ�f67&�@РЦgV�7F���F�vv�R��&���B�Ч�Р�f"�&��F�7V�V�B�vWDV�V�V�D'��B��&���B��Р��&��7G��R�F�7�����&��7G��R�F�7����v&��6�r��v���Rr�v&��6�s�Ч�ЦgV�7F���6V�V7E&�w&҇&�w&���B�Ч�Р�f"&�w&��F�7V�V�B�vWDV�V�V�D'��B�&�w&���B��Р�&�w&��6�V6�VB�G'VS�Р�F�7V�V�B�vWDV�V�V�D'��B�w6V�V7FVE&�w&�r����W$�D���&�w&��f�VS�Р�F�7V�V�B�vWDV�V�V�D'��B�w&�w&�6Ɨ7Br��7G��R�F�7���v���Rs�Ч�РФ�D��РУ�F�b�C�'&�w&�5�6��F��W"#�У�F�b�C�'&�w&�2#�Р��F�b��6Ɩ6��'F�vv�R�w&�w&�6Ɨ7Br��#��F�c�fF'#���F�c��7��C�'6V�V7FVE&�w&�#�6V�V7B&�w&���7����F�c�Р��F�b�C�'&�w&�6Ɨ7B#�Р�����7G&��s�w&�W��7G&��s����Р����&V���6Ɩ6��'6V�V7E&�w&҂w&�w&�r��#�Ɩ�WBG�S�'&F��"��S�'&�w&�"�C�'&�w&�"f�VS�%&�w&�"��&�w&����&V��Р����&V���6Ɩ6��'6V�V7E&�w&҂w&�w&�"r��#�Ɩ�WBG�S�'&F��"��S�'&�w&�"�C�'&�w&�""f�VS�%&�w&�""��&�w&�#���&V��Р���F�c�У��F�c�У��F�c��

Edit: It’s ironic that a post about code would have its code garbled. This is a limitation in the Wordpress plugin that I’m using to preserve the code format. I’m hoping for a fix soon. In the meantime, visit the example page and steal the code from that.

Because it took me so bloody long to find this code online and make it work with what I wanted, I’m documenting it here.

<b>javascript</b>
document.oncontextmenu = window.oncontextmenu = function(e) {
  var obj = (/msie/i.test(navigator.userAgent)) ? event.srcElement : e.target;
  if (obj.nodeName=="IMG" || obj.nodeName=="img")
    return false;
}

Just place that in the head of your HTML document and you should be good to go. Disables right-click on images only—it will work on the rest of the page.

It took me forever to figure this out, so I’m recording it here so I don’t have to figure it out again next time.

The gist of it is that you create an element that’s positioned somewhere on a page. When you scroll down, the object moves down with the page, so it’s in a fixed spot no matter how far down you scroll. Just stick all this in the head of your document:

<b>JavaScript</b>
window.onscroll = document.documentElement.onscroll = function() {
  var obj = document.getElementById('confirm');
  if (!obj) return;
  var currentOffset = document.body.scrollTop || document.documentElement.scrollTop;
  var desiredOffset = currentOffset + 20;
  if (desiredOffset != parseInt(obj.style.top)) 
    obj.style.top = desiredOffset + 'px';
}
<b>CSS</b>
#confirm {
  position: absolute;
  left: 640px;
  top: 20px;
  width: 200px;
  height: 100px;
}

JavaScript code monkeys like me have reason to rejoice: Jaxer, the world’s first AJAX server is available for free download. Now, I know this isn’t really news, since it’s been out for some time now, but I only just discovered it and it doesn’t seem to be well-known yet in the industry.

Just a little primer on Web programming languages… There are two basic types: server side and client side. Server side code runs on the Web server before the page ever gets sent to your computer. Because it runs on the server, it can access data on the server (other pages, databases, code snippets, etc.). Things like message boards and blogs are made possible by server side scripting. Technologies like PHP and ASP.NET are server side.

Then there’s client side. Client side code runs after the page is loaded, meaning the code is sent to your computer and run there. This allows the code to run while you’re viewing the page without reloading it. So when you see a webpage do something interactive, it’s usually client side code. Things like showing and hiding parts of the webpage, swapping out images, and animated menus are usually done with client side code. JavaScript is the client side language of the Web.

Now, there actually is a programming method called AJAX (Asynchronous JavaScript and XML) that allows JavaScript to parse XML files on the server or call small server side scripts. Google Maps is a good example of this. But there’s a good chunk of code needed to initialize something like this, and you still have to write the server side scripts in something like PHP or ASP. The whole process is clunky, although functional.

Jaxer lets you run JavaScript on both the client side and the server side—the same code!—so you don’t have to write and re-write functions in two different languages, or update functions twice. Not only that, but it’s far, far easier to make client side calls to server side scripts, or have server side scripts access information on a webpage.

I’ve yet to see if Jaxer has anywhere near the built-in code library of languages like PHP and Python. My guess is not quite—or, rather, not yet. I’m hoping to see this technology take off, since it could possibly become the server technology of choice for interactive Web application development.

Edit: I added overflow: auto to handle long lines of code.

I’ve recently thought about putting some of my code snippets up on this site, since I come up with a lot of them at work. This led to the question of how to format these without losing my mind. I wrote a few lines of CSS to do this automatically. The example of this is the below code itself:

<b>HTML</b>
&lt;code&gt;&lt;b&gt;Type of code&lt;/b&gt;
Code
  Indented code (tabs work!)
Code
&lt;/code&gt;<br />
<b>CSS</b>
code {
  display: block;
  margin: 1.5em 50px;
  padding: 12px;
  background-color: #DDD;
  border: 1px dashed #999;
  font-family: "Courier New", Courier, mono;
  color: #666;
  white-space: pre;
  overflow: auto;
}
code b {
  display: block;
  border: 1px dashed #666;
  width: 100px;
  height: 20px;
  background-color: #CCC;
  text-align: center;
  line-height: 20px;
}

I haven’t found a way to convert the < and > symbols, since I also have to use those internally for the subheaders, so I’m having to manually go in and change those to &lt; and &gt;, but I’ll look for a way around this.

Note: Wordpress is deciding to “help” me by automatically closing tags if I put more than one line break in-between them and adding a <br> tag when I put in a line break. While this is usually a good thing, it doesn’t go well with my new design. I’ll work on taking out this functionality once I have some more time.