Material Design Lite Deep Sea Cowboys | Epic Magazine Since graduating first in his class from New York's Webb Institute, a preeminent undergraduate naval architecture school, Johnson has traveled the world with his laptop, building 3-D models and helping refloat sunken things. He was on the team that recovered the Japanese fishing trawler sunk by a US submarine off Hawaii in 2001, and he oversaw a system to lift a submerged F-14 from 220 feet of water near San Diego in 2004. In his free time, he wins boat races in which the skippers build their vessels from scratch in six hours or less. But so far, Johnson has refloated only vessels that are already sunk. He's about to get his chance. The job is daunting: Board the Cougar Ace with the team and build an on-the-fly digital replica of the ship. Johnson will have to unravel the complexity. Habib thinks Johnson is up to the task. Habib refused. Habib smiled. Johnson told the Coast Guard not to worry; the ferry would be floating again in three days at exactly 10:36 in the morning.
Ariel Flesler: jQuery.ScrollTo Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.
Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! A Game of Shark and Minnow - Who Will Win Control of the South China Sea? A Game of Shark and Minnow In a remote corner of the South China Sea, 105 nautical miles from the Philippines, lies a submerged reef the Filipinos call Ayungin. Satellite imagery: NASA In most ways it resembles the hundreds of other reefs, islands, rock clusters and cays that collectively are called the Spratly Islands. But Ayungin is different. A Game of SharkAnd Minnow By Jeff HimmelmanPhotographs and video by Ashley Gilbertson Produced by Mike Bostock, Clinton Cargill, Shan Carter, Nancy Donaldson, Tom Giratikanon, Xaquín G.V., Steve Maing and Derek Watkins Ayungin Shoal lies 105 nautical miles from the Philippines. In early August, after an overnight journey in a fishing boat that had seen better days, we approached Ayungin from the south and came upon two Chinese Coast Guard cutters stationed at either side of the reef. Bito-onon stood at the prow, nervously eyeing the cutters. We didn’t know if they would ram us, either. Dangerous Ground Sources: C.I.A.; Mayor Bito-onon Source: C.I.A.
IanLunn/jQuery-Parallax ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. Current version: 2.1 beta4. IE7.js Upgrade MSIE5.5-6 to be compatible with MSIE7. IE8.js Upgrade MSIE5.5-7 to be compatible with MSIE8. You do not need to include IE7.js if you are using IE8.js IE9.js Upgrade MSIE5.5-8 to be compatible with modern browsers. You do not need to include IE7/IE8.js if you are using IE9.js The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = ".png"; You must set this variable before including the IE7.js script. <script src="IE8.js">IE7_PNG_SUFFIX=".png";</script> The suffix will ignore query string parameters. var IE7_PNG_SUFFIX = ":"; By default, the PNG will be stretched (this simulates tiling). You may link directly to these files if you wish:
Reshaping New York - Interactive Feature Loading Celebrating the Waterfront New buildings constructed during Mr. Celebrating the Waterfront Mr. Brooklyn Bridge Park, 2006 Photo: Alex S. Brooklyn Bridge Park, 2013 Photo: Richard Perry/The New York Times Red Hook Container Terminal Sources: Heights of buildings built before 2010 from an analysis of lidar data by Professor Sean C. By Ford Fessenden, Tom Giratikanon, Josh Keller, Archie Tse, Tim Wallace, Derek Watkins, Jeremy White and Karen Yourish Nikebetterworld Parallax Effect Demo | Ian Lunn - Web Designer & Developer A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level. In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld. If you’d like to see what we’ll be creating, go check out the demo or download the files. The HTML Our page will consist of 6 sections: header, footer and 4 articles. To start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. We also need to initiate the localScroll function on the unordered list of article links that are fixed to the right of the page. Inside of our body tag, we begin with the unordered list that provides a quick link to each section.
Mootools en 30 jours : jour 1 - Introduction Installation de Mootools 1.2 Tout d'abord, téléchargez et installez le noyau (core) de la librairie Mootools 1.2. Téléchargez la librairie Mootools 1.2 CoreUploadez la librairie de Mootools 1.2 sur votre serveur ou espace de travailFaites un lien vers la librairie Mootools 1.2 Core entre les balises de votre page - 2. Créer un fichier JavaScript externe et faire le lien vers celui-ci dans votre : A partir de là, vous pouvez utiliser l'une ou l'autre des méthodes. Placer dans le domready Les fonctions Mootools doivent être appelées dans l'évènement domready. window.addEvent('domready', function() { exampleFunction();}); Placer dans une Fonction Vous pouvez quand même placer vos fonctions en dehors du domready, puis les appeler à l'intérieur de celui-ci. var exampleFunction = function() { alert('hello')}; Description de la librairie Noyau Natif Classes Une classe JavaScript (c'est différent d'une classe CSS), est un objet réutilisable avec des fonctionnalités. Elements Utilitaires Request Plugins
untitled This entire page is powered off of simple, hand-writeable JSON. Or you can use the story maker tool. The goal is to make responsive magazine feature style mini-sites as easily as possible. I've tried to support as many mediums as possible so they can be melded together into something cohesive and enjoyable. Let me know if there's anything missing, could be better, or any feedback at all at ejfox@ejfox.com Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Coin Slider: Image Slider with Unique Effects « Workshop After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider. Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically it’s a latest (and improved) version of jqFancyTransitions but with new ‘fancy’ transitions effects. jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. While I was working on this I felt like I’m on college again. For rain effect I spent few rainy hours to built it and that’s why I gave him that name. How to use Download jQuery, Coin Slider javascript file and CSS file and include them on your page: Add slider content and create one div with an id and put images and image descriptions, similar to: At the end all you have to do is to call Coin Slider: Example List of all options Notes
Buzz, a Javascript HTML5 Audio library