Coding Mix

How to change title bar message using Javascript

noreply@blogger.com (Csabi) — Fri, 12 Nov 2010 06:31:14 PST

For those who doesn`t know what is the title bar: The title bar is the top part of the browser window where the website`s (page) title is shown: In this lesson I will show you how the title bar message (text) can be changed using only Javascript.

The title bar message can be changed easily using the following property:

document.title

And the easiest way to use it is:

But there are many other, funny ways to change the title bar message:

Changing the title bar message

This is done by the following script:

<input type="text" id="newtitle" value="New title bar message..."/>
<input type="button" value="Change title" onclick="changetitle(document.getElementById('newtitle').value);"/>

<script type="text/javascript">
function changetitle(changeto){
document.title = changeto;
}
</script>

Dynamic title bar message

Title 1:
Title 2:
Title 3:
Title 4:
Title 5:

Or loop from 0% to 100%

Here is the script for the first example (loop through the 5 titles):

<input type="text" id="newtitle1" value="--"/><br />
Title 2:<input type="text" id="newtitle2" value="----"/><br />
Title 3:<input type="text" id="newtitle3" value="------"/><br />
Title 4:<input type="text" id="newtitle4" value="--------"/><br />
Title 5:<input type="text" id="newtitle5" value="----------"/><br />
<input type="button" value="Start" onclick="clearTimeout(timeout);starttitle();"/>
<input type="button" value="Stop" onclick="clearTimeout(timeout);"/>

<script type="text/javascript">
var i=1;
var timeout;
function starttitle(){
document.title = document.getElementById('newtitle' + i).value;
i++;
if(i > 5){
i=1; //When the 5th title is used go back to the first one
}
timeout = setTimeout(starttitle,1000); //1000 is the number of milliseconds between each change
}
</script>

And here is the script for the second example (loop from 1% to 100%):

<input type="button" value="Start" onclick="clearTimeout(timeout);starttitle();"/>
<input type="button" value="Stop" onclick="clearTimeout(timeout);"/>

<script type="text/javascript">
var number=0;
var timeout;
function starttitle(){
document.title = number + "%";
number++;
timeout = setTimeout(starttitle,500);
if(number > 100){
clearTimeout(timeout); //When reach 100% stop and set number back to 0
number = 0; //Without this line the script will be able to run only once
}
}
</script>

These where just some examples, but using this property you can change the title bar in almost any way. If you have any question or somethings is not working then let me know it in a comment!

Searching in a list with Javascript

noreply@blogger.com (Csabi) — Fri, 10 Sep 2010 08:07:00 PDT

In this tutorial I will show you how to create a script what searches in a list (li or table) for the inputted text at each press of a button. Because I can`t explain better what the script can do, here is an example:

Coffee
Milk
Chees
Tea
Orange
Sugar
Honey
Milkshake

How it works:
The script loops through all the 'li' elements from the document and searches for the ones with class "search". From these 'li' elements it resizes to 0 pixels the ones what don`t contain the searched word, and it resizes to its original size the ones what contain the searched word:

<html>
<head>

<style>
.search {
overflow:hidden;
}
</style>

</head>
<body>

<input type="text" id="searchbar" onKeyUp="searchit();"/>
<ul style="list-style:none;margin:0px;padding:0 15px;">
<li class="search">Coffee</li>
<li class="search">Milk</li>
<li class="search">Chees</li>
<li class="search">Tea</li>
<li class="search">Orange</li>
<li class="search">Sugar</li>
<li class="search">Honey</li>
<li class="search">Milkshake</li>
</ul>

<script type="text/javascript">
function searchit(){
var keyword = document.getElementById('searchbar').value;
for(var i=0;i<document.getElementsByTagName('li').length;i++){
if(document.getElementsByTagName('li')[i].className == 'search'){
if(document.getElementsByTagName('li')[i].innerHTML.toLowerCase().indexOf(keyword.toLowerCase()) == -1){
document.getElementsByTagName('li')[i].style.height = '0px';
}
else{
document.getElementsByTagName('li')[i].style.height = '20px';
}
}
}
}
</script>

