Index » Extras » Code
Updated 11/3/22

Copyable code for your website

Basic layout fixes | HTML features | Navbars | Hidden elements | Style | Miscellaneous

Basic layout fixes

"My layout breaks at different resolutions"

Try adding something like this to lock it to one size:

Show Code (css) body { width:1904px; //any size, this one's 1920px minus space for a scrollbar margin:auto; //make centered in case someone has a bigger monitor }

That won't work for everyone, since some people build their whole layout around the position property. A possible alternative fix is to add something like this:

Show Code (css) body { width:1895px; height:957px; position:absolute; }

Centered column with left-aligned text

Show Code (css) body { max-width:800px; //can be resized by a smaller window margin:auto; //make centered }

If you want things on the page that are outside of the column, you need to put your text in a div, and give that a max-width.

HTML features

Iframe links open in parent window

Show Code (html) <head> <base target="_blank"> </head>

Timed redirect

Show Code (html) <head> <meta http-equiv="refresh" content="2; url=URL_GOES_HERE" /> </head>

Navbar on every page

I've found two simple ways of doing this.

Method 1:

Show Code (javascript) document.write('<a href="#">Thoughts</a> | <a href="#">Dreams</a> | <a href="#">About</a> | <a href="#">Links</a> | <a href="#">Graveyard</a> | <a href="#">Extras</a>'); <div><script src="/js-nav-1.js"></script></div>


Method 2:

Show Code (javascript) var html = '<a href="#">Thoughts</a> | <a href="#">Dreams</a> | <a href="#">About</a> | <a href="#">Links</a> | <a href="#">Graveyard</a> | <a href="#">Extras</a>'; document.getElementById("js-nav-2").innerHTML = html; <div id="js-nav-2"><script src="/js-nav-2.js"></script></div>

"Pipe" link dividers using css instead of text

This one is useful for me because it reduces the gap between links, making the animation less janky. You could also use this to style the dividers differently.

Show Code (css) .navbar a { color: yellow; border-right:1px solid white; padding-left:5px; padding-right:5px; display:inline-block; //line break if the window is small. You could instead put spaces between the links and change the amount of padding to compensate. } #navbarlast { border-right: 0; } <div class="navbar"> <a href="#">Thoughts</a><a href="#">Dreams</a><a href="#">About</a><a href="#">Links</a><a href="#">Graveyard</a><a href="#" id="navbarlast">Extras</a> </div>

I got the idea from this website.

Hidden elements

Folded text in HTML

Show Code (html) <details><summary>Spoilers</summary>Spoiler</details>

Result: SpoilersSpoiler

Hover Tooltip

Show Code (css) .hiddentooltip:hover .tooltip { display:block; } .tooltip { display:none; position: absolute; font-size:13px; background-color: black; pointer-events: none; } <span class="hiddentooltip"> <a href="#">Hover</a> <span class="tooltip">(Tooltip)</span> </span>

Result: Hover(Tooltip)

(Simplified version of Vertpush's code.)

Spoiler button

Show Code (javascript) .spoilerbutton { background-color: black; color: white; border:1px solid white; cursor: pointer; } <button class="spoilerbutton" type="button" onclick="document.getElementById('spoilers').style.display='block'">Show Spoiler</button> <p id="spoilers" style="display:none">Spoilers</p>


Button that slides down

Show Code (javascript) #wrapper { transition:height 1s ease-out; height:0; overflow:hidden; } #open { cursor: pointer; border-bottom: 1px solid white; } <div id="wrapper"> <p>Wheee</p> </div> <div id="open">Open</div> <script> document.getElementById("open").addEventListener("click", function () { document.getElementById("wrapper").style.height = "100px"; }); </script>


Result: Click Me



Last pixelated font in Windows

Show Code (css) font-family: "MS PGothic", Serif;

Result: MS PGothic

Pixelated image rendering Won't work in Internet Explorer

Show Code (css) img { image-rendering: pixelated; }

Result: demonstration

Drop caps

Ever notice how bloated the code for news sites is? This is all they really had to do.

Show Code (css) article::first-letter { font-size:250%; float: left; line-height: 1; margin-right:4px; } <article> <!--I heard semantic HTML is good but I don't know why--> Text with a<br> dropcap<br> goes here.</article>


Text with a
goes here.

Gradient text Won't work in Internet Explorer

(text will look blurrier when you do this)

Show Code (css) .scanlines { background: repeating-linear-gradient(0deg, greenyellow, greenyellow 1px, black 1px, black 2px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } <p class="scanlines">Text with gradient-generated scanlines</p>

Result: Text with gradient-generated scanlines

Gradient border

Show Code (css) .rainbow { border-bottom: 8px solid; border-image-slice: 1; border-image-source: linear-gradient(to right, #5B0F08, #851B03, #A82C00, #DB7A08, #EAB111, #BFB239, #74A34B, #568F6B, #4487B0, #3C469C, #271470, #20144C); } <p class="rainbow">Rainbow underlined text</p>

Result: Rainbow underlined text

Parallax effect

Vanilla JavaScript Parallax with just a Few Lines of Code

Result: Space


Random YouTube embed

Show Code (javascript) <script> var videos = [ "", //troops fan film "", //japanese game show boxes "", //mark of zorro swordfight "", //big bills hells cars "", //animusic "", //quaaludes "", //the real new hope "", //civil protection aliens "", //half life full life consequences "", //you suck at photoshop "", //docfuture sonic "", //want to kill your pc "" //kirby xp ]; window.onload = function () { var playerDiv = document.getElementById("randomyt"); var player = document.createElement("IFRAME"); var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)]; player.setAttribute('width', '320'); player.setAttribute('height', '240'); player.setAttribute('src', randomVideoUrl); player.setAttribute('frameBorder', '0'); playerDiv.appendChild(player); }; </script> <div id="randomyt"></div>


(w3schools forums, stackoverflow)