Enjoy forums? Start your own community for free.
zIFBoards - Free Forum Hosting
Welcome to Paperfailsnail15. We hope you enjoy your visit.


You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Name:   Password:


Welcome Click!
Board Info Click!
Staff Click!
Awards Click!
Links Click!
Credtis Click!


 

 Rules & Code
paperfailsnail
Posted: Apr 15 2009, 10:52 PM


Administrator


Group: Admin
Posts: 4
Member No.: 1
Joined: 15-April 09



Info

Alright, I didn't manually write the script, I only altered it from the version found here. I edited a few functions and made it compatible and pretty with IF :]


Top
paperfailsnail
Posted: Apr 15 2009, 10:54 PM


Administrator


Group: Admin
Posts: 4
Member No.: 1
Joined: 15-April 09



Code

CSS:
CODE

.click {display:inline; margin-left:20px;}
.clickconto { padding:5px;}
.clickcont {display:none;padding:5px;}
#links a {padding-left:10px; padding-right:10px;}

.clickwrap h1 {font-size:18px; text-transform:uppercase; font-weight:normal; margin-bottom:-5px;}



Javascript:
CODE

<script language="javascript">
var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function runAccordion(index, AccHeight)
{
ContentHeight = AccHeight;
var nID = "menu" + index;
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>




Board header:
CODE


<% BOARD HEADER %>
<% NAVIGATION %>

<div class="tableborder">

<div class="titlemedium"><!-----LINKS FOR DROP DOWN MENU------>

<!-----WELCOME------>
<div onclick="runAccordion(1,210);" class="click"> Welcome Click!
</div>
<!-----BOARD INFO------>
<div onclick="runAccordion(2,210);" class="click"> Board Info  Click!
</div>
<!-----STAFF------>
<div onclick="runAccordion(3,210);" class="click">
Staff Click!
</div>
<!-----AWARDS------>
<div onclick="runAccordion(4,210);" class="click">
Awards Click!
</div>
<!-----LINKS------>
<div onclick="runAccordion(5,220);" class="click">
Links  Click!
</div>
<!-----CREDITS------>
<div onclick="runAccordion(6,60);" class="click">
Credits Click!
</div>
<br></div>

<div class="row1" id="links" style="padding-left:5px;">
<!-----QUICKLINKS------> Quickies:
<a href="">Rules</a>
<a href="">Plot</a>
<a href="">Canons</a>
<a href="">Face Claim</a>
<a href="">Advertise</a>
<a href="">Application</a>
<a href="">Updates</a>
<a href="">Our Advert</a>
</div>

<div id="menu1" class="clickconto">

<!-----WELCOME TEXT------>

<table><tr><td width="100%" valign="top">

<h1>Welcome!</h1>
Hey! This is a neato little welcome box! If you type too much here, your content will bleed, so keep it short and sweet kiddies! This is where you can post your fancy smancy welcome message. Never fear, you can go into more detail in the 'Board Info' Section. You'll notice if you click on it, this area will disappear(if you opened it manually, if not board info will open underneath. In that case, just click the welcome image to get rid of this info ^^) and you'll get to see all the board info like information! I don't know, whatever the heck you'd like XD<br>
Maybe you could also post some chatbox rules here while you're at it?<br>
And just so you know! This topbar is <b>COMPLETELY IE COMPATIBLE. :]</b>
</td>
<td rowspan="2">

CBOX HERE (Mine was 300 x 125 px)

</td></tr><tr><td valign="bottom">

<!---QUICK LOGIN--->

<center><form style='display:inline' action="http://YOUR BOARD URL HERE/index.php?amp;act=Login&amp;CODE=01&amp;CookieDate=1" method="post">
<strong>Quick Log In</strong>
<input type="text" class="forminput" size="10" name="UserName" onfocus="this.value=''" value="User Name" />
<input type='password' class='forminput' size='10' name='PassWord' onfocus="this.value=''" value='ibfrules' />
<input type='submit' class='forminput' value='Go' />
</form></center>

</td></tr></table>
</div>

<div id="menu2" class="clickcont">
<!-----BOARD INFO TEXT------>
<table width="100%"><tr><td valign="top">

<h1>Plot Information</h1>
here is some info about our board's plot

</td><td valign="top">

<h1>Setting Information</h1>
here is some info about our board's setting

</td></tr></table>
</div>

<div id="menu3" class="clickcont">
<!-----STAFF TEXT------>
<table width="100%"><tr><td valign="top">

<h1>Administration</h1>
Admin 1<br>
<b>Contact:</b><br>
<b>Characters:</b><br>

</td><td valign="top">

<h1>Moderation / Staff</h1>
Mod 1<br>
<b>Contact:</b><br>
<b>Characters:</b><br>

</td></tr></table>

</div>

<div id="menu4" class="clickcont">
<!-----AWARDS TEXT------>
<table width="100%"><tr><td valign="top">

