If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

JavaScript has a handy, and fun, little thing called document.title, all it does is change the title, but it’s handy in certain situations. One of these situations is when dealing with AJAX, I was fetching a post, but the title remained the same. I quickly learned about document.title, and all my troubles were gone. All it takes is:
document.title = document.titleform.newtitle.value;
That would work if I had a form named titleform with a field called newtitle. To best implement this, it should be stored in a function, let’s say change():

function change(title)
{
document.title = title;
}

This code will change the title to whatever we want. *evil* I want it to update every keystroke, so we’re going to use the method onkeyup:

<form>
New Title: <input type=‘text’ onkeyup=‘change(this.value);’ />
</form>

Yea, I know, it’s really that simple. This is a special keyword, it means what you think, this! So it means this value, which is our new title. Heh, now, go off and entertain yourself with this.

• 0 Comments

Confirming with JavaScript is actually quite easy. You can just use a simple if/else statement with it and then have something happen in each situation.

What we’ll be using is the function confirm(). The confirm function is set as a variable initially then you can use the associated variable to check the outcome of the confirmation. On the user end they get a small alert window with your question asked in it and either an “OK” or “Cancel” option.

So, to begin we need to define our confirm pop-up. For this example we’ll ask the user if they want a cookie.

var wants_a_cookie = confirm(“Would you like a cookie?”);

That will put up the window, however there will be no consequence whether they press OK or Cancel. That’s where the if/else comes into play. The confirm() function when acknowledged will return either TRUE or FALSE. What we can do is just have a situation for each option. For this example I’ll just have an alert pop up telling them if they or if they don’t want a cookie.

if( wants_a_cookie ){
alert(“Hooray! You want a cookie!”);
}
else{
alert(“Oh no, you don’t want a cookie!”);
}

And that’s it! If you want the entire code to copy into your file it would look like this:

<script language=“JavaScript” type=“text/javascript”>
var wants_a_cookie = confirm(“Would you like a cookie?”);
if( wants_a_cookie ){
alert(“Hooray! You want a cookie!”);
}
else{
alert(“Oh no, you don’t want a cookie!”);
}
</script>

• 0 Comments

One would think that in order to get the current year with JavaScript, you just have to do date_obj.getYear. That’s logical, becuase to get the day it’s getDay, and month is getMonth, but JavaScript likes to be mean. (how rude!) Using getYear will return only a two digit number, for 2006, it’s 16, but we acutally want 2006. To get this, you need to use getFullYear.

I’ve always found this weird, but definitily something good to know so that when you try to get the year with JS and end up with some random number, you don’t pull your hair out.

• 0 Comments

At your site do you have a registration form? Want to check for password length before the form is submitted? You can do this easily with JavaScript and a little alert box.

First of all here’s a little sample form you might have:

<form name=“form_name” method=“post”>
Username:<br /><input type=“text” name=“username” /><br />
Password:<br /><input type=“password” name=“password” /><br />
<input type=“submit” name=“submit” value=“Submit” />
</form>

That’s just a simple form with a username, password, and submit field. Now what we’re going to do is add one more attribute to our password field to make it look something like this:

<input type=“password” name=“password” onblur=“javascript:checkPassword()” />

The onblur attribute activates it’s value when you unselect the object in question. So, when we unselect the password field, the javascript function “checkPassword()” will be called. Now we have the HTML, however we have to make checkPassword() actually do something, so we have to define a javascript function in the head of our document.

Anywhere between your and tag, you would add something like this:

<script language=“JavaScript” type=“text/javascript”>
<!–//
function checkPassword(){password = document.form_name.password.value; //Gets the value of the form element “password” in the form named “form_name”
if(password.length < 6){ //If the password length is less than 6
alert(“Please enter a password of 6 characters or more”); //Alert that it needs to be 6 or more
}

}
//–>
</script>

You can easily change the number 6 to whatever number you want, and it will always alert when you blur away from the element If you have a different name for either your form or your field you have to change the JavaScript accordingly, although I’m pretty sure you could probably figure out how to do that?

And that’s it, pretty simple You could also do some more complex things with it such as check for certain characters using Regex.

• 0 Comments

Many times for navigation menus you want to have sub-items of a specific category, but don’t want them to be shown all the time. There is a much easier way to do this than to have something server-side handle this and refresh the page, that way is to use JavaScript.

Surprisingly, this is easy. The only JavaScript we need is a simple function that takes the id of the element to toggle, than displays or hides it according to the current setting. Doing this involves simply changing the display method to either none or block.

Let’s see some code:

function toggle(id)
{
if(document.getElementById(id).style.display == “none”)
{
document.getElementById(id).style.display = “block”;
}
else
{
document.getElementById(id).style.display = “none”;
}
}

This function takes the specific id of the item we want to toggle, than decides wether to make it visible or hidden using a simple if conditional. Below is a full page using this:

