PDA

View Full Version : Hide Categories Code.



JRR
12-21-2015, 10:55 PM
I use a javascript code on my forum to hide/collapse a category that works well and here is the forum:

http://thescooterprofessor.proboards.com/

If you scroll down and look at the Forum Information and Statistics category you'll see on the right the words Hide/Show. When clicked on the whole category collapses and just the title bar is left showing. Click on it again and the information re-appears. Here is the code:


<script type="text/javascript">
$(document).ready(function(){
var info = false;
if(window.localStorage["center-close"] && window.localStorage["center-close"] == "true"){
$(".stats .content").hide();
var info = true;
}
$(".stats .title-bar").click(function(){
$(".stats .content").animate({ height:"toggle" }, 1000, "easeOutQuad");
if(info){
info = false;
window.localStorage["center-close"] = "false";
} else {
window.localStorage["center-close"] = "true";
info = true;
}
});
});
</script>




This code is put in what is called the Main Footer of the forum. To get the words Hide/Show to go into the title bar one goes to the Home Template section and places the following line of code in the Statistics Title Bar section of the template coding. Here is that section:



{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information &amp; Statistics<span style="float: right;">Hide/Show</span></h2></div>
<div class="content">


Now here is the Home template code and if I'm correct this section controls the Legend title bar and information section and also what would be the other categories that one would name when building the forum, here is the Home Template code that also includes the above mentioned Statistics title bar too:



{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}
{if $[legend]}
<div class="container legend home">
<div class="title-bar"><h2><div class="title_wrapper">Legend</div></h2><div id="messages_container"></div></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
<center><a href="http://info.flagcounter.com/a7SY"><img src="http://s09.flagcounter.com/count_US/a7SY/bg_e3e3e3/txt_000000/border_CCCCCC/columns_8/maxflags_50/viewers_Students+and+Visitors/labels_1/pageviews_1/flags_0/" alt="Flag Counter" border="0"></a></center>
</div>
</div>
{/if}
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information &amp; Statistics<span style="float: right;">Hide/Show</span></h2></div>
<div class="content">


As I mentioned you can see the Legend and Statistics title bar coding and my thinking is the [category.display_name] is the section that covers all of the other title bars in the forum. I've tried this and that to make the javascript code work for the other two to no avail. Can someone help me with this and what would be nice is a code that would cover the whole forum for each title bar. I've seen this work at other places.

Thanks

JRR
01-05-2016, 12:15 AM
Is it against the rules to ask about something again even after it's been two weeks with no reply?

james438
01-05-2016, 05:08 AM
Not rude. I'm sadly not very good with javascript and am weakest in it to be honest ;). It is a little irritating when someone gets upset that no one has posted a response to their request for help after an hour and feels the need to post an angry note demanding to know why no one has responded.

It also depends a bit on the forum. For example, in the MySQL forum responses can take a week or so. Faster responses tend to happen in CSS, HTML, and especially Javascript. Sometimes posts do fall through the cracks or maybe no one knows the answer or fully understands what is being asked. Other times the usual contributers can get temporarily overwhelmed with other activities like a new full time job (myself) or family life can pull people away or maybe even travel to a country that has little in the way of internet connection. Sometimes a problem is just too complicated and/or requires more time than the contributor can afford to spend on the issue.

In short you are not being rude :).

Beverleyh
01-05-2016, 06:25 AM
There's not a problem, but replied-to threads are more easily dismissed because it looks like someone else is dealing with them, and they no longer come up to the top as unanswered threads when the forum is sorted. Bumping your own thread 3 times over in that respect has a negative effect, while clearing bumps makes a post with 0 replies easier to find when an regular helper with more knowledge/interest returns. There are sometimes methods to moderator madness ;)

JRR
01-05-2016, 07:36 PM
OK thanks and I'm not in a hurry guess I just forgot it's holiday time.

JRR
02-06-2016, 12:39 PM
Been some time and now getting back to this, can anyone help me with this?

JRR
03-07-2016, 01:21 PM
Calling John! :D I'm hoping to still do this and it's for sure been awhile since my last request. Please help. Thanks

jscheuer1
03-28-2016, 06:22 PM
Get rid of everything you already have for this. EVERYTHING! (back it up - always wise, but get rid of it all) - Use only this script (replace the existing one):


<script>
jQuery(function($){
var info = {};
$(".title-bar").each(function(i, v){
if(!i){return true;}
var $c = $(".content", $(v).parent()), ts = "title-bar" + i,
$ae = ($ae = $('h2 .title_wrapper', v)).length? $ae : $('h2', v);
if(window.localStorage[ts] && window.localStorage[ts] === "true"){
$c.hide();
info[ts] = true;
}
$ae.css({maxWidth: 880}).append('<span style="float: right; cursor: pointer;">Hide/Show</span>').
click(function(){
$c.animate({ height:"toggle" }, 1000, "easeOutQuad");
if(info[ts]){
info[ts] = false;
window.localStorage[ts] = "false";
} else {
window.localStorage[ts] = "true";
info[ts] = true;
}
});
});
});
</script>

Make sure to also get rid of that span you added to the HTML template.

JRR
03-29-2016, 03:36 AM
As always works like a charm and thanks John!

JRR
05-21-2016, 02:46 AM
Have had a glitch come up John. The code works great on all 3 of my forums, don't even have to be logged in to use it, here is one of them:

http://itistheride.boards.net/

