Home
1
tabbed accordion friends list style Wed Oct 21, 2009 2:09 pm
danilodeleon
Administrative Team
Number of posts : 491
Age : 32
Location : manila
Job/hobbies : ...layout designing lolz
Humor : fixing the data:))
WARNING LEVEL :
CONTRIBUTION POINTS :
Registration date : 2008-11-17
Reputation : 2
Points : 335
This code came from ajaxscript but i just modified it and add some animation scripts.
The purpose of this code is to make your friendster friends list a unique styled one.
PREVIEW OF THE TRICK
click
have you seen it?
now how to make that one step by step
1. create a .html file or open your notepad and place this code
color legend to be edit:
red =your own friendster user id
green =image url of your friend
blue =name of your friends :)
after making your .html file
lets go now to the final step
2. how to add this on your friendster profile use this code and place this on your js file extension
replace PUT HERE THE LINK OF YOUR .HTML FILE with your own made .html file
thats it and your done:)
The purpose of this code is to make your friendster friends list a unique styled one.
PREVIEW OF THE TRICK
clickhave you seen it?
now how to make that one step by step
1.
create a .html file or open your notepad and place this code- Spoiler:
<html>
<head>
<head>
<title>Tabbed Accordion</title>
<style type="text/css">
body{
background-color:transparent;
filter:alpha(opacity=60);
-moz-opacity:0.6;opacity: 0.6;
color:red;
}
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position:relative;
width:200px;
}
.AccordionTitle
{
height:20px;
overflow:hidden;
cursor:pointer;
font-family:Arial;
font-size:8pt;
font-color:#ffffff;
font-weight:bold;
vertical-align:middle;
text-align:center;
background-repeat:repeat-x;
display:table-cell;
background-image:url('http://www.bigbaer.com/css_tutorials/assets/silver10.jpg');
-moz-user-select:none;
}
.AccordionContent
{
height:0px;
overflow:auto;
display:none;
}
.AccordionContainer
{
border-top: solid 1px #C1C1C1;
border-bottom: solid 1px #C1C1C1;
border-left: solid 2px #C1C1C1;
border-right: solid 2px #C1C1C1;
}
</style>
<script type="text/javascript">
var ContentHeight = 200;
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';
setTimeout("animate("
+ new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ?
null : document.getElementById(openingId);
var closing = (closingId == '') ?
null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = ContentHeight + 'px';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight =
Math.round((timeLeft/TimeToSlide) * ContentHeight);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height =
(ContentHeight - newClosedHeight) + 'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}
</script>
</head>
<body>
<center>
<center><div style=\"width:100%;text-align:center;\"><font size="3" color="gold"> Hi welcome...</font></div><br></center>
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
danz I
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<a href="http://www.friendster.com/friends.php?uid=FS USERD ID HERE" target="_blank"><img src="IMAGE URL HERE" width="220" height="150" alt="friend" /></a>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
ivan:)
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
<a href="http://www.friendster.com/friends.php?uid=FS USERD ID HER" target="_blank"><img src="IMAGE URL HEREwidth="220" height="150" alt="friends" /></a>
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
ii.herl
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<a href="http://www.friendster.com/friends.php?uid=FS USERD ID HER" target="_blank"><img src="IMAGE URL HERE" width="220" height="150" alt="Milford Sound in New Zealand" /></a>
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
bajon
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
<a href="http://www.friendster.com/friends.php?uid=FS USERD ID HER" target="_blank"><img src="IMAGE URL HERE" width="220" height="150" alt="Milford Sound in New Zealand" /></a>
</div>
<div onclick="runAccordion(5);">
<div class="AccordionTitle" onselectstart="return false;">
мa¡¡сaн . ü
</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
<a href="http://www.friendster.com/friends.php?uid=FS USERD ID HER" target="_blank"><img src="IMAGE URL HERE" width="220" height="150" alt="Milford Sound in New Zealand" /></a>
</div>
<div onclick="runAccordion(6);">
<div class="AccordionTitle" onselectstart="return false;">
m i k a y
</div>
</div>
<div id="Accordion6Content" class="AccordionContent">
<a href="http://www.friendster.com/friends.php?uid=FS USERD ID HER" target="_blank"><img src="IMAGE URL HERE" width="220" height="150" alt="Milford Sound in New Zealand" /></a>
</div>
</div>
<br><br>
<center><div style=\"width:100%;text-align:center;\"><a href="http://www.friendster.com/friends.php?uid=FS USERD ID HER" target=\"_blank\"><b>View All (27270) friends</a></div></center>
</center>
</center>
</body>
</html>
color legend to be edit:
red =your own friendster user id green =image url of your friend blue =name of your friends :)after making your .html file
lets go now to the final step
2.
how to add this on your friendster profile use this code and place this on your js file extension- Spoiler:
- var charles='<div><iframe src='PUT HERE THE LINK OF YOUR .HTML FILE' frameborder='0' style='border:none;' width='100' height='100' scrolling='no'></iframe></div>';
replace
PUT HERE THE LINK OF YOUR .HTML FILE with your own made .html filethats it and your done:)