<h1>Character of The Month</h1>
here is some info about our COTM

</td><td valign="top">

<h1>Member Of The Month</h1>
here is some info about our MOTM

</td><td valign="top">

<h1>Ship Of The Month</h1>
here is some info about our SOTM

</td></tr></table>
</div>

<div id="menu5" class="clickcont">
<!-----ADVERTISEMENTS TEXT------>
<table width="100%"><tr><td valign="top" width="120px">

<h1>Our Info</h1>
<a href="http://z8.invisionfree.com/paperfailsnailnine/index.php?"><img src="http://i40.tinypic.com/nx01dy.jpg" width="88px" height="31px"></a>
<br>
<textarea width="100%" readonly="readonly" onclick="this.focus();this.select()" rows="5" cols="18" style="overflow: hidden;">
<a href="http://z8.invisionfree.com/paperfailsnailnine/index.php?"><img src="http://i40.tinypic.com/nx01dy.jpg" width="88px" height="31px"></a>
</textarea><br>

<a href="">Get Listed?</a>

</td><td valign="top">

<h1>Our Affiliates:</h1>
<div style="width:100%; height:180px; overflow:auto;">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
here is where you can put your affie buttons
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>
</td></tr></table>
</div>

<div id="menu6" class="clickcont">
<!-----CREDITS TEXT------>


<center><a href="http://z3.invisionfree.com/paperfailsnail15/index.php?act=idx">Accordian menu topbar</a> put together by Paperfailsnail of <a href="http://forums.redcarpetrebellion.net/index.php?">RC&R</a>.</center>

</div>

</div><br>



<% BOARD %>
<% STATS %>







OH WAIT! Did you want a clean code with no pre added content? HERE YOU GO!

board Header:
CODE


<% BOARD HEADER %>
<% NAVIGATION %>

<div class="tableborder">

<div class="titlemedium"><!-----LINKS FOR DROP DOWN MENU------>

<!-----WELCOME------>
<div onclick="runAccordion(1,210);" class="click"> Welcome Click!
</div>
<!-----BOARD INFO------>
<div onclick="runAccordion(2,210);" class="click"> Board Info  Click!
</div>
<!-----STAFF------>
<div onclick="runAccordion(3,210);" class="click">
Staff Click!
</div>
<!-----AWARDS------>
<div onclick="runAccordion(4,210);" class="click">
Awards Click!
</div>
<!-----LINKS------>
<div onclick="runAccordion(5,220);" class="click">
Links  Click!
</div>
<!-----CREDITS------>
<div onclick="runAccordion(6,60);" class="click">
Credits Click!
</div>
<br></div>

<div class="row1" id="links" style="padding-left:5px;">
<!-----QUICKLINKS------> Quickies:
<a href="">Rules</a>
<a href="">Plot</a>
<a href="">Canons</a>
</div>

<div id="menu1" class="clickconto">
<!-----WELCOME TEXT------>

text

</div>

<div id="menu2" class="clickcont">
<!-----BOARD INFO TEXT------>

text

</div>

<div id="menu3" class="clickcont">
<!-----STAFF TEXT------>

text

</div>

<div id="menu4" class="clickcont">
<!-----AWARDS TEXT------>

text

</div>

<div id="menu5" class="clickcont">
<!-----ADVERTISEMENTS TEXT------>

text

</div>

<div id="menu6" class="clickcont">
<!-----CREDITS TEXT------>


<center><a href="http://z3.invisionfree.com/paperfailsnail15/index.php?act=idx">Accordian menu topbar</a> put together by Paperfailsnail of <a href="http://forums.redcarpetrebellion.net/index.php?">RC&R</a>.</center>

</div>

</div><br>



<% BOARD %>
<% STATS %>
Top
paperfailsnail
Posted: Apr 15 2009, 11:18 PM


Administrator


Group: Admin
Posts: 4
Member No.: 1
Joined: 15-April 09



Modifications?

So there are some things about it you want to change? Here's how you change a couple parts I thought might be common questions:

How do I change the height of the content divs?

Well you see this part of the code?
QUOTE
<!-----WELCOME------>
<div onclick="runAccordion(1,210);" class="click"> Welcome Click!
</div>


(1,210)
The 1 is the ID of the div that it opens(which doesn't matter for this haha), and the 210 is a px measurement, that's how tall that div will open!
So if you changed the 210 to say, 300, then the Welcome content would open to be 300px in height!



How do I start with the welcome box closed?

QUOTE

<div id="menu1" class="clickconto">

<!-----WELCOME TEXT------>

change the blue text (clickconto) to clickcont
Top
DealsFor.me - The best sales, coupons, and discounts for you

Topic Options



Hosted for free by zIFBoards* (Terms of Use: Updated 2/10/2010) | Powered by Invision Power Board v1.3 Final © 2003 IPS, Inc.
Page creation time: 0.1300 seconds | Archive