jQuery Knob demo. Baseline - a designer framework by ProjetUrbain.com. “Real” baseline grid on the web When I first started to design Baseline, I wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attributes — like type leading — kept me from implementing a true grid based approach. I then decided to another look at the basic grid used in print: the baseline grid. Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout.
How to use Baseline Baseline can be used in many different ways. Use the reset.css and base.css file as a starting point, include the type.css for typographic control or include all files to have a complete foundation to start your web project. Going from 0.2 to 0.5. Spritely.net. Path-Tech.fr. Introduction à la bibliothèque JavaScript jQuery. Comme presque tout ce que nous faisons avec jQuery, ce dernier lit ou manipule le modèle objet du document (DOM). Il faut donc être sûr que nous n'ajoutons des événements ou autres que lorsque le DOM (le document) est complètement chargé. Pour cela, nous enregistrons un événement « document chargé » ou « $(document).ready(function(){}) ». $(document).ready(function() { }); Mettre un message d'alerte dans cette fonction n'a pas beaucoup de sens, puisqu'un message n'a pas besoin que le DOM soit chargé.
$(document).ready(function() { $("a").click( function() { alert("Hello world! ") Cela devrait afficher le message si vous cliquez sur un lien de votre page. Un coup d'oeil sur notre script : $("a") est un sélecteur jQuery, ici, il sélectionne tous les éléments de type lien <a> Le code suivant génère le même message : La différence est évidente : JQuery nous propose 2 approches afin de sélectionner des éléments. Tout d'abord, sélectionnons la liste elle-même. Article : 50 Snippets jQuery qui peuvent vous aider dans vos projets JavaScript. Introduction Voici la traduction de l'article d'Addy OSMANI, décrivant 50 Snippets jQuery qui peuvent vous aider dans vos projets JavaScript.source : 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer Présentation Dans ce, je vais vous montrer 50 Snippets jQuery qui peut vous aider dans vos projets JavaScript.
Certains de ces fragments font appel à de nouvelles fonctions de jQuery 1.4.2, tandis que d'autres sont des fonctions réellement utiles ou des méthodes qui peuvent vous aider à faire les choses mieux ou plus vite. Comment créer un filtre imbriqué Un filtre vous permet de réduire l'ensemble des éléments correspondant à ceux qui correspondent à un sélecteur de données. .filter(":not(:has(.selected))") Comment réutiliser vos recherches d'élements var allItems = $("div.item"); var keepList = $("div#container1 div.item"); Maintenant, vous pouvez continuer à travailler avec ces objets jQuery.
Vérifier si un élément contient une certaine classe ou un élément avec .has() JQuery CSS Emoticons Plugin - Alfa Jango Blog. The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever). The result is great-looking emoticons that leave the text exactly as written (so that the text emoticons actually get copied and pasted with the text if you select a block of text from the page). This uses the CSS3 properties, transform, border-radius, box-shadow, gradient, and transition (when supported). Because the pure-CSS emoticon stylesheet uses CSS3 properties such as border-radius and transform, it is supported by FireFox, Chrome, Safari, and Opera.
They also work (animations and all) on the iPhone and Android phone browsers. Demo The Markup <div class="comment"> Hi, this is a great plugin! Required Files The JS $('.comment').emoticonize(); Options There are three optional parameters. Unemoticonize $('.comment').unemoticonize(); More demos This paragraph has specific elements excluded. Simple Page Peel Effect with jQuery & CSS | jQuery Tutorials. Fancy lightbox alternative. Slimbox 2, the ultimate lightweight Lightbox clone for jQuery · digitalia.be. Version: 2.05 Category: jQuery Javascripts Introduction Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library.
It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2. Demo Single images Image set These are pictures I took during a journey through India and Nepal in 2008. Features From a functional point of view, Slimbox 2 has the following added features compared to the original Lightbox: Slimbox is ready to launch as soon as the document is ready. From a design point of view, Slimbox 2 is very different from Lightbox: The code is optimized to an insane level and has been written from scratch with efficiency in mind for the jQuery library instead of the huge Prototype/Scriptaculous. Slimbox 2 is currently the smallest Lightbox-like script available for the jQuery library. Compatibility Requirements Usage Setup 1. 2. Activate Download. Shadowbox.js. LA PLUS SIMPLE DES GALERIES PHOTO EN JQUERY !, Tutoriel N°1118, JqueryLab.
jQuery HTML Table Toolbox - Noupe Design Blog. Apr 13 2010 By Paul Andrew In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do even more.
Pretty soon the main use of tables was no longer tabular data, it was used as a handy and quick way to control the layout of a complicated web page. But that is were the love story ends and its bad rep begins.Using the table element for web layouts proved to be hard to modify, obtrusive and, more importantly, it caused major accessibility and usabilty problems. Out of the box the tables are very, very bland, reasonably hard to style, its very difficult to display complex data effectively and you are limited to its basic functionality. jQuery Table Plugins graphTable Demo. jQSlickWrap - Slick text wrapping for jQuery. Why would I need this? If you've ever felt the need to wrap stuff around an irregularly-shaped image using CSS's float, you may have been somewhat disappointed to find out that it's forced to wrap around the image's bounding box, rather than the actual contents of the image. What's the best part? It's really easy to use! Check out some of the examples for ideas...
Tell me about what it can do... Client-side, Sliced and Diced Sandbags using HTML 5's new <canvas /> element. CSS-based padding. What browsers does it work on? jQSlickWrap requires that your browser support HTML 5's <canvas> element, and in particular it needs to have support for the toDataURL() function on canvases (meaning it won't work with excanvas, for now). jQSlickWrap is known to work on the following browsers: Mozilla Firefox 3.5+ Google Chrome Apple Safari 4+ Opera 11+ If you happen to know that it works on additional browsers, let me know on twitter.
How does it work? Here's an overview of the algorithm: See it in action here! Spencertipping's js-in-ten-minutes at master - GitHub. Collapser. Détecter si javascript désactivé. jQuery Masonry · David DeSandro. jQuery Masonry › Filtering. Tutorial: Using jQuery Masonry with WordPress | WPLover. This is a short tutorial on integrating Masonry, the jQuery layout plugin, with your WordPress site. We will try to use that jQuery plugin to show a list of posts in a neatly stacked layout, similar to the one I have down here.
Here’s an explanation about Masonry, from it’s home page: Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. Here’s a visual explanation, which I took and edited to fit my layout. Understanding Masonry’s Behaviors Using Masonry itself is pretty simple, but if it’s the first time you’re using it there can be some surprising behaviors, especially regarding element spacing. Masonry allows for two different cases. The second case is where your elements have differend widths. Where columnWidth is the width of the grid (in pixel). The first element has a total width of 190px and margin-right is 0. WordPress + Masonry Okay, coding time.
Lettering.js - A jQuery plugin for radical web typography. Kern.js - Make web kerning suck less. CSS Browser Selector. Clever technique to help you on CSS hacks. Last updated: November 02, 2010 (v0.4.0) CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. The JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page. The color of this box will change on different os/browsers: Internet Explorer - yellow Internet Explorer 7 - orange Gecko Engine on Windows (Firefox, Mozilla, Camino) - red Gecko Engine on Linux (Firefox, Mozilla, Camino) - pink Gecko Engine on Other OS (Firefox, Mozilla, Camino) - gray Opera - green Konqueror - blue Safari - black Chrome - cyan If the box is white, and you are using one of browsers above, something is wrong :-/ Help us in this case!
Source of this example: Screenshots on Browsercam Chris Preece contributed with some images This is a little effort, but certainly with your donation I will do it happier :) 1.