Archive : Ajax & Javascript

Flip! is a jQuery plugin that allows you to flip beautifully any HTML element with the possibility to set the direction as you want it ( up to right, bottom to left, etc ). There are more options like speed of the animation, and optionally you can use the callback functions: onBefore, onAnimation and onEnd. Info & Download

“Like it? Tweet it!” is a jQuery-powered JavaScript widget that enables visitors to your website or blog to write a tweet about the site directly in a box displayed in the corner of the website, with a link to the site already embedded in the input field. The tweet box is activated when you click a link that you specify. Tweet it has tons of customization options that you can modify and you can change the design like you want to make it look like your website. The widget is using the new @anywhere twitter API : signing in seamless and you can start using Tweet it right away. Info & Download

Piwik is a downloadable, open source (CPL licensed) real time web analytics software program. It provides detailed reports on your website visitors, search engines, keywords, language… and much more. Piwik is a PHP / MySQL software program that you download and install on your own web server. At the end of the five minute installation process you will be given a JavaScript tag. Simply copy and paste this tag on websites you wish to track (or use an existing plugin to do it automatically for you) and access your analytics reports in real time. Piwik supports more than 30+ languages ( so if you don’t know English, there’s no problem! ). So, globally talking, piwik is tracking your visitors in real-time. Bellow are some of the features that are unique and only piwik have them. Real time web analytics reports: in Piwik, by default reports are generated in real time. For high traffic websites, you can choose the frequency for reports to be processed (more info) Piwik’s...

jTrack is a time tracking application build on jQuery, using DOMCached plugin as well as jquery-json plugin. The jQuery time tracking application rely on localStorage, which is a part of the Web Storage specification. The application enables you to add any number of tasks and starts tracking the time for each when a “start” button is clicked. The application is compatibile to all browsers like : Firefox 2+ Chrome 4+ Safari 4+ Opera 10.5+ IE 6+ And features like : easy task management easy integration in your project ultra lightweight open source it fast, run in your browser simple interface Info & Download | Demo

jCoverflip in an open source jQuery plugin used for creating coverflow-like interfaces that can display images or any other content. Every content can be browsed by simply clicking on it ( like a slider, ex : jQuery UI slider ). The plugin is very customizable having multiple features ( check bellow ). 1) Ready to Use Drag or click functionality to showcase featured content items on demand by the user. Ability to showcase both images and content associated with an item. Module integration with Drupal or Standalone version. 2) Themeable User Interface The default installation uses a clean style that can be updated with ease. All aspects of jCoverflip are customizable through the API, including: Colors. Fonts and Styles. Animation speed. Number of items included in jCoverflip. Download | Demo

Jstackmenu was created using jQuery and some css files. It transforms the children of any element into a beautiful stack menu. The animation has some really great features like ( when it opens or closes, the direction where it opens, the size of the arc, the time it takes to open ) and bonus events ( for those who really want to get clever ). But, unfortunately it only does the arcing in browser that support CSS transforms. For browsers without CSS transform support the menu goes in a popup of stack items in a line. As well, for those browsers that support CSS transitions, it uses this instead of javascript animation which creates a smoother animation while reducing the javascript load. The great part is that it’s really simple to use. Just take any element, through jQuery, where the stack items are the children, and call .jstackmenu() on it ( example and image demo bellow ) $('ul.my-stack').jstackmenu(); $('span.toggle-stack').click( function(){ $('ul.my-stack').jstackmenu('toggle'); }); Download...

Quizzy is an open source PHP and AJax based quiz library. It uses XML files for configuring the questions / answers of every quiz, every question having a true / false value. All data is loaded via Ajax which makes it impossible to view the future questions or answers of them inside the source. Questions can have an explanation text once an answer is submitted. And also, images can be used within questions and answers. After the quiz is completed, it displays your calculated score and grade (optionally, with an image for every grade). The source also provides us an online builder which can help you make XML quizzes as easy as possible. Quizzy’s technology is based on jQuery and jQuery loading library for notifying the user. Download | Demo

The Q.js tool set ( check screen bellow ) was developed from dissatisfaction with the existing toolsets trying to combine all the libraries in one big toolset. It’s still under development but the guys promised some cool stuff coming up. The toolset is build under prototype.js and scriptaculous libraries and futures multiple mini-scripts like : growl-like user messaging system, slider, tool tip system, color picker, draggable windows and alert ( confirm or prompt ) windowing system. Q is using a dynamic stylesheet system.  It generates the css declarations on demand and only for the modules active at that time. You can add your styles in any way you like it, it’s very easy actually. Download | Demo

In this tutorial will show you how to build a twitter like “load more” comments widget. This is made using PHP and Mysql combined with jQuery or Mootools. Requirements : php and mysql server to load and get comments from database the client must support javascript. In this tutorial we’re using MooTools 1.2.3 Core and More 1.2.3.1.  If you prefer jQuery (  jQuery 1.3.2 and Ariel Flesler’s ScrollTo plugin ) Step 1 : The PHP and Mysql The first thing we have to do is to decide how many posts you want to extract from the database. Since the widget will remember how many posts were loaded at the beginning we will have to use sessions. /* settings */ session_start(); $number_of_posts = 5; //5 posts will load at a time $_SESSION['posts_start'] = $_SESSION['posts_start'] ? $_SESSION['posts_start'] : $number_of_posts; //where we should start The above code contains all “settings” that we need for the content. Now we have to focus on the PHP code that will connect...

Previously, a post at WRD was sharing 10 password strength-meter scripts for easily warning users about how weak are their password while filling the forms. chronoStrength is a new one which comes as a standalone JavaScript file or a jQuery plugin. Compared to the standard strength meters which visualize the strength of passwords with colors, this script displays “an estimate of the time for a desktop PC to crack the password“. And, the messages to be displayed can be customized by updating the source code a little bit witch could be funny