Kick-Start Your Project: A Collection of Handy CSS Snippets

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

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.

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!

Increasing the Clickable Area of Inline Links Demo It has been best prac­tice for some time now to ensure that nav­ig­a­tion links have appro­pri­ate pad­ding. This makes click­ing these links much easier, espe­cially if you are on a mobile device. Here is an art­icle, writ­ten four years ago, dis­cuss­ing this very idea. Why aren’t we tak­ing this one step fur­ther? Links don’t only exist in menus, and inline links can be tricky to click accur­ately. Now keep in mind that this is only a thought. The trick is to be subtle with this tech­nique; increase the click area enough that users don’t have to be 100% accur­ate, but don’t increase it too much so that the beha­vior becomes unex­pec­ted. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this tech­nique? Tweet this

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 LESS « The Dynamic Stylesheet language The ABCs of Web Development Web development can often be an utterly perplexing affair. Today, aimed at beginners, I'd like to introduce you to twenty six concepts or technologies, each mapping to a letter of the alphabet. Sounds wonky? It probably is! Let's get started after the jump. Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. AJAX stands for Asynchronous JavaScript And XML and is the main driving force behind all these super smooth web applications you've been using over the past few years. AJAX, as a technology, has been pretty much all pervasive. At the center of everything is the XMLHttpRequest which allows calls to be sent and received, after a page has been fully rendered without touching the rest of the page. Related reading B -- Browser A browser is the understated structure on which you frame your magnificent masterpieces, be it websites or applications. CSS is one prong of the front end development trident. E -- Events

Checking if an element is visible on-screen using jQuery by Sam Sehnert Download jQuery VisibleView Demo We recently built a little jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true. ? This method differs from the jQuery :visible selector in that visible checks to see whether the element is hidden using css (basically if offsetWidth or offsetHeight is 0). Usage In its simplest form, the element can be used as follows: $('#element').visible() This method will return true if the entire element is visible (I.e., it will return false if any part of that element is outside the viewport.Passing true to the ‘visible’ method, will tell the plugin to return true if ANY part of the element is visible on the users screen. $('#element').visible( true ) Limitations The plugin ignores the elements visibility (E.g., display:none; visibility: hidden; offsetWidth or offsetHeight is 0). $('#element:visible').visible()

CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. This principle is based on the fact that page refreshes are disruptive to the user’s mental flow, causing what is known as “change blindness”, and that we need to be able to avoid breaking the visual flow of the user wherever and whenever we can. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. Technique #1: Absolutely positioned element

5 Reasons Why Responsive Design Is Not Worth It After the huge debate this original post created, we decided to refine and build upon the original article, bearing in mind the thoughts of some very insightful feedback left by some commenters. You can find the new article here. “We’re just now starting to think about mobile first and desktop second for a lot of our products.” ~ Kate Aronowitz, Design Director, Facebook “[The shift to mobile design] is even bigger than the PC revolution.” ~ Kevin Lynch, CTO, Adobe In 2014, more people will be using mobile devices to access the internet than desktop PCs. Responsive design is seemingly universally accepted as the way forward, but I am far from convinced. What is Responsive Design? Wikipedia describes responsive design as follows: Responsive Web Design essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries…with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. A Caveat Desktop Display 1.

Demo | jQuery.popeye 2.1 | an inline lightbox alternative with slideshow x Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4). Other browsers will degrade gracefully. Except for IE6, though, which I didn't bother to include. Feel free to come up with your own solution ;-) Example 1 The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image. No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. View HTML code used in this example Example 2 The navigation stays fixed to the right of the image. There is no enlarge button, but a click on the image enlaregs and shrinks it nevertheless. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. View HTML code used in this example

HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck