Extension: Hidden Text (old discussion)

Krak · January 2007

Hidden Text, It allows you to hide text (or anything else) in a discussion or comment.

It could be used in a situation where movie spoilers would need to be hidden from view, or perhaps a bunch of images. The possibilities are endless really.

It uses JS to change the CSS of a div tag to and from "block" and "none". You can have as many comments as you want with hidden text as long as you only do it once per comment, anything after the first one will not unhide.

All you do is add the code [hide]your text here[/hide] and it does the rest. I made it so it also adds some text to show that there is something hidden. There is a link next to the edit/block links to enable/disable the hidden text. In the users account page forum preferences there is also an option. This will turn on/off the hiding of the tag. So each user can decide if they want to see the hidden text by default.

Thanks to the authors of Quote Text, BBInsertBar, Comments Permalinks (Remi's and Mark W's), and the Lussumo Docs!

post with hidden text, well, hidden - http://dev.hatethis.org/2007-01-21_211319.png
post with the hidden text visable - http://dev.hatethis.org/2007-01-21_211343.png

Download
http://lussumo.com/addons/index.php?PostBackAction=AddOn&AddOnID=250

PLEASE POST ALL COMMENTS IN THIS DISCUSSION:
http://lussumo.com/community/discussion/5640/hidden-text/#Item_11

Krak · January 2007

bump

Stash · January 2007

Haven't had a chance to try this out yet. Perhaps release it as a packaged extension and label it beta? Would be less work for people to try then

Krak · January 2007

It has been released. it is currently beta cause there are a few things that need fixing but its working for the moment. Some known Issues: 1. It only hides text if you are logged in, if you are not is just displays the code bracket and the text. 2. You can only hide something once per comment, but as many times in a discussion as you want.

Stash · January 2007

I shall take a look.

In order to hide multiple things per comment wouldn't wrapping selected text in a span with a specific class work? I understand that would initially mean all comments get hidden/unhidden at once, but it's a start eh?

In fact, you could then just have the span unhide on mouse over I would think...

Krak · January 2007

Not sure if that would work, as it is now I use a div (which could be a span) with a class and an id number. The JS changes the div class "display" from none to block to get it to display. The JS is activated by id number, and the id number is posted to the hide tag depending on which number comment you are making. Which works great for all the posts but if you make two hide tags they both get the same id number, and the JS only activates one for some reason. I am not too great with JS so I would have no idea how to fix that. You can put as much and whatever you want in the hide tags but you can not do something like: Here is some of my blah blah text [hide]then have hidden text[/hide] Then say some more yadda yadda yadda [hide]with more hidden content[/hide] They are both hidden, but only one (the first one) would be revealed.

Stash · January 2007

I was thinking along the lines of:

Here is some of my blah blah text [hide]then have hidden text[/hide]

Then say some more yadda yadda yadda
[hide]with more hidden content[/hide]

Creating:

<p>Here is some of my blah blah text <span class="hidden">then have hidden text</span></p>
<p>Then say some more yadda yadda yadda<br />
<span class="hidden">with more hidden content</span>

Which displays by default like this: (obviously without the box which is just there for demonstration purposes)

Here is some of my blah blah text **Hidden Text - Click to display**

Then say some more yadda yadda yadda
**Hidden Text - Click to display**

Which the magic of javascript makes display like this:

Here is some of my blah blah text then have hidden text

Then say some more yadda yadda yadda
**Hidden Text - Click to display**

Or this:

Here is some of my blah blah text **Hidden Text - Click to display**

Then say some more yadda yadda yadda
with more hidden content

Krak · January 2007

Yeah I got that, but the way it is now thats not possible. The current system looks like this: [hide]your hidden text[/hide] translates to <div class="Hidden" id="2">Your hidden text</div> The class doesnt matter, it could be a span or a div or anything else with a class, the classes display attribute is simply set to "none" to hide it. The part that changes the display value is by the id. The JS picks the id from the link. For each different id there needs to be a link with the same id number. The link points to javascript:handleParent(2), with 2 being that posts id. Which is the same id for that hidden field. Having hidden comments with the same id number, only the first one is changed, it ignores the second for some reason. The id is assigned by the number of the comment, so if you are making the 45th comment, that id is going to be 45. With the JS that is in use now you would have to assign a different id to each hidden field to get more than one per post, but that would also require extra links to point to the other hidden comments. That how it is with the current JS, might be possible some other way but I dont know much JS. Did that clear it up or did I basically just repeat myself?

Stash · January 2007

