Succinct : jQuery plugin for Truncating Multiple lines of Text

Succinct : jQuery plugin for Truncating Multiple lines of Text

A tiny jQuery plugin for truncating multiple lines of text.Succinct shortens your text to a specified size, and then adds an ellipsis to the end.

Google Nexus Website Menu with CSS3 & JavaScript

Google Nexus Website Menu with CSS3 & JavaScript

A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.

We will reconstruct this menu using unordered, nested lists and some CSS transitions. We’ll use JavaScript to apply classes for the opening effects and handling the hover and click events. With the help of a media query, we’ll adjust the size to make sense for smaller devices.

bindWithDelay jQuery Plugin

bindWithDelay jQuery Plugin

jQuery Plugin For Delayed Event Execution.It prevents a function call from happening EVERY time an event is fired from the browser. Rather than implementing custom timeout code, just add in this plugin and simplify your code.

It works with existing code that uses the bind() function. Just add an extra parameter (timeout in milliseconds), and an optional boolean value if you would like to enable throttling.

Show Icon on Mouse over Thumbnail Image using jQuery & CSS

Show Icon on Mouse over Thumbnail Image using jQuery & CSS

Here I am going to tell how to show a icon on mouse over thumbnail image using simple jQuery & CSS.Now a days most websites are using this trick. In this tutorial You are going to show a link icon on mouse over anchored thumbnail, showing play icon on mouse over video thumbnail & showing Zoom icon on gallery thumbnails.

Coding an Ajax-Style Paged Document Viewer With jQuery

Coding an Ajax-Style Paged Document Viewer With jQuery

In this tutorial I want to demonstrate how we can build a small script which handles any set number of documents. The JS code is a little bit tricky since we need to adapt for a large number of pages. However it is not very difficult to customize and get the design looking exactly as you would need it! Check out my sample demo below to get an idea of what we will be creating.

Reddit Image Browser with jQuery & Html5

Reddit Image Browser with jQuery & Html5

Reddit Image Browser is a client-side image browser for Reddit. The application uses jQuery to fetch and process unauthenticated JSONP. Some rendering is done with D3.js with the eventual goal of creating richer visualizations and user interactivity. HTML 5 Local Storage is used to maintain state.

Features:

  • Runs entirely in your browser.
  • Identifies post type (i.e. NSFW, videos, self) and displays content in an appropriate format.
  • Infinite scrolling with automatic asynchronous loading.
  • Hotkeys, such as j to go to next post and c to open comments page, enable fast browsing.
  • Your subreddit selections persist across sessions via HTML 5 Local Storage.
  • Local Storage support for IE provided by Remy Sharp’s storage polyfill.
  • Retries on load error.

Data Searching Without Page Refresh with jQuery & Ajax

Data Searching Without Page Refresh with jQuery & Ajax

It will be very convenient for the users of your web application if you can load more data from the database without refreshing the whole page.Today I’m gonna show you a data searching example without refreshing a page:
1. User will input a name on the textbox.
2. User can click the search button or just simply press enter to start search.
3. A loader image will be shown.
4. Loader image will hide when search result comes in.

Popline : HTML5 Rich-Text-Editor Toolbar with jQuery

Popline : HTML5 Rich-Text-Editor Toolbar with jQuery

Popline is a HTML5 Rich-Text-Editor toolbar. Popline is inspired from popclip. Compared to traditional RTE, popline will float around the selected text.

Menutron : jQuery plugin for Responsive Navigation Menus

Menutron : jQuery plugin for Responsive Navigation Menus

Menutron is a jQuery plugin for responsive navigation menus.Menutron transforms your navigation menus from a list to a select menu when resizing your browser. On mobile devices, the select menu pulls up a native control, making it easier to pick an item.

Features:

  • It’s concise – When implemented in a responsive design, your menu becomes consolidated in to a single control, saving you horizontal and/or vertical real-estate.
  • It’s convenient – On mobile devices, the select controls will activate a native control, like the picker control for iOS, which can be navigated using drag, nudge, or flick gestures.
  • It’s intuitive – It works on any type of list (ol,ul,dl) and automatically adds a menu title of “Choose…” for easy recognition

jQuery Feedback Me Plugin

jQuery Feedback Me Plugin

This jQuery plug-in allows user to easily add an animatable UI widget with a feedback form which slides from the side of the screen.

Features:

  • Bootstrap support
  • jQuery UI themes support
  • RTL support
  • Uses ajax post to send data to server (‘name’, ‘message’ and ‘email’ parameters will be send to your servlet/php file etc…)
  • All labels are customizable
  • Customizable placeholder (HTML5) for all input fields