Category Questions

Go down

In progress Category Questions

Post by txsoccer on May 9th 2018, 11:32 pm

Any way to make separate categories separate colors? What about in the Latest Topics widget, can the latest topics be color-coded by category, or can you do the latest topic widget for each category? Basically, I have two main categories, one male, one female, and people would like to be able to tell in the Latest Topics which category the post was in as just the title can be a bit ambiguous.

Thanks
txsoccer.net

txsoccer
Forumember

Posts : 25
Reputation : 1
Language : English

http://txsoccer.net

Back to top Go down

In progress Re: Category Questions

Post by SLGray on May 9th 2018, 11:39 pm




When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
avatar
SLGray
Administrator
Administrator

Male Posts : 44472
Reputation : 3154
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Category Questions

Post by txsoccer on May 10th 2018, 12:41 am

That is close, but I was hoping to do a whole category including multiple forums underneath.

txsoccer
Forumember

Posts : 25
Reputation : 1
Language : English

http://txsoccer.net

Back to top Go down

In progress Re: Category Questions

Post by SLGray on May 10th 2018, 9:37 am

t = topic

f = forum

c = catogery


Code:
jQuery(document).ready(function(){jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topictitle:lt(11)");});
Change the part after .load



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
avatar
SLGray
Administrator
Administrator

Male Posts : 44472
Reputation : 3154
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Category Questions

Post by Wecoc on May 10th 2018, 8:18 pm

@SLGray what he's asking is a bit more complex than that.

I'm not sure it would be possible using that tutorial with a more complex javascript, but anyway in this case it's easier to use the real Recent topics widget instead.

@txsoccer Here's how:
First edit your template mod_recent_topics.
AP Display Templates Portal mod_recent_topics

Replace it enterely to this code and save the changes (click the button):

Code:
<div class="module">
   <div class="h3"><i class="ion-chatbubble-working"></i>{L_RECENT_TOPICS}</div>

<!-- BEGIN scrolling_row -->
   {MARQUEE_JS_SRC}
   <div id="comments_scroll_div">
   <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
          <table summary="Most Recent Topics">
            <tbody>
      <!-- BEGIN recent_topic_row -->
                    <tr>
                      <td style="display:block;">
         <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="topictitle mod-recent-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a>
                      </td>
                      <td style="display:block;">
         <span class="mod-recent-time">{scrolling_row.recent_topic_row.S_POSTTIME}</span>
                      </td>
            <td style="display:block;">
         <span class="mod-recent-author">
                            <!-- BEGIN switch_poster -->
                                    <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a>
                            <!-- END switch_poster -->
                            <!-- BEGIN switch_poster_guest -->
                                    {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
                            <!-- END switch_poster_guest -->
         </span>
                      </td>
                    </tr>
      <!-- END recent_topic_row -->
            </tbody>
          </table>
   </div>
   <script>$(".marquee").marquee();</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
   <div class="mod-recent-row">
          <table summary="Most Recent Topics">
            <tbody>
      <!-- BEGIN recent_topic_row -->
                    <tr>
                      <td style="display:block;">
                        <a href="{classical_row.recent_topic_row.U_TITLE}" class="topictitle mod-recent-title">{classical_row.recent_topic_row.L_TITLE}</a>
                      </td>
                      <td style="display:block;">
                        <span class="mod-recent-time">{classical_row.recent_topic_row.S_POSTTIME}</span>
                      </td>
            <td style="display:block;">
                        <span class="mod-recent-author">
            <!-- BEGIN switch_poster -->
               <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->
            <!-- BEGIN switch_poster_guest -->
               {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
            <!-- END switch_poster_guest -->
         </span>
                      </td>
                    </tr>
      <!-- END recent_topic_row -->
            </tbody>
          </table>
   </div>
<!-- END classical_row -->
</div>

After that, insert this javascript:
AP Modules Javascript codes management Create a new Javascript

Code:
$(function() {
  (function($) {
    $.assyncForHash = function(h, callback) {
        for (i in h) {
          var boundCallback = callback.bind(null, i, h[i]);
          setTimeout(boundCallback, i);
        }
        return this;
    };
  }(jQuery));
 
  var forums = {
    scripts: "/f1-scripts",
    graphics: "/f2-graphics"
  };
  $('.mod-recent-row tr').filter(function(){
    var current = this;
    var last_topic = $('.topictitle.mod-recent-title', current)[0].innerText;
    $.assyncForHash(forums, function(index, content) {
      $.get(content, function(d){
        var forum_topics = $('.topic-title-container', d);
        for (j in forum_topics){
          if (!forum_topics[j]) continue;
          if (forum_topics[j].innerText == last_topic){
            $(current).addClass(index);
            break;
          }
        }
      });
    });
  });
});

Name: Recent Topics Format
Placement: In all the pages

Search this part of the script and change there the different forum fields (in your case male/female) and the link of that forum:

Code:
  var forums = {
    scripts: "/f1-scripts",
    graphics: "/f2-graphics"
  };


After that you only have to set format to the new class using CSS.
AP Display Colors CSS Stylesheet

There for example I used this:
Code:
.mod-recent-row tr.scripts {
  background: #7eaf65;
}
.mod-recent-row tr.graphics {
  background: #aaa;
}

Result:

Instead of tr.scripts and tr.graphics use your forum fields tr.male and tr.female


Last edited by Wecoc on May 11th 2018, 6:07 am; edited 1 time in total
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

In progress Re: Category Questions

Post by txsoccer on May 11th 2018, 3:03 am

This looks really close Wecoc to what I am needing. A few questions, you have scripts pointing to f1-scripts and graphics to f2-graphics. If I am trying to do whole categories (In my girls category I have 27 sub forums and 17 in boys) I also have a general category with 5 forums. Can this code be altered so all 3 are color coded in the recent topics. Something like
Code:
var forums = {
  general: "/c1-general",
  girls: "/c2-girls",
  boys: "/c3-boys"
  };

or do I have to add multiple forums like

girls: "/f2-general-girls-discussion ", "/f33-girs-highschool", "/f22-girls-da", and so on

txsoccer
Forumember

Posts : 25
Reputation : 1
Language : English

http://txsoccer.net

Back to top Go down

In progress Re: Category Questions

Post by Wecoc on May 11th 2018, 5:07 am

Sorry, that Javascript was meant for forums and subforums, not for categories.
You can use this other Javascript instead to work with categories. The idea is the same, but the code is a bit messy, I hope it will work anyway...

Code:
$(function() {
(function($) {
 $.assyncForHash = function(h, callback) {
    for (i in h) {
      var boundCallback = callback.bind(null, i, h[i]);
      setTimeout(boundCallback, i);
    }
    return this;
 };
}(jQuery));

/* Get the categories: BOYS & GIRLS from the homepage */
var categories = {
  boys: 'Boys Soccer',
  girls: 'Girls Soccer'
};
var cat_div = {};
$.get(window.location.origin, function(home){
  $('.forabg', home).filter(function(){
    var cat = $('.header .dterm', this)[0];
    for (i in categories) {
      if (categories[i] == cat.innerText){
        cat_div[i] = this;
      }
    }
  });
}).done(function(){
  /* For each forum of those categories get the inside topics names */
  var cat_topics = [];
  $.assyncForHash(cat_div, function(index, content) {
    $('a.forumtitle', content).filter(function(){
      $.get(this.href, function(d){
        var container = $('.topic-title-container', d);
        var arr = [];
        container.filter(function(){ arr.push(this.innerText); });
        cat_topics.push([arr, index]);
      });
    });
  });
  setTimeout(function(){
    /* Compare each topic in the widget with the data obtained before */
    $('.mod-recent-row tr').filter(function(){
      var current = this;
      var last_topic = $('.topictitle.mod-recent-title', current)[0].innerText;
      for (i = 0; (i < cat_topics.length); i++){
        var arr = cat_topics[i][0];
        if (arr.includes(last_topic)){
          $(current).addClass(cat_topics[i][1]);
        }
      }
    });
  }, 500);
});
});

Everything else (template edit and CSS edit) is the same.
Also in the Javascript now you don't define the link but the category name, which I believe I already configured it properly in your case.

Code:
var categories = {
  boys: 'Boys Soccer',
  girls: 'Girls Soccer'
};


I will cross fingers.
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

In progress Re: Category Questions

Post by txsoccer on May 11th 2018, 5:28 am

Something didn't go right. Where I had the widget now I have code, lol


txsoccer
Forumember

Posts : 25
Reputation : 1
Language : English

http://txsoccer.net

Back to top Go down

In progress Re: Category Questions

Post by Wecoc on May 11th 2018, 6:01 am

Probably you insterted the javascript in the wrong place.
Here's the step by step.

1 - Change the Template mod_recent_topics

AP Display Templates Portal mod_recent_topics
The new content will be the first code I posted.

After that click on the button.
Once you did that the title mod_recent_topics of that table should be green, which means it's well updated.

2 - Insert a new Javascript

AP Modules Javascript codes management Create a new Javascript
That will be the last code I posted.
Make sure Placement is 'In all the pages'.

3 - Insert CSS format

AP Display Colors CSS Stylesheet
In the very end of the CSS code of your page (which may or may not be empty for now) add everything you need to make the new classes unique.
You are free to set the format you want, in the example above I simply colored the background of the row but you could add other effects, change the font color of the link, etc.
You could apply format on the ones which are not BOYS / GIRLS categories too... This is the most free and easy part once you got the Template and Javacript working.

Here's an example with blue/pink background and rounded borders.

Code:
.mod-recent-row tr.boys {
  background: #89c8e3;
  border-radius: 3px;
}
.mod-recent-row tr.girls {
  background: #eeb2ee;
  border-radius: 3px;
}
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

In progress Re: Category Questions

Post by txsoccer on May 11th 2018, 7:44 am

OK, it looks like it is getting closer. Now there are a few girls posts with the pink background, no boys have blue background. When I refresh the page, sometimes 2 of the girls recent posts have the pink background, sometimes 3, sometimes none. Kinda odd how it is picking up some, but not others.


txsoccer
Forumember

Posts : 25
Reputation : 1
Language : English

http://txsoccer.net

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum