id attribute used for avg value

  • Resolved netzgestaltung

    (@netzgestaltung)


    5 years ago

    Hi there,

    while adding some ajax trigger for the plugin i noticed that the id attribute is used to set and get the values which can be the same for more than one element on the page because its just a number without any prefix and if you add the rating to an archive page more posts will have the same element with same id.

    while i worked on a nother topic i started to reimplement the shortcode function and now i started changing the html output in it with

    <span class="wpcr_averageStars" id="'.$result.'">
    replaced by
    <span class="wpcr_averageStars" data-wpcravg="'.$result.'">

    then based on another topic i adoped my themes javascript like so:

    
;(function($){
  'use strict';
  
  var min_stars = 0,
      max_stars = 5,
      data_name = 'wpcravg',
      events = 'ready ajaxComplete',
      selectors = {
        averageStars: '.wpcr_averageStars'
      },
      set_stars = function(){
        $(selectors.averageStars).each(function(){
          // $this uses the sizzle engine only once
          // $(this).attr('id'), id must be unique in document:  https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
          // parseInt to get a number out of it
          // add span directly to .html() also saves one sizzle call
          var $this = $(this),
              avg = parseInt($this.data(data_name)),
              stars_width = Math.max(min_stars, (Math.min(max_stars, avg))) * 16;
          
          $this.html('<span style="width:' + stars_width + 'px;"></span>');
        });
      };

  $(document).on(events, set_stars);
})(jQuery);

    hope it helps in further development.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author shoaib88

    (@shoaib88)

    Hi netzgestaltung,
    Thank you very much to spent your time to reimplement my plugin code.I’ll also implement this code in the next version.

    Thanks

    • This reply was modified 5 years ago by shoaib88.
    Thread Starter netzgestaltung

    (@netzgestaltung)

    i now got my personal template code ready and integrated a “no text” version and the shortcode title

    you can grab it here:
    https://github.com/netzgestaltung/wordpress-snippets/blob/master/wp-post-rating_order-posts.php

    here is also some CSS i had to add to my template while the stars occur on different places on the page i am working on. The “article” selector is only there to overwrite the plugin CSS rules.

    article .wpcr_aggregate{
  float:none;
  width:auto;
  display:block;
  line-height:2em;
  min-height:2em;
  margin:0 0 1em 0;
}
article .title .wpcr_aggregate{
  display:inline;
  line-height:inherit;
}
article span.wpcr_averageStars{
  display:inline-block;
}
article .wpcr_tooltip,
article .wpcr_inline,
article a.wpcr_tooltip span.wpcr_averageStars,
article a.wpcr_inline span.wpcr_averageStars{
  float:none;
}
.content a.wpcr_tooltip span.wpcr_averageStars, 
.content a.wpcr_inline span.wpcr_averageStars{
  margin:0.238095238em 0.5em 0 0.5em;
}

    maybe i can share the live url next week.

    Thread Starter netzgestaltung

    (@netzgestaltung)

    hi there,

    finally i got the first ratings to show:
    https://www.alphabetisierung.at/lernmaterial/

    kind regards, tom

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘id attribute used for avg value’ is closed to new replies.