Get the size of the window cross-browser way

Hello everyone!

I'm sorry for a little bloggin break, but just because there are only few visitors that read this blog, so I guess it makes it ok then :)

Today I will spread a little knowledge about cross-browser window properties. The example how this system works is here, feel free to copy-paste the code if needed. You can also try this example in different browsers, this works even in IE5 and IE6 :))) Drag the window to see data changing.

Every webdeveloper has come to a situation when he/she needs to get the height and width of the window area. This seems quite a simple task if you check the W3C recomendations, however it becomes more difficult when you try to implement it.

The difficulty lies in cross-browser implementation. W3C tells us to use this:

for height:

var height_of_the_window = window.outterHeight;

for width:

var width_of_the_window = window.outterWidth;

I have to say, it works great in Mozzila, Google "Chrome" and Safari, however The Microsoft Internet Explorer does not give any sign of beeing alive this way.

What Microsoft specialists give us is:

for height:

var height_of_the_window = document.body.clientHeight;

for width:

var width_of_the_window = document.body.clientWidth;

So now we have 2 ways of getting the size of the window. However, I was searching the internet for even more ways of how to get it and I found that you can get/set the size of the window, by doing this ( believe me, I don't get it when and how it works):

for height:

var height_of_the_window = document.documentElement.clientHeight;

for width:

var width_of_the_window = document.documentElement.clientWidth;

So basically if you don't want to write a long function for different browsers to find/set the size of the window, you can simply use my tip:

declare height and width variables consisting all of these methods!

So actually you can do it like this:

function get_window_size(){

var height_of_the_window = window.outerHeight || document.body.clientHeight || document.documentElement.clientHeight;

var width_of_the_window = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth;

}

The sign || in javascript means "or", so actually this sentence goes like this:

The height of this window is: the mozilla way or microsoft internet explorer way or some other way.

So actually by doing this, you admit, that your variables might differ in different browsers and by doing this you can create powerfull cross-browser applications.

Hope, you enjoyed reading this,

Cheers!

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

Flash Custom Website Preloader: Rotating in Mask

Hey!

Recently I've been working on one project, related to flash and I found some stuff you might find interesting.
This time we will concentrate on the custom website preloaders. What is a PRELOADER ?
A preloader is a small program ( or even a function ) whick is executed while the page is loading ( if your page is loading slowly then you should definetly use a preloader), for example: "the page is loading.... please wait". If you work with flash, then I'm pretty sure you are going to use some looping animation insted of text for your preloader.
So this time I will show you some simple and interesting way how to create a website preloader in Flash.
Ok, let's assume we have a website with black background and before the page loads up, we want to show some simple animation. Lets start with opening Flash program. Follow the next steps:

1. Go Modify>Document. Choose black as your background;
2. Go Modify>Document. Choose width and height. In this tutorial I use 300x300.
3. Now let's create a simple square with a square drawing tool;
   
4. Press F8 and click "OK". The F8 button is a shortcut to converting a simple drawing to a symbol. We need that because we will need to write reffer to this drawing in our actionscript.
5. Click on the new square symbol and open the properties menu ( the bottom of your screen);
6. Click "Instance name" and name it "turner".
7. Now open the filter menu. Press "+" and then press "blur". You can choose the amount of blur effect yourself.

Ok so now we are done with the animation. The only thing left to do is changin the center of our symbol. To do so:

1. Double click this symbol. When you are inside the symbol, choose a simple pointer tool and drag your square a bit right untill you see the cross, pointing the center of a symbol beeing outside the symbol.
   
   
2. Duoble click anywhere to go to the main Scene.

Ok, now see the layers panel. Add one layer more above the current one. Right Click it and choose "Mask". Now here's the trick: only objects drawn in this "mask" layer will be seen to a visitor, so you can get creative and draw any kind of object. I chose a half-circle.
When you are done, Add one more level above the Mask level. Then Click the first frame and open the Actions Panel (window>Actions or F9).

Now add the following code to this frame in the Actions panel:

turner.onEnterFrame = turn;
//this line tells flash what to do when the turner object is loaded: assigns a function "turn".


function turn(){
turner._rotation +=10;
}
//this is the function which tells "turner" to turn around by 10 degrees each //time the function is evaluated.

OK, now you can add one more layer above and put some text in your object. I chose "We are loading...."

Now press "CTRL + ENTER" and you should see something like this:







So this is it, you have just created you first preloader.In the next post I will disccuss how to make your preloader show up before the page loads and how to play it till the page is loaded.
I hope you enjoyed reading this, feel free to ask if you need some help. Good luck in creating preloaders.

Using CSS properly (tutorial)

This first post is due to the events that happened last week. Last week I took part in my university bloggers' event, called "Tnklas". You can find more information about this event in it's official website.
What we will be talking about is how to use CSS properly. This post should be read by people who have a basic understanding of CSS already. If you don't know what is CSS, please, feel free to learn it at W3schools.
We all well know that CSS technology is for creating the style of an internet application. It is important to know the influence of good and bad CSS in your website because the bad usage of CSS may create a design of your website very beautiful, but very slow and irritating. So in this post I am talking about the best practices how to use CSS in order to make your website beautiful and well-working.
So, to start with, what is the proper usage of CSS?
CSS, broadly speaking, is that kind of information, which is recieved by the visitors browser only once - the first time visitor visit your page. So the proper usage of CSS is the one which would be loaded fast and only once. So how can we do it?
Basically there are 3 ways of how you can use CSS:

1. Giving a css "style" property for every element of your page;
2. Putting a css "style" property in ever page of your website in a „head“ section;
3. Loading an external style sheet.

The proper usage of CSS is the third option. Even though we all sometimes use the mixed type of CSS, the basement of CSS should be the third option. Lets take an example of how a browser acts if your website uses the first CSS option: A browser while loading your page, sees multiple "style" properties in each section or even an atribute. It means, that every paragraph, every line or „ h1“ tag has its own style. Not only it takes time to create that kind of page but it also takes lots of time to load it. If your website is built in the second way, it is much better, because the head section holds all of the style elements in one place. It gives a browser ability to load a page faster and since the „head“ section is in above of the page it ensures the CSS is loaded before the page shows up to a viewer. However, the problem is that, this CSS in „head“ section is downloaded each time by the browser when a user clicks different page on the same website. It takes time and it is useless. So, how to work like a professional?

1. Build your website. Try to create a unique style of your website but not of every page;
2. Create an external CSS document .css ( you can create it with MS Notepad);

3. Put your website and a .css document in the server in one folder.
4. Relate your websites .html pages with .css document (wondering how to do it? Go to www.w3schools.com and see the CSS tutorials ).

So here's what we got now:


We have multiple pages with the same style of a website. Now, if we want to change the color of body, we don't need to go to every page of a website and declare new changes. All we have to do is simply change the external .css file, to change one line of it! The browser is simply downloading your CSS style document only once and if a viewer wants to see the next page, it loads much faster, better and is loaded before the page shows up.