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 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
jto go to next post andcto 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
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.
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
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
Jssor Slider : jQuery TOUCH & RESPONSIVE Plugin
Jssor slider is announced as one of the best performance sliders. No-Jquery minimum 15KB javascript code by smart compression. It is one of the lowest CPU comsuming slider. slider (1%), slider with caption (4%), slider with slideshow (~4%)
Features:
- Optional thumbnails, tabs or bullets navigation
- Position of thumbnails, tabs and bullets are adjustable, can be vertical or horizontal
- Touch drag navigation for thumbnail navigator is allowed
- Use any html/css code to customize thumbnail to anyformat
- Multiple sliders in one page
- Any html code can be placed inside slide
- Free support and upgrades
- Add unlimited amount of captions
- Set caption animation to chain mode
- Set caption animation to flatten mode
- Rollback caption animation when touch end/mouse up
- Move, fade, clip, zoom and rotation transitions are all supported for all browsers
- Composite move, fade, clip, zoom and rotation in one transition is allowed
- Javascript code deep compression by smart compression engine
- Arrow key navitation, navigate slider by click keyboard arrow left/right
- HTML caption with animation (390+ caption transitions)
flipLightBox : Responsive Lightbox jQuery Plugin
flipLightBox is a free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn’t require any additional stylesheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes. Another optional feature is a toggled slide text bar and navigation to accompany the lightbox images.
Reveal Content When Needed With an Expanding Footer in jQuery
In this tutorial we’re going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they wish to see more content. The end result is comparable to the accordion effect sometimes applied to lists and you can find it used on sites such as seesparkbox.com.
jQuery 3d Mega Menu for Bootstrap
Responsive 3D Mega Drop Down Menu is a flexible and high customizable to build your custom menus. It is very easy to build a horizontal or verticalmenu. In addition to you can set up the menu item drop down by clicking or hovering. You can assign a certain color or choose in 16 colorvariants. There are 2 colors for drop downs (dark and light) and many 2D, 3D effects.
Features:
- Responsive Design, support any PC or MAC systems, smartphones and tablets
- Compatible to Bootstrap
- Horizontal and vertical versions
- Dark & Light Themes + 16 Additional Colors
- Many of jQuery effects (flip, wiggle, bounce …)
- Click/hover behavior choice on the mega menu options page
- Fly-out Menu with Unlimited Sublevels
- Dropdown can be fix or full width
- Cross-Browser Support
- Form elements styling