Okay, so...
Because I'm weird like that, when I want a HTML/Javascript code, I google it, and when I come across epic codes, I use it.... and I do save them onto a notepad for future use, so I am going to share them with you.
NOTE: I did not create these codes.
If you want to test these codes out, copy and paste the codes into the HTML TESTER here: http://www.play-hookey.com/htmltest/
-----------------------------------------
1. Tabbed Box
Code:
<style type="text/css">
div.tabBox {}
div.tabArea {
font-size: 80%;
font-weight: bold;
padding: 0px 0px 3px 0px;
}
a.tab {
background-color: #A9D0F5;
border: 2px solid #000000;
border-bottom-width: 0px;
border-color: #0080FF #0080FF #0080FF #0080FF;
-moz-border-radius: .75em .75em 0em 0em;
border-radius-topleft: .75em;
border-radius-topright: .75em;
padding: 2px 1em 2px 1em;
position: relative;
text-decoration: none;
top: 3px;
z-index: 100;
}
a.tab, a.tab:visited {
color:#0080FF;}
a.tab:hover {
background-color: #0080FF;
border-color: #A9D0F5 #A9D0F5 #A9D0F5 #A9D0F5;
color: #A9D0F5;
}
a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
background-color: #9070c0;
border-color: #b090e0 #7050a0 #7050a0 #b090e0;
color: #ffe0ff;
}
a.tab.activeTab {
padding-bottom: 4px;
top: 1px;
z-index: 102;
}
div.tabMain {
background-color: #0080FF;
border: 2px solid #000000;
border-color: #0080FF #0080FF #0080FF #0080FF;
-moz-border-radius: 0em .5em .5em 0em;
border-radius-topright: .5em;
border-radius-bottomright: .5em;
padding: .5em;
position: relative;
z-index: 101;
}
div.tabIframeWrapper {
width: 100%;
}
iframe.tabContent {
background-color: #A9D0F5;
border: 1px solid #000000;
border-color: #0080FF #0080FF #0080FF #0080FF;
width: 100%;
height: 36ex;
}
h4#title {
background-color: #A9D0F5;
border: 1px solid #000000;
border-color: #0080FF #0080FF #0080FF #0080FF;
color: #0080FF;
font-weight: bold;
margin-top: 0em;
margin-bottom: .5em;
padding: 2px .5em 2px .5em;
}
</style>
<script type="text/javascript">//<![CDATA[
function synchTab(frameName) {
var elList, i;
// Exit if no frame name was given.
if (frameName == null)
return;
elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)
if (elList[i].target == frameName) {
// If the link's URL matches the page being loaded, activate it.
// Otherwise, make sure the tab is deactivated.
if (elList[i].href == window.frames[frameName].location.href) {
elList[i].className += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}
function removeName(el, name) {
var i, curList, newList;
if (el.className == null)
return;
newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}
//]]></script>
</head>
<div class="tabBox" style="clear:both;">
<div class="tabArea">
<a class="tab" href="http://site.com/index.php" target="tabIframe2">Index</a>
<a class="tab" href="http://site.com/tab2.php" target="tabIframe2">Tab 2</a>
<a class="tab" href="http://site.com/tab3.php" target="tabIframe2">Tab 3</a>
<a class="tab" href="http://site.com/tab4.php" target="tabIframe2">Tab 4</a>
<a class="tab" href="http://site.com/tab5.php" target="tabIframe2">Tab 5</a>
</div>
<div class="tabMain">
<h4 id="title">TITLE</h4>
<div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="http://site.com/index.php" marginheight="8" marginwidth="8" frameborder="0"></iframe></div>
</div>
</div>
2. Spoiler button
Code:
<head>
<style type="text/css">
body,input{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#000000;
}
.spoiler{
border:1px solid #ddd;
padding:1px;
}
.spoiler .inner{
border:1px solid #eee;
padding:1px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</head>
<body>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Spoiler" />
<div class="inner" style="display:none;">
<b>THE SPOILER TEXT IS HERE</b>
</div>
</div>
</body>
</html>
3. Another spoiler code
Code:
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<body><div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Spoiler" />
<div class="inner" style="display:none;">
SPOILER TEXT HERE</div>
4. Show text at specific hours
Code:
<script type="text/javascript"><!--
var now = new Date();
var hours = now.getHours();
//12AM to 1AM
if (hours < 1){
document.write ('12AM to 1AM');
}
//1AM to 2PM
else if (hours > 1 && hours < 13){
document.write ('1AM to 2PM');
}
//2PM to 12AM
else if (hours > 13){
document.write ('2PM to 12AM');
}
else {
document.write ('Other');
}
// --></script>
5. Password Protect (each password = each link)
Code:
<script type="text/javascript">
<!--
var mssg="Message in alert box.";
var dfault="Message in text field.";
// To add more passwords: password[#]="PASSWORD";
var password=new Array();
password[0]="password1";
password[1]="password2";
password[2]="password3";
pL=password.length;
// To add more links: locurl[#]="URL"; include the "http://"
var locurl=new Array();
locurl[0]="http://www.yoursite.com/"; //Replace with URL of desired destination. Tied with password[0]
locurl[1]="http://www.youfail.org/"; //Replace with URL of desired destination. Tied with password[1]
locurl[2]="http://www.google.com/"; //Replace with URL of desired destination. Tied with password[2]
var failmsg="This is the text that appears in an alert box if they get it wrong.";
var alertactive=0;
/* About [alertactive]:
If at 1 then web alerts user of incorrect password with the string: [failmsg];
If at 0, then web does not alert user of incorrect password;
If at any other number, automatically set to 0.
*/
function show_prompt()
{
var i=0;
var pwd=prompt(mssg,dfault);
if (pwd==null)
{
}
else
{
while (i<pL)
{
if (pwd==password[i])
{
window.location=locurl[i];
}
else
{
if (alertactive==1)
{
alert(failmsg);
}
else
{
}
}
i++
}
}
}
-->
</SCRIPT>
<a href="javascript:show_prompt();">Link name here</a>
6. Collapsible Panel
I know where this code came from:
http://xtractpro.com
Code:
<head>
<style type="text/css">
.squarebox {
width: 100%;
border: solid 1px #336699;
text-align: center;
overflow: hidden; }
.squareboxgradientcaption {
color: #ffffff;
padding: 5px;
background-image: url(http://xtractpro.com/images/gradient_blue.png);
background-repeat: repeat-x; }
.squareboxcontent {
background-color: #f5f5f5;
padding: 10px;
overflow: hidden;
border-top: solid 1px #336699; }
</style>
<script language="javascript" type="text/javascript">
function togglePannelStatus(content)
{
var expand = (content.style.display=="none");
content.style.display = (expand ? "block" : "none");
var chevron = content.parentNode
.firstChild.childNodes[1].childNodes[0];
chevron.src = chevron.src
.split(expand ? "expand.gif" : "http://xtractpro.com/images/collapse.gif")
.join(expand ? "http://xtractpro.com/images/collapse.gif" : "http://xtractpro.com/images/expand.gif");
}
</script>
</head>
<body>
<!-- Collapsible panel, with separate CSS and JavaScript -->
<div style="width:170px;">
<div class="squarebox"><div
class="squareboxgradientcaption"
style="height:20px; cursor: pointer;"
onclick="togglePannelStatus(this.nextSibling)"><div style="float: left">Title goes here...</div><div style="float: right; vertical-align: middle"><img src="http://xtractpro.com/images/collapse.gif" width="13"
height="14" border="0"
alt="Show/Hide" title="Show/Hide" /></div>
</div><div class="squareboxcontent">
<img width="150" height="100"
src="http://xtractpro.com/images/sample_photo.jpg"
alt="This is an image" title="This is an image" /><br />
Content goes here...
</div>
</div>
<img width="170" height="20" alt="" src="http://xtractpro.com/images/shadow.gif" />
</div>
</body>
</html>
7. Button Text Change Upon Click
Lol, the code is really simple... but I never knew it so... it will be useful xD
Code:
<input type='submit' name='submit' value='Click me!' onclick="this.value='You clicked me!';">