Some Useful JavaScript & jQuery Snippets - Part 3
How to hide all children div except a specific one with jQuery? $('#target div:not(#exclude)').hide(); //or $('#target').children().filter(':not(#exclude)').hide(); Detecting when a div’s height changes using jQuery $('element').bind('resize', function(){ alert( 'Height changed to' + $(this).height() ); } Delete all table rows except first $('someTableSelector').find('tr:gt(0)').remove(); Selecting root element of a certain level in the document 1 level: $('*:not(* *)'); […] How to hide all children div except a specific one with jQuery? Detecting when a div’s height changes using jQuery Delete all table rows except first Selecting root element of a certain level in the document Searching a string in jQuery Get the distance scrolled from top Select all elements except the ones with a given classAdd a row to a table How to convert decimal to hexadecimal? Filtering By More Than One Attribute in JQuery How to expire a cookie in x minutes Selecting the first x items with jQuery
CSS1K
Revised Font Stack | A Way Back
Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.” Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. I’ve created a font-stack for each typeface while considering the font share table statistics.
css
W3Fools – A W3Schools Intervention
Visual thesaurus using arbor.js
Wow, I can’t believe we are at the end of January – one twelfth of the year gone already! I’ve been so busy this month I’ve barely had time to sit down and work on any personal projects. Thankfully I had a spare few hours over the weekend to work on a project I’ve been meaning to finish for a couple of weeks: a visual thesaurus using JavaScript. Visual thesaurus representation of the word 'clean'. You may (or may not) know of the Visual Thesaurus by Thinkmap; very useful but it’s a paid for service, I use it so infrequently I can’t justify paying for it (there is a free trial though). Arbor.js took a little getting used to as it uses a mixture jQuery, canvas and its own methods; but there’s a fairly extensive set of documentation and a set of usage examples. So to the demo; I’ve tried to keep it very simple to use. Any suggestions, comments or feature improvements please leave a comment below!
Le CSS - Tutoriel HTML & CSS
La syntaxe Un fichier CSS permet de changer radicalement l'affichage de plusieurs pages HTML. La structure d'un fichier CSS est simple (plus que celle d'un fichier HTML). Un fichier CSS est composé de plusieurs règles. Chaque règle permet de changer l'affichage de plusieurs balises HTML. Expliquons cette structure avec quelques définitions : Chaque règle CSS sert à appliquer des styles à une balise HTML, certaines balises, ou un groupe de balises ; Chaque règle d'un fichier CSS débute par un sélecteur. Pour illustrer ce que nous venons de voir, nous allons voir comment centrer le titre de niveau 1 de nos pages Web. Si maintenant nous voulons une couleur bleue pour ce même titre, nous devons appliquer une seconde déclaration (couple "propriété: valeur") pour le même sélecteur h1 : il s'agit de la propriété "color", et nous lui donnons la valeur "blue". Lier le CSS au HTML En règle générale, vous placerez toutes les règles CSS dans un fichier portant l'extenssion .css. <! <! Les sélecteurs <!
Increasing the Clickable Area of Inline Links
Demo It has been best practice for some time now to ensure that navigation links have appropriate padding. This makes clicking these links much easier, especially if you are on a mobile device. Here is an article, written four years ago, discussing this very idea. Why aren’t we taking this one step further? Links don’t only exist in menus, and inline links can be tricky to click accurately. Now keep in mind that this is only a thought. The trick is to be subtle with this technique; increase the click area enough that users don’t have to be 100% accurate, but don’t increase it too much so that the behavior becomes unexpected. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this technique? Tweet this
Responsive Web Design Patterns | This Is Responsive
Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox
Firefox's birthday present to us: Teaching tech titans about DIY upstarts
High performance access to file storage Open ... and Shut It's hard to believe it now, but not too long ago the web was dangerously close to being owned by one vendor: Microsoft. As mainstream users came to equate Internet Explorer's logo with the Web, Microsoft worked to lock in its advantage with increasingly proprietary technology like ActiveX. It surely would have done so, too, but for the seemingly futile Mozilla browser, née Firefox. Precisely because it is about more than technology. Yes, that Firefox, the one that for years gobbled away at IE's 95 per cent market share, only to be largely supplanted in the hearts and minds of the geek elite by Google Chrome (though not in actual market share). Given technology's focus on the latest and greatest, it's easy to forget that much of this "latest and greatest" wouldn't even be possible without the work Mozilla did for years with Firefox. Quixotic as it may sound, the purpose of Firefox was always to spread Web freedom. As Lilly notes:
Arbor Js - Node Onclick
CSS Tutorial
LESS « The Dynamic Stylesheet language
Code smells in CSS
20 November, 2012 Chris Coyier recently answered someone’s question: How can you tell if your CSS code smells? What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? I thought I would extend Chris’ great answer with my own, additional take on things… My day-to-day life is spent working in-house at BSkyB… I work on big websites, the last of which took me over a year to build the front-end for (and it’s still ongoing). I’m going to share just a few things (there will, no doubt, be things that I have missed) that I look out for in CSS that will give you and idea as to its quality, its maintainability and its integrity… Undoing styles Any CSS that unsets styles (apart from in a reset) should start ringing alarm bells right away. Any CSS declarations like these: border-bottom:none; padding:0; float:none; margin-left:0; …are typically bad news. Here we have ten lines of CSS and one ugly class name. Magic numbers These are a particular bugbear of mine. ! ! IDs