Marche sur desktop pas sur smartphone ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 28 Mai 2019.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    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.
     
  2. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    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.
     
  3. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    634
    J'aime reçus:
    47
    Tu es sur pour le onfocus comme événement déclencheur?
     
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    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.
     
  5. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    634
    J'aime reçus:
    47
  6. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
  7. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 061
    J'aime reçus:
    108
    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.
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    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.
     
  9. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    634
    J'aime reçus:
    47
    faudra m expliquer comment on fait un onmouseover sur mobile? quand le doigt reste appuyé?
     
Chargement...
Similar Threads - Marche desktop smartphone Forum Date
Détection tablette marche pas Développement d'un site Web ou d'une appli mobile 1 Juillet 2019
Part de marché de Qwant en France Autres moteurs de recherche connus 15 Octobre 2018
Serveur postfix en smtpd ne marche pas. Administration d'un site Web 6 Septembre 2018
Cà marche : Let's Encrypt avec acme.sh ? Administration d'un site Web 20 Juillet 2018
Démarche pour changer d'URL sans perdre en référencement ? Référencement Google 4 Décembre 2017
AMP FORM comment ca marche Développement d'un site Web ou d'une appli mobile 16 Juin 2017
Redirection de noms de domaine : comment ça marche pour le référencement ? Référencement Google 4 Juin 2017
Crawl-delay : ça marche toujours ? Débuter en référencement 20 Février 2017
ça marche pas!?? Personne ne veut tester mon outil! Demandes d'avis et de conseils sur vos sites 27 Octobre 2016
Comment marche le référencement des images? Référencement Google 1 Octobre 2016
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice