Skycons, Cant Display the Same Icon Twice

Skycons, cant display the same icon twice?

You should use the version that works with element references instead of id

(And change the html to use classes instead of ids)

for(i = list.length; i--; ) {
    var weatherType = list[i],
        elements = document.getElementsByClassName( weatherType );
    for (e = elements.length; e--;){
        icons.set( elements[e], weatherType );
    }
}

and change your html to

   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong>
         <canvas class="snow" width="50" height="50"></canvas>
         <span>19°</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong>
         <canvas class="rain" width="50" height="50"></canvas>
         <span>19°</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong>
         <canvas class="sleet" width="50" height="50"></canvas>
         <span>19°</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong>
         <canvas class="snow" width="50" height="50"></canvas>
         <span>19°</span>
   </li>

If you need to support IE8 and older you need to use this polyfill for the getElementsByClassName function: Polyfill for getElementsByClassName for particular uses

How to use id twice in javascript with Skycons

Found this: Skycons, cant display the same icon twice?

By using classes instead of IDs, and tweaking your function like the answer I linked:

var icons = new Skycons({        "color": "#73879C"    }),    list = [        "clear-day", "clear-night", "partly-cloudy-day",        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",        "fog"    ],    i;
for (i = list.length; i--;) {    var weatherType = list[i],        elements = document.getElementsByClassName(weatherType);    for (e = elements.length; e--;) {        icons.set(elements[e], weatherType);    }}
icons.play();

Polyfill for getElementsByClassName for particular uses

Just for the record, older browsers are still alive because people keep making efforts to support them.

Polyfill for document.getElementsByClassName

With that said, a short google search could have brought you to this link:
https://gist.github.com/eikes/2299607

The polyfill for IE6/7 is like this:

if (d.evaluate) { // IE6, IE7
  pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
  elements = d.evaluate(pattern, d, null, 0, null);
  while ((i = elements.iterateNext())) {
    results.push(i);
  }
}

Based on the document.evaluate method

https://developer.mozilla.org/en-US/docs/Web/API/document.evaluate

EDIT: Polyfill for element.getElementsByClassName

You seem to want to call the getElementsByClassName method on a HTML element instead of on the document. Unfortunately i don't think you can polyfill that on IE6 and 7 (and even 8), as this answer seems to suggest:
How to add my own methods to HTMLElement object?

You can still use document.evaluate to acomplish the functionality you want (hint: the second parameter is a context node; it should be your element), but you need to change the calling code to something like this:

<div onclick="myPolyfill('class', this)[0].innerHTML = 'works'">

Angular2 use Skycons JS

Here is an answer:

const Skycons = require('skycons')(window);

 $(document).ready(function () {
  const skyconType = function (icon) {
    if (icon === 'rain') { return Skycons.RAIN; }
    else if (icon === 'snow') { return Skycons.SNOW; }
    else if (icon === 'sleet') { return Skycons.SLEET; }
    else if (icon === 'hail') { return Skycons.HAIL; }
    else if (icon === 'wind') { return Skycons.WIND; }
    else if (icon === 'fog') { return Skycons.FOG; }
    else if (icon === 'cloudy') { return Skycons.CLOUDY; }
    else if (icon === 'partly-cloudy-day') { return Skycons.PARTLY_CLOUDY_DAY; }
    else if (icon === 'partly-cloudy-night') { return Skycons.PARTLY_CLOUDY_NIGHT; }
    else if (icon === 'clear-day') { return Skycons.clear_day; }
    else if (icon === 'clear-night') { return Skycons.clear_night; }

    return 'cloudy';
  };
  $(function () {
    let skycons = new Skycons({ 'color': '#3C4858' });
    $('.skycon canvas').each(function (i, elem) {
      skycons.add(elem, skyconType(elem.className));
    });
    skycons.play();
  });
});

---

Related Topics