Posted on November 20, 2010, Filled under jQuery, Bookmark it
Addy Osmani, a passionate Web Developer, shares a jQuery offline learning pack,for anyone interested in tweaking his skills offline. The kit include printable reference sheets, so you can easy access the right material whether you are wondering what event, selector or method might be the best to you. All the documentation comes in an easy browseable offline format with all the API examples included. For those who started working with jQuery Mobile, the pack also includes a demo application: one for PHP developers and another for Rails developer.
The whole package include:
- My 1.4.3 Selectors Printable that explains what each selector does and how it should be used (PDF)
- The FutureColours 1.4.3 Cheatsheet showing all the different methods supported by 1.4.3 (PDF)
- The jQAPI 1.4.3 Offline Documentation pack that lets you browse the documentation and API examples on your desktop (thanks to the guys at yayQuery and the awesome Ben Alman)
- A Complete Developer’s jQuery 1.4.3 Mobile Demo Application (PHP courtesy of DevGrow, Rails courtesy Fuel)
- Rebecca Murphy’s excellent jQuery Fundamentals book and exercises (PDF)
- 1.4.3 and our 1.4.4 Release Candidate Preview
PS: Take also a look at jQuery 1.4.2 Visual Cheat Sheet from Woorkup.com ;-)
Posted on July 31, 2010, Filled under AJAX, jQuery, Bookmark it
Catch404 is a jQuery and CSS3 Modal Plugin for showing broken links and 404 errors without users even having to leave the page after they click the actual link. The plugin uses the power of AJAX to check the target clicked link in the background. If the URL is not broken nor generates a 404 error, then the page will load for the user. Otherwise, the visitor would be prompted through an Inline jQuery Modal Window that he is trying to access a non-workable URL address.
Let’s pretend that this is a broken link. Can you imagine that when your users click this link, instead of them being redirected to a 404 error on your site, a friendly modal message pops up on your current page saying that it’s not available?. In that same message box you can then give them a sense of direction so that they’re not lost – you could ask them to click on a contact link to report the link’s broken, offer an alternative mirror, recommend they do a site search for the file or just say that you’re experiencing hosting issues and the file will be back up soon.
Posted on June 4, 2010, Filled under jQuery, Bookmark it
Lightbox_me aims to be a simple solution to lightbox a DOM element without having all the fanciness of all the lightbox-related plug-ins out there. It’s an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.
- Handles overlay resize when the window is resized
- Handles overlay size in cases where the document is smaller than the window
- Handles position: fixed in all browsers
- Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contents
- Tiny footprint (just over 1000 bytes gzipped & compressed)
- Small DOM overhead (adds 1 DOM element for the overlay)
- Dynamic iFrame shim is created and destroyed for the IE 6 select box peek issue (tested and working on HTTPS pages)
Posted on May 7, 2010, Filled under jQuery, Bookmark it
Built by Alethia Inc., Open Standard Media (OSM) Player is an industry changing, all-in-one open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash. The new Open Standard technology takes the place of the proprietary Adobe Flash Player, which has been used – for over 6 years – to deliver high quality media to audiences far and wide.
- Dynamic HTML5 content delivery.
- Audio and Video support with the most popular media formats.
- Automatic Flash fallback for non-standard media.
- Easily themable using the incredible ThemeRoller system.
- Seamless Vimeo and YouTube integration.
- Playlist support
- Player to Player communication.
- Powered by jQuery.
OSM player is 100% open source and 100% free.
Posted on May 4, 2010, Filled under jQuery, Bookmark it
Front-End Web Developer Seamus Leahy has created Pure CSS Stack Menus and decided to take the same concept and created a jQuery UI widget for it. With the new jStackmenu, you can can take any element and turn its children into the items of a stack menu.
The effect is really cool and this script can help you reduce space on your web page. You can control when it opens and closes, the direction it opens, the size of the arc and even the time it takes to open. It even has events for those who really want to get clever.
Posted on April 15, 2010, Filled under jQuery, Bookmark it
This jQuery-powered Script takes a different approach: it allows for browsing all thumbnails as well as the large images in a single image space and respects the page flow, staying anchored and rooted in the web page at all times. This way it gives a less disruptive user experience than modal windows.
Posted on April 8, 2010, Filled under jQuery, Bookmark it
Sponsor Flip Wall With jQuery & CSS is a tutorial shared by Tutorialzine, that intends to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design. They are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. You can use the resulting code to showcase your sponsors, clients or portfolio projects.
Bring interactivity to your site’s pages!
Posted on April 7, 2010, Filled under jQuery, Bookmark it
Coin Slider is a lightweight (8 kb) jQuery Image Slider plugin with Unique Transition Effects such as swirl, rain and straight. This plugin has lot of options to helping you set slider as you want. For instance you can customize it to have a 900px wide slider, without navigation and with 5sec delay between images.
- Unique transition effects
- Valid markup
- Flexible configuration
- Auto slide
- Navigation box
- Linking images
- Fully customizable using CSS
Posted on March 30, 2010, Filled under HTML & CSS, jQuery, Bookmark it
Accordion is a UI pattern made up of a series of containers for your content, all of which are closed when the new panel opens and reveals itself. Chris Coyier came up with Grid Accordion (powered by jQuery and CSS). It works with the same theory as most other accordions. Only one cell is opened at a time. The big thing is that the column of the current open cell expands to a reasonable reading width. The effect is really awesome as it offers you a handy alternative to classical accordions, by adding all the data you need in a single table.
One way to look at an accordion is like a collapsed single column of a table. I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. I thought it would have been overwhelming visually. I also thought that it was most likely that people visiting this page would know what they needed right away, so having them click once to get it seemed pretty reasonable. So, a table of accordions!