Développeur Web RoR

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

Tag - css

Fil des billets

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();
});

vendredi 29 mai 2015

Transformer votre CSS en SCSS

Il peut arriver de vouloir migrer un "vieux" CSS en SCSS pour factoriser les variables et centraliser les urls des ressources par exemple.

Voici un outil complet qui contient pas mal de paramêtre : http://sebastianpontow.de/css2compass/

Plus d'excuses, hein ;)

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.

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 5