Posted on December 2, 2011, Filled under jQuery, 
Bookmark it
If often happens, especially for beginner developers, to forget the right property value that should be applied to a style. InstaCSS is aimed to help you finding information about CSS properties and their possible values. The website is constantly improved and it also has a database of searchable HTML tags and JavaScript functions (with usage examples). Moreover, each property page has a “Browse Compatibility” chart.
Having mostly text (loads very fast) and a live search, InstaCSS is a very attractive and useful tool for CSS designers.
Posted on October 29, 2011, Filled under jQuery, Bookmark it
A mixture of an image slider and an accordion, Slidorion features beautiful images along with a variable length description. Having images associated with each tab, and accompanied by a large variety of effects, this plugin is an excellent alternative to the conventional jQuery slider.
Available options:
- autoPlay – Automatically plays the slidorion (boolean)
- easing – The easing of the animations (string)
- effect – The effect of the animation (string)
- first – The first slide to show (the rel of that slide) (string)
- hoverPause – The slidorion pauses when hovered over (boolean)
- interval – The time between each slide (number)
- speed – The speed of the animation (number)
Looking for something else?
Check the following premium web applications...
Posted on October 5, 2011, Filled under jQuery, Bookmark it
After a long quiet sleep, the developers of well-known Preloaders.net have finally woken up. Couple of months ago they launched the second version of http://preloaders.net and released http://iconizer.net from beta having added dozens of new features and templates to both projects (including APNG support in the first one and a completely new search engine for the second project). But these two projects are not even in the middle of the developers’ plan. Right now they are developing 3 new projects and very recently launched a new generator – http://cssload.net
CSS load – first online CSS spinners and bars code generator with the given features and variety of templates. The aim of the project is to provide developers and designers with animations that indicate loading of AJAX and JQuery requests made with the means pure CSS (CSS3) and HTML. Right now there are 8 templates of different animation templates available, but there will be more in the nearest future.
The concept of generating the animations is very simple and alike with the Preloaders project. Just select your template in the left column, then set the coloring scheme, size and the speed of animation. All animations previews are generated automatically each time you change any parameter. Having acquired a desired preloader, click on the “Get code” button and you will be provided the code to copy.
The project right now is an alpha version with some little modifications pending. The main problem is that CSS3 animations are not yet supported by Internet Explorer and Opera web-browsers, but the project developers hope that very soon it will not be a problem anymore.
Posted on July 19, 2011, Filled under General, jQuery, Bookmark it
While we navigate through web pages we often see fonts that we really like and want to know the name of that font in case we would like to use it in our web pages. WhatFont aims in helping you get the font name when you hover the cursor over a text and image.
Getting the font name you want is just a click away. This tool not only saves you time but also detects services used for serving the font. Now supports Typekit and Google Font API.
It is available as a bookmarklet and has a Chrome/Safari extension.
Full support: Firefox 3.6+, Chrome 9+, Safari 4+, Internet Explorer 9.
Limited support: Internet Explorer 8.
Posted on July 9, 2011, Filled under jQuery, Plugins, Bookmark it
Scroll Checkpoint is a Flexible Animated Content Panel WordPress Plugin that enables you to engage your visitors with animated dialogs as they scroll through your page. The dialog’s content can be set to any text or HTML content you want or populated it with widgets.
This plugin is useful to keep visitors on your site longer. For instance you can engage the users at the end of an article. Often, readers finish reading an article and immediately close the page. Scroll Checkpoint allows you to catch their attention and keep them on your site longer by providing related content suggestions. New York times uses this to great effect.
Suggested Uses
- Show related posts at the end of articles
- Slide-in Newsletter Sign-up: useful to increase your list of subscribers
- Full-width slide-out content panels
View some screenshots of this plugin in action
[nggallery id=5]
Features include:
- Insert Checkpoints Anywhere
- Add Content via HTML or Widgets
- Unlimited Checkpoints & Widget Areas
- 10 jQuery Animations: Slide, Fade, Fold, Drop, Scale, Blind, Explode, Clip, Shake, Pulsate
- 30+ Dialog Style Presets: Easily create custom styles with the custom.css starter style sheet.
- Settings can be configured individually for each dialog: Dimensions, Position, Animation, User interact-ability, Trigger points and more!
Requirements
- WordPress 3.1+
- jQuery 1.4.4 (comes with WordPress 3.1)
- jQuery UI 1 .8.9 (comes with WordPress 3.1)
- PHP 5 .2+
- Standards-compliant theme
Posted on July 3, 2011, Filled under jQuery, Bookmark it
Developer by Finely Sliced, leanModal.js is a super simple plugin that works with your CSS.
Having just 780 bytes, this uber light plugin has a flexible width & height, it’s perfect for hidden page content, can run multiple instances on one page, is image free and great for things such as login, sign up and alerts panels.
This jQuery plugin comes with a few weaknesses though: it has no gallery, iframe or Ajax support; it has not been tested in IE6.
Built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn’t apply any styles to the target element, other than for displaying and positioning.
Posted on June 28, 2011, Filled under jQuery, Bookmark it
JigoShop is a eCommerce plugin for WordPress developed by a team of professionals with years of experience delivering online shops for global brands. Through this powerful plugin, you can set up a shop in minutes with physical and downloadable products or even services. Jigoshop provides you with the features necessary to set up an eCommerce web site lickety-split.
With the option to create simple, grouped and configurable products customers can easily refine your catalog based on product attributes, ensuring they find what they’re looking for in just a couple of clicks.
Being built on the WordPress core, you get all the benefits of this global leading platform: free, secure, easy-to-use, highly customizable and with a great support community.
Features include:
- WordPress Centric: Elegant, lightweight code built upon core WordPress functionality.
- Extensibility: Add functionality your Jigoshop with their premium themes and extensions.
- First Class Support: Regularly updated core plus attentive, dedicated support forums.
- Reporting: Detailed order and stock reporting via graphs and dashboard widgets.
- Widgets & Shortcodes: Create a unique store using built in widgets and shortcodes.
- Out-the-box awesomeness: One-step-checkout, up sells, cross sells, filterable products. Oooh yeah!
Looking for something else?
Check the following premium web applications...
Posted on May 23, 2011, Filled under jQuery, Bookmark it
Made by Atle Mo., SubtlePatterns.com is a collection of tasty, high quality patterns for your next web project. These design elements can be used freely in both personal and commercial projects. If you created some nice graphics, you can share them with everyone by submitting them to the website. Every subtle pattern can be downloaded as a Photoshop pattern file.
Current patterns include:
- Dark stripes: Very dark pattern with some noise and 45 degree lines.
- Handmade paper: White hand made paper pattern with small bumps.
- Pinstripe: Light gray pattern with a thin pinstripe.
- Wine Cork: Wine cork texture based off a scanned corkboard.
- Paper 3: Light gray paper pattern with small traces of fibre and some dust.
- Dark denim: A dark denim looking pattern. 145×145 pixels.
- Smooth Wall: Some rectangles, a bit of dust and grunge, plus a hint of concrete.
- 60º lines: Never out of fashion and so much hotter than the 45º everyone knows, here is a sweet 60º line pattern.
- Exclusive paper: Exclusive looking paper pattern with small dust particles and 45 degree strokes.
- Paper 2: New paper pattern with a slightly organic feel to it, using some thin threads.
- White sand: Same as gray sand but lighter. A sandy pattern with small light dots, and some angled strokes.
- Gray sand: A dark gray, sandy pattern with small light dots, and some angled strokes.
- Paper 1: A slightly grainy paper pattern with small horisontal and vertical strokes.
- Leather 1: A leather pattern with a hint of yellow.
- White carbon: Same as the black version, but now in shades of gray. Very subtle and fine grained.
- Fabric 1: Semi light fabric pattern made out of random pixles in shades of gray.
- Micro carbon: Three shades of gray makes this pattern look like a small carbon fibre surface. Great readability even for small fonts.
- Tactile noise: A heavy dark gray base, some subtle noise and a 45 degree grid makes this look like a pattern with a tactile feel to it.
- Carbon fibre: A dark pattern made out of 3×3 circles and a 1px shadow. This works well as a carbon texture or background.
- 45 degree fabric: Medium gray fabric pattern with 45 degree lines going across.
Posted on April 25, 2011, Filled under HTML & CSS, jQuery, Bookmark it
Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders the page. In case the browser tilts of resizes, the script checks its width and loads the needed CSS file accordingly. If JavaScript is disabled default stylesheets can be served via <noscript> which is valid in the HEAD of HTML5.
Alternatives include: Build a separate site for mobile. Or, use media queries to adjust layout, with a polyfill for older browser support, and conditional Internet Explorer comments for Windows phones. Also a factor is how to handle multiple image resolutions without adding file size. Filament Group is advocating context aware image sizing.