But for some reason on my test forum and on some other forums for whatever reason the top category on the forum is left out? The Hide/Show button doesn't appear, here is a couple of them where it does just that:

http://theridetest.freeforums.net/

http://putteraround5.proboards.com/

On the last forum all one has to do is adjust the width in the code to move the buttons to the far right. Don't understand this at all?

Thanks

jscheuer1
05-21-2016, 03:53 AM
One part of this I understand completely. That's the bit about the top category being left out. I did that on purpose because in your previous examples the top category was actually being used for something else, something inappropriate to hide/show. Let me see - yes, in the example you link to here (http://itistheride.boards.net) it's being used for "WELCOME TO It Is The Ride FORUM" - not something you want to be hide/show enabled.

And that's easy to adjust. If you have no first .title-bar element that's being used for something like that, then, sure we can include the first one as well (just comment out or remove the highlighted line):


<script>
jQuery(function($){
var info = {};
$(".title-bar").each(function(i, v){
if(!i){return true;}
var $c = $(".content", $(v).parent()), ts = "title-bar" + i,
$ae = ($ae = $('h2 .title_wrapper', v)).length? $ae : $('h2', v);
if(window.localStorage[ts] && window.localStorage[ts] === "true"){
$c.hide();
info[ts] = true;
}
$ae.css({maxWidth: 880}).append('<span style="float: right; cursor: pointer;">Hide/Show</span>').
click(function(){
$c.animate({ height:"toggle" }, 1000, "easeOutQuad");
if(info[ts]){
info[ts] = false;
window.localStorage[ts] = "false";
} else {
window.localStorage[ts] = "true";
info[ts] = true;
}
});
});
});
</script>

The width thing you mention I'm not as sure about, but I do remember including in the code $ae.css({maxWidth: 880}) to deal with situations where the Hide/Show span was either not showing up, and/or not showing up in a consistent position. This of course relies upon 880px being the optimal width of the .title-bar elements. If this is not the case in a given layout, it can be adjusted to - say 900, or whatever works. Nothing will consistently work if there is no fixed width for these .title-bar elements or at least their parents. If that's the case, simply skipping the .css({maxWidth: 880}) part might work.

Now, since you say the problem(s) is/are with a test forum and/or some other forum, if you could be more specific - that is if what I've just said hasn't taken care of these issues for you, if what remains a problem isn't with some abstract test forum, I will have a closer look. But, as I say, if you can narrow it down in light of what I've already told you, that would help me help you.

JRR
05-22-2016, 02:02 AM
Ok John we're getting close and I do indeed understand why you removed it from the top category, the other forums it works on correctly that very top WELCOME TO THE FORUM is actually a plugin designed like a message News Header and indeed should not have the Hide/show button. The test forum does not have that Plugin.

Ok upon removing the highlighted part above


if(!i){return true;}we do now indeed have the Hide/Show button on the top category but we have a issue with getting it in line with the other buttons:

http://theridetest.freeforums.net/

Now removing the code part
.css({maxWidth: 880}) is a no go when done so the buttons disappear all together. All forums have different widths and in the case where the forums I have that are working correctly the width is 880px.

But on the test forum and on others that people have they can choose to use the percentage width adjustment and on that test forum the width is 90% But if I change the code to 90% the buttons disappear. I can set my test forum at 880px and all is fine. But if I set it to 90% which some people do then you see what happens and I can change the code to a bigger width and it has no effect on the button on the top category?

Are we going to have to put a width adjustment for that category only?

jscheuer1
05-22-2016, 03:10 AM
There's an inconsistency in the way the title-bar classed elements are being generated. the first is like:


<div class="title-bar bbcode"><h2><div class="title_wrapper">General</div></h2></div>

The next (and presumably all subsequent are like):


<div class="title-bar"><h2>Legend</h2></div>

So of course they will not necessarily respond the same way to:


$ae.css({maxWidth: 880})

where $ae represents either the h2 element or its .title_wrapper div child. It did work out in the examples you provided before. That said, if you want consistency in all possible cases, you will have to provide uniform markup and underlying css in all possible cases.

Since these differences are likely generated server side (and/or in css styles used by the page), that's where they would have to be addressed. But I cannot always see everything. If these differences are generated somewhere else, then that's where they will need to be addressed.

That said, in this particular case, and it's not perfect, it looks like:


<script>
jQuery(function($){
var info = {};
$(".title-bar").each(function(i, v){
var $c = $(".content", $(v).parent()), ts = "title-bar" + i,
$ae = ($ae = $('h2 .title_wrapper', v)).length? $ae : $('h2', v);
if(window.localStorage[ts] && window.localStorage[ts] === "true"){
$c.hide();
info[ts] = true;
}
i && $ae.css({maxWidth: 880});
$ae.append('<span style="float: right; cursor: pointer;">Hide/Show</span>').
click(function(){
$c.animate({ height:"toggle" }, 1000, "easeOutQuad");
if(info[ts]){
info[ts] = false;
window.localStorage[ts] = "false";
} else {
window.localStorage[ts] = "true";
info[ts] = true;
}
});
});
});
</script>

will come close (assuming I made no typos).

But I stress/repeat - unless you get and/or let each .title-bar element to be written and styled in a basically uniform manner, getting other code to interact with them all in a uniform manner may not be possible.

JRR
05-22-2016, 11:21 AM
Problem solved John, and I'll need to let everyone know that wants to use this that if they have the situation like on my forum they need to use the first code, if not then this last code will more than likely do the trick. as always thanks so much for your help.