PanelJAX - C# - ASP.NET. PanelJAX enables you to rapidly build rich async-enabled web-sites. It integrates with ASP.NET MVC and allows you to make business logic decisions server-side, that control your UI client-side. Best of all, there's nothing new to learn. You can continue building your HTML views that same way you always have, and panelJAX seamlessly ajaxifies it! PanelJAX is a jQuery plugin, and .NET assembly containing helpers and attributes for ASP.NET MVC. Lazy Load Plugin for jQuery. Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac. For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H).
When checking the demos clear browser cache between each request. How to Use? Lazy Load depends on jQuery. You must alter your image tags. <img class="lazy" data-original="img/example.jpg" width="640" height="480"> $(function() { $("img.lazy").lazyload(); }); This causes all images of class lazy to be lazy loaded. PRO TIP! Setting Threshold Event to Trigger Loading. How to: Customizing and Theming jQuery UI Datepicker. jQuery UI is simply awesome and due to the ease of use, it is popular and widely used in almost any website that need interactive features.
And, in this post, we’ll look at one of the features provided, the Datepicker widget. We will try to learn how to customize the calendar theme, so that you will be able to create your own theme that will correspond to your overall design. However, you need a bit of understanding in JavaScript and familiarity with CSS before following this tutorial. If you’re ready, let’s get started. The Assets Let’s prepare some of the essential assets for the calendar. First, the calendar design will refer to this PSD file from Premium Pixels. We will also need a web development tool like Firebug to inspect element classes/ids generated by the jQuery UI. Well, I think we’ve had enough preparation. Step 1: jQuery UI Datepicker First, go to jQuery UI download page. We should deselect all the components, as we don’t need all of them.
Step 2: Customizing the Datepicker. Date / Time Picker | A date picker control. To open the calendar, click the icon at the right side of the input box. While open, you can use keyboard controls to navigate the datepicker: Right arrow: next dayLeft arrow: previous dayDown arrow: next weekUp arrow: previous weekPage down: next monthPage up: previous monthEnter: select dateEsc: cancel selection and close datepicker Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.
Constructor: var picker = new Control.DatePicker(element, options); Parameters: element - The CSS id of the <input> elementoptions - an object with name/value pairs of additional options Additional Options: icon - the icon to display in the right side of the input boxdatePicker - a boolean value determining whether to display the date picker. Locales: To add a new language, after including datepicker.js, see the following example: Examples. Astonishing iCal-like calendars with jQuery | tooltips,calendars.
I wanted it to be similar to the iPhone Calendar application (or, if you want, to the little calendar on the left bottom corner in iCal). And I also wanted to keep the code as little and sweet as possible (we don’t like maintenance, do we?). Here’s the simple HTML code I used, the simplest you could ever come up with: All the magic takes place with some ninja CSS: Please note a couple of things here, as it’s the trickiest part: Make your images seamless. Draw only the top and right border of the cells inside the image: neighbour cells will continue the pattern. In addition to the plain calendar structure, we obviously also want the events description to show up on mouse hover.
<td class="date_has_event"> 13 <div class="events"><ul><li><span class="title">Event 1</span><span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit. And use the beautiful, handy, lightweight Coda-like effect for jQuery to bring it to life (how I love jQuery?) And… that’s it. Create a Time Selector with jQuery UI | komprihensiv. Using a jQuery UI Slider to Select a Time Range | Marc Neuwirth's Blog. Recently I was trying to create a web form where a user could enter a start time and end time to create a time window for a schedule.
However, the easiest solution – having a user enter the times into two text boxes – seemed clunky and annoying to use. I wanted a better solution that was more intuitive so I decided to try using the jQuery UI Slider for a more visual experience with less typing. My goal was to have a slider with two points to represent the beginning and end of a scheduled time range and to display the value of each point as text. If you haven’t used jQuery UI before, the slider itself is pretty simple to setup: View this demo in a new window This sets a few options for the slider: it is a range between two points, has a value range from 0-1439 (which will later be converted to 12:00 AM to 11:59 PM), and initial values of 9:00 AM (540) and 5:00 PM (1020). From this point, I needed to read the values from each slider, convert it to a time, and output it to the screen. Sites that use Timeago · rmm5t/jquery-timeago Wiki. Theproductguy/CuteTime. Portamento - easy sliding/floating panels in jQuery.
Portamento is a jQuery plugin that makes it simple to add sliding (aka "floating") panel functionality to your web page. All that's needed is some simple CSS and one line of JavaScript, and you're away! It works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too. Portamento also has sensible behaviour if the user's viewport is too small to display the whole panel, so you don't need to worry about users not being able to see your important content. Demos In the Wild Portamento is being used on real websites, right now. Croydon Creatives Usage Using Portamento is easy. Options You can customise Portamento with the following options: wrapper - the element that you want to visually contain the sliding panel. Gap - the number of pixels to leave between the top of the viewport and the top of the sliding panel. DisableWorkaround - disable the workaround for not-quite capable browsers.
What browsers will Portamento work with? Version History. Percentage Loader. Run loaderor download on BitBucket jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes. It is open source (BSD licensed) and available with instructions on BitBucket [here] or you can just grab the files [here] more examples Controllable It's also possible to use the percentage loader as a controller - try clicking and dragging on the widget. Multiple run loaders You can easily run multiple loaders simultaneously.
Back to top. Roundabout for jQuery by Fred LeBlanc. It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results. Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.2). It works in all major modern browsers and even some of the older, not-so-modern ones. It’s open source and released under the BSD license, meaning that it’s free to use in your personal or commercial projects. See Roundabout In Action Add-Ons Roundabout is equipped to play nicely with a couple of other plugins if they’re made available. Roundabout Shapes by Fred LeBlanc Roundabout can move in more ways than just a turntable. But That’s Not All! The list above is only a list of the plugins that have support baked in, but Roundabout will play nicely with many other plugins.
Learn Support New in V2 The code is also a lot cleaner and better commented, which will hopefully allow you to get in there and tweak if you want to. to this: Usage. Adipoli jQuery Image Hover Effects. How To Use Enabling image hover effect is very simple. Place the below references inside your head tag. If you need image hover on an image with id ‘image1′, call adipoli plugin like this: <script> $('#image1').adipoli(); </script> Adding Options: Available Options startEffect : Default style of imagehoverEffect : Image style on mouse overimageOpacity : opacity of image considered when start effect is transparent or overlayanimSpeed : Animation speed for the effectfillColor : Overlay colortextColor : Text ColoroverlayText : Default HTML to be displayed on overlayslices : Number of slices for slice animationsboxCols : Number of boxes in a row for box animationsboxRows : Number of rows for box animationspopOutMargin : Margin of Image popoutpopOutShadow : Shadow length of popout image.
Start Effects: transparentnormaloverlaygrayscale Hover Effects: Change Log Version 2.0 Added grayscale startEffectMoved code to github Do you want to know. PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane. Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action.
Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built. jQuery Timelinr. Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines.
Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.6 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum. Icon designed by Sebastián Cortés Changelog: Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Última versión estable: 0.9.6 Configuración: Incluye la librería jQuery y luego este plugin: Inicialízalo con los parámetros por defecto: O customízalos: El marcado HTML debe ser de la siguiente forma: Cambios: Demo Horizontal.
Adding a Timepicker to jQuery UI Datepicker. Getting Started Highly Recommended Handling Time eBook Check out the Handling Time eBook to learn from the basic setup to advanced i18n usage, and from client's javascript to the server's database. eBook + Example code eBook Subscribe to Blog and Twitter Subscribe to my blog via email and follow @PracticalWeb on Twitter.
Download Download Timepicker Addon Download/Contribute on GitHub (Need the entire repo? There is a small bit of required CSS (Download): Requirements You also need to include jQuery and jQuery UI with datepicker and slider wigits. jQuery jQueryUI (with datepicker and slider wigits) Timepicker Version Version 1.4.4 Last updated on 2014-03-29 jQuery Timepicker Addon is currently available for use in all personal or commercial projects under the MIT license. MIT License Formatting Your Time The default format is "HH:mm". Hour with no leading 0 (24 hour) Hour with leading 0 (24 hour) h Hour with no leading 0 (12 hour) hh Hour with leading 0 (12 hour) m Minute with no leading 0 mm s ss l c t tt z Examples. Website Tour with jQuery. Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.
You might have noticed that Facebook used something like […] View demoDownload source Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way. You might have noticed that Facebook used something like this to explain the new features of the profile. The idea is to add a certain class to elements that you want to guide the user through and explain what they do. Another option that you can use is autoplay which will allow the user to simply sit back and watch every step without having to click on the next button. Now, we will configure the steps in a JSON object. By default, we will have autoplay disabled.
Gmaps.js — Google Maps API with less pain and more fun. Lazy Load 1.7.0 Released. PhotoPhoto Marise Caetano Previous version of Lazy Load gained traction pretty fast. Good patches were submitted to GitHub. This version of plugin mostly concentrates on speed optimization and event handlers. New Events Two new events were added. Handler for appear event is called when image appears to viewport but before it is loaded. New Parameter New parameter data_attribute was added. Renamed Parameter Parameter effecspeed was renamed to effect_speed. Selectors Viewport selectors got tuned up. $("img:in-viewport").something(); $("img:below-the-fold").something(); $("img:above-the-top").something(); $("img:left-of-screen").something(); $("img:right-of-screen").something(); Download Latest source or minified.
When asking a question please include an URL to example page where the problem occurs. jQuery Smooth Scrolling Plugin | Page Scroller. Ajax AutoComplete for jQuery. Recurly.js - JavaScript library for customizable transaction forms. jQuery Scroll Path. Response JS: mobile-first progressive enhancement in HTML5. How to Code a jQuery Rolodex-Style Countdown Ticker. Timeline Portfolio. Tutorial: Create a Beautiful Password Strength Meter. Blur.js. jQuery Knob demo. Tipped - The jQuery Tooltip. Latest tweets tooltip plugin with jQuery. jQSlickWrap - Slick text wrapping for jQuery. jQuery Text Change Event - ZURB Playground - ZURB.com. jQuery Joyride Feature Tour Plugin - ZURB Playground - ZURB.com.
JavaScript Annotation Plugin - ZURB Playground - ZURB.com.