Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

January 2020

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to create hidden click codes




What is a hidden click code?

Hidden click codes are essentially containers with hidden information and anchor links that allow you to 'reveal' the information.

The anatomy of a hidden click code:
  • A container to hold everything (optional, but for most people here this is definitely what you want.)
  • A way to navigate your anchor links. (ie. a link nav)
  • A container with a set height and hidden overflow.
  • Containers inside the hidden overflow container with the same height and overflow set to auto.
  • Styling, structure, and content is up to you!

Rewind. What's an anchor link?

Pretty standard stuff that's been around for a while, and you've definitely encountered it as far back as you can remember using the internet, I promise! They're super easy to use. An anchor link is a link within the page that will jump you up/down the page to the section the anchor link is linking to.

Example: Say you want to link to an About section. Your link would be <a href="#about">About</a> and the section you'd anchor it to would have <a name="about"></a> or you could use the ID name of an element; for instance, if you have a div called div id="about", and then you wouldn't need the a name. That doesn't work inside of IJ entries though, so let's move on.

This is the same way back-to-top links are made! Fun fact: All you need for a back to top link is: <a href="#">Back to Top</a> no anchor needed, unless you want it to go to the top of a container and not the whole page. But I digress.

Okay, got it. So how does this work?

There's no real magic here, just some fun trickery. What makes this work is a combination of standard anchor links and putting your content into a container with overflow set to hidden, as well as making sure each inner section is the height of the container. That way, you only see one section at a time.

Section one
Section two
Section three


If you remove the heights and overflows, you get a standard container with typical anchor/"jump" links.

Section one
Section two
Section three


Okay, so let's take a look at the parts!

What I've made above is a very basic hidden click. The styling is totally up to you, so don't think you're stuck having your nav links above the container. You can make it a header, footer, sidebar—whatever look you're going for, basically.

<!--MAIN CONTAINER--> <div style="width:500px;margin:0 auto;"> <!--NAV CONTAINER--> <div style="text-align:center;"> <a href="#one" style="">One</a> <a href="#two" style="">Two</a> <a href="#three" style="">Three</a> </div> <!--HIDDEN CONTENT CONTAINER--> <div style="height:300px;overflow:hidden;border:1px solid #ddd;"> <!--SECTION--> <a name="one"></a> <section style="height:100%;overflow:auto;padding:20px;box-sizing:border-box;"> Section one </section> <!--SECTION--> <a name="two"></a> <section style="height:100%;overflow:auto;padding:20px;box-sizing:border-box;"> Section two </section> <!--SECTION--> <a name="three"></a> <section style="height:100%;overflow:auto;padding:20px;box-sizing:border-box;"> Section three </section> </div> </div>

Anchor links: Your anchor links can be any name you want. Just remember that when you're creating a link to your anchor, it needs to have # preceeding it. The anchors themselves don't really render as anything visible on the page; they're essentially just invisible markers the way we have them here, where they don't wrap around anything, so don't worry about anything like styling for those. The anchor links in your nav, however, are just run of the mill links. Feel free to style them as you please.

Heights: Your height should be a fixed height (pixels) in the hiding container, but the inner containers can have a 100% height. That way, if you decide to adjust the height of the container, you only have to do it one time and the inner containers will adjust themselves.

Content sizing: Additionally, setting your box sizing for the inner containers will keep the math from getting complicated. They'll be 100% regardless of paddings, borders, etc.

Overflow Content: Lastly, you want to set your overflow correctly, making sure the container holding your sections is set to hide them and each inner container is set to automatically scroll upon overflow.


♡ You're Done! ♡

Comments

Dec. 23rd, 2019 05:54 pm (UTC)
This is aces, thank you so much. ♥ ♥ ♥
Dec. 31st, 2019 11:08 pm (UTC)
Yw yw! 💕 I've been meaning to do this for ohhhh idk, a thousand years LOL.