jQuery WormHole jQuery WormHole creates invisible wormholes between arbitrary objects on a page. The edges of the objects become entrances/exits of the wormholes. Child objects dragged to an edge enter the wormhole and immediately start to exit at the other end, i.e. the opposite edge of the next object in the wormhole group. Try it out: A few objects for you to drag <--- Use it $('some.containers').isWormHole({options}); Options group: String. Events stop: Function. WormHole was built for the Rotify project to allow overnight shifts to be scheduled easily and intuitively. 4kB - Production (minified) 8kB - Development (source) © Rotify Ltd. 2011
iView Slider (jQuery) | Free PSDs & Resources for Web Designers by Hemn Chawroka iView has been stopped! iView has been stopped from update and support!You can use my new powerful mightySlider plugin. Go to mightySlider What is iView? iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. This slider includes 35 transition effects which is completely configurable and compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android. Multiple customized slider instances can happily live on the same page, and the slider offers a simple API to control the slider’s behaviour from within your custom scripts. Features Dont forget to follow me on twitter or like my page on facebook and take a look at my premium scripts too Changelog Version 2.0.1
Violin: Visualizing JavaScript This is an experiment in instrumenting JavaScript applications. On the right is the Object and Function graph for a simple Backbone app. The app's code has been instrumented to draw and animate the graph as the JavaScript runs without having to modify the app's original code at all (by hand anyway). Hit the button to start the backbone app and interact with it. Metaprogramming rocks :). This experiment is by Philip Roberts. Discussion This is a first attempt at instrumenting a JavaScript application. Instrumenting is performed by recursively iterating over the application's namespace to build the graph, and decorating any functions to trigger events when they are called. Currently the graph shows the Object heirarchy, rather than the prototype hierarchy or all the instantiations of the object, and function nodes on the graph will be triggered when any instantiation of that object calls the function. The code
Zombies! RUN! (Managing Page Transitions In Backbone Apps) One of the common issues or questions I see for Backbone.js goes something like this: “Whenever I hit the same route more than once, I end up getting seeing this call being made multiple times. It seems to accumulate another call every time I hit the route. What’s going on?” or “I’ve noticed that my views are still handling events after I remove them from the screen. “How do I make sure I clean things up when moving to a new page in my app?” At the heart of all of these questions is a problem that most backbone developers will run into at some point: zombies. The Plague: Event Binding The majority of the problems that people are referring to in these questions and issues are caused by the events that we bind to in our apps. We bind events to our DOM elements using the declarative `events` configuration in our views: We bind events from our models and collections so that our views can respond to changes and re-render themselves: Events are everywhere, and with good reason. Rule #2: Double Tap
Tutorial: Debugging This tutorial introduces you to using Google Chrome's built-in Developer Tools to interactively debug an extension. To follow this tutorial, you need the Hello World extension that was featured in Getting Started. In this section, you'll load the extension and take a look at its information in the Extensions page. Load the Hello World extension if it isn't already running. If the extension is running, you'll see the Hello World icon to the right of your browser's address bar. If the Hello World extension isn't already running, find the extension files and load them. As long as your browser is in Developer mode, it's easy to inspect popups. Go to the Extensions page ( and make sure Developer mode is still enabled. The popup remains open as long as the Developer Tools window does. In this section, you'll follow the execution of the popup page as it adds images to itself. Use the buttons next to the play/pause button to step over, into, and out of function calls.
arbor.js annyang! Easily add speech recognition to your site Go ahead, try it… Say "Hello!" Annyang! Let's try something more interesting… Say "Show me cute kittens!" Say "Show me Arches National Park!" Now go wild. That's cool, but in the real world it's not all kittens and hello world. No problem, say "Show TPS report" How did you do that? Simple. What about more complicated commands? annyang understands commands with named variables, splats, and optional words. Use named variables for one word arguments in your command. Use splats to capture multi-word text at the end of your command (greedy). Use optional words or phrases to define a part of the command as optional. What about browser support? annyang plays nicely with all browsers, progressively enhancing browsers that support SpeechRecognition, while leaving users with older browsers unaffected. It looks like your browser doesn't support speech recognition. Please visit in a desktop browser like Chrome.
Closure Tools The Closure Tools project is an effort by Google engineers to open source the tools used in many of Google's sites and web applications for use by the wider Web development community. Web applications have evolved from simple HTML pages into rich, interactive applications that provide a great user experience. Today's web apps pose a challenge for developers, however: how do you create and maintain efficient JavaScript code that downloads quickly and works across different browsers? The Closure tools help developers to build rich web applications with web development tools that are both powerful and efficient. The Closure tools include: A JavaScript optimizer The Closure Compiler compiles JavaScript into compact, high-performance code. A comprehensive JavaScript library The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. The Closure Library is server-agnostic, and is intended for use with the Closure Compiler. An enhanced stylesheet language
JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting
Debugging JavaScript This document is intended to help developers writing JavaScript code in Mozilla, mainly for Mozilla itself, but it may also be useful for web developers. It should give pointers to tools, aids and tricks which make debugging your code easier. Web Console This is the first place to go when you're debugging a web page; open the Web console using the Web Console option in the Web Developer menu. This shows any JavaScript errors in your app, as well as any logging calls from the console API. Browser Console The Browser Console lets you see all JavaScript errors and logging in the browser, including from Firefox code. You can also start the Browser Console when you launch Firefox, by launching Firefox from the command line and passing --jsconsole as a flag: /path/to/firefox --jsconsole Log to the Browser Console using the standard console API after importing Console.jsm: let console = (Cu.import(" {})).console; console.log("Hello from Firefox code");
Keypress: A Javascript library for capturing input The first thing to do is include the JavaScript file in your page. Once you've got that loaded in, you'll want to start by instantiating a listener: var listener = new window.keypress.Listener(); Once you've done that you can register combos with that listener you've created. The simplest way to do that is using the simple_combo API. listener.simple_combo("shift s", function() { console.log("You pressed shift and s"); }); listener.counting_combo("tab space", function(e, count) { console.log("You've pressed this " + count + " times."); }); listener.sequence_combo("up up down down left right left right b a enter", function() { lives = 30; }, true); If you only want to use Keypress for some very simple keyboard shortcuts, that's all you need to know! If you want to use some of the more advanced features of Keypress, you can use the register_combo API and supply an object with any number of options described below. And here's a complete look at the Listener class' complete public API:
SyntaxHighlighter - Feature Demo <title>SyntaxHighlighter Demo Page - <?= htmlspecialchars($title) ?></title> ** Multiline block comments $stringWithOutUrl = 'hello world'; ob_start("parseOutputBuffer"); // Start Code Buffering session_start(); function parseOutputBuffer($buf) { global $portal_small_code, $portal_gzcompress; global $PHP_SELF, $HTTP_ACCEPT_ENCODING; // cleaning out the code. if($portal_small_code && ! $buf = str_replace(" ", "", $buf); $buf = str_replace("\n", "", $buf); $buf = str_replace(chr(13), "", $buf);