ImgRed Revised
For those of you who don’t know what ImgRed is I suggest you go and take a look. In short it’s a way to avoid hotlinking but still include the original URL.
The idea is great I think but the solution is far from optimized. I took the liberty of rewriting the whole script. If you have further suggestions of improvements they are welcome.
Form Validation - Phone Numbers
This is the form of validation I like the most: Prevent the user from inputting the wrong information. In this case I have a field for a phone number, and I only want the user to be able to input numbers (0-9) and country code prefix (+).
One might argue that I should instead remove unwanted characters on the server side instead, but I rather prevent that from happening at all. It's bloody annoying with users that write stuff like "none" or "-" instead of leaving the box empty when they don't have/want to give out their phone number on a web form.
Updated to support keys like backspace and del
The Source
-
function isValidPhoneNumbers(evt) {
-
if (evt.which != 0) {
-
var charCode = (evt.which) ? evt.which : event.keyCode
-
if (charCode == 43 || charCode == 8 || (charCode <57 && charCode> 47)) {
-
return true;
-
} else {
-
return false;
-
}
-
}
-
}
-
<input onkeypress="return isValidPhoneNumbers(event)" type="text" />
Compability
- IE 6+
- Firefox
- Opera
Curly Braces - The solution to the war
I'm the type of guy that prefers his curly braces to be at the same line as the method but I know there's alot of people that wants the curly braces on new lines. I'm aware of the coding conventions that supports that way of coding. However, I cannot bare to read code like that, but I also know that "the others" cannot bare to read my style of curly braces. However I think my argument that I save document rows is a pretty strong one.
Same-line-style
-
public string Message {
-
get {
-
return txtMessage.Text;
-
}
-
set {
-
txtMessage.Text = value;
-
}
-
}
New-line-style
-
public string Message
-
{
-
get
-
{
-
return txtMessage.Text;
-
}
-
set
-
{
-
txtMessage.Text = value;
-
}
-
}
The Solution
So discussing this with a friend who is an advocate of the new-line-principle I decided to create a macro that switches between the two rules. Tada! Now all you have to do when looking at another developers source code is to run the macro to make the code readable to you, do the needed changes and then run the macro again to switch back to his curly-brace-style.
How it works
I simply change the new line formatting rules for your VS and reformats all your code
Compability
- Only functions with Visual Studio 8 (VS 2005) and above. If you feel that you have to much time on your hands you are welcome to rewrite it for older versions of Visual Studio.
- Rules only apply to J# and C# code.
Download
Sprite Menu
When the simple list menus with text links aren't enough and you wish to have all your tabs/buttons as beautiful (or in this case ugly) images it can be tricky to enslave the standard UL list to solve your problem. It's all very possible though, and with only using one image for the full menu, no more need to save 1 or even 2 images for each button, because now we are working with sprites!
In this demo I'm using a very simple and ugly menu (to lazy to make it beautiful but it still is very valid) and as you can see it's two rows. The top row is the normal view and the bottom row is the hover, or onmouseover view.
Compability
I've not been able to test in every single browser so if you are a mac user, feedback would be most helpful 
Windows
- IE7 - Works 100%
- IE6 - Works 100%
- IE 5.5 - Untested
- Firefox 2.0 - Works 100%
- Opera 9 - Works 100%
- Safari 3 - Works 100%
Mac
- IE 5.5 - Untested
- Safari 3 - Works 100%
- Firefox 2.0 - Works 100%
Plain and simple
Without any styling what so ever the menu is very straight forward and easy to use. Click here to view the menu without any style. And as you can see below the source isn't that tricky to understand either.
-
<div id="spritemenu">
-
</ul>
-
</div>
Applying style
With the CSS added it transforms the simple UL list to a graphic menu. View here. As you can see most of it is fairly basic.
-
div#spritemenu {
-
height: 50px;
-
width: 400px;
-
font-size: 9px;
-
background-image: url(menu.gif);
-
overflow: hidden;
-
}
-
-
div#spritemenu ul li {
-
display: inline;
-
margin: 0px;
-
padding: 0px;
-
}
-
-
div#spritemenu ul li a {
-
display: block;
-
position:relative;
-
height: 50px;
-
}
-
-
div#spritemenu ul li a:hover {
-
background-image: url(menu.gif);
-
}
-
-
div#spritemenu ul {
-
margin: 0px;
-
padding: 0px;
-
list-style-type:none;
-
height: 50px;
-
}
-
-
div#spritemenu span {
-
display: none;
-
}
-
-
div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
-
div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
-
div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
-
div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
-
div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
-
-
div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
-
div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
-
div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
-
div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
-
div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}
The interesting and tricky part is the last part, this is where I set the coordinates for each button. I need to set the width, top, left of the A element and the background position of the image so that each A element displayes the correct background.
-
div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
-
div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
-
div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
-
div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
-
div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
In the hover part it's fairly the same, I need to set the position of the background image to display the correct background when I point at the A element. In both of the cases, hover and non-hover you are free to set what coordinates you wish. So you could have the same hover image for all A elements if you wish, you could also design the menu image in what ever way you want.
-
div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
-
div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
-
div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
-
div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
-
div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}
Summary
As it's every designers dream to use whatever font/image in the menu that he/she wants this is a very good solution that gives all the benefits of a designed menu and at the same time doesn't affect usability or semantics in bad way.
Learn japanese using PHP!
I've developed a small PHP script that can act as your own personal hiragana and katakana tutor. What it does is simply displaying a number of random romaji like "n go ho yu do wo pe hi chi ko" and then you simply write the answers on a paper. If you do not know the correct kana just press "Answers" and you'll get them!