Show less than 6 articles in Guide

163 Comments

  • James

    This is a great tip, Wes! This really cleaned up one of my topic pages. 

    0
  • James

    Also thanks to Rose from Zendesk!

    0
  • Wes Drury

    @James - Glad to hear and I agree with you that it does make everything look cleaner.  That's why I asked for it and implemented it on our Help Center.

    0
  • Dani Johnson

    Thank you!

     

    0
  • Wes Drury

    @Dani - Your welcome glad I could help!

    0
  • Steve Niebauer

    Hi Wes,

    Is there any way to edit the JS to show all articles in a section? Thanks!

    0
  • Wes Drury

    @Steve - I don't believe there is a way to show all articles in a sections as the ZenDesk code will limit it.

    0
  • Mariah Muscato

    Used this script to show 5 articles or less, ran into an issue. The "See all 6 articles" font size for categories that have 6 articles is larger than categories that have 7 or more articles. One appears underlined and one does not. Has anyone else seen this?

    0
  • Wes Drury

    @Mariah - I'll take a look at this but is there a way I can see your page so that I can inspect the different elements to see what's going on.  If I can't no big deal as I can give you some suggestions but it sure would help.

    0
  • Mariah Muscato

    @wes Of course you can! We just pushed the site live so here is the link --> http://support.runkeeper.com/hc/en-us/categories/200097368-Known-Issues

    0
  • Wes Drury

    @Mariah - Great and thanks for the link as it made it alot easier to troubleshoot.  Go to you CSS file and on line 765 make it match what I have below.  As you can see I have commented out 3 of the lines.  Give that a try and let me know if that fixes you up.

    .see-all-articles {
    display: inline-block;
    /* font-size: 10px; */
    /* margin-top: 10px; */
    /* text-decoration: underline; */
    }

    0
  • Mariah Muscato

    @Wes, that makes the two "See all.." look the same but I prefer the look of the underline, is it possible to make the bigger "see all 6 articles" match the smaller?

    0
  • Wes Drury

    @Mariah - Got ya sorry I was doing it in reverse as I thought you wanted the font size to match the text above.  Let me play around with it as we may have to use JQuery if we go that path.  Not that it matters but I liked the larger text as it made it easier to read.  Be back soon.

    0
  • Wes Drury

    @Mariah - Give this a try as I could not test it on my end.

    Change the following line in JS:

    $("<a class='moreTopics' href=" + moreLink + ">" + linkText +  "</a>").insertAfter($(categories[j]));

    Change To:

    $("<a class='see-all-articles' href=" + moreLink + ">" + linkText +  "</a>").insertAfter($(categories[j]));

    0
  • Mariah Muscato

    @Wes Works like a charm! Thanks so much!

    0
  • Wes Drury

    @Mariah - glad to hear and if you need any additional help just let me know.

    0
  • Derek Knoderer

    @Wes - We'd like to display a list enumerating all of categories and all of their respective articles -- no matter how many there are; but we do *not* want the individual articles to be expandable (so the {{category_tree_with_articles}} component doesn't work for us). Suggestions? Thanks in advance.

    0
  • Wes Drury

    @Derek - I didn't think there was a way to do this however after much playing around, I may have found a solution.  You will need to test this to make sure it doesn't mess anything else up but give this a try.

    Use {{category_tree_with_articles}} in your HTML

    Add the following to your JS tab after the "$(document).ready(function() {" line

    //Trick zendesk into showing all articles 
    $('ul.article-list li a').removeAttr('data-asynchtml-ressource');

    Let me know how your testing goes.

    0
  • Wes Drury

    @Derek - By the way this should also work on the Category Page with the {{section_tree_with_article}} placeholder.

    0
  • Janet Del Aguila

    Thank you for sharing this sample code. It really cleans up the layout of articles. However, I'd love to remove the "See all # articles". Or at the very least, know how to change the wording from "See all # articles" to "Click to see more..." Does anyone know how to do this? Thanks!

    0
  • Janet Del Aguila

    Thank you for sharing this sample code. It really cleans up the layout of articles. However, I'd love to remove the "See all # articles". Or at the very least, know how to change the wording from "See all # articles" to "Click to see more..." Does anyone know how to do this? Thanks!

    0
  • Wes Drury

    Hi Janet - Glad you find the code above useful for your Help Center.  If you want to change the wording of the link at the bottom of the article listing  then please add the below JS code below the $document ready function:

    Link below is to my Gist - also feel free to look at all of my code that I've written for Zendesk.

    https://gist.github.com/moderatorwes/8c229922528ab37cc4fb

    0
  • Janet Del Aguila

    @Wes, you are my hero! My syntax was not even close. Thank you for sharing.

    0
  • Wes Drury

    @Janet - Glad I could help.  If you need anything else just let me know.

    0
  • David Kavalsky

    Hi Wes,

    The sample code has been great but I'm running into an issue with it for any section that has more than 6 articles in it. More specifically, everything renders fine for sections that have 4-6 articles in it but if there are 7 or more articles, "More..." and "See all # articles" underline separately as if they are for separate links. Both links function properly but it's driving me nuts that any section with 7 or more articles looks like "More..." and "See all # articles" are separate links.

    Have you seen this before? Do you know how I can fix this?

    Thanks!

    0
  • Wes Drury

    @David - I believe I know what you are referring to so as soon as I get some time I'll take a look and do some testing.

    0
  • David Kavalsky

    Thanks! @Wes!

    I really appreciate it.

    0
  • Paul Fennell

    @David - I'm running into the same problem on my side.  I'll be interested to know if you find a solution.

    0
  • Wes Drury

    @David or @Paul - Any chance one of you could send me a link to your Help Center so that I can take a look.  If not I will have to re-create the code on my end which will take me even longer.  Also what theme are yall using.

    0
  • Paul Fennell

    Thanks @Wes

    Here is my sandbox: https://fuzemeeting1403719153.zendesk.com/hc/en-us - note

    See sections under category "Getting Started" - I believe I'm using the "Swift Elk" theme.

    0

Please sign in to leave a comment.

Powered by Zendesk