Increasing and decreasing size of an element with the use of Javascript

Hello again!

Today, I have one little surprise for you ;)
This time I was working with Javascript and I found out that it is usefull to talk about transitions.
The transition effect is mostly related to something happening in a correct sequence, for example:
You can create a text field and if a user clicks a special button, the textfield expands. This is pretty simple to do using getElementById() function, however what if you need this text field to grow slowly, not just to pop up in a second?
This post is about the "div" area which is controlled by a button, click here to see the example.

The problem here is that we need to create a script that would be setting the different height of the "div" few times a second.
You can see the script I use below ( read the comments to understand it better):
The main thing what we do here is:

1. we create global variables menu_height, how_fast_expands, how_fast_shrinks and menu_expanded. With menu_expanded, we check if we have already set the "div" to expand or if we have set it to start to shrink.
2. we create 3 functions. First function which is evaluated when a user clicks a button ( which id="changer") is find_menu_state(). This function checks the menu_expanded variable and chooses which function to evaluate next. Next function evaluted (if menu_expanded = 0) is expand_menu(). This function first sets the button's value, then counts the menu_height variable, changes the menu_expanded state and starts to repeat a few times a second. The third function is evaluted when the "div" area is already expanding and if the user clicks a button once again. This function does the same as expand_menu(), just an opposite way.

And the surprise is put in the example of this post, here. Feel free to test it, works in all types of navigators ;)
cheers ;)

HTML + XML menu's for often modifying

Hello again!

You know, sometimes, especially with World Wide Web you might become a real psycho, the real mad insanity. That is usually because the webmasters must always think 5 or 10 steps ahead. That is crucial for the CMSs, because you definetly need to think about easy and well organised menus. This is why I am writing this post.

This time I have faced a really simple, but also a very hard-to-solve problem. When you create a website, you are pretty lucky, if you get the one time creation menus with links, for example:

a simple website about a company. So in this case you can have simple menu, like: "about us", "works", "products" and so on...

But lets imagine, that you have a website, with a menu, which needs to be modify very often?

If you have a menu of tutorials, which is often modified (new entries appear), what is the best way to create this menu?

Actually I came up with 4 possible actions:

1. you can modify your menu by changing the entire code of your website ( this simply sucks :) );
2. to use a content management system ( it is the best sollution, however you have to create it or buy it so lets see the alternatives);
3. to create a menu which would get the links from a MYSQL database ( this is quite advanced, but well working. The only problem is that whenever the page loads up, it needs to connect to database, if the connection is broken, the user is left without the menu );
4. to create a menu which get the links directly from a XML document ( this is the best ).

What I'm talking about now is the fourth option. Why is it the best solution for your website? Mainly there are 4 advantages:

1. XML document must be placed in the same folder as your website, so actually there is no way the menu won't work. If the website is loaded, the menu is loaded anyways;
2. XML works much faster than the connection through PHP to a MySQL database;
3. For your menu, you can use the same XML sitemap which you submit to Google or other search engines;
4. To modify the menu you onlu need to copy-paste a few lines of code.

So how it works? Actually it is pretty simple. You need to create a simple "div" area in your HTML where you want to put your dynamic links. After that you need to create a simple XML document with menu properties and links. Now join them using the JavaScript.

In the picture below, you can see the basic strategy how this system works. You can also find information on how to join HTML with XML with JavaScript here. Tutorials about how to create a simple XML document are here.

If you get any problems with this, you can write me. In my opinion this type of menu is the best if the content of it is beeing changed very often.

Thanks for reading, cheers!

How to get letters uppercased directly in XHTML form with JavaScript

Welcome again!

The thing I will be talking about is how to control letters in HTML forms. Click here for the example.

I've recently been working on a small project and surprisingly I needed to do something, what I have never faced before. What we will be talking about this time, is how to control letters in HTML forms, for example:

you might have just launched a website with a contact form where visitors leave their name. You know that a lot of people think differently and what they think "name" stands for is different too. So, one person might enter his name as "John Smith", the other one as:"joHn SMith". We all see the difference and if you need this kind of information to be official and standart, you need to make a filter which would re-create the names written and send them to the server in an apropriate form ( like "John Smith" with the first letters uppercassed).

So in this post I will tell you how I have handeled this kind of situation. To make this kind of filter I have used two main functions in Javascript:

• split();
• substring();

Here is the full screenshot of the function in the"head" section:

( click for a larger view)

You can read the comments in the source code to understand the code better. I've also found a great tutorial page for this particular lesson here. Feel free to test this code here.

Hope, I helped you a bit, 'couse to me it all took a while since I haven't been doing anything related to this. Keep reading!

Cheers, A