Marche sur desktop pas sur smartphone ?

WRInaute accro
Bonjour

C'est une notation par étoiles dont les couleurs sont correctes sur desktop pas sur smartphone.

Sur mon Galaxy S4 les étoiles restent grises.

La gestion des couleurs est en javascript.

Voici le html :

Code:
<br />
<div class="sous_titre" itemprop="votes">15</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">3.7 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<ul id="rating">
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="1">
            <input type="submit" value="&#9733;" aria-label="1 &eacute;toile">
   
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="2">
            <input type="submit" value="&#9733;" aria-label="2 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="3">
            <input type="submit" value="&#9733;" aria-label="3 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="4">
            <input type="submit" value="&#9733;" aria-label="4 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="5">
            <input type="submit" value="&#9733;" aria-label="5 &eacute;toiles">
        </form>
    </li>
    <li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
        <form action="https://www.pronostics-courses.fr/" method="post">
            <input type="hidden" name="note" value="6">
            <input type="submit" value="&#9733;" aria-label="6 &eacute;toiles">
        </form></li><li onmouseover="OnMouseOver(this);" onfocus="OnMouseOver(this);">
            <form action="https://www.pronostics-courses.fr/" method="post">
                <input type="hidden" name="note" value="7">
                <input type="submit" value="&#9733;" aria-label="7 &eacute;toiles">
            </form>
        </li>
</ul>
<ul id="current-rating">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<meta itemprop="average" content="3.7" />
<meta itemprop="best" content="7" />
<meta itemprop="worst" content="1" />
</div>
&nbsp;&nbsp;<div id="message">
</div>
</div>


Et voici le Javascript :

Code:
<script>
function OnMouseOver(li)
{
    var i, j, k;
    /**
    * On met les étoiles grises
    * au dessus de
    * l'étoile cochée.
    **/
    for(tmp_li = li.nextSibling; tmp_li !== null; tmp_li = tmp_li.nextSibling)
    {
        if(tmp_li.children[0].tagName == "FORM")
        {
            var form = tmp_li.children[0];
            var input = form.childNodes;
            for(i = 0; i < input.length; i++)
            {
                var tmp_input = input[i];
                if(tmp_input.type == "submit")
                {
                    tmp_input.style.color = "#c9f088";
                }
            }
        }
    }
    /**
    * On met les étoiles orange
    * au dessous de
    * l'étoile cochée.
    **/
    for(tmp_li = li; tmp_li !== null; tmp_li = tmp_li.previousSibling)
    {
        if(tmp_li.children[0].tagName == "FORM")
        {
            var form = tmp_li.children[0];
            var input = form.childNodes;
            for(i = 0; i < input.length; i++)
            {
                var tmp_input = input[i];
                if(tmp_input.type == "submit")
                {
                    tmp_input.style.color = "orange";
                }
            }
        }
    }
    return(true);
}
function OnBodyLoaded()
{
    var i, j, k;
    var ul = document.getElementById("rating");
    var tmp_li = ul.childNodes;
    for(i = 0; i < tmp_li.length; i++)
    {
        var tmp_tmp_li = tmp_li[i];
        if(tmp_tmp_li.tagName == "LI")
        {
            if(tmp_tmp_li.children[0].tagName == "FORM")
            {
                var form = tmp_tmp_li.children[0];
                var input = form.childNodes;
                for(j = 0; j < input.length; j++)
                {
                    var tmp_input = input[j];
                    if(tmp_input.type == "submit")
                    {
                        tmp_input.style.color = "#c9f088";
                    }
                }
            }
        }
    }
    return(true);
}
</script>

Les body ont ceci :

<body onload="OnBodyLoaded()" itemscope itemtype="http://schema.org/WebPage">

Pourquoi les couleurs ne changent pas ?

L'événement onfocus ne suffit pas ?

Le onload ne fait rien ?

Comment faire ?

Amicalement.
 
WRInaute accro
Pardon

J'ai essayé même en css, çà ne fonctionne pas en smartphone.

J'ai un vieux Galaxy S4.

La couleur transparent est correcte, les autres couleurs donnent du grisé.

Je suspecte un bug d'Android par rapport aux submit.

Sur votre smartphone çà marche ?

Url : https://www.pronostics-courses.fr

Il faut théoriquement accepter les cookies.

Merci beaucoup de vos réponses.

Respectueusement.
 
WRInaute accro
Bonjour ABCWEB

J'ai onmouseover et onfocus

Je ne sais pas très bien de quels événements tenir compte.

Je croyais que ( sur un smartphone ) le onfocus se produisait de la même façon que le onclick.

Merci beaucoup pour ton aide.

Amicalement.
 
WRInaute passionné
Je suspecte un bug d'Android par rapport aux submit.

Android n'y est pour rien, l'important est déjà de savoir quel navigateur vous utilisez dessus.
Il est à parier que la même version de navigateur donne la même chose sur desktop.
 
WRInaute accro
Hé bé

L e fait est que les classes css "on" et "off" sont correctement affectées aux buttons.

J'ai mis maintenant des <button> aux lieu des <input> , et résultat identique.

Mais sur Google Page Insight la couleur "palegreen" est bien affectée aux <button>.

Evidemment, impossible de tester avec Chrome.

Sus vos portables çà marche ?

Merci beaucoup.

Amicalement.
 
WRInaute passionné
faudra m expliquer comment on fait un onmouseover sur mobile? quand le doigt reste appuyé?
 
Discussions similaires
Haut