Guess who’s not a slacker any more? This guy! I finally finished my portfolio, which you can view here. (Well, it’s almost finished. I need to get the writing samples up there.) I decided to tone it down from my last design, which was a little flashy in retrospect.
Any thoughts?
Something I really like in webpages is the functionality to have an input label inside the actual input. To be truly user-friendly, this would have to disappear when the user clicks or tabs into the input, and it would have to reappear if the user gets out of the input without typing anything. To avoid confusion, it would also have to look different than actual text put in by the user.
So here’s my easy jQuery solution.
First, you’ll have to define the style you want to use for the labels. The easiest solution is grey, italicized text, but feel free to define this however you want in your stylesheet. Let’s call this class unfilled.
Second, put this jQuery in your scripts file:
$(document).ready(function() {
$("input[type=text]").attr('value', function(){return this.title}).addClass('unfilled');
$("input[type=text]").focus(function() {
if (this.value == this.title)
$(this).val('').removeClass('unfilled');
});
$("input[type=text]").blur(function() {
if (this.value == '')
$(this).attr('value', function(){return this.title}).addClass('unfilled');
});
});
All you need to do to implement the code in the HTML is to put a title attribute on each text input. No initializing, no calling JavaScript on focus or blur.
If you have a larger webpage, you’ll probably want to specify an element in which inputs should be affected:
$(document).ready(function() {
$("#myform input[type=text]").attr('value', function(){return this.title}).addClass('unfilled');
$("#myform input[type=text]").focus(function() {
if (this.value == this.title)
$(this).val('').removeClass('unfilled');
});
$("#myform input[type=text]").blur(function() {
if (this.value == '')
$(this).attr('value', function(){return this.title}).addClass('unfilled');
});
});
A few posts back, I was talking about that personality test where you can be either a lion, an otter, a golden retriever, or a beaver. Well, I wanted to take it again to see how I’ve changed in the last seven years, and I found that there wasn’t a single good electronic version of it online—not even on the official website. So I made my own. Here it is.
Of course, now that I’ve stayed up all night coding the test, I’m too tired to take it. I’ll take it in the morning and post a comment. What types are you, my loyal readers?
JavaScript is my favorite development language, although I fully realize that it has a lot of limitations. I just discovered one today that I hadn’t thought about since college: passing a variable by reference rather than making a copy of it. Here’s the gist of it, for those who don’t know what I’m talking about.
Take this code, in which we declare and populate a small array:
var lines = [];
lines.push("line 1");
lines.push("line 2");That works fine, but if you try to pass the lines array to another function, it will make a copy of the array rather than allowing the other function to edit the original array directly. You can set up this other function to return a different array and re-set the original array, but there are times when it would be much easier if you just pass a reference to the original array rather than make a copy of it.
In C, these are called pointers. I don’t know what they’re called in other languages because I haven’t done them in other languages.
Anyway, there are no pointers in JavaScript. So how do we get around this? Well, we could do it the hard way and declare global variables. If you leave the “var” off when referencing a variable for the first time in JavaScript, the variable is global and is accessible from any code on the page. Using global variables can quickly get messy, though, and is generally considered sloppy coding—especially if you’re going back and adding new code and functions all the time like I am with most of my projects.
There is a better solution. JavaScript objects, by default, behave like pointers. The best part is, you can make a variable an object without changing how you reference that variable syntactically. Check it out:
var lines = Object([]);
lines.push("line 1");
lines.push("line 2");All we’ve changed is that first line, but the variable will now be passed to other functions as a reference to the original array. The variable is invisible outside of the original function and any functions we pass it to.
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.
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: absolute;
width: 300px;
padding: 2px;
border: 1px solid #7F9DB9;
background-color: #FFF;
}
#programs div {
margin: 0px;
font-weight: bold;
}
#programs div div {
float: right;
}
#programslist {
display:none;
height: 200px;
overflow: auto;
}
#programslist input {
float: none;
margin: 0px 10px;
}
#programslist label {
display: block;
float: none;
margin: 0px;
padding-left: 37px;
text-indent: -37px;
text-align: left;
font-weight: normal;
}
#programslist label:hover {
background: #C1E2F0;
}
JavaScript
function toggle(obj_id)
{
var obj = document.getElementById(obj_id);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
}
function selectProgram(program_id)
{
var program = document.getElementById(program_id);
program.checked = true;
document.getElementById('selectedProgram').innerHTML = program.value;
document.getElementById('programslist').style.display = 'none';
}
HTML
<div id="programs_container">
<div id="programs">
<div onclick="toggle('programslist');"><div>↓</div> <span id="selectedProgram">Select a program</span></div>
<div id="programslist">
<p><strong>Group 1</strong></p>
<label onclick="selectProgram('program1');"><input type="radio" name="program" id="program1" value="Program 1" /> Program 1</label>
<label onclick="selectProgram('program2');"><input type="radio" name="program" id="program2" value="Program 2" /> Program 2</label>
</div>
</div>
</div>
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;
}