Forums style html?

[Baby Astronaut]

I'd like to mimic or emulate in a normal webpage how some of forums tags work if you click on them.

 

For example, the "hide" tags in forums work by hiding a select amount of information on the page, which the reader can then expand/collapse by a simple mouse click. How would you enable that same action on a non-forums webpage?

 

Or, some forums reveal an image if you mouse-over a word, and it disappears after you no longer mouse-over that word.

 

I'm not looking to start a forums, it'll be a typical website using some handy forums operations.

[doG]

Hide tags in most forums just alter the local background color set by the style sheet to the same color as the text effectively hiding it until highlighting it.

 

Other techniques use mouse over events in javascript to achieve what you're describing.

 

Find pages that have the features you'd like to learn and use the "View Code" function in your browser to learn how these client side techniques are accomplished. FWIW, you'll need a good grasp of DHTML, CSS and javascript to understand the code you're viewing.

[Baby Astronaut]

Using view source, I grabbed all code related to the hide tags at this post in the forums. It doesn't really tell me anything useful:

 

html > body#ipboard_body > div#ipbwrapper > div#content.clear > div.topic.hfeed > div#post_id_637021.post_block.hentry.clear.with_rep > div.post_wrap > div.post_body > div#.post.entry-content > div#.bbc_spoiler > input.bbc_spoiler_show

<div class="bbc_spoiler" id="">
<span class="spoiler_title">
<input type="button" class="bbc_spoiler_show" value="Hide"/>
<div class="bbc_spoiler_wrapper" id="">
</div>
<br/>
</div>

<div class='bbc_spoiler'>
<span class='spoiler_title'>Spoiler</span> <input type='button' class='bbc_spoiler_show' value='Show' />
<div class='bbc_spoiler_wrapper'><div class='bbc_spoiler_content' style="display:none;">a wrecking crane!</div></div>


"spoiler":{"id":"7","title":"Spoiler","desc":"Spoiler tag","tag":"spoiler","useoption":"0","example":"
[spoiler]Some hidden text[/spoiler]
","switch_option":"0","menu_option_text":"","menu_content_text":"Enter the text to be masked","single_tag":"0","optional_option":"0","image":""},"sql":


input.bbc_spoiler_show { 
font-size: 0.7em;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 45px;


input { 
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
border-top-width: 2px;
color: #000000;
font-family: use-lang-def;
font-size: 13px;
font-weight: 400;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 8px;
padding-top: 1px;
text-align: center;
text-indent: 0px;
text-transform: none;


body { 
color: #1c2837;
font-family: "verdana", "tahoma", sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: normal;
}

 

I used to be able to extract any piece of a functioning item on a website. I'd download the entire webpage, open the .css and .js files with a text editor, grab all relevant code that I'd find buried in the .css and .js files, paste it to the actual html file within a script tag and/or css stylesheets, delete all references to the .css and .js files, then clean up any loose ends in the html, and it worked.

 

Basically, that allowed me to recreate only the parts I needed (stylesheet fonts, layout, colors, etc; cool scripts; embedded things; whatever) into a single webpage that had no external files to reference except images and/or webpage links.

 

So the real question is, can hide tags be put on a nonforums webpage but function the same way they do on the forums?

[Xittenn]

So the real question is, can hide tags be put on a nonforums webpage but function the same way they do on the forums?

 

Probably not! Most Forum packages use PHP or a server side scripting language that in turn generates HTML pages dynamically. I am not aware of a Forum package that uses DHTML as a plateau for features. This isn't to say that you couldn't find a way to code a spoiler button using HTML, you will just have to learn how to code en lieux of cut and paste.

[Cap'n Refsmmat]

Probably not! Most Forum packages use PHP or a server side scripting language that in turn generates HTML pages dynamically. I am not aware of a Forum package that uses DHTML as a plateau for features. This isn't to say that you couldn't find a way to code a spoiler button using HTML, you will just have to learn how to code en lieux of cut and paste.

A large number of IPB features are based on DHTML, such as the spoiler button, the WYSIWYG text editor, the MultiQuote system, the LaTeX popups, and probably a bunch of other stuff I'm forgetting. Using PHP for those would require your browser to send a request to the server just to un-hide a spoiler, which would be a bit wasteful. Fancier forum software only uses JavaScript more, since it lets you do cool things directly in the browser.

 

Really, you just need some JavaScript to dynamically change the visibility of an HTML element. Here's the code for one:

 

http://www.theadminzone.com/forums/showthread.php?t=24586

 

Just replace {param} in the code with the text you want to hide.

[Xittenn]

I was going to say " but Cap' would know best!" but didn't think it was an appropriate comment, even though it was!

 

There should be an HTML5 spoiler tag . . . . .