jQuery Countdown
The countdown functionality can easily be added to a division with appropriate default settings, although you do need to set the target time. You can also remove the countdown widget if it is no longer required. Default countdown: 331Days6Hours34Minutes12Seconds The defaults are: Text is in English Format is 'dHMS' Days are shown if needed Hours/minutes/seconds are shown You can override the defaults globally as shown below: Processed fields are marked with a class of hasCountdown and are not re-processed if targetted a second time. A note on Date - the JavaScript Date constructor expects the year, month, and day as parameters. You can control how the countdown is presented via the format setting. Don't show days: 119Hours59Minutes58Seconds Don't show seconds: 5Days0Hours0Minutes Don't show either: 120Hours0Minutes Pad with zeroes: 04Days23Hours59Minutes58Seconds Compact version: 4d 23:59:58 Minimal compact version: 120:00 For targets further in the future, there are more presentation options. <?
30 Fantastic New jQuery Plugins
With jQuery now being used in over 40% of all web sites, the demand for up-to-date and feature-rich plugins has never been greater. Thankfully, the community has always met its popularity head on by offering a constant influx of new jQuery plugins that constantly push the boundaries of functionality even-further. We haven’t actually had a good look at plugins in quite a while, so today, we thought we would bring you up-to-date with some of the latest and greatest. CodeExplorer CodeExplorer is an enitrely unique code formatting plugin that will not only format the code with colors and spacing, but will also display it in an entire folder structure. CodeExplorer Subway Map Visualization Plugin The amazing Subway Map Visualization plugin allows you create, interactive subway map visualizations with HTML. Website Tour with jQuery Website Tour with jQuery allows you to, as its name clearly states, create a tour on a website with jQuery. jQuery Embedded Help System Flurid – The Fluid CSS Grid
Sort & Vote – A jQuery Poll
Martin Angelov Today we are going to make a draggable sort & vote poll, that will enable our website visitors to choose their favorite tutorial from the site. After they vote, a friendly CSS chart will show them how the tutorials are ranked and the total number of voters. To achieve this, we will be using jQuery, jQuery UI, PHP, CSS & MySQL. You can use the code I provide here to make your own versions and mash-ups. Step 1 – XHTML To make a better understanding of these steps, it would be nice to have the download files nearby and open, so you can trace where the code I explain here originates from. We start with the XHTML markup. demo.php Worth noting is the sform form. Maybe more interesting here is the PHP part on lines 3-5. <li id="<? This code is positioned inside a while loop, that outputs it for each list item. A sortable LI element Now lets dig a little deeper into the CSS styles. Step 2 – CSS In the code below, you can see how we have styled the XHTML we generated earlier. Step 3 – PHP
Making Our Own Twitter Timeline
Martin Angelov Introduction Twitter has grown into a real social phenomenon. This is an incredible achievement for such a simple service. This time we are going to create our own twitter-like timeline, where you can view and post your tweets. Creating the DB If you’d like to run a working demo on your own site, you will have to create a MySQL table where all your tweets are going to be stored. table.sql CREATE TABLE `demo_twitter_timeline` ( `id` int(10) NOT NULL auto_increment, `tweet` varchar(140) collate utf8_unicode_ci NOT NULL default '', `dt` datetime NOT NULL default '0000-00-00 00:00:00', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; The table can be in any mysql database. The XHTML Thanks to CSS and jQuery, our XHTML code is quite simple. index.php <div id="twitter-container"><form id="tweetForm" action="submit.php" method="post"><span class="counter">140</span><label for="inputField">What are you doing? The twitter timeline The CSS demo.css script.js
[RANGE] DatePicker - jQuery plugin
About Date Picker component with a lot of options and easy to fit in your web application. Last update 22.05.2009 - Check Download tab Features Flat mode - as element in page Multiple calendars in the component Allows single, multiple or range selection Mark dates as special, weekends, special days Easy to customize the look by changing CSS Localiation for months' and days' names Custom day to start the week Fits into the viewport License Dual licensed under the MIT and GPL licenses. Examples Flat mode, single selection, the week start monday. Flat mode, multiple selection, disabled dates, special day, the week start sunday. Clear selection $('#date3').DatePickerClear(); Flat mode, range selection, 3 calendars. Attached to an text field and usign callbacks to update the date selection with the value from the field. Flat mode, inside a custom widget and with custom design. Download datepicker.zip (55 kb): jQuery, Javscript files, CSS files, images, examples and instructions. Changelog The first release.
» Jquery Wizard Plugin » Worcester Web Site Development Blog
After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here. The code: First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");} Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number. Step 1 Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam turpis duisi Step 4: XXXXXXXXEt nequ a quam turpis duisiStep 5: XXXXXXXX Et nequ a quam turpis duisi Step 2 Step 3 Step 4 Step 5 A Demo of the wizard
Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework
Posted by Scott on 01/05/2009 Topics: css jQuery ui design visual design We've updated our popular Date Range Picker plugin to use jQuery UI 1.7 and the new jQuery UI CSS Framework. Working Demo: Demo Page The demo above was generated with the following code: jQuery: $('input').daterangepicker(); An additional demo with arrows and a custom dateFormat: Demo Page Features and Updates Uses jQuery UI 1.7.1: The range picker now uses the latest version of jQuery UI's datepicker, and allows passing of native datepicker options. jQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready. Download (and help us improve) the code The date range picker plugin code is open source and available in a git repository, jQuery-UI-Date-Range-Picker. Developer Options The following options are available in this plugin: Development Notes This plugin is a work-in-progress, and we would love to hear your input on how it could be improved. Dependencies Setting Menu Presets
[SORT] jquery tinysort
