> Forums > Active Forums > Themes and Templates > Collapsible Categories with jQuery on the KB Custom View
Last Post 22 Jun 2011 03:34 PM by Larry. 11 Replies.
AddThis - Bookmarking and Sharing Button Printer Friendly
  •  
  •  
  •  
  •  
  •  
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages
Informative
paidinfull
Customers
paidinfull
Post Count:59

--
15 Jan 2011 11:39 AM
    • DotNetNuke Version: 5.6.0
    • Active Forums Version: 4.3.3
    Will was gracious enough to post the Knowledge Base Custom View that breaks down topics in a forum by category.

    If you happen to have a lot of categories, as well as a lot of topics per category, the user experience can be somewhat overwhelming.

    What follows is a simple cut and paste using jQuery, jQuery Ui, and jQuery CSS.
    My version is a little "dirty" and can certainly be simplified, it just matters based on how knowledgeable you are with working in CSS and your code.

    First you will want to include a reference to jQuery Ui like so:



    This can be added just above the "notools" tag
    Second you will want to ensure your DNN portal is using the most current version of jquery.
    I prefer using the external hosted, but to each their own.  This can be done under Host Settings > Other Settings

    Third you will want to add a < div > wrapper around the ForumContentNavigator
    In the KB-Topics & KB-Topic template, add < div id="accordion" > just after < div class="fcv-wrap" >
    Then scroll to just under the closing ForumContentNavigator tag, and add a closing tag after the previous
    You have essentially placed fcv-wrap inside of the accordion.
    Now, copy and paste the following into your template
    < script >
    $(document).ready(function () {
    $("#accordion").accordion({ header: "div.fcv-categoryname" });
       }); 
    < /script >


    That's it.
    You can see an example here:
    http://www.ironfistleague.com/forums/army-lists/40k-Lists/

    To make the collapsible look a little nicer, I suggest going to 
    http://jqueryui.com/themeroller/
    Styling the look and feel, downloading your own theme, then adding the files and references into your skin.

    Hope this helps!


    Tags: jQuery, ui, kb
    paidinfull
    Customers
    paidinfull
    Post Count:59

    --
    15 Jan 2011 11:41 AM
    Oops, looks like [div] gets translated.

    For the third step, [div id="accordion"]
    and then I reference adding a closing [/div] tag

    in my version, I used !important in some of my CSS to clean up the look and feel between the module.css and my own skin.


    Will Morgenweck Forum Admin
    DotNetNuke Staff
    Will Morgenweck
    Post Count:7671

    --
    15 Jan 2011 11:49 AM
    This looks great! Probably the only thing I see missing is the ability to auto expand the selected category when viewing an article. Problem is that since a topic can belong to multiple categories you really don't know which one is expanded. I don't know if the jquery according supports any kind of state persistence, but we might be able to do something with a cookie. What do you think?


    Will Morgenweck
    Director of Product Management
    DotNetNuke Corp.
    paidinfull
    Customers
    paidinfull
    Post Count:59

    --
    15 Jan 2011 01:12 PM
    Posted By Will Morgenweck on 15 Jan 2011 12:49 PM
    This looks great! Probably the only thing I see missing is the ability to auto expand the selected category when viewing an article. Problem is that since a topic can belong to multiple categories you really don't know which one is expanded. I don't know if the jquery according supports any kind of state persistence, but we might be able to do something with a cookie. What do you think?

    I have yet to really mess with it too much, as I haven't worked extensively with jQuery yet, but what you're describing is totally possible.
    It wouldn't even require persistent states as the ForumContentNavigator, updates the class.
    I'd simply have to add a clause on the front end that looks for the "fcv-selected" class, and set that to be the focus, or toggle blind.

    I'll revise it.  I hadn't even played with the "accordion" function until this Wednesday, so what you're seeing is 100% first draft.
    I'm a bit of jQuery noob, but once I get a moment to do a bit of research I'll add that in and update it here.

    Ironically enough, there is a "sortable" ability to the accordion, and I was considering using that on top of the ForumContentNavigator to achieve the order by rating by count.(if that last part makes sense).  Truth be told, it will probably be easier if I put more time into figuring out how to add a custom control myself.  I just am "green" on integrating those custom controls with the base DNN class.


    paidinfull
    Customers
    paidinfull
    Post Count:59

    --
    15 Jan 2011 01:16 PM
    I also failed to comment that all of the "spaces" that were added within the accordion script should be removed.
    My apologies for not previewing and proofing the post.


    CSmith
    Customers
    CSmith
    Post Count:91

    --
    17 Jan 2011 08:50 AM
    I would love to get this to work, but I seem to be having an issue. Any change someone could publish a template?


    paidinfull
    Customers
    paidinfull
    Post Count:59

    --
    17 Jan 2011 03:35 PM
    Posted By CSmith on 17 Jan 2011 09:50 AM
    I would love to get this to work, but I seem to be having an issue. Any change someone could publish a template? 
    I just used the base KB-Templates and then modified it...

    IFL-KP-TopicsView.txt

    CSmith
    Customers
    CSmith
    Post Count:91

    --
    18 Jan 2011 03:25 PM
    Thanks paidinfull; now I have some styling to do...


    paidinfull
    Customers
    paidinfull
    Post Count:59

    --
    20 Jan 2011 10:38 AM
    Posted By CSmith on 18 Jan 2011 04:25 PM
    Thanks paidinfull; now I have some styling to do...

    My pleasure.


    G.O.
    Customers
    G.O.
    Post Count:126

    --
    10 Feb 2011 09:58 PM
    Mm, this is exactly what I need but the accordian function doesnt seem to work. I am still getting exactly the same as AM's template.. even thought I have changed the default template for the Forum group.

    http://demo1.evolvelogic.com/xplan-...brary/IPS/


    Stephen

    www.turtledrift.com
    Scuba divers social network
    NFXBeats
    Customers
    NFXBeats
    Post Count:299

    --
    11 Feb 2011 11:06 AM
    Posted By Will Morgenweck on 15 Jan 2011 12:49 PM
    This looks great! Probably the only thing I see missing is the ability to auto expand the selected category when viewing an article. Problem is that since a topic can belong to multiple categories you really don't know which one is expanded. I don't know if the jquery according supports any kind of state persistence, but we might be able to do something with a cookie. What do you think?

    Some way to execute a custom JS function would be better and more powerful I think. For example, the accordion items have an id. if these are based on the messageid you could execute something to call a defined function thats passed the messageid.

    after display messageid 12345, the user defines a function to be called: showinaccordion([AF:MESSAGEID]) this function can do any number of things required to make sure it's displayed. Something like this would also have benefits like allowing the user to manipulate any content in the message as well such as searching the page for custom tags and replacing them with other content,


    Status: I'm no longer moderated.
    Larry
    Customers
    Larry
    Post Count:116

    --
    22 Jun 2011 03:34 PM
    At G.O. - Did you get the accorduan to work? If so, what did you have to change?

    I had the same issue, but had to step away from this for a while.


    You are not authorized to post a reply.
    > Forums > Active Forums > Themes and Templates > Collapsible Categories with jQuery on the KB Custom View
    test
    Copyright 2012 by DotNetNuke Corporation / Terms of Use / Privacy