CODEWITHSUNDEEP
javascriptjqueryhtmlarticle
taylor_man
taylor_man

Reputation: 39

How can I get JQuery Plugin to not target blog posts?

I am using a JS plugin that allows the overflow of text to be toggled between hidden and not hidden when you click the read more link. Works great, and uses the article tag to trigger it. I am using it on random portions of text throughout the site. The problem is the blog posts are also using the article tag so it's hiding most of the blog posts as well. How can I make it bybass the blog posts?

You can see it live on the site here. http://www.gregtregunno.ca/about and http://www.gregtregunno.ca/news

This is jquery

$(document).ready(function(){
  $('#info').readmore({
    moreLink: '<a href="#">More examples and options</a>',
    maxHeight: 390,
    afterToggle: function(trigger, element, expanded) {
      if(! expanded) { // The "Close" link was clicked
        $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
      }
    }
  });
$('article').readmore({maxHeight: 175});});

Upvotes: 0

Views: 47

Answers (2)

Patrick Q
Patrick Q

Reputation: 6393

Instead of applying your plugin to the article tag/elements, you should assign a special class to the elements to which you want to apply the plugin. Then, use this class as the selector when applying the plugin.

You can think of this as finding the "lowest common denominator" between the elements that you want to select. If one doesn't already exist, then you just create one. HTML elements are often too broad for applying some special function, but one specific element with a unique ID is obviously generally too narrow. This is where classes are the perfect fit.

<p class="more">The plugin will be applied to this paragraph</p>
<article>The plugin will not be applied to this article</article>

<script language="text/javascript">
    $(document).ready(function(){
        $('.more').readmore({maxHeight: 175});});
    });
</script>

Upvotes: 0

Sander Koedood
Sander Koedood

Reputation: 6337

By excluding the class of the blog posts like so:

$('article').not('.post').readmore({maxHeight: 175});});

By using the jQuery function .not() you can select (by class, ID, or whatever you want to use) what it should not select.

Better would ofcourse be to specify which posts SHOULD be shortened, instead of excluding what SHOULDN'T be shortened. So if that is a possibility within your theme, I would go for that. It would cause less load times.

Upvotes: 1

Related Questions