Développeur Web RoR

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

Tag - html

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>

mercredi 15 janvier 2014

L'attribut form d'html5

Vous avez peut-être un jour souffert des formulaires en html. html5 introduit une nouveauté l'attribut form, celui-ci permet de placer les input/select/button partout dans votre page web et de leur associer à un formulaire.

<form id="monform">

</form>

<input type="text" form="monform" name="name" value="" placeholder="Votre nom">

Ça peut-être bien pratique croyez-moi.

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.

mardi 26 février 2013

jQuery Highlight : Mettez vos résutats de recherche en évidence !

Il existe un plugin jQuery pour mettre en évidence une chaîne de caractères dans un paragraphe.

Voici le résultat :

Attention ce code est particulièrement compliqué :-) :

$("#id-mon-element").highlight("soleil");

id-mon-element étant l'id du conteneur dans lequel le texte "soleil" pourra être mis en évidence. Si vous souhaitez le faire sur toute la page :

$("body").highlight("soleil");

Source et téléchargement : http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

vendredi 5 octobre 2012

Display:inline-block les espaces indésirables

Je faisais des tests d'intégrations et en travaillant au pixel près j'ai découvert le problème des espaces indésirables entre les éléments inline-block. 

En bidouillant sur chrome, je n'ai pas réussi à trouver d'où ça venait. En cherchant sur Google je suis tombé sur un article de Raphael Goetter (AlsacreationS) http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html. C'était également un problème dans le twitter bootstrap. Donc je choisis de mettre les éléments à la suite sans retour à la ligne (pas de bidouille css et économie de caractère). Cool ça marche, par contre un second problème : mon conteneur termine 4px environ en dessous du LastChild en display:inline-block. 

La solution a ce second problème entraîné par display:inline-block est de mettre un line-height à 0.

samedi 28 janvier 2012

::selection la pseudo class CSS

Je me baladais sur le net ( http://htmlemailboilerplate.com/ ), je ne sais plus trop ce qu'il m'a pris mais j'ai selectionné du texte (essayez), la selection sera rose (magenta). Ca a alors fait tilt, j'ai ouvert d'autres pages web, j'ai constaté qu'il n'y avait que sur ce site que c'était différent j'ai fait clic droit "inspecté" et là je suis tombé sur cette pseudo class css ::selection qui nous permet de changer le style d'un texte selectionné.

Exemple (selectionnez ces deux paragraphes) :

Notre premier paragraphe sera bleu.

Notre second paragraphe sera vert.

Et vous, vous connaissiez ?
Ca peut être classe sur un site avec des exemples de code à copier / coller.

lundi 23 janvier 2012

Les ressources / articles web dev de ces derniers jours

Voici les quelques ressources que j'ai trouvé intéressante ces derniers jours (ça fait office de post-it en ce qui me concerne).

Framework html / css / js : http://www.99lime.com/

jQuery highlighter de code (marche avec Ruby !) : http://steamdev.com/snippet/

Utilisation de VIM : tutorial découverte par Synbioz : http://www.synbioz.com/blog/2012/01/18/l_utilisation_de_vim

Impress.js (Sur la ferme du web) : http://www.lafermeduweb.net/billet/impress-js-creez-des-presentations-de-type-prezi-en-javascript-1273.html

User interface Futurico (attention payant, mais peut être une bonne source d'inspi !) : http://www.behance.net/gallery/Futurico-User-Interface-Pro/2650227

Autre user interface : http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/

Inspiration de design web : http://www.queness.com/community-news/10453/30-beautiful-web-design-examples-from-behance-and-deviantart

En espérant que cette petite compilation vous servira...

- page 1 de 6