that new yahoo.com personal assistant script...

**Guillaumeb** · 05-17-2006, 10:27 PM

May be some of you have been using the new yahoo.com homepage

there is this cool personal assistant that automatically expands a windows when mousing over the tab

I would like to use this thing on my website.

As i'm sort of a newbie i was not able to fully understand the stuff of the YUI at developer.yahoo.net

can anyone make a similar thing over here?

thank you

**shachi** · 05-18-2006, 06:51 PM

Are you talking about something like this??

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grow Layer Animation</title>
<script type="text/javascript">
function animateHeight(id, size){
el = document.getElementById(id);
var h_size1 = el.offsetHeight;
if (h_size1 < size){
el.style.height = h_size1 + 2+"px";
setTimeout("animateHeight('" + id + "','" + size + "')", 1);
}
}
function decreaseHeight(id, size){
el = document.getElementById(id);
var h_size1 = el.offsetHeight;
if (h_size1 > size){
el.style.height = h_size1 - 2 + "px";
setTimeout("decreaseHeight('" + id + "','" + size + "')", 1);
}
}
</script>
<style type="text/css">
#Layer1 {
position:absolute;
width:500px;
height:0px;
z-index:1;
left: 256px;
top: 80px;
background-color: #996600;
}
</style>
</head>
<body>
<a href="javascript:animateHeight('Layer1','50');">Open</a>
<a href="javascript:decreaseHeight('Layer1','0');">Close</a>
<div id="Layer1"></div>
</body>
</html>

**Guillaumeb** · 05-19-2006, 09:08 AM

Oh cool man!! thanks I think your script will be my favorite toy next week

**shachi** · 05-20-2006, 07:51 AM

You are very welcome!!

**Guillaumeb** · 05-20-2006, 11:10 AM

What I dont understand is that the colored shape is setup in head section of the page

What I would like is to click on a picture and that it opens up the information about it or the viewing options etc...

So instead of clicking on the "open" link people would click on the picture thumbnail

**shachi** · 05-20-2006, 02:24 PM

I think that you haven't analysed the code well, you see that animates a layer and if you want people to click on an image and get it's description then you need some visibility tricks and to make the picture itself a hyperlink or use a <span onclick="blah blah"> tag around the picture.
That's all I can tell you, if you didn't get it still then I may be able to give u an example.

Code:

<span onmouseover="javascript:animateHeight('Layer_Name', 500);document.getElementByID(text_id).visibility = 'visibile'" onmouseover="javascript:decreaseHeight('Layer_Name', 0);document.getElementByID(text_id).visibility = 'visibile'"><img src="IMG_NAME"></span>
<div id="Layer_Name">
<p id="text_id">Some description ...</p>
</div>

Code in the blue can be changed.
It must work but if it doesn't then I might post the whole code.
But please try to analyze the code before you take any step.

**Guillaumeb** · 05-20-2006, 03:02 PM

well yeh i'm kind of a newbie in this game and that's why i'm trying to learn rom dd's script. I currently use the one over here:
http://dynamicdrive.com/dynamicindex17/tabcontent.htm

and i was thinking that the new yahoo hompeage page personal assistant script was more or less similar but added a mouse over effect that automatically open's up the content instead of clicking on the link

Oh you know....If I dont have the head and the body example in front of my eyes i cant even dream of editing the script