sIFR: Not working for custom divs more than once.

Question

Using sIFR rev. 436, latest release. Replaces h1, h2, h3, h4 tags flawlessy, as many as I have on the page. However, if i try replacing a custom div, say Replace Me it replaces only the first instance, but not the others on the page. I tested this on the 2.0 release as well and got the same results. Is this just a limitation of the software that it won't let me do this?

Answer 1

It should work.

Is "Replace Me" a class or an id?

Paste relevant pieces of code that shows what works and what doesn't work.

Answer 2

The id attribute has to have a unique value, having more than one element with the same id is wrong.

To use the same styling for multiple elements use the class attribute.

replace this html

<div id="champion">DELICIOUS APPETIZERS</div>
<div id="champion">Appetizers</div>
<div id="champion">Ulitimate Trios</div>

with

<div class="champion">DELICIOUS APPETIZERS</div>
<div class="champion">Appetizers</div>
<div class="champion">Ulitimate Trios</div>

And replace this in your sifr config

sIFR.replace(champion, {
  selector: '#champion',
  css: '.sIFR-root { color: #c21212; }'
});

with this

sIFR.replace(champion, {
  selector: '.champion',
  css: '.sIFR-root { color: #c21212; }'
});