No, I think I've got what you're saying. The whole ID thing seems pretty complicated from the point of view of solving this problem (multiple people posting at the same time for instance. Although I think it would make sense, even at this stage, to have the IDs as something a little more unique such as #HiddenText1, #HiddenText2, etc.

I shall go and see if there's a way to attach a display:inline/display:none toggle t a bunch of classes using JS as that would do the trick.

Krak · January 2007

People can post at the same time, it shouldn't change anything. It takes the id from the number of the post on that page. The first post on page 1 has an id of 1. The first post on page 65 is also id 1. If the admin where to change the number of posts per page each post would be updated and it still works. I can slap a name in front of the id but I really see no need. I have looked through a dozen of these JS scripts and most of them use the same principle, the id. The main problem is no matter how it is done there still needs to be a link for each hidden field. So if you have fifteen hidden fields there needs to be fifteen links, one for each. So far anyways, if someone can find an alternate way thats great, but this is all I have been able to come up with so far.

jeremy2 · January 2007

First of all, if it seems I am a little off base, it's probably because it's 1:30 am and I am a bit tired but can't sleep. That's my excuse in advance.

I don't see why this little bit of code should not work for showing text that is hidden:

<div onclick="this.innerHTML = 'Add your hidden content here';">Click here to display hidden text</div>

It's nice and simple, and you don't have to keep track of all the IDs and stuff, each div keeps track of itself. If you want to make it so that several changes happen, you can make it a bit easier on yourself by adding a function like this:


<script type="text/javascript">
function show_hidden(obj, txt) {
obj.className = 'some_other_class';
obj.innerHTML = txt;
}
</script>

<div onclick="show_hidden(this, 'Your hidden text here');">Click here to display hidden text</div>

Stash · January 2007

That would work, but eeeeeeeeeeeeeeeeeeeew, inline javascript :P

jeremy2 · January 2007

It's not always practical to be a purist.... The only other thing that I think that would not be too difficult would be to have an incremental counter keeping track of the number of hidden comments. You really do not have to worry about the message ID, just the number of hidden comments. I really do not have the time to test it at the moment, but here is the code:


<style type="text/css">
.hidden_comment {
color: #00f;
text-decoration: underline;
cursor: pointer;
}
.shown_comment {
cursor: pointer;
}
</style>

<script type="text/javascript">
function show_comment() {
this.innerHTML = this.hidden_comment; 
this.className = 'shown_comment';
this.onclick = hide_comment;
}

function hide_comment() {
this.innerHTML = 'Click here to show comment';
this.className = 'hidden_comment';
this.onclick = show_comment;
}
var hidden_comments = [];
// Dynamically generated list of comments. Example: 
hidden_comments[0] = 'Some comment';
hidden_comments[1] = 'Some other comment';

if (window.onload) {prev_function = window.onload;}
else {prev_function = false;}

window.onload = function () {
if (prev_function) {prev_function();}
for (var i=0; i < hidden_comments.length; i++) {
ele = document.getElementById('hidden_comment_'+ i);
ele.onclick = show_comment;
ele.hidden_comment = hidden_comments[i]; 
ele.className = 'hidden_comment';
ele.innerHTML = 'Click here to show comment';
}
// If you are really concerned about memory usage...
hidden_comments = null;
};
</script>

<!--(X)HTML junk --> <div id="hidden_comment_0"></div>
<!--(X)HTML junk --> <div id="hidden_comment_1"></div>
<!-- etc... ->

There you go - absolutely no JavaScript to muck up your HTML. Plus you don't frustrate the users who have JavaScript disabled by displaying something they can't use.

Krak · January 2007

Hmm. That way would have to store the hidden text (or html, etc) in the JS file, no? Like I said, any changes after what I have already made is over my head, javascript wise. Someone else would have to take it on.

Krak · February 2007

It appears that the hidden text would have to be contained in the JS scripting, how would you do that? And it looks like it also still depends on an ID number being assigned to the hidden text. I forgot to test all that out. I will play with it. I used the message ID because I found that to "be the easy way out" and it worked. It was already assigned and it already incremented after each post.

jeremy2 · February 2007

Yeah, sorry that I have not had the time to really implement it since then. The problem with the message ID is that you can have only one hidden text input per message. What you have to do is write some of the JavaScript in PHP like this:


$i=0; 
foreach ($hidden_text_values as $hidden) {
echo 'hidden_comments['.$i.'] = "'.$hidden.'";';
}

To do the increments with the hidden code, you can have a global value with a name like $random_prefix_hidden_comment_counter (something fairly long so that it won't interfere with other variables) or you could even set something in $context that is not used yet. It's been a while since I looked at that object, so I don't remember off the top of my head where the best place would be to do something like that. Anywho, I gotta get back to work. I finally have plenty to do, but I will check back later.

X Saint · July 2007

I activated this extension and it seems to work fine with [hide]. Text inside this tag does not show, however I do not see any (Hidden) link show on the page also. What do I have to set for that?

Krak · July 2007

You should see a link on the upper right, next to where "block user" and "block comment" are. You should also see "(Hidden)" where the hidden text is at. If you don't make sure you have it enabled in your user preferences, and make sure your role has the ability to use hidden text.

mattucf · July 2007

A couple nits:

The "unhide" link always shows up, even if there is no hidden text in the post.
The "unhide" link always says "unhide", even when the text in the "hide" block is shown.

Otherwise, I like.

X Saint · July 2007

Thank you for helping. The thing is I do not see any option in forum preference for hidden feature. I wondered that do I have to set up something separately? I set up some other extensions, some show up in forum preference properly.

Wanderer · July 2007

Sounds to me that there is a need for better instructions with this add-on!

Posted: Friday, 13 July 2007 at 6:46AM