Ally -- are you already gone? (![[info]](https://www.insanejournal.com/img/userinfo.gif){kind=small} wastintime) wrote in ![[info]](https://www.insanejournal.com/img/community.gif){kind=small} rp_tutorials,@ 2009-05-05 07:56:00 |
 |
|||
|
|
|
|
|
|
|
| Entry tags: | tools: html |
[Code] The "Magic Click"
click me!
Note: If this demonstration shows up as three icons in a column or clicking on the initial image does not cycle through three images in total, this HTML trick does not work in your browser. :(
CREDITS
• Images: Jérémie Renier icons by
textlessRULES
• Credit to
rp_tutorials. This is not absolutely necessary considering since this is not a layout code.• You can modify the code however you wish. Go nuts.
• Comments are appreciated.
THE CODE
HOW TO USE
1. The images you use must all be of the same height for this code to work properly.
2. Replace the 'IMAGE URL's with the URLs your chosen images.
3. Replace all "height" pixel measurements (in the <div> tag and the <img> tags) with the height of your images.
To add additional images...
1. Copy the code for one row of the table and paste it below the last row in the table.
2. Increment the digits in the <a> tags of the new row. The last image should always point back to the first.
1. Click a "Character Name" link to see a profile.
2. The "back to Game #" link at the end of a profile will return you to the game's table.
3. Notice that clicking a link in one game table does not affect the state of the other game table.
CREDITS
• Inspired by the cast list from
scandalousmods Edit: Who received their snazzy code from define• Slighty modified game table and character profile layouts from
rp_tutorials.PART 1: ANCHORS
If you understand page navigation, you can just skim this.
What They Are
Anchors and Page Navigation -- learn them, use them, make your pages easier to move through and share. They are essential to making this "magic click" business work. <a> tags, which are also known as "anchors", can either be a target or an origin.
You are likely familiar with one type of anchor, the target anchor <a href"">link</a> which creates a hyperlink. A hyperlink may link to another site, but it can also link to different points within one page.
If you've ever used links to move around in a page (e.g. Wikipedia articles) by section or even simply using a "back to top" link, then you've used page navigation. It is the origin anchor <a name=""></a> that makes page navigation possible. This type of anchor assigns a section name to a certain point within a web page.
To create a linkable section within your web page, put an origin <a name=""> anchor at the beginning of said section and give the section a name (e.g. "sect1") within the quotes. You are not required to use an anchor close tag </a> on a origin anchor and any text or code used between the opening and closing tag (i.e. <a name="sect1">text</a>) will be visible. If you dislike leaving open tags (like me) you can insert a black space <a name="sect1"> </a>. If you use an anchor with no text whatsoever between the tags (i.e. <a name="sect1"></a>), Internet Explorer WILL ignore your section name -- so, don't do this.
In order for a link to target a section within the same page, your target anchor will be of the form <a href="#name">link</a>. The # symbol is what indicates a section name is being used. Clicking on different section links will replace what follows the # symbol in the address bar and will navigate you to the next section of the page. The # symbol should ONLY be used in the target anchor. It is not needed in the origin anchor and will cause your anchor to not work properly. You may also link to sections of different web pages by inserting the page's url in front of the # symbol <a href="URL#name">link</a>.
Examples of in-page and multi-page sectional navigation can be found here.
How They Are Used In This Code
You may have noticed that the links within the Example #1 code and the Example #2 game tables reference sections within this same page. We'll get to the logistics of why all of these other sections are hidden in a moment, but right now, take a moment to click around in the examples. Do you see the repeated use of the # symbol? Yes, all of the code for each of these linked sections is contained within this page! It's just page navigation.
If you'll look back to the code for Example #1, you should notice that each image has both a target and an origin anchor so that each click causes the page jump to the successive section (i.e. the image, in this case) in the order: 1 → 2 → 3 → 1 → ... which will continue to jump as long as you keep clicking. The same can be said of Example #2 which will continue to jump between the game table and the character profiles as you click on links.
PART 2: OVERFLOW CONTROL
This is where the ~magic~ happens.
What It Is
Just like the real world, in the programming world "overflow" is excess information which does not fit within a predetermined space. The "overflow control" refers to how this excess information is handled. If you've used a scrollbar to scan through a page, you've experienced one form of overflow control -- scrolling.
Overflow control can be accomplished in HTML by using a style="" tag within a space tag (e.g. <div>, <p>, <table>, or <td>) which allows the use of CSS style properties to be used. In the case of overflow control, we are concerned with the dimension properties (e.g. width and height) and the overflow property.
For example, <div style="height: 100px; width: 50%; overflow: scroll;"></div> would create a space that is 100px tall and half the width of the page. Any text or code which overflows this space would cause a scrollbar to appear. The overflow text will become visible as you scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales libero nec urna pellentesque rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean rhoncus ullamcorper orci, at laoreet odio elementum sed. Integer nibh felis, fringilla ac vestibulum fermentum, rutrum in quam. Morbi lobortis feugiat tortor, non feugiat orci rutrum vel. Aenean rhoncus ullamcorper orci, at laoreet odio elementum sed. Integer nibh felis, fringilla ac vestibulum fermentum, rutrum in quam. Morbi lobortis feugiat tortor, non feugiat orci rutrum vel.
In a second example of the same space, the overflow property is set to visible. This setting will make all of the overflow text visible, but it lies outside of the predetermined space.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales libero nec urna pellentesque rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean rhoncus ullamcorper orci, at laoreet odio elementum sed. Integer nibh felis, fringilla ac vestibulum fermentum, rutrum in quam. Morbi lobortis feugiat tortor, non feugiat orci rutrum vel. Aenean rhoncus ullamcorper orci, at laoreet odio elementum sed. Integer nibh felis, fringilla ac vestibulum fermentum, rutrum in quam. Morbi lobortis feugiat tortor, non feugiat orci rutrum vel.
Ugly, right? This is the default setting for the overflow property if you do not set it in your predetermined space.
Thirdly, the overflow property of the same space is set to hidden. This setting will hide any text or code that does not fit within the predetermined space.
Though the overflow text is hidden, we can still reach it through some simple page navigation!
How It's Used In This Code
All of your code will be going into a outer or main space that is roughly defined as:
The most important dimension in these codes is the height of your predetermined space -- the space where ALL of your other code is going to be contained. After you have sectioned off your code and information with page navigation, you need to determine the height of the tallest section.
In the case of the click-able icon, this is easy: 100px.
In the case of the game table with corresponding character profiles, the heights aren't as definite and there is always the possibility that someone will be viewing your page with different font defaults. Therefore, you need to create a buffer by adding extra height (around 100-200px is good) to your predetermined space to ensure everything is visible in your tallest section. You need additional buffers to ensure only one section appears in your predetermined space at any given time, which is accomplished by adding an ample margin to the bottom of each section. I use a bottom margin that is anywhere from half to 100% of the predetermined space height. This can be accomplished by adding a style tag style="margin-bottom: 300px;" to your section container or by adding a <div style="height: 300px;"> </div> directly beneath the section.
Now, when click on your section links, your section should ~magically~ be appearing in your predetermined space.
RULES
• Credit to
rp_tutorials. This is a must for the layouts, but not for the short codes.• Modify the short codes all you like. Check out the
rp_tutorial page for each layout for their rules.• Comments are appreciated.
THE CODE - SHORT VERSION
HOW TO USE
This is simply a 300px tall gray block that jumps to a 300pc white block and vice-versa. There is also a 300px margin between the two sections to ensure seamless jumping so it appears the gray sections turns to white and vice-versa.
Feel free to play with this code as much as you like.
THE CODE - EXAMPLE #2
HOW TO USE
This is the exact code for ONE of the game tables and corresponding character profiles from Example #2. You may fill in and expand these tables as you would for any layout. However, be aware of your height measurements! If the height of the game table or character profile is too large for all of it to be shown at once, you will need to increase the height of the <div> tag that controls the overflow. You may also need to increase the margins between each section so only one section is showing after any give jump.
Remember to give proper credit for any layouts you use!
Feel free to leave a comment to this entry or contact me at xvanyaeldax[at]gmail[dot]com.