</body>
</html>

Note: The list must have the overflow:hidden; property!

Creating a Javascript Slideshow part 6

noreply@blogger.com (Csabi) — Sun, 29 Aug 2010 05:44:16 PDT

Before reading this please read the first parts of the tutorial.
This is the last part of this tutorials series. In this part of the tutorial we will finish the slideshow.

Positioning the buttons in a better way
Let`s make the slideshow controls look better. My idea is to place the "Prev" button in the left corner, the "Slow Medium Fast" button in the middle of the div and the "Next" button in the right corner, each with a margin of 5px. Here is how I did:

<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;z-index:-1;text-align: center;">
<a onClick="changeimage(-1);" style="float:left;margin-left:5px;">Prev</a>
<span id="startslideshowbutton" style="margin:0 1px;"><a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);">Slow</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);">Medium</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);">Fast</a></span>
<a onClick="changeimage(1);" style="float:right;margin-right:5px;">Next</a>
</div>

Showing the current image number
This will be the last step in finishing the slideshow. Now we will place a message like this: 3/5 ,the number of the current image/images number.
I think it would be the best to place it in the right upper corner of the slideshow with a black transparent background (so we will need two div`s, one for the background and one for the numbers, just like at the controls).
First let`s create the two divs:

Place them right before the loadingimage div.
For now the two divs are empty and are placed in the left corner. Because the position:absolute; property we can`t use the float:right; property, instead we will need to use the margin-left: property, but we need to calculate the distance required.
We will do this by adding some code to the changeimage function. Here will come the code what will change the numbers, too. This entire piece of code will look like this:

var requiredmargin = parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('imagesnumberbg').style.width);
document.getElementById('imagesnumberbg').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').innerHTML = currentimage + '/' + (images.length - 1);

After all of these 6 parts of creating and styling the slideshow my code looks in the following way, yours should be the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;background:black;color:white;" onMouseOver="showcontrols();" onMouseOut="hidecontrols();">
<div id="imagesnumberbg" style="background:black;position:absolute;width:50px;height:20px;filter:alpha(opacity=60);opacity:0.6;margin-left:400px;"></div>
<div id="imagesnumber" style="position:absolute;width:50px;height:20px;text-align:center;"></div>
<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>
<div id="slideshowimage" style="height:301px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrolsbg" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;background:black;filter:alpha(opacity=60);opacity:0.6;z-index:-1;"></div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;z-index:-1;text-align: center;">
<a onClick="changeimage(-1);" style="float:left;margin-left:5px;">Prev</a>
<span id="startslideshowbutton" style="margin:0 1px;"><a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);">Slow</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);">Medium</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);">Fast</a></span>
<a onClick="changeimage(1);" style="float:right;margin-right:5px;">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
var requiredmargin = parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('imagesnumberbg').style.width);
document.getElementById('imagesnumberbg').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').innerHTML = currentimage + '/' + (images.length - 1);
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
document.getElementById('loadingimage').style.zIndex = 1;
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
document.getElementById('loadingimage').style.zIndex = -1;
}
function showcontrols(){
document.getElementById('slideshowcontrols').style.zIndex = 1;
document.getElementById('slideshowcontrolsbg').style.zIndex = 1;
}
function hidecontrols(){
document.getElementById('slideshowcontrols').style.zIndex = -1;
document.getElementById('slideshowcontrolsbg').style.zIndex = -1;
}
function slideautomatically(timeinterval){
changeimage(1);
timeout = setTimeout(function(){slideautomatically(timeinterval)},timeinterval);
}
function stopsliding(){
clearTimeout(timeout);
document.getElementById('startslideshowbutton').innerHTML = "<a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);\">Slow</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);\">Medium</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);\">Fast</a>";
}
changeimage(0);
</script>

</body>
</html>

