Quick Tip – Resizing Images Based On Browser Window Size How Is This Useful? In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, Last.fm uses this technique on their artist pages. The technique that will be used can be expanded to cause additional changes upon resize as well, beyond simply image swapping (ie captions, navigation). With that said, let’s get rolling. Step 1 – The HTML You Need That’s nice and bite-sized. Step 2 – Onto the CSS For the sake of simplicity I have excluded any graphical styles such as borders/fonts in the above CSS. Step 3 – Triggering the Change With jQuery When the document is ready, we establish a function (imageresize) which swaps the images depending on the width of the browser. Boom, You’re Done Google+
Single page apps in depth (new free book) Command line interface for WordPress | wp-cli CSS Angles: Just the Edge Your Web Page Needs! With the influx of JavaScript libraries like jQuery and Prototype, a lot of the more basic elements of front-end development have fallen through the cracks. Gone are the days when we would sit down for a couple of hours to find a creative way to solve a CSS problem; now we immediately turn to JavaScript. Not to say that it’s a bad thing – it is what it is in the current state of web development. But sometimes we have to look back on those old techniques to find a new way of achieving a solution. The first place I saw the use of CSS angles was in Eric Meyer’s Slantastic demo. Right away, I thought that was so cool and was amazed at the possibilities it opened up. The border Property The border property is one of the most used and valuable properties available in CSS. border-width: 10px; border-style: solid; border-color: #333333; And in shorthand: border: 10px solid #333; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; Building a Shelf
New methods in jQuery 1.6 jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library. In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements. Delaying the ready event with the holdReady() method The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly used to execute custom code once the DOM is ready to be manipulated. It’s a dual-purpose method, as is the jQuery way, and can be used to both delay the event and release the event using the same simple signature. One downside to this method is that it should be called as early in the document as possible, such as in the <head> of the page, and can obviously only be called after jQuery itself has loaded. jQuery.holdReady(true); jQuery.holdReady(false); Adding and removing element properties Promise objects
Datavisualization.ch Selected Tools RGB-to-Hex Color Converter RGB-to-Hex Conversion Question: How do I convert RGB values of a color to a hexadecimal string? Answer: The RGB-to-hexadecimal converter algorithm is simple: make sure that your values are in the range 0...255, convert R, G, B to hex strings, and then concatenate the three hex strings together. Convert RGB to Hex color values here: function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255)); return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16); } Notes: The script parses the input R, G, B values as integers using the standard function parseInt(string,10); the second, optional argument 10 specifies that the value must be parsed as a decimal number. RGB/hex codes for named colors supported in most browsers are listed below: See also:
Details | Adaptive Images Limitations I think this is one of the most flexible, future-proof, retro-fittable, and easy to use solutions available today. But, there are problems with this approach as there are with all of the one’s I’ve seen so far. In the case of Adaptive Images they are these: This is a PHP solution. I wish I was smarter and knew some fancy modern languages the cool kids discuss at parties, but I don’t. Content Delivery Networks. Adaptive Images relies on the server being able to intercept requests for images, do some logic, and then send one of a given number of responses. A minor but interesting Cookie setting issue. As Yoav Veiss pointed out in his article Pre-loaders, Cookies, and race-conditions there is no way to guarantee that a cookie will be set before images are requested - even though the JavaScript that sets the cookie is loaded by the browser before it finds any <img> tags. Adaptive Images checks the User Agent String for the presence of 'mobile'. The Future
Happy.js | Lightweight form validation for jQuery or Zepto.js HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley.