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:
Jump to PostDo you want it to be done with JavaScript, err... i suggest flash would be better.
Do you want it to be done with JavaScript, err... i suggest flash would be better.
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?
This is quite fun code to write. Here's an easy example; it will give a 'snapping' non fluid transition between sizes.
<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.
<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...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.