HTML and CSS

Mac bar

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2006

Posts: 66

Reputation: Racoon200 is an unknown quantity at this point

Solved Threads: 1

Racoon200

Offline

Junior Poster in Training

Mac bar

Feb 25th, 2007

I want to do a bar with images and that each, when mouse-overed, they will grow, just like in mac os x. Very fluid.
If that can't be done, then It would also work that these images grew on mouse over, but from 20% to 100% of size. No fluid movement.

Mac os x bar:
http://youtube.com/watch?v=QBNGA_2GKdY
first seconds of video.

Also it would be cool than when clicked, they jump, just like in mac.
:cheesy:

•

Join Date: Oct 2006

Posts: 1,311

Reputation: vishesh is on a distinguished road

Solved Threads: 36

vishesh

Offline

Nearly a Posting Virtuoso

Re: Mac bar

Feb 26th, 2007

Do you want it to be done with JavaScript, err... i suggest flash would be better.

•

Join Date: Nov 2006

Posts: 66

Reputation: Racoon200 is an unknown quantity at this point

Solved Threads: 1

Racoon200

Offline

Junior Poster in Training

Re: Mac bar

Feb 26th, 2007

Well, i dont know. Woudn't flash last to long to load?
I want it with javascript because then I could add icons myself. I don't have flash. I don't plan to buy it. I don't plan to take the risk of downloading it in limewire.

Thanks for the help, now...Do you know any js?

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Mac bar

Feb 26th, 2007

This is quite fun code to write. Here's an easy example; it will give a 'snapping' non fluid transition between sizes.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
function grow(what)
{
	what.style.width="80px";
	what.style.height="80px";
} 
function shrink(what)
{
	what.style.width="50px";
	what.style.height="50px";
} 
</script>
<style type="text/css">
td.icon_container
{
	width:100px;
	height:100px;
	text-align:center;
}
img.icon
{
	border:solid 2px black;
	width:50px;
	height:50px;
}
</style>
</head>
</body>
<table class="icons">
<tr>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function grow(what)
{
	what.style.width="80px";
	what.style.height="80px";
} 
function shrink(what)
{
	what.style.width="50px";
	what.style.height="50px";
} 
</script>
<style type="text/css">
td.icon_container
{
	width:100px;
	height:100px;
	text-align:center;
}
img.icon
{
	border:solid 2px black;
	width:50px;
	height:50px;
}
</style>
</head>
</body>
<table class="icons">
<tr>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
</tr>
</table>
</body>
</html>

This is a nicer example. it will give a smooth adjustable slide between sizes. The code takes full advantage of javascripts 'late property binding' abilities; something I particularly like about javascript.

Both examples make use of the nature of table cells (x-y alignment) abilities. You could probably do this without tables using auto margins.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
 
/**
* Change these at your will.
*/
var SIZE_BIG = 80;
var SIZE_SMALL = 40;
var SIZE_INITIAL = SIZE_SMALL;
var ANIM_SPEED = 5;
 
/**
* 'Timer task' function; will keep on creating timeouts
* for the parameter object until its 'present_size' and
* 'go_to' properties are equal.
*
* \todo You should put a 'range check' rather than an
* absolute zero check. You'll find, if you change the
* what.present_size -= 1 and what.present_size += 1 lines
* to inc/dec by 2 and then try to go to an odd numbered
* size from an even numbered size, that you get a strange
* vibration effect. That's why I've 'hard coded' the 
* inc/dec values (i.e. not made them global 'constants')
*/
function _size(what)
{
	if(what.present_size > what.go_to)
	{
		what.present_size -= 1;
		setTimeout(function(){_size(what);},ANIM_SPEED);
	}
	else if(what.present_size < what.go_to)
	{
		what.present_size += 1;
		setTimeout(function(){_size(what);},ANIM_SPEED);	
	}
	what.style.width = what.present_size + "px";
	what.style.height = what.present_size + "px";
}
/**
* Function to make sure that if a parameter object
* DOESN'T yet have a runtime 'present_size' property,
* that one is created and set to the initial size constant
*/
function _size_check(what)
{
	if(what.present_size == null)
	{
		what.present_size = SIZE_INITIAL;
	}
}
/**
* Interface functions; these should be the only functions 
* you need to call from... 'outside' so to speak..
*/
function grow(what)
{
	_size_check(what);
	what.go_to = SIZE_BIG;
	_size(what);
} 
function shrink(what)
{
	_size_check(what);
	what.go_to = SIZE_SMALL;
	_size(what);
}
 
</script> 
<style type="text/css"> 
td.icon_container
{
	width:100px;
	height:100px;
	text-align:center;
}
img.icon
{
	border:solid 2px black;
	/*Should be the same as the script INITIAL_SIZE constant's value*/
	width:40px;
	height:40px;
}
</style> 
</head> 
</body> 
<table class="icons"> 
<tr> 
<td class="icon_container"> 
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/> 
</td> 
<td class="icon_container"> 
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/> 
</td> 
<td class="icon_container"> 
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/> 
</td> 
</tr> 
</table> 
</body> 
</html> 
<html>
<head>
<script type="text/javascript">

/**
* Change these at your will.
*/
var SIZE_BIG = 80;
var SIZE_SMALL = 40;
var SIZE_INITIAL = SIZE_SMALL;
var ANIM_SPEED = 5;

/**
* 'Timer task' function; will keep on creating timeouts
* for the parameter object until its 'present_size' and
* 'go_to' properties are equal.
*
* \todo You should put a 'range check' rather than an
* absolute zero check. You'll find, if you change the
* what.present_size -= 1 and what.present_size += 1 lines
* to inc/dec by 2 and then try to go to an odd numbered
* size from an even numbered size, that you get a strange
* vibration effect. That's why I've 'hard coded' the 
* inc/dec values (i.e. not made them global 'constants')
*/
function _size(what)
{
	if(what.present_size > what.go_to)
	{
		what.present_size -= 1;
		setTimeout(function(){_size(what);},ANIM_SPEED);
	}
	else if(what.present_size < what.go_to)
	{
		what.present_size += 1;
		setTimeout(function(){_size(what);},ANIM_SPEED);	
	}
	what.style.width = what.present_size + "px";
	what.style.height = what.present_size + "px";
}
/**
* Function to make sure that if a parameter object
* DOESN'T yet have a runtime 'present_size' property,
* that one is created and set to the initial size constant
*/
function _size_check(what)
{
	if(what.present_size == null)
	{
		what.present_size = SIZE_INITIAL;
	}
}
/**
* Interface functions; these should be the only functions 
* you need to call from... 'outside' so to speak..
*/
function grow(what)
{
	_size_check(what);
	what.go_to = SIZE_BIG;
	_size(what);
} 
function shrink(what)
{
	_size_check(what);
	what.go_to = SIZE_SMALL;
	_size(what);
}

</script>
<style type="text/css">
td.icon_container
{
	width:100px;
	height:100px;
	text-align:center;
}
img.icon
{
	border:solid 2px black;
	/*Should be the same as the script INITIAL_SIZE constant's value*/
	width:40px;
	height:40px;
}
</style>
</head>
</body>
<table class="icons">
<tr>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
</tr>
</table>
</body>
</html>

Images are empty with borders so you can see what's going on, if you src them, then the image will scale to it's element's size.

I hope that's enough to start you making your own amusing Javscript animathingies... Code's tested on Opera 9 and Firefox 2. Let me know back if there are IE oddities...

The 'jumping' shouldn't be too hard, but it would detract from what is otherwise simple example code, so I'll leave that up to you to research...

Plato forgot the nullahedron..