DraconicArcania Hideout

DraconicArcania on HTML Coding

HTML coding, it's fun, it's fairly easy, and it's awesome. Below you can find the codes behind some of my madness! Enjoy, and feel free to use some of these on your site! These are only the fun little tricks. not text formatting.

The Hider/Revealer Button

The Hider/Revealer Button: Lesson I

This nifty little button uses a pretty simply code I tinkered with. The bolded fields are the ones you edit.


<input type="button" value="TITLE HERE" style="max-width:200px;font-size:10px;margin:0 auto;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'TITLE HERE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';this.value = 'TITLE HERE';}"><div><div class="hider" style="Display:none;">TEXT HERE</div></div></div>

Automatic Background Music

Automatic Background Music: Lesson II

I'm sure you heard my somewhat sadistic little extra, correct? Well, it's a cool effect. It's called an embeddable, invisible music player. Below is the code. No, I'm not telling you how to unhide it, because that's no fun. However, this is a really nifty effect for holiday spiffing and whatnot. Well, for that or for just scaring your visitors. Thanks to Moviesoundclips.com for our sounds.



<embed name="YOUR TITLE (won't show)"
src="Insert sound URL here"
loop="false"
hidden="true"
autostart="true">
</embed>

Music Clips (Visible with controls)

Okay, admittedly not as fun as hidden music, but these are music controls that the viewer can control. The code is below. 

<embed name="Name here"
src="Sound URL here"
loop="false"
width="300"
height="90"
hidden="false"
autostart="false">
</embed>

Same-Page Content Linking

<a href="INSERT">Can have a lot of functions! For example, see the table below! However, did you know that you can also link to specific elements within a page? Uh-huh! Cool, right? All you have to do is make a few tags. Whatever text you want to link, such as in the example above, you should place <p id="name1">Insert your text</p>. Then, in the text which will link you to your object, you simply play <a href="#name1">Text</a>. And, voila! You have yourself a pretty little link! Ain't that something?

You just scrolled down automatically to where you should be!