Random Codes (HTML/JS)

***ChibiMaestro*** · #1 02-18-2011, 10:42 AM

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!';">

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Html?	MaximumRide	Questions and Supports	7	05-17-2012 04:59 PM
\|\|Random codes you might find usefulell\|\|	Poppy	Tutorials and Tips	6	11-07-2011 05:12 PM
Ad HTML not working	AlkseeyaKC	Questions and Supports	2	07-01-2011 07:13 AM
Random 5 is not realy random!	RipJawWolfFang	Questions and Supports	9	04-30-2009 06:03 AM
BBC/HTML Codes gone crazzy!	RipJawWolfFang	Questions and Supports	6	04-10-2009 08:09 PM

What's New?

What's Hot?

What's Popular?