Développeur Web RoR

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

Tag - js

Fil des billets

mercredi 9 mai 2018

Mettre Firefox en plein écran au démarrage par code

Attention ne fonctionnera que si :

- Vous avez la main sur la machine sur laquelle est lancée firefox

- Si vous avez le contrôle du code-source du site à afficher

Si ce n'est pas le cas, retournez sur votre moteur de recherche préféré...

Il n'est pas prévu de lancer firefox en plein écran au démarrage (même en ligne de commande).

Me souvenant de la fullscreen api je décide de l'utiliser. Le but étant qu'au chargement de la page le navigateur se lance en plein écran. Je fais mon POC et là c'est le drame :

"Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.".

Après avoir pleuré à chaudes larmes pendant 15 min, je me souviens avoir vu des trucs dans "about:config" de firefox. Et je trouve l'option miracle : "full-screen-api.allow-trusted-requests-only". En passant ce flag à false on peut mettre le navigateur en plein écran programmatiquement !

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ceci est un exemple</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
function toggleFullScreen() {
document.querySelector("body").mozRequestFullScreen();
}
// Nécessite full-screen-api.allow-trusted-requests-only = false (dans about:config)
$(document).on('ready', function(){
toggleFullScreen();
});
</script>
</head>
<body allowfullscreen="true">
<p>Ceci est un texte !</p>
</body>
</html>

mardi 11 juillet 2017

JS : Afficher un menu qui ce cache quand on clique ailleurs que sur un élément du menu

Cas d'utilisation : un menu déroulant qui s'affiche lors d'une recherche (le menu contient des éléments cliquables et quand on clique ailleurs sur la page on souhaite masquer le menu :

$(document).on('click', 'body', function(e){
// Quand on clique sur le body on cache la zone
$('#zone-a-cacher').hide();
});
$(document).on('click', '#zone-a-cacher', function(e){
// Evite que l'évènement ne soit propagé jusqu'au body
// (car sinon la zone serait de nouveau cachée)
e.stopPropagation();
e.stopImmediatePropagation();
});

jeudi 6 juin 2013

Des alternatives à Aloha Editor

En cherchant, je suis tombé sur deux alternatives à Aloha Editor, vous savez cet éditeur html5 qui fait du "content editing".

EtchJs : sous licence MIT, http://etchjs.com

HalloJs : sous licence MIT, http://hallojs.org/

Essayez-les je pense qu'ils valent le coup !

CreateJs (http://createjs.org) permet d'intégrer plus facilement ces éditeurs avec des CMS.

jeudi 2 août 2012

Livequery : le plugin jQuery qui permet de faire fonctionner des plugins comme avec live()

Il arrive souvent dans son code javascript d'utiliser des plugins jquery qui s'utilisent de cette manière :

$('.ma_classe').monPlugin();

L'inconvénient c'est qu'avec certains plugins qui n'utilisent pas "live" ou bien "delegate" ou "on" de la 'mauvaise manière' <- sous entendez qui ne fonctionne pas avec des éléments que l'on rajoute au DOM. (Voir http://api.jquery.com/live/), nous sommes obligé de rajouter le script après l'ajout ou la requête ajax.

C'est là qu'intervient le plugin livequery (lien en bas) : voici comment transformer le script ci-dessus :

$('.ma_classe').livequery(function(){

  $(this).monPlugin();

});

L'avantage ici c'est que si l'on rajoute des éléments avec la class ma_classe en AJAX ou bien simplement en javascript, il n'y aura plus besoin de rappeller le bout de code $('.ma_classe').monPlugin(); . L'avantage de cette méthode c'est que l'on a pas besoin de lire le source du plugin pour voir quels évènement sont concernés car avec "on" et "live" le paramètre event(s) est obligatoire !

Alors pratique non ?

Le plugin livequery : https://github.com/brandonaaron/livequery

Source : http://stackoverflow.com/questions/5766086/using-jquery-plugins-with-live

jeudi 13 octobre 2011

Ubuntu 11.10 : une copie web du système d'exploitation

Aujourd'hui c'est aussi la sortie d'ubuntu 11.10. Ubuntu a lancé un site internet qui copie l'interface de ubuntu 11.10 : voici la page web quelques petites choses fonctionne bien shotwell, firefox. Et donc le tout en html css js. Pour tester c'est ici : http://www.ubuntu.com/tour/#surf-the-web

vendredi 16 septembre 2011

Un plugin jquery pour faire un background animé - MyFloatingBg

MyFloatingBg est un plugin jquery qui permet de faire bougé son background. Cela peut-être pratique et si c'est bien travaillé ça peut-être très joli. Bon mais faut pas en abusé hein !

Bon et puis c'est sous licence MIT !

Demo : http://www.kfsoft.info/MyFloatingBg/demo.php

Téléchargement : http://www.kfsoft.info/MyFloatingBg/jquery.MyFloatingBg.js

mardi 15 février 2011

Plugin jquery Isotope : le quicksand ^ 10

Vous connaissez Quicksand ? Mais si le plugin jquery qui affiche / masque / ordonne des éléments de manière super classe. (http://razorjack.net/quicksand/ (Licence MIT)).

Et bien voici le plugin jquery Isotope (http://isotope.metafizzy.co/). Il fait la même chose mais avec des fonctions d'optimisation de place

Petit bémol tout de même il n'est gratuit que pour une utilisation non commerciale.

- page 1 de 2