PDA

View Full Version : 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??



<!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.


<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 :)

Twey
05-20-2006, 03:11 PM
Specifying fonts in pixels is a bad idea... you should probably use a percentage measurement.

shachi
05-20-2006, 03:14 PM
Then I suggest that first you understand the script and see what the initial code does.;)

shachi
05-20-2006, 03:15 PM
Specifying fonts in pixels is a bad idea... you should probably use a percentage measurement.
I am sorry but I could not get which "font specification" are you talking about.
Can you please make this clear to me?? Thank you. :)

Twey
05-20-2006, 03:18 PM
Good question... ignore me :p
I somehow managed to read "height" as "font-size"... now I'm slightly worried about my mental state.

shachi
05-20-2006, 05:46 PM
Never mind, that's happens to me a lots of times too. ;)

Guillaumeb
05-22-2006, 01:55 PM
OK this page might clarify what I am looking for.
http://photos.guillaumeb.com

In order to get the photo album informations I have to click on the thumbnail. i would like the informations to appear on mouse over. Again, like the new Yahoo.com personal assistant.

shachi
05-22-2006, 03:49 PM
Here is the final code... customize it as you want it to be:


<!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;
}
#description {
visibility: hidden;
}
#somepicture {
width:500px;
height:0px;
background-color: #996600;
cursor: hand, pointer;
}
</style>
</head>
<body>
<span id="somepicture" href="javascript:void(0)" onmouseover="setTimeout('animateHeight(\'Layer1\',\'50\')', 100);setTimeout('document.getElementById(\'description\').style.visibility = \'visible\'', 100);" onmouseout="setTimeout('decreaseHeight(\'Layer1\',\'0\')', 1000);setTimeout('document.getElementById(\'description\').style.visibility = \'hidden\'', 1000);">Open/Close</span>
<div id="Layer1">
<span id="description">This is a test this is at eest</span>
</div>
</body>
</html>


Hope it helped :D

Guillaumeb
05-23-2006, 06:32 AM
thanks a lot I will try to use your script for my page

shachi
05-23-2006, 06:56 AM
Like i said earlier you are always welcome.:D