Random Codes (HTML/JS)

Forum
Last Post
Threads / Messages
C

ChibiMaestro

bruh
Premium Member
Joined
Nov 7, 2010
Messages
298
Points
0
Age
26
Location
United Kingdom
Mysidian Dollar
19,277
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!';">
 
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.
 
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.
 
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
 
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
 
You must log in or register to reply here.
Similar threads
Thread starter Title Forum Replies Date
Poppy ||Random codes you might find usefulell|| Tutorials and Tips 6
Dinocanid Getting name of random item Questions and Supports 1
S Random Adoption Process ? Questions and Supports 31
LUC1G07CH1 Gender choice mod/feature? Random exploration items/pets/currency? Suggestions and Feature Requests 4
SilverDragonTears Choose 3 random adopts... Questions and Supports 5

Similar threads

Users who are viewing this thread

Total: 1 (members: 0, guests: 1)
  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Threads
4,280
Messages
33,130
Members
1,603
Latest member
Monako
BETA

Latest Threads

Latest Posts

Share

Top