#1
|
|||
|
|||
Random Codes (HTML/JS)
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> 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> 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> 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> 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> 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> 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!';">
__________________
Regards, ...the CSS lovin' cookie monster... ~C.Maestro ___________________ I'd like to think I'm good at CSS&HTML, so if you need help with designing templates and stuff, feel free to 'come at me bro' with the questions. Haha, also if you need help with installing the Mysidia Adoptables Script, please check out my guide here! |
|
|
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? |