Question 258613 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Css for a span element works on desktop but not mobile. Element is added using jquery .append()

Pretty much as the question states.

I can only place html/scripts in limited places (don’t have access to the direct html or source files) so am adding in a short script to add ratings.

It’s meant to display 3 chillis and depending on the rating they will all be red or some red some white. It works perfectly fine on desktop versions but for mobile it’s showing all icons as red and is not picking up the chilli-white css. Anyone have any ideas why?

var spicyRating3 = "<span class='chilli-red'>🌶 🌶 🌶</span>";
var spicyRating2 = "<span class='chilli-red'>🌶 🌶</span><span class='chilli-white'>🌶</span>";
var spicyRating1 = "<span class='chilli-red'>🌶</span><span class='chilli-white'>🌶 🌶</span>";
$(".rating-3").append(spicyRating3);
$(".rating-2").append(spicyRating2);
$(".rating-1").append(spicyRating1);
body {
  background-color: lightblue;
}

.agenda .chilli-red {
  color: #ff0000;
}

.agenda .chilli-white {
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<p class="rating-3"></p>
<p class="rating-2"></p>
<p class="rating-1"></p>

Desktop (how it should look)
1 chilli rating correct

Mobile (should only show one chilli but all are red/not working)
3 chilli rating incorrect

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Updated css to the below and it works as required now - thanks Phil for the link

    .agenda .chilli-red{
color: transparent;
text-shadow: 0 0 0 #ff0000;
}
.agenda .chilli-white{
color: transparent;
text-shadow: 0 0 0 #fff;
}

  2. 0

    Or use SVG images instead of emoji

    var spicyRating3 = '<img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-red.svg">';
var spicyRating2 = '<img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-white.svg">';
var spicyRating1 = '<img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-white.svg"><img src="https://donald.au/bugs/so-77233608/chilli-white.svg">';

document.querySelector(".rating-3").innerHTML = spicyRating3;
document.querySelector(".rating-2").innerHTML = spicyRating2;
document.querySelector(".rating-1").innerHTML = spicyRating1;
    body {
  background-color: lightblue;
}
p.rating-1 img, p.rating-2 img, p.rating-3 img {
  width: 30px;
}
    <p class="rating-3"></p>
<p class="rating-2"></p>
<p class="rating-1"></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search