petit script pour mobil freendly

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • petit script pour mobil freendly

    Bonjour,

    Débutant en JavaScript, j'ai pris des informations sur w3scools.com et sur developer.mozilla.org
    Je suis en train de travailler sur un site pour le rendre mobil freendly
    Je voulais mettre un bouton en haut de l'écran qui permette de revenir au menu sans devoir utiliser le défilement des pages
    Je travaille avec firefox developer et tout fonctionne bien en vue adaptive mais un test sur un windows phone ne fut pas concluant
    Le bouton est apparu mais est resté collé sur le haut de la page et pas en haut de l'écran donc il disparaît lors du défilement et un clic dessus ne fait que le faire passer en display:none.
    Mon code est simpliste mais j'aimerai que vous m'aidiez à l'améliorer et surtout le faire fonctionner sur tous les mobiles
    précision: le site est fait sous joomla 3.5 avec un template ol_albos
    pour voir le comportement, le site est entrepreneur-varois.fr

    Code css pour le bouton :
    Code:
    #backMenu {
    	position: fixed;
    	top: 0;
    	background-image: url(../images/lev_ico.png);
    	background-color: #085296;
    	background-repeat: no-repeat;
    	background-position: 10px 5px;
    	width: 100%;
    	height: 34px;
    	color: #FFA !important;
    	font-family: "arial black" !important;
    	font-size: 14pt;
    	letter-spacing: 0.2em;
    	text-align: center;
    }
    code html dans index.php
    Code:
    <button id="backMenu" style="display:none" onclick="top_lev()">menus</button>
    code js avec une fonction callback sur l'événement scroll pour l'affichage ou non du bouton et une fonction sur l'événement onclick pour le retour en début de page
    le code est écrit en fin de document avant </body>
    Je l'ai mis à cet endroit pour qu'il ne ralentisse pas le chargement de la page et éviter une ligne d'écriture "onload" pour activer le code après chargement.
    Code:
    <script type="text/javascript">
    	var show_menu = "none";
    	window.addEventListener("scroll", function(e){
    		if(window.scrollY > 100 && screen.width <= 786){
    			show_menu = "block";
    		}else{
    			show_menu = "none";
    		}
    		document.getElementById("backMenu").style.display = show_menu;
    	});
    	function top_lev(){
    		window.scrollTo(0,0);
    	}
    </script>
    Autre question : pourquoi function(e) ? A quoi sert le "e" dans la fonction anonyme.
    J'ai adapté un code de mozilla et laissé bêtement le "e" sans en comprendre le sens.
    J'ai supposé que le "e" est un paramètre renvoyé par l'événement scroll avec la valeur du déplacement effectué qui permet au code de la fonction de traiter le "if" mais est-ce bien ça ?
    Dernière édition par webours à 12/07/2016, 22h52

  • #2
    Re : petit script pour mobil freendly

    Je ne suis pas un pro de Javascript mais 2-3 remarques

    Déjà entrer le html, le javascript et css sous jsfiddle
    =>
    https://jsfiddle.net/

    JS :Virer ceci pour commencer
    Code:
    var show_menu = "none";
    	window.addEventListener("scroll", function(e){
    		if(window.scrollY > 100 && screen.width <= 786){
    			show_menu = "block";
    		}else{
    			show_menu = "none";
    		}
    		document.getElementById("backMenu").style.display = show_menu;
    	});
    CSS : Mettre le
    Code:
    background-image: url(../images/lev_ico.png);
    en commentaire et puis retravailler
    l'ensemble pour avoir le comportement voulu ...

    Remarque : La variable show_menu à "none" fait disparaitre le bouton ... donc essayer de comprendre
    le pourquoi du comment des conditions !?


    Désolé de ne pouvoir aider plus
    Solidaire avec les dinosaures

    Commentaire


    • #3
      Re : petit script pour mobil freendly

      Merci pour la réponse et le lien sur le site que je vais tester.

      J'ai eu une partie de ma réponse via microsoft qui ne gère pas la position "fixed" dans windows phone comme sur un pc.
      Si j'ai bien compris avec mes notions d'anglais, windows phone 7 remplace "fixed" par "absolute". Il transforme cet élément en un élément du" document".
      Windows phone 8 fixe l'élément par rapport au "document" en utilisant les coordonnées fournies. L'élément sera superposé au "document" comme tout élément "fixed".
      Il n'utilise pas les coordonnées pour fixer l'élément à "window".
      Donc un scroll de la page fera disparaître l'élément de "window". Ce qui revient à peu de chose près au même comportement que windows phone 7.

      Je réfléchis donc sur un script spécifique pour mobile qui ouvrirait un document avec la barre de rappel des menus en haut de l'écran et juste en dessous une iframe dans lequel s'afficherait le site.
      Les deux questions que je me pose sont :
      1- Joomla acceptera-t-il de ce faire emprisonner dans une iframe ?
      Normalement il ne devrait pas y avoir de problème mais je ne connait pas son comportement par rapport à un frame parent.
      2- Un scroll du bout du doigt va-t-il faire défiler le document de l'iframe ou défiler le frame parent donc la barre de rappel des menus avec ?
      Je n'ai pas de mobile pouvant se connecter et je ne travaille que sur des vues adaptatives. Cela me donne une bonne approche pour l'affichage mais pas pour le comportement tactile.

      Commentaire


      • #4
        Re : petit script pour mobil freendly

        Envoyé par webours Voir le message
        Je n'ai pas de mobile pouvant se connecter et je ne travaille que sur des vues adaptatives. Cela me donne une bonne approche pour l'affichage mais pas pour le comportement tactile.
        A un moment, j'avais travaillé avec un émulateur windows phone, je pense que j'étais passé
        par ce lien tout bêtement https://msdn.microsoft.com/fr-fr/lib...v=vs.105).aspx pour l'installer sous Windows 7 ...
        Solidaire avec les dinosaures

        Commentaire

        Annonce

        Réduire
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X