Mif.Menu Demos
Jcrop - Deep Liquid
Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or block objects Supports aspect ratio locking Supports minSize/maxSize setting Callbacks for selection done, or while moving Keyboard support for nudging selection API features to create interactivity, including animation Support for CSS styling, now uses LESS Touch support for iOS, Android, etc Cross-platform Compatibility Firefox 2+ Safari 3+ Opera 9.5+ Google Chrome 0.2+ Internet Explorer 6+ May work in older versions or other modern browsers, these were tested. Documentation Archive Jcrop is free software released under MIT License.
Coda Popup Bubbles
In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect, but there’s a few nuances to be wary of. How to Solve the Problem To create the puff popup bubble effect, we need the following: Markup that assumes that JavaScript is disabled. The biggest trick to be wary of is: when you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ve provided a screencast to walk through how create this functionality. Watch the coda bubble screencast (alternative flash version) (QuickTime version is approx. 23Mb, flash version is streaming) View the demo and source code used in the screencast HTML Markup For the purpose of reusability, I’ve wrapped my ‘target’ and ‘popup’ in a div. There’s very little to the minimum required CSS. The minimum I recommend for the example is: jQuery Mouse Over Mouse Out The ‘Trick’
jQuery plugin: Tablesorter 2.0
Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!)under MIT or GPL licenses. Please with sugar on top! Update! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. TIP! To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: tablesorter works on standard HTML tables. Start by telling tablesorter to sort your table when the document is loaded: $(document).ready(function() { $("#myTable").tablesorter(); } ); NOTE! jQuery Browser Compatibility
Processing XML with jQuery
Before you start While this tutorial is useful to seasoned developers looking to pick up or sharpen their jQuery and XML processing skills, it also provides a practical overview of essential DOM scripting concepts, which can bring even the most junior JavaScript coders up to speed and allow them to grasp the full scope of the tutorial. About this tutorial As advanced media- and data-rich web applications grow in population within the browser, technologies such as XML and jQuery become important components in their architecture due to their wide adoption and flexibility. The tutorial covers these specific topics: Introduction to the DOMXML and JavaScript in the browserjQuery and XMLCase study: LiveXMLEditor Prerequisites This tutorial assumes that you have a basic understanding of HTML and JavaScript. Your favorite text editor for writing and editing code.The jQuery library. See Resources for links to all the tool downloads. Back to top Introduction to the Document Object Model (DOM) Listing 1.
Building an Animated Cartoon Robot with jQuery
Why? Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. View Demo Overview This project was created by layering several empty divs over each other with transparent PNGs as background images. The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The Markup <div id="wrapper"><div id="cloud-01"><div id="cloud-02"><div id="mountains-03"><div id="ground"><div id="full-robot"><div id="branding"><h1>Robot Head. The structure of the divs closely resembles our diagram. The Style The CSS for this project is just as simple as the markup. Absolute positioning is used to pull any header or paragraph text 9999px to the left of the screen. The jQuery JavaScript Disclaimer: The original script to animate the robot was horrid.
A VSDoc for jQuery 1.5 - Encosia
I’ve noticed several people looking for a jQuery 1.5 VSDoc this week. After looking around myself, I didn’t see one anywhere either. So, I updated Damian Edwards’ VsDocBuilder for jQuery 1.5 and generated a new VSDoc. It doesn’t handle the new jqXHR and Deferred return types quite right, so you won’t get Intellisense for the new chained $.ajax() callbacks. You can download it here: jQuery-1.5.0-vsdoc.js Update: Damian has just made a fully functional version of the 1.5 VSDoc available (that was quick): jquery-1.5-vsdoc.js. Important: This new VSDoc makes use of <para> tags to display line breaks inside documentation tooltips.
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery! Demo and Source Code Step 1 Let's begin by writing the necessary HTML to create a simple vertical navigation. I'm also going to add in a title element. Step 2 Now, let's create a HTML document where we can put the work we just did. There are a few things to note here: The ! Step 3 Now that we have our HTML file labelled and working, let's add some styles. Step 4 At this point your demo.html page should be looking something like this: So, it is finally time to begin using jQuery. Download the latest version of jQuery.Create a new file called sliding_effect.js and save it in the same directory as that of your HTML and CSS file.Lastly, insert the two previous files to your HTML document's <head>. This is what your HTML file's <head> should look like now:
