members on line cutting off

[Former Member]

support.proboards.com/thread/562960/members-on-line-question?page=1&scrollTo=6476536

iv been told this is a request, the members online in the side bar are going to push my tweet feed down and i would like them to cut of like 'likes' do in a thread.

i put this code in to move it into the side bat from the stats/info box if this is any help.

<div id="move-shoutbox"></div>

thank u inadvance.

[Chris]

You could just add CSS to impose a max-height and direct it to display scroll bars if the content exceeds that height. For example

<div id="move-shoutbox" style="max-height:300px;overflow-y:auto;"></div>

would tell it to grow in height until it reaches the maximum height you've set (300px in the above example) at which point it should stop growing and start displaying vertical scroll bars for the remainder of the festivities. This would retain the quick glance nature of this feature so everyone can know who else is at the party without having to resort to checking the full RSVP list. Of course if your soiree grows to football stadium size then Proboards will impose its own limit and require that we ask for "more..."

SPOILER: Click to show

If you're still dead set on a workaround similar to 'likes' then I was just playing around with the following template mod that should give you a 'likes'-esque popup containing a list of microprofiles for online users

1. In your home template, approximately around line number 80 you should see the following
   {foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
   
   
2. Change that to read this instead
   {foreach $[online_user]}
<!-- show only a certain amount of names -->
{if $[online_user.index] < NUMBER_OF_USERS}
$[online_user] <!--//-->
{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{else}
{if $[online_user.index] == NUMBER_OF_USERS} [<a href="javascript:void(0)" style="display:inline" class="show-and-prove">view others online</a>]<span class="show-n-prove hide">{/if}
$[online_user.microprofile]
{if $[online_user.index] == $[online_user.lastIndex]} </span>{/if}
{/if}
{/foreach}
   make sure to replace NUMBER_OF_USERS in the code with the actual number of users you want to show, you'll find it in two places in the code
   
   
3. Scroll to the bottom of the template and add the following code after the last line
   
<script>
$('.show-and-prove').click(function (evt) {
var users = $('<div id="show_more_users"><div class="control-bar ui-helper-clearfix center"><ul class="user-pagination"></ul></div>' + $('.show-n-prove').html() + '{if $[total_online_not_shown]} <div class="micro-profile more-users"> <div class="avatar"> <div class="avatar-wrapper avatar_size_small avatar-2"><img src="http://images.proboards.com/v5/info/online.png" alt="more users Avatar"></div> </div> <div class="info"> <div class="nowrap"> <span class="name"><a href="$[view_active_members_link.href]" title="last_online" class="$[view_active_members_link.class]">$[total_online_not_shown] more</a></span> <span class="small">(online now)</span> </div> <div class="nowrap group-overflow">Online Users</div> <img src="//images.proboards.com/v5/stars/star_blue.png" alt="*"><img src="//images.proboards.com/v5/stars/star_blue.png" alt="*"><img src="//images.proboards.com/v5/stars/star_blue.png" alt="*"><img src="//images.proboards.com/v5/stars/star_blue.png" alt="*"><img src="//images.proboards.com/v5/stars/star_blue.png" alt="*"> </div></div>{/if}</div>');
var total = users.find('.micro-profile').length;
var limit = 7;
users.find('.user-pagination').pagination({
total: total,
limit:limit,
change: function(event, ui){
var start = 0 + ((ui.page-1)*limit), end = limit - 1 + ((ui.page-1)*limit);
users.find('.micro-profile').hide().slice(start,end).show();
$(event.originalEvent.delegateTarget).pagination('refresh',ui)
}
}).css('display','inline-block')
.data('pagination')._trigger('change',evt,{page:1})
users.dialog({
title:'Other Users Online',
autoOpen: true,
width:500
});
});
</script>
<style>
   .show-n-prove *{display:none;}
#show_more_users .micro-profile {float: left;margin-left:2em;}
.no-micro-profile.no-more-users {clear:both; display:inline-block!important;}
</style>
   
   
4. try it out and give me some feedback since I don't have a forum with enough online users to fully test the limitations

[Former Member]

theres an error in this code buddy, im not sure what it is myself sorry.


thx for doing this btw, its just what i want

[Chris]

Can you be a bit more specific on the error? Are the scroll bars not showing? Is it growing beyond the specified height?

[Former Member]

Oct 12, 2015 3:34:14 GMT -8 Chris said:

Can you be a bit more specific on the error? Are the scroll bars not showing? Is it growing beyond the specified height?

the code has a syntex error when i place it in css, it goes red.

[Chris]

The syntax parser in Codemirror (the system Proboard uses to syntax highlight codes) is geared toward compliant HTML but has no knowledge of Proboard's layout conditionals and as a result will mistakenly flag a perfectly legal conditional construct as a syntax error. A parser that truly understood Proboard's enhanced syntax would for example highlight the {/if} whenever you were inside the starting {if $[blah]} the same way it highlights the ending </td> whenever you're working in the opening <td blah="blah">. I say this to explain that you cannot always rely on "seeing red" to determine if something is wrong with a template, especially if it contains Proboard's templating structures and conditionals. I added the "<!--//-->" you see in that code as a sacrificial lamb to take the red since as far as I can tell Codemirror is trying to parse the latter portion of the conditional as some sort of attribute due to the "<" used in the conditional being interpreted as starting a new HTML tag.

TLDR; - ignore the red

Also since the template modification employs inline scripts you would have trouble trying to PREVIEW it since some browsers will erroneously flag it as an XSS exploit. In Chrome for example you might get an "XSS Auditor" error in the console since it saw a script being submitted and then that same script appeared in the resulting preview page so rightfully refuses to run that script. You would either need to use another browser (such as Firefox) to preview the results  or if Chrome is your only option then create a 'test' theme by making a copy of one of your existing themes and apply the changes to that 'test' theme outright to see the results (making sure of course that your profile is set to use that test theme).

TLDR; - don't use Chrome to preview template mods containing inline scripts

[Former Member]

Oct 12, 2015 5:22:46 GMT -8 Chris said:

The syntax parser in Codemirror (the system Proboard uses to syntax highlight codes) is geared toward compliant HTML but has no knowledge of Proboard's layout conditionals and as a result will mistakenly flag a perfectly legal conditional construct as a syntax error. A parser that truly understood Proboard's enhanced syntax would for example highlight the {/if} whenever you were inside the starting {if $[blah]} the same way it highlights the ending </td> whenever you're working in the opening <td blah="blah">. I say this to explain that you cannot always rely on "seeing red" to determine if something is wrong with a template, especially if it contains Proboard's templating structures and conditionals. I added the "<!--//-->" you see in that code as a sacrificial lamb to take the red since as far as I can tell Codemirror is trying to parse the latter portion of the conditional as some sort of attribute due to the less than symbol used in the conditional.

TLDR; - ignore the red

Also since the template modification employs inline scripts you would have trouble trying to PREVIEW it since some browsers will erroneously flag it as an XSS exploit. In Chrome for example you might get an "XSS Auditor" error in the console since it saw a script being submitted and then that same script appeared in the resulting preview page so rightfully refuses to run that script. You would either need to use another browser (such as Firefox) to preview the results  or if Chrome is your only option then create a 'test' theme by making a copy of one of your existing themes and apply the changes to that 'test' theme outright to see the results (making sure of course that your profile is set to use that test theme).

TLDR; - don't use Chrome to preview template mods containing inline scripts

sorry your losing me, could u explain alittle easier pls  

[Former Member]

 this one, i think u miss understood me sorry.

[Chris]

Oct 12, 2015 8:06:33 GMT -8 @joecool111 said:

 
this one, i think u miss understood me sorry.

Yes I misunderstood since I thought you were referring to the second suggestion. That is indeed an error because HTML is being introduced in the CSS section which only understands CSS not HTML.

Oct 10, 2015 8:36:17 GMT -8 @joecool111 said:

i put this code in to move it into the side bat from the stats/info box if this is any help.

<div id="move-shoutbox"></div>

The suggestion was to MODIFY the code you posted by adding the inline CSS to it so it would stop growing after a point.

Where ever you "put" that code is unknown to me since that went unmentioned but I don't think it was in the CSS editor else that would generate an error.  If I had to guess I would say you had it in the sidebar plugin and then had a small script that moved the appropriate items there.

[Former Member]

Oct 12, 2015 8:34:45 GMT -8 Chris said:

Oct 12, 2015 8:06:33 GMT -8 @joecool111 said:

 
this one, i think u miss understood me sorry.

Yes I misunderstood since I thought you were referring to the second suggestion. That is indeed an error because HTML is being introduced in the CSS section which only understands CSS not HTML.

Oct 10, 2015 8:36:17 GMT -8 @joecool111 said:

i put this code in to move it into the side bat from the stats/info box if this is any help.

<div id="move-shoutbox"></div>

The suggestion was to MODIFY the code you posted by adding the inline CSS to it so it would stop growing after a point.

Where ever you "put" that code is unknown to me since that went unmentioned but I don't think it was in the CSS editor else that would generate an error.  If I had to guess I would say you had it in the sidebar plugin and then had a small script that moved the appropriate items there.

ok i see, iv put it in the sidebar. thank u for the help

[Former Member]

its worked fine that thanks