Blog geekesque... ou presque

Aller au contenu | Aller au menu | Aller à la recherche

lundi 17 mars 2014

Bloquer la sortie d'une page

Parfois, on a besoin de pouvoir interdire de quitter une page web autrement que par le "cheminement normal", c'est à dire très souvent par l'envoi d'un formulaire. Le but n'est bien entendu pas d'emprisonner le visiteur sur la page mais de l'alerter et de lui demander une confirmation de l'action qu'il veut réaliser.

L'astuce suivante fait appel à JQuery pour une simplification du code et de sa compatibilité entre les navigateurs mais peut être codée à la main si vous le désirez.

Bloquer la sortie

Pour cela, il suffit de faire appel à onbeforeunload une fois la page chargée:

jQuery(function($) {
   $(window).bind('beforeunload', function(){
      return 'message de confirmation';
   });
});

Le message de confirmation n'est pas visible sur tous les navigateurs, je ne l'ai vu que sur IE8 et il est plutôt mal mis en page.

Avec ce script, toute action fermant la page (même la fermeture du navigateur) demandera une confirmation à l'utilisateur.

Autoriser la sortie normale

La sortie normale de la page devant s'effectuer par une validation de formulaire, il suffit donc d'ajouter une fonction onclick sur le bouton de soumission qui désactivera le script:

<input type="submit" value="envoyer" onclick="$(window).unbind('beforeunload');" />

mercredi 11 avril 2012

[MàJ] Utiliser OpenStreetMap plutôt que GoogleMap ?

Edition du 11 avril: Je me rends compte que je n'ai pas mis l'adresse du site dédié, il s'agit de osmLeaflet.jQuery. C'est là que l'on peut facilement suivre les mises à jour et évolutions.

Depuis quelques temps, je m'intéresse au projet OpenStreetMap qui me semble une bonne alternative à GoogleMap pour l'intégration de cartes sur des sites.

Malheureusement pour les plus fainéant d'entre nous (moi y compris), aucun code officiel à utiliser directement n'existe. Sauf depuis l'intervention de Mathieu Robin qui a créé un plugin OSM pour JQuery, qu'il a appelé osmLeaflet.jQuery.

Voici l'exemple d'utilisation qu'il donne sur son billet d'explication qui vous montre la simplicité déconcertante de son utilisation, mais je vous invite fortement à aller voir le blog.

$(document).ready(function () {
    // Initialisation de la map
    var osmMap = $(document).osmLeaflet({
           target : 'map',
           zoom : 12,
           lattitude : 51.50,
           longitude : -0.09
    });
 
    // Ajout d'un marker
    osmMap.osmLeaflet('addMarker', {lattitude : 51.50, longitude : -0.09});
 
    // Ajout d'une popup
    osmMap.osmLeaflet('addPopup', {lattitude : 51.51, longitude : -0.13, text : "Hey !"});
});

vendredi 6 avril 2012

Votre position en JS

Suite à ce billet, j'ai exploré le blog de Mathieu et j'y ai trouvé une information sur la géolocalisation en JS.

En poursuivant mes recherches à ce sujet, j'ai trouvé un tutoriel fort intéressant: géolocalisation en HTML5.

Je me permet donc d'en mettre les grandes ligne ici (ce ne sont que des copier/coller)

Récupérer les coordonnées

Un système très simple permet d'obtenir les coordonnées. Le système gère la non-prise en compte de la géolocalisation par le navigateur, ainsi que le fait que l'utilisateur refuse de partager sa position.

if (navigator.geolocation)
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
else
  alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
 
function successCallback(position){
  alert("Latitude : " + position.coords.latitude + ", longitude : " + position.coords.longitude);
});
 
function errorCallback(error){
  switch(error.code){
    case error.PERMISSION_DENIED:
      alert("L'utilisateur n'a pas autorisé l'accès à sa position");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("L'emplacement de l'utilisateur n'a pas pu être déterminé");
      break;
    case error.TIMEOUT:
      alert("Le service n'a pas répondu à temps");
      break;
    }
});

Suivre les déplacements

Ce petit code permet de suivre les déplacements de l'utilisateur

var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
function stopWatch(){
   navigator.geolocation.clearWatch(watchId);
}

Et le lien d'arrêt du suivi:

<a href="#" onclick="stopWatch()">Stop Watch</a>

La vitesse ! La boussole ! L’altitude !

Lorsque l’on récupère la variable position afin d’obtenir la latitude grâce à position.coords.latitude, on a accès à plusieurs autres attributs :

  • position.timestamp, qui renvoie le timestamp de l’heure à laquelle a été mise à jour la position
  • position.coords.altitude, qui correspond à l’altitude de l’utilisateur
  • position.coords.accuracy, qui correspond à la précision des coordonnées
  • position.coords.altitudeAccuracy, qui correspond à la précision de l’altitude
  • position.coords.heading, qui correspond à l’angle compris entre 0 et 360° par rapport au Nord (ce n’est pas aussi précis que la boussole interne d’un smartphone)
  • position.coords.speed, qui correspond à la vitesse de l’utilisateur par rapport à sa dernière position.

jeudi 25 mars 2010

Ajax en post avec jQuery

Actuellement, jQuery possède une fonction ajax qui est getJSON et qui permet de faire des appels Ajax qui récupèrent des données au format JSON. Le seul souci est que les paramètres envoyées le sont en GET, avec toutes les contraintes que cela impose.

Pour pouvoir fonctionner en POST avec la même logique, j'ai étendu jQuery avec une fonction postJSON:

jQuery.extend({
   postJSON: function( url, data, callback) {
      return jQuery.post(url, data, callback, "json");
   }
});

Elle prend les mêmes arguments que getJSON mais fonctionne en POST.

samedi 7 mars 2009

Des arrondis précis (JavaScript)

Pour faire le pendant en JavaScript du post "Des arrondis précis", j'ai traduit mes fonctions.

Je me suis appuyé sur deux fonctions de php.js pour les vérifications, elles sont inclues dans ma source.

Lire la suite...

lundi 2 mars 2009

Vérifier la validité d'une date

Très souvent, on doit vérifier la validité d'une date, mais autant il est simple de vérifier sa syntaxe autant il peut s'avérer compliqué de vérifier que la date existe réellement. Mais la solution existe.

Lire la suite...

jeudi 19 février 2009

Fonctions PHP en JavaScript

Kevin van Zonneveld a eu l'excellente idée de créer en JavaScript des équivalents aux fonctions PHP.
Certaines sont fort simple, comme par exemple la fonction abs() qui est juste un alias amélioré pour Math.abs(), d'autres sont très complexes.

A l'heure actuelle, il y a 285 équivalents de créés, vous pouvez les trouver sur cette page.