And here is the slideshow: Start it
(In the preview the Stop slideshow button is not working because the new window is written by Javascript and it can`t format well all the quotes - but else it works :D )
If something is not working or just have a question, don`t hesitate, ASK!

Javascript - get elements by class

noreply@blogger.com (Csabi) — Thu, 09 Sep 2010 14:48:23 PDT

I will show you two ways to get an element by class: using getElementsByTagName or creating a getElementByClass function:

1. Using getElementsByTagName
This code loops through each element of the page and check`s it`s class name:

for(var i=0;i<document.getElementsByTagName('*').length;i++){
if(document.getElementsByTagName('*')[i].className == 'YOUR-CLASS'){
document.getElementsByTagName('*')[i].style.backgroundColor = 'black';
}
}

2. Creating a getElementsByClass function
This code creates the getElementsByClass function what returns an array of elements with the selected class name:

Use it in the following way to select only the element with the specified index:

document.getElementsByClass('YOUR-CLASS')[0].style.backgroundColor = 'black';

Or use this if you want to select each element:

for(var i=0;i<=document.getElementsByClass('YOUR-CLASS').length;i++){
document.getElementsByClass('YOUR-CLASS')[i].style.backgroundColor = 'black';
}

Note: Javascript is case sensitive

Creating a Javascript Slideshow part 5

noreply@blogger.com (Csabi) — Sun, 29 Aug 2010 05:32:06 PDT

Before reading this please read the first parts of this tutorials: Part 1
In this part we will add an automatic sliding option to our slideshow, whit 3 speed levels: slow, medium, fast.

Let`s make it:

Sliding the images automatically
To slide the images automatically we need a function (name it slideautomatically) what will start the changeimage function again and again with a delays. We will make it using the setTimeout funtion and we will adjust the speed by changing the delay (in milliseconds) between each run of the function. This function will be triggered by the three buttons: Slow, Medium and the Fast buttons using onClick events. Each of these buttons will have as parameter the delay between each run of the function in milliseconds. Name tha parameter timeinterval
The function should look like this:

function slideautomatically(timeinterval){
changeimage(1);
timeout = setTimeout(function(){slideautomatically(timeinterval)},timeinterval);
}

Note: I have used a variable to store the timeout, because later will need to clear it.
Now we need to create the buttons what will start this function:

<span id="startslideshowbutton"><a onClick="slideautomatically(8000);">Slow</a> <a onClick="slideautomatically(4000);">Medium</a> <a onClick="slideautomatically(2000);">Fast</a></span>

Place it between the Prev and Next buttons.

After editing it my code look like this:

Now the images are changed automatically but now we need a way to stop it.

Stop it
To stop the automatic sliding we will need first a button to stop it by triggering a function. Call this function stopsliding. We will place this button in the place of the "Slow Medium Fast" button by changing the content of the startslideshowbutton span when the automatic sliding starts. We will change the content of the startslideshowbutton span by changing the onClick event of the "Slow Medium Fast" buttons from this:

onClick="slideautomatically(8000);"
onClick="slideautomatically(4000);"
onClick="slideautomatically(2000);"

to this:

onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);"
onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);"
onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);"

Note: The " character is used to replace a double quote. Because this is an inline Javascript event we can`t use the \" character instead.

Now we just need to create the stopsliding function:

function stopsliding(){
clearTimeout(timeout);
document.getElementById('startslideshowbutton').innerHTML = "<a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);\">Slow</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);\">Medium</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);\">Fast</a>";
}

The above function first clears the timeout so stops the automatic sliding and then it replaces the "Stop slideshow" button with the "Slow Medium Fast" buttons.

Here is my code, yours should look the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;background:black;color:white;" onMouseOver="showcontrols();" onMouseOut="hidecontrols();">
<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>
<div id="slideshowimage" style="height:301px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrolsbg" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;background:black;filter:alpha(opacity=60);opacity:0.6;z-index:-1;"></div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;z-index:-1;">
<a onClick="changeimage(-1);">Prev</a>
<span id="startslideshowbutton"><a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);">Slow</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);">Medium</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);">Fast</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
document.getElementById('loadingimage').style.zIndex = 1;
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
document.getElementById('loadingimage').style.zIndex = -1;
}
function showcontrols(){
document.getElementById('slideshowcontrols').style.zIndex = 1;
document.getElementById('slideshowcontrolsbg').style.zIndex = 1;
}
function hidecontrols(){
document.getElementById('slideshowcontrols').style.zIndex = -1;
document.getElementById('slideshowcontrolsbg').style.zIndex = -1;
}
function slideautomatically(timeinterval){
changeimage(1);
timeout = setTimeout(function(){slideautomatically(timeinterval)},timeinterval);
}
function stopsliding(){
clearTimeout(timeout);
document.getElementById('startslideshowbutton').innerHTML = "<a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);\">Slow</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);\">Medium</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);\">Fast</a>";
}
changeimage(0);
</script>

