Show Widgets by category



  • Is there some variable exposed on the category page that holds the page ( category ) name or ID so I can tailor the showing of the widgets to a specific page when shown? The sidebar is to general ... it should be page ( category ) specific. Feeds about camping has nothing to do with the 'about us' page. The HTML widget is perfect to load-up the sidebar when getting down to the category level, but I need to know where I am at .... something like

    • if Category = 'About US' then
      <a class="twitter-timeline" href="https://twitter.com/AmericanBulleti" data-widget-id="582289000196636672">Tweets by @AmericanBulleti</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      endif*

    Thanks....


  • Global Moderator

    <script>
    if (ajaxify.currentPage !== 'Page here') {
     do this;
    }
    </script>
    

    You'd need to test with what you put into the current page. category/2 Etc may work.



  • Thank you @a_5mith. Just curious..... why the !== to ?

    Rich



  • @a_5mith got me on the right track for this messy hack.... but it does the trick.

    in the container of your widget give it an ID name, then check for the name of the page ( I copied and pasted from the actual url in my browser "xxxxxxxxx.com:8080**/category/5/real-money-gold-silver**" ) by @a_5mith 's suggestion to check for the condition, and then the dom to hide it if not the correct page. Everything is self contained in the container.

    <div id="gold" class="panel panel-default"><div class="panel-body">{body}</div>
    <script>
    if (ajaxify.currentPage !== 'category/5/real-money-gold-silver') {
    document.getElementById("gold").style.display = 'none';
    }

    </script></div>

    Thanks for the help.... I hope this becomes easier in the future. Each Category has a targeted audience and the sidebars should reflect that. What a great product!

    Rich


  • Global Moderator

    !== means is not equal to

    == means is equal to

    I just copied some code of mine and removed the non essential bits. Missed the ! 🙂

    If you have more than one category you want to do this for, I would set them all to display none by default, and then use is equal to to set the style to display block.



  • @a_5mith said:

    !== means is not equal to

    == means is equal to

    I just copied some code of mine and removed the non essential bits. Missed the ! 🙂

    If you have more than one category you want to do this for, I would set them all to display none by default, and then use is equal to to set the style to display block.

    Thanks... I know that. I was just wondering Why != instead of =. Anyway, in this case very thing is visible 'unless' it is the correct page, instead of everything 'invisible' and display only when the page is the correct page.


  • Global Moderator

    As long as it works for you. 👍



  • Hi, I tried this but it didn't work for me which I found to be very strange as this sort of thing works all the time on other javascript based sites.
    Perhaps I am missing some logic, as it either displays on all pages or it does not show at all, but never for the page I want it to work for. 😟

    I will keep playing with it too see if I am missing something...


  • Admin

    @RichG !== just makes it check the type as well as value, so 1 == '1' is true, whereas 1 === '1' is false as the former is a Number and the latter is a String.



  • This post is deleted!

  • Admin

    We could add this in to the widgets... possibly



  • @julian that would be awesome!



  • Maybe this can help someone:

    You can also use jquery:

    This would go into the HTML widget:

    <span class="offtopic_forbidden">Off-topic is strictly forbidden.</span>
    <script>
    if (ajaxify.currentPage != 'category/14/staff-recruitment') {
        $('.offtopic_forbidden').hide()
    }
    </script>
    

    And this would be the container:

    <div class="alert ui-draggable-handle alert-danger offtopic_forbidden">{{body}}</div>
    

    Adjust 'category/14/staff-recruitment' to your needs.

    • $('.offtopic_forbidden') is a jquery selector, it selects the DOM element with the class .offtopic_forbidden

    • The function .hide() hides it.

    Additional info:

    • You can use another type of container, but be sure to add the class to it.

    • You can also rename offtopic_forbidden to your needs.


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.