petit script pour mobil freendly

[webours]

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 :

#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

<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.

<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 ?

[messinmaisoui]

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

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

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

[webours]

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.

[messinmaisoui]

Re : petit script pour mobil freendly

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 ...