</body>
</html>

If something is not clear ASK ME!
Continue to part 6

Creating a Javascript Slideshow part 4

noreply@blogger.com (Csabi) — Thu, 26 Aug 2010 08:59:47 PDT

Before reading this please read the previous parts:
Creating a Javascript Slideshow part 1
Now the slideshow can change the images, it can resize them and place them in the center. Now let`s make it more stylish: I will change the background color of the slideshow div to black, but you can leave it white if you like. (if you change it to black don`t forget to set the text color to white).

Loading...
Another way to make it look better is to show a loading... message while the image is loaded: Something like this (with transparent background):

Placed over the image in the center. I think it will look great. :D so let`s code it.

First create a div with the id loadingimage inside the slideshow div BEFORE the slideshowimage div. I`we capitalized before because this is important and you will see immediately why. Place inside your div the loading message, (I will use Loading...) and change the background color to black.

Now the loading message is displayed at the top of the slideshow and it`s always visible. Now we need to overlay it on the image and place it in the center. We will do this using only CSS, using the z-index property. If two or more thing are overlaying then there need`s to be and order to specify what element is in the front and what is behind. The element with the highest z-index value is in the front. This property works only with positioned elements, so set the position of the div to absolute. Now set the height and the width, I will use 100px width and 20px height, and use the text-align:center; property to center the text inside the div.
Now my loadingimage div look in the following way:

<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;">Loading...</div>

After setting the position to absolute the div overlays on the image, but now we need to place it in the center. We will make this using the margin property.
Here is an easy way to calculate the pixels required to place the image in center:

w - the width of slideshowimage div
h - the height of slideshowimage div
wl - the width of loadingimage div
wh - the height of loadingimage div

Space required from left:
(w - wl) / 2
Mine is
(400px - 100px) / 2 = 150px

Space required from top:
(h - hl) / 2
Mine is
(300px - 20px) / 2 = 140px

Now we need just to create a snippet what will make the above calculations and change the margin property. This can be changed using the .style.margin property. This piece of code needs to be placed before the functions, at the beginning of the code, because the divs size will not change while the script is running and so we don`t need to change the margin property each time we change the image. This snippet should look like this:

document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');

Note: The parseInt() converts a string to an integer (number), this is needed because the .style.height and the .style.width properties will return strings like "400px" not numbers like "400" - so if we want to make mathematical calculations we need to convert them to numbers.

Now that the loading message is in the center we just need to make it transparent and to display it only when it`s needed.

Making the loading message div transparent
We will make it transparent using CSS. For a better browser compatibility we will use two CSS properties in the following way:

<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;margin:150px 140px;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>

Show the loading message only when needed
To do this we will use the waitimage function. In this function we will change the z-index value of the loading message so it will be on the top of the image. This code should look like this:

document.getElementById('loadingimage').style.zIndex = 1;

Place it after the lines what check if the image is complete or not, because if the slideshow is showing the same image multiple times it will nod be loaded again so we don`t need to show the loading message.
After the loading message is displayed we need to hide it again when the image is loaded. To do this we just need to set the zIndex of the loading message to -1 using the same method as above, but this code will need to be placed in the positioningimage function after the image has been placed in the right place.

My code look in the following way, your should look the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;background:black;color:white;">
<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>
<div id="slideshowimage" style="height:301px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
document.getElementById('loadingimage').style.zIndex = 1;
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
document.getElementById('loadingimage').style.zIndex = -1;
}
changeimage(0);
</script>

</body>
</html>

Styling the controls
We will make the controls (the slideshowcontrols) to look much better and it will be displayed only on mouseover, we will overlay the slideshowcontrols div on the images (like the loadingimage div) and we will show it only when the cursor is over the image.

So let`s start:
Overlaying the controls on the images
This is very simple, we will use only CSS:
Add the following properties to the slideshowcontrols div:
- position:absolute;
- height: 20px; (you can use any other value)
- margin: -20xp 0; (use the same value as at the height but with a - in front)
It should look like this:

Making it transparent
We will make it transparent, but using a better method:
At the loading message the text is transparent too, this is not a problem for the loading message, but the controls will look better with clear white buttons. To get rid of this problem we will create a second div, with the id slideshowcontrolsbg with a black background and we will make this div transparent instead of slideshowcontrols.

