Marche sur desktop pas sur smartphone ?

ortolojf · 28 Mai 2019

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.

ortolojf · 29 Mai 2019

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.

ABCWEB · 29 Mai 2019

Tu es sur pour le onfocus comme événement déclencheur?

ortolojf · 29 Mai 2019

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.

ABCWEB · 29 Mai 2019

il y a des solutions en jquery comme ça:

https://stackoverflow.com/questions...ive-onclick-deprecated-on-ios-and-android-too

De mémoire il me semble que le onclick marche encore sur ios et android

ortolojf · 29 Mai 2019

Bonjour ABCWEB

Voici la page : https://www.quirksmode.org/dom/events/index_mobile.html

Le onfocus n'y figure pas le onclick est considéré sûr, et les onmouseover/onmouseout ?

Je vais tester le onclick.

Peut-être mon onfocus met le souk ?

Merci beaucoup.

Amicalment.

rick38 · 30 Mai 2019

ortolojf a dit:
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.

ortolojf · 31 Mai 2019

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.

ABCWEB · 3 Juin 2019

faudra m expliquer comment on fait un onmouseover sur mobile? quand le doigt reste appuyé?