18041 sujets

Questions générales et questions de débutants

Tester mon site sous Iphone ?

Pages :
Modérateur
(reprise du message précédent)

Bonjour,

Si ton code est un peu complexe, il peut y avoir d'autres effets, surtout si tu commences à bricoler avec plusieurs sortes d'évènements.

Amicalement,
Modérateur
Bonjour,

J'ai recopié ton code dans une page en local (tester avec copen direct sur iphone, c'est sans garantie).

Marche nickel avec mon iphone (qui n'est pas de première jeunesse) : il faut toucher brièvement dans les étoiles pour qu'elles changent de couleur, et elles le font !

Amicalement,
Modérateur
Testé aussi depuis un iPhone dernière génération et le fait de toucher l'étoile affiche bien de la couleur.

Peut-être le problème vient de la taille du rate. Ce n'est pas évident de cliquer sur une étoile (et encore moins une demi étoile) du coup, le fait de garder le touch enfoncé va faire une sélection du rate mais en aucun cas sélectionner une valeur.
Modérateur
Bonjour,

Il faudrait rajouter un -webkit-tap-highlight-color:rgba(0,0,0,0); pour toutes les balises contenant les étoiles, si l'action de toucher ces étoiles ne déclenche rien d'autre. Sans ça, on voit une sorte de flash comme quand on clique sur un bouton qui fait une action derrière.

Amicalement,
j'ai bien re-tester avec l'iphone d'un collègue... les radios ne se check pas (sur mon codepen). si on click sur l'étoile elle se colorie, mais si on bascule directement (dans l'inspecteur) en display block les radio ont voit bien qu'aucune n'est checker.
Modifié par JENCAL (15 Jan 2019 - 14:25)
Modérateur
Bonjour,

Tester dans codePen avec l'iphone, j'ai des doutes.

J'ai copié ton codePen en local.

J'ai ajouté un bouton pour afficher les rate1 et rate2.

Je n'ai pas mis jQuery et bootstrap.

Le code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
-->
<style>
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");

/* Basic styles */
fieldset{
}
.row {
  text-align: center;
}

.rate {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
}

input {
  display: none;
}

label {
  float: right;
  font-size: 0;
  color: #d9d9d9;
}

label:before {
  content: "\f005";
  font-family: FontAwesome;
  font-size: 40px;
}

label:hover,
label:hover ~ label {
  color: #f6c82c;
  transition: 0.2s;
}

input:checked ~ label {
  color: #f6c82c;
}

input:checked ~ label:hover,
input:checked ~ label:hover ~ label {
  color: #FFED85;
  transition: 0.2s;
}


/* Half-star*/

.star-half {
  position: relative;
}

.star-half:before {
  position: absolute;
  content: "\f089";
  padding-right: 0;
}
</style>
</head>
<body>
<div class="row">
  <fieldset class="rate">
    <input id="rate1-star5" type="radio" name="rate1" value="5" />
    <label for="rate1-star5" title="Awesome">5</label>

    <input id="rate1-star5-half" type="radio" name="rate1" value="4.5" />
    <label class="star-half" for="rate1-star5-half" title="Excellent">4.5</label>

    <input id="rate1-star4" type="radio" name="rate1" value="4" />
    <label for="rate1-star4" title="Very good">4</label>

    <input id="rate1-star3-half" type="radio" name="rate1" value="3.5" />
    <label class="star-half" for="rate1-star3-half" title="Good">3.5</label>

    <input id="rate1-star3" type="radio" name="rate1" value="3" />
    <label for="rate1-star3" title="Satisfactory">3</label>

    <input id="rate1-star2-half" type="radio" name="rate1" value="2.5" />
    <label class="star-half" for="rate1-star2-half" title="Unsatisfactory">2.5</label>

    <input id="rate1-star2" type="radio" name="rate1" value="2" />
    <label for="rate1-star2" title="Bad">2</label>

    <input id="rate1-star1-half" type="radio" name="rate1" value="1.5" />
    <label class="star-half" for="rate1-star1-half" title="Very bad">1.5</label>

    <input id="rate1-star1" type="radio" name="rate1" value="1" />
    <label for="rate1-star1" title="Awful">1</label>

    <input id="rate1-star0-half" type="radio" name="rate1" value="0.5" />
    <label class="star-half" for="rate1-star0-half" title="Horrific">0.5</label>
  </fieldset>
</div>

<div class="row">
  <fieldset class="rate">
    <input id="rate2-star5" type="radio" name="rate2" value="5" />
    <label for="rate2-star5" title="Awesome">5</label>

    <input id="rate2-star5-half" type="radio" name="rate2" value="4.5" />
    <label class="star-half" for="rate2-star5-half" title="Excellent">4.5</label>

    <input id="rate2-star4" type="radio" name="rate2" value="4" />
    <label for="rate2-star4" title="Very good">4</label>

    <input id="rate2-star3-half" type="radio" name="rate2" value="3.5" />
    <label class="star-half" for="rate2-star3-half" title="Good">3.5</label>

    <input id="rate2-star3" type="radio" name="rate2" value="3" />
    <label for="rate2-star3" title="Satisfactory">3</label>

    <input id="rate2-star2-half" type="radio" name="rate2" value="2.5" />
    <label class="star-half" for="rate2-star2-half" title="Unsatisfactory">2.5</label>

    <input id="rate2-star2" type="radio" name="rate2" value="2" />
    <label for="rate2-star2" title="Bad">2</label>

    <input id="rate2-star1-half" type="radio" name="rate2" value="1.5" />
    <label class="star-half" for="rate2-star1-half" title="Very bad">1.5</label>

    <input id="rate2-star1" type="radio" name="rate2" value="1" />
    <label for="rate2-star1" title="Awful">1</label>

    <input id="rate2-star0-half" type="radio" name="rate2" value="0.5" />
    <label class="star-half" for="rate2-star0-half" title="Horrific">0.5</label>
  </fieldset>
</div>
<button onclick="showInputState();">Show rates</button>
<script>
function showInputState()
{
	var list, k;
	list = document.querySelectorAll("[name='rate1']");
	for (k=0;k<list.length;k++)
	{
		if (list[k].checked)
		{
			alert(list[k].value);
			break;
		}
	}
	if (k==list.length) alert("0");
	list = document.querySelectorAll("[name='rate2']");
	for (k=0;k<list.length;k++)
	{
		if (list[k].checked)
		{
			alert(list[k].value);
			break;
		}
	}
	if (k==list.length) alert("0");
}
</script>
</body>
</html>

Ça a l'air de fonctionner.

Si je clique sur la 3e étoile de la 1e rangée, les 3 premières étoiles se colorient et restent coloriées.

Si je clique ensuite sur la 2e étoile de la 2e rangée, les 2 premières étoiles de la 2e rangée se colorient.

Les 3 étoiles de la 1e rangée restent coloriées, mais dans un jaune plus foncé.

Si je clique sur mon bouton, il m'affiche bien les alertes avec les bonnes valeurs de rate1 et rate2.

Amicalement,
Pages :
Sujet clos
Aller à