[b]Description:[/b]
[i]Accordion Version of Featured Friends
When you clicked a tab, it will show or hide your
friend.[/i]
[b]Accordion Friends[/b]
[b]credits:[/b] Tabalettos
Save as .htm or .php
[quote][b][color=#FF0000]Updated as of APRIL 4 09 , Now with:
Opacity and Provided background image {You may change it anyways}
And also,
You may now change the font color
Other improvements: New loader & Onload Function[/color][/b][/quote]
[spoiler][quote]<html xmlns="http://www.w3.org/1999/xhtml">
<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:[b]red[/b];
}
.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('[b]
http://www.bigbaer.com/css_tutorials/assets/silver10.jpg[/b]');
-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;">
[b]Name fwen 1[/b]
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<a href="[b]FWEN 1 profile url[/b]" target="_blank"><img src="[b]Image fwen 1[/b]" width="220" height="150" alt="friend" /></a>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
[b]Name fwen 2[/b]
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
<a href="[b]FWEn 2 proffy url[/b]" target="_blank"><img src="[b]Image url fwen 2[/b]" width="220" height="150" alt="friends" /></a>
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
[b]Name fwen 3[/b]
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<a href="[b]Fwen 3 proffy url[/b]" target="_blank"><img src="[b]image url fwen 3[/b]" width="220" height="150" alt="Milford Sound in New Zealand" /></a>
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
[b]Name fwen 4[/b]
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
<a href="[b]Fwen 4 Proffy url[/b]" target="_blank"><img src="[b]Image url fwen 4[/b]" width="220" height="150" alt="Milford Sound in New Zealand" /></a>
</div>
<div onclick="runAccordion(5);">
<div class="AccordionTitle" onselectstart="return false;">
[b]Name fwen 5
</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
<a href="[b]Fwen 5 proffy url[/b]" target="_blank"><img src="[b]Image url fwen 5[/b] " 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=[b]FS ID HIR[/b]" target=\"_blank\"><b>View All 10800 friends</a></div></center>
</center>
</center>
</body>
</html>[/quote]
[/spoiler]
Just edit d [b]bold[/b] parts///
[i]Then use the code below for JS extension file[/i]
[quote]//ACCORDION FRIENDS BY XIRUKI
//Credits to: Taballetos
window.addEvent('domready', function() {
var xirukz = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='250' height='310' scrolling='no' src=[b]HTM URL HIR[/b]></iframe>";
document.getElementById('content_6').style.height='100%';
document.getElementById('content_6').style.overflowY='hidden';
document.getElementById('content_6').innerHTML = "<table width='100%'><tr><td align='center'>"+xirukz+"</td></tr></table>";
});[/quote]
screenie weenie
[b]on load[/b]
[img]http://i33.tinypic.com/35mpsgn.jpg[/img]
[b]on click[/b]
[img]http://i38.tinypic.com/k5jeb.jpg[/img]
preview: [url=http://profiles.friendster.com/59211461]RATATATA!!![/url]
[hr]
[i]Other featured friendsstyle[/i]
[b]Buttonized Style[/b]
[b]credits:[/b] Dynaflore org
[spoiler]The first thing to do is to download the code below
[url=http://shiruki.fileave.com/buttonize.htm]CLICK HERE![/url]
[i]then after that, edit the ff:[/i]
[quote]<body bgcolor="[b]#ffffff[/b]" text="#000000" link="#333366" vlink="#333366" alink="#333366" width="210"> <form> <table cellpadding="2" cellspacing="2" border="1"><tr><td align="center" valign="middle" bgcolor="[b]#000000[/b]" width="210"><center><input type="button" value="[b]Name of fwen 1[/b]" onClick="document.images[0].src='[b]IMAGE url fwen 1[/b]'"><input type="button" value="[b]Name of fwen 2[/b]" onClick="document.images[0].src='[b]Image url fwen 2[/b]'"><br><input type="button" value="[b]Name fwen 3[/b]" onclick="document.images[0].src='[b]Image url fwen 3[/b]'"><input type="button" value="[b]Name fwen 4[/b]" onClick="document.images[0].src='[b]Image url fwen 4[/b]'"><br><input type="button" value="[b]Name fwen 5[/b]" onClick="document.images[0].src='[b]image url fwen 5[/b]'"></center></td></tr><tr><td align="center" valign="center" width="220" height="200"><img src="[b]Image ur intro[/b]" width="200" height="190"></td></tr></table> </form> </body>[/quote]
then save as .htm or .php[/spoiler]
[b]screenie weenie:[/b]
[img]http://i33.tinypic.com/o51ba1.jpg[/img]
preview: [url=http://profiles.friendster.com/58896838]XIRUKI.NET[/url]
[hr]
[u]another trik is for recent updates, click en show trick
with current date available
4 js extension!!
copy paste processo...
hirs the coda![/u]
[quote]document.getElementById("content_0").getElementsByTagName("ul")[2].innerHTML=
"<center><iframe style='FILTER: chroma(color=#000000)' allowtransparency='true' width='220' height='145' scrolling='no' src=http://www.freewebtown.com/xiruki/arr.html/usertrack.htm></iframe</center>>";[/quote]
screena:
[img]http://i37.tinypic.com/n5ld1.jpg[/img]
[b]on click[/b]
[img]http://i36.tinypic.com/vgr41d.jpg[/img]
[quote][b]Note:[/b]
For the experts u can put it anywhere... in add box, or any modules.. using friendster div/class[/quote]
[b]credits: Mil Linex[/b]
Last edited by ---xXirukiTepe--- (2009-06-03 11:28:01)