10 interesting jQuery plugins (september 2011) 10 interesting jQuery plugins (september 2011) This is new roundup of most interesting jQuery plug-ins that have emerged over the last month. Here are different plugins like sliders, ui dialogs, images filter etc. 1. Rotating Slider with Easing The slider that scrolls the image vertically on its axis. 2. Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. 3. rlightbox This is a jQuery UI mediabox that can display many types of content such as images, YouTube videos and Vimeo content. 4. This is a jQuery plugin that makes it simple to add sliding (aka “floating”) panel functionality to your web page. 5. jCallout Callout is a balloon div that connects text, symbols, images to an element or a group of elements. 6. jFL – Fluid Adaptive Layout jFL – plugin for handling fluid and adaptive layout elements: resize div, resize font size, div positioning. 7. Nice way to filter array of images. 8. multiselect 9. 10.
20 Firefox Add-ons to Enhance your Web Development Sep 09 2008 There are lots of free extensions and add-ons available on the internet for Firefox, but which are the best add-ons that can Really help you as a web developer or designer in terms of time and effort? Many of our readers suggested some great add-ons in our previous post, Designer´s Toolbox : 15+ Time Saving Tools- What´s your Secret? . You might be interested to check other related posts for more useful tools: 1-InspectorWidget Adds toolbar button and context menus for invoking the DOM Inspector (DOMi) for either chrome or content elements. 2-Web Developer Suggested by Jon Aizlewood from and Mike Smith from A very useful add-on, adds a menu and a toolbar with various web developer tools. 3-IE View Lets you load pages in IE with a single right-click, or mark certain sites to *always* load in IE. 4-TinyUrl Creator 5-EditCSS Stylesheet modifier in the Sidebar. 6- View formatted source 7- Firebug One of the best add-ons. Homepage
Wordpress Plugins To Use On A Design Blog Posted on 07'08 Oct Posted on October 7, 2008 along with 97 JUST™ Creative Comments One of the cool benefits of using WordPress as a CMS (Content Management System) is the ability to use plugins which allows you to add on extra features with just a few clicks. I am going to showcase the particular WordPress plugins I use on this blog and the reasons for doing so. Akismet It is one of the best spam filters going around. Akismet checks your comments against the Akismet web service to see if they look like spam or not. Why? All in One SEO Pack Out-of-the-box Search Engine Optimisation for your WordPress blog. Why? Better Comments Manager Better Comments manager allows you to view your comments post wise, it also allows you to reply to your comments from within the admin panel without you having to visit the site to respond to comments. Why? cforms cforms offers unparalleled flexibility in deploying contact forms across your blog. Why? Chunk Urls for WordPress Why? Commentluv Why? FeedBurner FeedSmith
jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready Posted by Maggie on 04/02/2009 Topics: css jQuery jQuery UI ThemeRoller ui design Update: We contributed this menu plugin to the jQuery UI library. We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. As noted in our original post, the iPod-style menu provides easy navigation of complex nested structures with any number of levels. Much of the functionality that controls the iPod style menu, like positioning and option selection, is shared by dropdown and flyout menus which are better suited for smaller data sets, so we extended the script to include support for these additional menu types. We also built in the ability to customize a menu's appearance, including active and hover states, by passing in classes as options. By default, the menu script will transform an unordered list of links into a simple dropdown menu: Demo Page When the menu content contains nested lists, by default it creates an iPod-style menu: Demo Page Demo Page How it works
jQuery image zooming plugin A plugin to enlarge images on touch, click, or mouseover. Fork me on GitHub Demo Hover Grab Download Released under the MIT License. Instructions Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <span>, <li>, <div>, etc. To use zoom with img elements, they will need to be wrapped with another element. Removing Zoom Trigger the zoom.destroy event to remove zoom from an element: $('#example').zoom(); // add zoom$('#example').trigger('zoom.destroy'); // remove zoom Settings Hey,
75 (Really) Useful JavaScript Techniques | Developer's Toolbox Advertisement Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. The key is a) adding the right amount of JavaScript, and b) using the right JavaScript techniques. We have already1 collected2 various3 JavaScript4 techniques5 in the past – now it’s time for a new portion of JavaScript. Thanks to the Web’s widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. However, sometimes we need JavaScript solutions that are a little more involved or specific. You may want to take a look at the following related articles: 75 Useful JavaScript Techniques Hyphenation in Web11This project collects working solutions for automatic hyphenation in (X)HTML pages. SocialHistory.js13SocialHistory.js enables you to detect which social bookmarking sites your visitors use.
Crear plugins para jQuery (Cristalab) jQuery, uno de los mejores frameworks para Javascript y AJAX que existen, puede ser facilmente extendido usando plugins. En este tutorial te mostraré como crear plugins para jQuery, desde lo más básico hasta la integración directa con la libreria. El propósito de este tutorial es aprender a crear plugins para jQuery, con las facilidades que la libreria ya trae. Antes de empezar te recomiendo leer el tutorial de introduccion a jQuery, si no conoces los conceptos basicos del lenguaje, y el tutorial de programacion orientada a objetos en javascript, para que entiendas como ocurre todo a la perfeccion. Objetos a extender Para la creacion de plugins con jQuery, hay dos objetos básicos que se extenderan: El objeto jQuery, que se encarga de practicamente todo el procesamiento interno y el objeto jQuery.fn, que es el que maneja la interaccion con elementos. Creando el espacio de trabajo Creando el objeto principal, sus metodos y propiedades $(document).ready( function(){ $.comprobarAlert("Hola!")
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! Don't hotlink the tablesorter.js files. Download it and host it on your servers. 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: NOTE! jQuery Browser Compatibility
Craftyslide - A tiny jQuery slideshow plugin Light Trails Bokeh Blossoms Funky Painting Vintage Chandelier Why Craftyslide? Craftyslide was created first and foremost as an experiment, but secondly out of frustration with many plugins being written today. I found many slideshow plugins too bloated for my needs and code supplied was often superfluous and non-semantic. This prompted me to go about writing my own plugin, with the result being Craftyslide. Usage Using Craftyslide on your site is easy. Files to include: Basic initialization: <script> $("#slideshow").craftyslide(); </script> Show CSS Show jQuery Options width (number) Set a custom width for your slideshow. height (number) Set a custom height for your slideshow pagination (true/false) Select whether to display pagination or not. fadetime (number) Define the fade animation speed of slides. delay (number) Used during auto mode (pagination set to false). Options example: Example showing multiple options Download
6 Tools to Help You Analyze a Web Host - Six Revisions Editor’s Note: This is a guest post by Eva Vesper who works with Web Hosting Search – a small, independent hosting review site. She’s here to share some insights on how to evaluate and analyze your hosting provider. You have a website. You are satisfied with the web hosting provider but you still think it could be better. What to do? There are fortunately a few excellent tools that will help you monitor how web hosts are performing. 1. One of the better tools is the one that is provided by DNSstuff. 2. At Who is Hosting This? 3. Screenshot of Uptime.Netcraft using w3c.org as an example Netcraft is a data and analytics company. The latest performance report can be found on the uptime main page. 4. At YouGetSignal.com you will find a proper collection of useful tools when you are analyzing a hosting provider. 5. It is similar to WhoIs.com but with more detailed information. 6. Conclusion Related Articles
20 plugins para usar WordPress como CMS Francesco Mugnai ha elaborado una lista estupenda de los mejores plugins para usar WordPress como CMS, para diluir la diferencia entre blog y portal. Y casualmente coincide en parte con mi propia lista en la muchas de las propuestas, así que aquí tienes mi lista de plugins con una explicación de su cometido: Flutter – Una auténtica barbaridad de plugin. Con posibilidades infinitas de creación de paneles personalizados.Role Manager – Uno de mis recomendados de siempre. Permite un control absoluto de los perfiles de usuarios, que puede hacer cada perfil y que no, pudiendo crear nuevos tipos de perfil o roles.WP-CMS Post Control plugin – Completo panel de opciones que te permite decidir que tipo de contenido se mostrará en tu sitio. ¿Los conocías todos?
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. 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. Note from Chris Share On
Fullscreen Gallery with Thumbnail Flip In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. View demoDownload source In this tutorial we will create a fullscreen gallery with jQuery. We will be using Flip! And we will also be using the jQuery Mousewheel Plugin by Brandon Aaron. The beautiful images are by talented Polina Efremova. Let’s get started with the markup! The Markup First, we will add a loading element that we want to show when the images are being loaded: Then, we will create a container for all the images that will be shown in fullscreen: We will use the “longdesc” attribute to indicate the path to the respective thumbnail. Next, we will add a container for the contents that are shown on the left bottom corner of the screen. Each box with a heading will be inside of an element with the class “tf_content”.
20 Free Page Analysis Tools Get the FlatPix UI Kit for only $7 - Learn More or Buy Now When developing and maintaining websites, analysis plays a significant role in maximizing the effectiveness of the site. There are a number of resources and tools for analyzing web pages, and this post looks at 20 of the best free tools for this purpose. Almost all of them require no account or download to be used. There are a variety of different tools represented here. Website Grader from HubSpot Website Grader is one of my favorite tools on the list because of how helpful and usable it is. Trifecta from SEOmoz One of the more unique tools in this list, Trifecta will analyze a page, a blog, or an entire domain based on slightly different criteria. Spider Simulator from Summit Media This tool will give you a good idea of how search friendly you site is, and it will also give you a percentage rating. Web Page Analyzer from WebsiteOptimization.com This free tool will give you plenty of information to work with. SEO Analysis Tool