PDA

View Full Version : Random Codes (HTML/JS)


ChibiMaestro
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
<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
<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

<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
<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)
<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
<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
<input type='submit' name='submit' value='Click me!' onclick="this.value='You clicked me!';">

Hall of Famer
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
02-18-2011, 11:13 AM
Wow, thank you Hoffie :meow: XD

The reason why I don't contribute scripts is because... I don't know PHP :catfish: But I'm hoping to learn :happyc:

Hall of Famer
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
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
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