<html>
<head>
<title>Toggle Visibility</title>
<style type=“text/css”>
.subitems
{
margin-left:5px;
}
</style>
<script type=“text/javascript”>
function toggle(id)
{
if(document.getElementById(id).style.display == “none”)
{
document.getElementById(id).style.display = “block”;
}
else
{
document.getElementById(id).style.display = “none”;
}
}
</script>
</head>
<body>
<h2>Categories</h2>
<a href=‘#’ onclick=“toggle(’php’);”>PHP</a>
<ul id=‘php’ style=‘display:none;’ class=’subitems’>
<li>Articles</li>
<li>Tutorials</li>
</ul>
<br /><br />
<a href=‘#’ onclick=“toggle(’css’);”>CSS</a>
<ul id=‘css’ style=‘display:none;’ class=’subitems’>
<li>Articles</li>
<li>Tutorials</li>
</ul>
</body>
</html>

This script implements the toggle function by having two lists, set to display:none at first, toggle their visibility by clicking a link. As you can see, each list has a specific id which is used in the toggle function (php, and css).

• 0 Comments

More and more sites are using the label element in their forms, which is always a cool thing. Basically, you enclose the label tag around the text which tells about the current input, which could be for a username, E-mail address, or search term. By clicking the label, you focus that field. It’s pretty basic, but it adds to the user’s experience on your site. To know which input to focus, the label element takes 1 attribute, for, which is the ID of the input. Here’s an example:

<form method=“post” action=“?”>
<label for=“username”>Username:</label> <input type=‘text’ id=‘username’ /><br /><br />
<label for=“password”>Password: </label> <input type=‘password’ id=‘password’ /><br /><br />
<input type=“submit” value=“login” />
</form>

• 0 Comments

Quite possibly one of the most important things you need to keep in mind when working on a larger coding project is to stay organized. Organization can either make or break your project, so I’ve decided to share a few tips I use to try and keep organized.

Indentation
Although to many it is an obvious thing to do, there is far too much code out there that doesn’t use indentation at all or correctly. It is very easy to make a long script in notepad with absolutely no indentation, however, one of the most common mistakes you can make while coding is forgetting to close a brace (curly bracket; { }), and this is only made easier by not indenting your code. Indenting allows you to see all the layers in your code much more easily, producing much nicer looking code, not to mention being a lot easier to read.
Here is an example of how you can best use indentation in your code

statement ( condition )
{
//One indentation in
statement ( condition )
{
//Two indentations in
}//Close a layer
statement ( condition )
{
//Into another layer
}//Close it
}//Close the original layer
Commenting
Another very important habit you should have with your coding is always commenting what you’re doing. It helps you find where something occurs in the script, why that might be occurring, as well as telling anyone else reading your script what you were trying to accomplish. This makes it easier to debug things, as well as get help with your scripts. I generally comment to signify new sections of code, what some more confusing functions are doing, what variables are for, etc.

Variable names
It is also very important that your variables are well named. Knowing how to name variables descriptively yet in just a few characters is a very great skill to have in my opinion, and is unfortunately one I’m not the greatest at (ha ha). You want to be able to communicate to whoever is reading the script what that variable does as well as anything else you want associated to it such as the data type (int, txt, etc.), or some other classification you deem useful for your particular script. I also find it very helpful to capitalize separate words or abbreviations in your variable names (or any other names for that matter) to give you results like intYear or txtMessage.

Arrays are your friend!
This is almost a continuation of the variables section, however I thought it was important enough to have it’s own section. Arrays are not only for storing common array data such as rows of a table. They can be used to your advantage for common use variables that you want to be associated in some way. You could use it the same way as variables by storing more information in just the name. Say for example you had some key numerical values that were used throughout your script; you could use the array num[] or whatever you want then store your data in parts of the array: num[’varKey’] = 129837981. It also lets you classify your variables in a little more detail so you could have the same name for more than one value like: my[’name’] and your[’name’].

Follow some sort of protocol
In general your script should all be structured similarly. You should have a set method for most things like where you put your comments, (above, after, before, below, whatever you want), how far you indent (tabs or a number of spaces), how you put your braces for statements (same line or next line usually), and any other little thing that you probably do habitually anyway without noticing it. Whatever you do though, you should keep it all the same so you can keep everything looking neat and tidy!

• 0 Comments

Elements are not limited to only one class, you can easily declare multiple ones, all you need to do is seperate the classes with a space.

<style type=‘text/css’>
.highlight
{
background-color:yellow;
}.heavy
{
font-weight:bold;
}
</style>
<p>The most important thing to remember is <span class=‘heavy highlight’>my birthday</span>!</p>

That easy!

• 0 Comments

Centering divs isn’t quite the same as centering normal html elements. You cannot use the align attribute, you have to define margins like this:

div#some_id
{
margin-left: auto;
margin-right: auto;
width: 500px;
}

You could then get a horizontally centered div 500px wide!

**Note: using the align attribute will only center the html inside the div.

• 0 Comments

List-O-Matic has always been my favorite of Accessify’s tools. It takes you through a few simple steps that allow you to quickly and easily make some professional, W3 compliant CSS navigation. I had used it many times back in the months before I understood CSS and how to use it, haha. Check it out! It’s great not only for use but as a learning tool as well!

• 0 Comments