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

***Hall of Famer*** · #2 02-18-2011, 11:02 AM

Nice codes Chibi, glad you posted this.

Looks like you've been contributing enough to the community to gain premium membership. You did not make custom scripts, but those tutorials were rather helpful even to PHP coders.

***ChibiMaestro*** · #3 02-18-2011, 11:13 AM

Wow, thank you Hoffie

XD

The reason why I don't contribute scripts is because... I don't know PHP

But I'm hoping to learn

***Hall of Famer*** · #4 02-18-2011, 11:17 AM

You are welcome Chibi, I am sure the rest of dev staff and premium members are all fine with your premium membership.

Well I will be posting more tutorials for PHP about 3-5 days after Mys v1.2.0 is released, starting from if..else, switch...case to while/for loop, functions and arrays.

***PTGigi*** · #5 02-18-2011, 07:19 PM

You know what's an awesome HTML code? Blink 8D Apparently it's been named the most annoying HTML code of all time XD (have you seen Saso's TEHBESTSITEEVEAH MA site? O.o It's epic :3)

Nice list :3

***ChibiMaestro*** · #6 02-19-2011, 04:56 AM

Blink doesn't do anything on my browser... I tried Chrome, I.E. and Safari... now to try Firefox >:3

Oh wait... it works on firefox xD
GAH... I hate blinking stuff... it hurts my eyes... I hate glittery stuff too... too shiny ._.

Anyway, yus, Sasa's got loads of epic codes on her site, and loads of adventures >:3 SO EPICAL INDEED XD

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?