Staredit Network > Forums > Technology & Computers > Topic: Collapse Boxes
Collapse Boxes
Feb 6 2013, 11:40 am
By: Jack  

Feb 6 2013, 11:40 am Jack Post #1

>be faceless void >mfw I have no face

Hi everyone,

I'm currently working on a website and would like to know a better way to do collapse boxes than the way I am currently. As far as I can see, the way SEN's collapse boxes work is that every time the BBcode parser finds [Collapse], it generates a new col_12312312523523 or similiar, so that each collapse box is uniquely identified. Basically I'd like to have a look at exactly how SEN does it, or else some advice on how to do it from others who have. I know how to make a collapse box, but it's the unique identifiers and how the page knows which ones are which from just the BBCode parsing that I'd like help on.



Red classic.

"In short, their absurdities are so extreme that it is painful even to quote them."

Feb 6 2013, 3:45 pm Biophysicist Post #2



In your <head> tag, add the following:

Code
<script type="text/javascript">
function toggleBox(button) {
var cbox = button.parentNode.getElementsByTagName("div")[0];
if(cbox.style.display == "block")
cbox.style.display = "none";
else
cbox.style.display = "block";
}
</script>


Now, for your BBCode, you'll want the following structure:
Code
<div class="cbox">
<input type="button" onclick="toggleBox(this);" value="Toggle Collapse Box" />
<div style="display:none;">blah blah contents go here blah</div>
</div>


Untested, but I'm confident it'll work.

EDIT: If you're using someone else's forum software and can't easily modify the <head> tag, which is sometimes the case, then you can do the JS inline if needed. But that's dumb.



None.

Feb 6 2013, 8:32 pm Dem0n Post #3

ᕕ( ᐛ )ᕗ

You should make it so that clicking anywhere on the box opens it, instead of having to click to on a small button in the corner.




Feb 6 2013, 9:36 pm Jack Post #4

>be faceless void >mfw I have no face

Bio, thanks very much for your help!

Dem0n, yeah I can do that, good idea.



Red classic.

"In short, their absurdities are so extreme that it is painful even to quote them."

Feb 7 2013, 10:16 pm ShadowFlare Post #5



I seem to recall seeing the source for a page that used CSS to apply the onclick handler so you would only need to assign the class to the HTML element. I don't remember exactly what it looked like, though.



None.

Feb 8 2013, 12:38 am Roy Post #6

An artist's depiction of an Extended Unit Death

CSS is supposed to be for styling and layout, not behavior. I did a quick search for CSS click events and I only really saw clever little hacks than a native implementation: it seems more academic than practical.

On that note, you shouldn't couple your HTML to your JavaScript; the HTML shouldn't know about it. The only real criticism I have for Bio's approach is that he's calling the JS method from the HTML (which is a common practice, but not a good one, in my opinion). Here's how I would change it:

Code
<script type="text/javascript">
   $.(
       $('.cbox').on('click', '.cbox-header', function(e) {
           if($(e.target).is('span')) {
               return false; // Ignore clicks on span text
           }
           $(this).parent().children('.cbox-content').toggle();
       });
   );
</script>
I used jQuery, by the way. I would recommend it.

Code
<div class="cbox">
   <div class="cbox-header">
       <span>Collapse Box</span>
       <button>+</button>
   </div>
   <div class="cbox-content" style="display:none;">blah blah contents go here blah</div>
</div>

Changed the input button to just a regular button. Otherwise, basically the exact same idea.

See this JsFiddle for a sample implementation of the above (I stole basically all of the CSS styling from Sen). I even made it expand when you click anywhere on the header (except the span text) like Demon suggested.

Edit: Made it better.

Post has been edited 8 time(s), last time on Feb 8 2013, 2:53 am by Roy.




Options
  Back to forum
Please log in to reply to this topic or to report it.
Members in this topic: None.
[02:00 pm]
NudeRaider -- You are undead, why wouldn't you and your creations (GPTP) exist as (in) graves? I don't get why this needs fixing.
[01:58 pm]
UndeadStar -- I don't know in how many people imagination me and/or my GPTP existed as graves, but this will finally be fixed now that I've made the online code available
[10:26 am]
NudeRaider -- I can't say but it sounds plausible. You'd still have the problem with the palette.
[10:25 am]
Oh_Man -- it's not like the pixels themselves are inherit to one tileset or another.
[10:24 am]
Oh_Man -- Couldn't you redefine all the tiles from the other tilesets to be read as part of just one tileset instead of multiple perhaps
[10:16 am]
NudeRaider -- *make new tiles
[10:15 am]
NudeRaider -- The map structure only ever recognizes one tileset at a time. So you'd have to define your own map format then make an .exe that can load such files. I don't think it's ever been done; it sounds like a lot of work. What's commonly done with modding is creating a new tileset. Then you decide which tiles go in there. You can also make new ones. You will probably also have to create a new palette as the different tilesets share only part of their colors. Finally entering speculation territory you could maybe use EUDs to dynamically change the graphics of certain tiles. Not sure if it's possible, but if it is, you better make a topic for it.
[04:11 am]
O)FaRTy1billion[MM] -- no, that's not a thing you can do without modding the game
[03:56 am]
youarenotworthy -- I forget, did starforge ever allow you to mix tilesets?
[03:44 am]
O)FaRTy1billion[MM] -- use scmd or NudeRaider
NudeRaider shouted: You are right, however, in that the Remastered *graphics* are just a skin are interchangeable, even midgame. Skinability being another new functionality. Anyways, for tools that rely on the original mpqs you will have to obtain a legacy version of sc.
Please log in to shout.


Members Online: Roy, zsnakezz