Create the slideshowcontrolsbg and place it right before the slideshowcontrols div.
Now add all the CSS properties from the slideshowcontrols to it (don`t remove the properties from slideshowcontrols) and add the following properties, too:
- background: black;
- filter:alpha(opacity=60);
- opacity:0.6;
Now the two divs should look like this:

Display the controls only on mouseover
Now we will make the controls to be displayed only when the cursor is over the image. We will make this using the z-index property to hide the controls when it`s needed.
First add the z-index:-1; CSS property to the slideshowcontrolsbg and slideshowcontrols divs. This will hide the controls. Now we need to make it to reappear when the cursor is over the image. To do this we will create a function called showcontrols what will set the z-index of the two divs to 1 and it will be triggered by the onMouseOver even on slideshow div. The funtion should look like this:

function showcontrols(){
document.getElementById('slideshowcontrols').style.zIndex = 1;
document.getElementById('slideshowcontrolsbg').style.zIndex = 1;
}

Now we just need an another function what will hide the controls when the cursor is moved away. I will name this function hidecontrols, this will be very similar to the showcontrols function, but this will set the z-index values to -1 and it will be triggered by the onMouseOut event.

After making all the changes my code look like this, your should look the same:

If you have any question don`t hesitate, ASK!
Continue to part 5

Creating a Javascript Slideshow part 3

noreply@blogger.com (Csabi) — Sat, 14 Aug 2010 13:21:22 PDT

Before reading this read the first and second parts of the tutorial.
Placing the image in the div
In the previous part of the tutorial we had replaced the content of the slideshowimage div with the value of currentimage.

Now, we need to show the image with that number instead of the currentimage number. This is very simple:
In HTML an image look like this:

And, we have an array of images, called images, and we have the number of the image what needs to be displayed. So our image should look like:

To do this, just replace

document.getElementById('slideshowimage').innerHTML = currentimage;

with

document.getElementById('slideshowimage').innerHTML = '<img src="' + images[currentimage] + '"/>';

Save your code, and see how it works. Well, it has some problems, the larger images are displayed only partially, currentimage can be a higher the the number of images in the array, etc... But, I will show you how to solve them, so first let`s resize the images.

Resizing the images

Using CSS we can set the width and height of an image, but if we set only the width the browser will calculate automatically the height to keep the aspect ratio. The width of our images needs to be the same as the width of the divs. I`we used 400px for the divs, so I could use 400px for the width of the images, but if I will add the Slideshow to my blog and I will need to resize the divs, I will need to edit the code, too. To avoid this we will use a simple Javascript property, .style.width, which will check the width of the divs at each time the script starts.
After editing it should look like this:

document.getElementById('slideshowimage').innerHTML = '<img width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';

Save your code and notice how the images are resized.
With one problem solved, let`s solve an another one, too:

currentimage higher than the number of images

If you have x images and you press the Next button x times, then the script will try to show the x+1 image or if you are at the first image and press the Prev button the the script will try to display the 0th image.
Solving this is a very simple task. Each time the showimage function starts we need to check if the value of currentimage is < 1 or > then the existing images number before displaying the image. If currentimage is smaller than 1, than we need to increase it to the number of existing images, if it`s bigger than the number of images we will need to decrease it to 1.
To do this we need to know the number of images we have. The simplest way is to count them, but I will recommend the .length property which will show the number of images + 1, so the real number of images will be that result number-1.
Here is my code after editing it, your should look the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
document.getElementById('slideshowimage').innerHTML = '<img width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
}
changeimage(0);
</script>

</body>
</html>

Positioning the images

Probably you have noticed that the height of the images is not the same, from this reason the slideshowimage div has different sizes for each images and this moves down or up the slideshowcontrols div and this is a problem and we need to solve it.
First we need to set the height of the slideshowimage div. I will use height:300px;, but you can use any value. This value will remain the same, it won`t change even if the image height is bigger.
This solution seems good, but this brings some problems:
- if the image height is bigger than the div`s height than only the top part of the image will be visible
- if the image height is smaller, than the image will be placed on the top part of the div and the bottom of the div will be blank.
With one solution we can solve both problems: centering the image in the div:
- if the image is bigger than the center of the image will be shown
- if the image is smaller than it will be shown in the center of the div

I think this could be solved with some CSS tricks, but using only CSS can cause problems in some browser. To solve this we will need to use CSS but only the margin property what is supported by almost all browsers. The margin property sets the distance between two objects. In our case the distance between the image and the top of the slideshowimage div.
To do this we need to know exactly the distance required to center the images. This can be easily calculated:
- Extract the height of the image from the height of the div (e.g: 400px - 360px or 400px - 420px) - this is the extra height
- Divide the extra height with 2 (e.g: 40px/2 or -20px/2)
- The result number is the needed distance (e.g: 20px or -10px)
And, yes, the margin can be a negative number.

Now, there`s an another problem, we need to know the height of the image (after it`s resized by the browser). The problem is that the height of an image can be get only after the image is loaded. We will get the height of the images using the .height javascript property, which returns 0 or the height of the div in what is placed in if the image is not loaded completely, so we need to wait the image to load.

We will check if the image is loaded using a function which will run until the image is loaded. Because we don`t want to freeze the computer we will delay the function by 250 milliseconds at each run. This means it will check the image 4 times a second. We will delay the function using the setTimeout property.

To get the height of an image we need the id of that image, so we need to add an id to each image. The id can be the same for all images because the images are not displayed at the same time: I will use the id image.
To do this just edit the line what changes the content of the slideshowimage div in the following way:

document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';

After editing the above line let`s create the function (call it waitimage)what waits the images to load. We will check if the image is loaded or not using the .complete property. To test it first just alert the height of the images.

function waitimage(){
if(document.getElementById('image').complete){
alert(document.getElementById('image').height);
return;
}
setTimeout('waitimage()',250);
}

Don`t forget to start the above function from the end of showimage function.

Now, we have all the data to place the images in position. We just need to create a function (call it positioningimage) what will be triggered when the image is loaded and will calculate space needed between the image and the top of the div to center it.
NOTE: When you are getting the height of a div using .style.height the result is a string like 400px not a number like 400. To get a number use the parseInt() function.
Here is my code after adding all these things to it. Your code should look the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="height:300px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
}
changeimage(0);
</script>

</body>
</html>

Test it out with different div heights.

Sorry, I know that this part of the tutorial was harder. I recommend you to read it multiple times and if you have any question than don`t be afraid to ASK! I have highlighted the most important changes for a better understanding.

Continue to Part 4

Creating a Javascript Slideshow part 2

noreply@blogger.com (Csabi) — Fri, 30 Jul 2010 04:04:02 PDT

Before reading this read the first part. Now, let`s continue:
Add the images
The images URL will be stored in an array, you can use any number of images. I will name this array images, and I will add 5 images to it:

var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";

Note: The images will be displayed in the order you add them to the array.
Note: Place the array before the changeimage function.
The images can have any size.

Now we need to create a variable what will hold the number of the current image, with initial value of 1, because the first image will be the one with the index 1. Name this variable currentimage

var currentimage = 1;

Place the variable before the changeimage function.

Changing the images
Now begins the real fun :D. The concept is simple: Always the image with the number equal to currentnumber will be shown. When the Next button is pressed the value of currentimage will be increased by 1, or decreased if Prev is pressed.
I will do this by simple adding a parameter (named change) to the changeimage function. The prev button`s parameter will be -1 and the next`s parameter will be 1, and the parameter value will be added to currentimage. First to test the code, change the alert("ok"); to alert(change);After the above changes my code look like this, your code should look the same:

The above code should alert -1 if you press Prev and 1 if you press Next

Changing currentimage value
Now, remove the alert(change); line from the function and instead add the following lines:

currentimage += change;
alert(currentimage);

This is very simple, first the value of currentimage is increased by -1 or 1 and then the final value is alerted.

Display the images
Now, that we have the number of the image to show, we need only to display them.
This can be easily done by using the innerHTML property, which can replace the content of a div with whatever you want. First to test it, replace the alert(currentimage); line from your code with the following one:

document.getElementById('slideshowimage').innerHTML = currentimage;

How it works: This line will search for an element with the id
slideshowimage, and it will replace it`s content with the value of currentimage
Now, you code will not alert the current image number, it will write it inside the slideshowimage div.

Starting the function to show the first image, too
Probably you have noticed that the current image number is displayed only after a button is pressed. This is because the function which writes the number starts only at the push of a button. To solve this we need to start the function immediately after the page is loaded.
To do this place the following line after the changeimage function (after } ):

changeimage(0);

Notice that the parameter is 0, so this will not increase the value of currentimage to start from image 1

Now my code look like this (your should look the same):

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
function changeimage(change){
currentimage += change;
document.getElementById('slideshowimage').innerHTML = currentimage;
}
changeimage(0);
</script>

</body>
</html>

Continue to the third part of the tutorial.

How to create a Slideshow without jQuery, just Javascript and HTML

noreply@blogger.com (Csabi) — Sun, 29 Aug 2010 05:40:07 PDT

In this tutorial I will show you how to create a simple but effective Slideshow using only HTML, CSS and Javascript. The concept of this slideshow is simple: to change the image the content of a div will be changed using innerHTML. But, this is far enough for now, because I want to write this tutorial to be understood by everybody, with or without previous experience in Javascript.

Now, you probably ask "Where I need to write the code?" - Well you can write it in any HTML editor like Adobe Dreamweaver or you can write it simply in Notepad (this is what I will describe in this tutorial), because HTML and Javascript don`t require a compiler like C++.
Just open Notepad and write the following code in a blank file:

Now click on File >> Save as...At the file name type in any name, but end it with .html, (e.g.: slideshow.html), and at Save as type select All files
To preview your page just open your file in a browser like Firefox or Internet Explorer - it should be a blank page.
It`s useful to preview you code from time to time, because if you get an error at the end you will need to recheck the whole code.

Now, you can remove the  line, just remember that the code needs to be placed between the <body> and </body> tags.

Creating the div`s
We need 3 div`s (a div is like and invisible box):
- one to hold the entire slideshow (the following 2 div`s) - call it slideshow (id="slideshow")
- another one to hold the images (one at a time) - slideshowimage
- and one to hold the control buttons (next, prev...) - slideshowcontrols

Note: All of these divs will have fixed width, I will use 400px, but you can use any size, because the script will detect any size, but make sure that you use the same width for all of them!
Use for all of the divs the overflow:hidden; option.
I recommend to use inline CSS (using the style="" tag)
Here is my code:

Start working with Javascript
Write the following code bellow the above code (before </body>):

These are the starting and the ending tags of Javascript.

Now create between those tags function called changeimage and inside alert "ok":

Now we need something to trigger the function. The images will change on pressing a button: Prev, Next or by clicking the image, so first let`s add the two buttons to the slideshowcontrols div:
I will use a tags with onclick event:

Save your file and click on one of the buttons - it should alert "ok".
If you have followed with attention each step your code should look like this:

Continue to the second part of the tutorial