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 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.
- 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 and
cto 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.
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 is a HTML5 Rich-Text-Editor toolbar. Popline is inspired from popclip. Compared to traditional RTE, popline will float around the selected text.
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.
- 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
- 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
- Arrow key navitation, navigate slider by click keyboard arrow left/right
- HTML caption with animation (390+ caption transitions)
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.
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.