background preloader

jQuery custom content scroller

jQuery custom content scroller
Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more. Current version 3.1.5 (Changelog)Upgrading from version 2 When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 2 is still maintained and updated here. How to use it Get started by downloading the archive which contains the plugin files (and a large amount of HTML demos and examples). Include jquery.mCustomScrollbar.css in the head tag your HTML document (more info) Initialization Initialize via javascript more info

jquery slimScroll Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus aliquet porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus elementum convallis. Nullam scelerisque facilisis pretium. Styling Scrollbars to Match Your UI Design This tip will guide you in improving the look and feel of scrollbars to match your UI design. We'll take a look at what WebKit browsers offer us in terms of CSS, plus we'll use a jQuery fallback to cater for other browsers. Quick Note About Browsers When we refer to Webkit-based browsers we're essentially talking about Apple Safari and Google Chrome. Together they currently hold more than 40% of the overall desktop browser market. Looking at these figures there should be a very bright future for scrollbar styling! Step 1: A Simple Page With Scrollbars Before we can begin with the actual topic of styling scrollbars with CSS, we need a functional demo; a page with scrollbars. Contents are larger than the visible window area (a scrollbar will appear on the right).A textarea contains enough text so that scrollbars appear.An iframe is used to display a different page.A div or any other block element has its overflow property set. For the sake of this demo we'll go with the last option.

Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast

nicescroll Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style. NOW support HORIZONTAL scrollbar too! Easy-to-use solution to have a custom scrollbars compatble with destkop, tablet and phone devices. It supports DIVs, IFrames, textarea, and document page (body) scrollbars. Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers) Compatible with mobile device: iPad/iPhone/iPod, Android 2.2+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango and Windows Phone 8. On modern browsers hardware accelerated scrolling has implemented. simple installation and activation, it works with NO modification of your code. Recall ALWAYS in (document) ready statement. It's a plugin for the jquery framework, you need to include jquery in your scripts. Put loading script tag after jquery script tag and loading the zoom image in the same folder of the script: 1. 2. 3. 4. 5. 6. 7.

Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation - Call Me Nick Get Source View Demo In this lab, I’m going to demonstrate how to create a fixed navigation, single page site with smooth scrolling, and highlighting the navigation link depending on which section is currently being viewed. This technique is great for single page sites that want to pack in lots of goodies on one page, but use a navigation with cool scrolling to section it off. Let’s get started. Getting Started With The Markup The markup is fairly easy. <div id="main"><div class="container clearfix"><div id="sidebar"><div id="nav-anchor"></div><nav><ul><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#services">Services</a></li><li><a href="#blog">Blog</a></li><li><a href="#contact">Contact</a></li></ul></nav></div><div id="content"><section id="home"> ... Now, Let’s Style With CSS Using standard CSS methods, we create a two column layout. Digging Into the JQuery and JavaScript First, let’s make our navigation box fixed after scrolling. Now for the fun part.

nanoScroller.js nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .nano-content. The other scrollbar div elements .pane > .nano-slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets. Downloads To start using, you need three basic things: 1. The following type of markup structure is needed to make the plugin work: <div id="about" class="nano"><div class="nano-content"> ... content here ... Copy the HTML markup. Link to the nanoscroller.css file inside your page's <head> section (...or copy the contents from it to your page's main stylesheet file). You should specify a width and a height to your container, and apply some custom styling for your scrollbar. 3. Running this script will apply the nanoScroller plugin to all DOM elements with a .nano className. Advanced methods

Demo of a simple CRUD RESTful PHP service used with AngularJS and MySQL | Angular Code REST represents Representational State Transfer. For web applications REST API is a good architectural choice for the communication between the app and the server. This makes sharing data between different devices and apps easy. Implementing REST is simpler compared to other methods like SOAP, CORBA, WSDL. In this tutorial we will create a RESTful web service using PHP. Also we will create a Customer Manager Application using AngularJS as front end which will consume this web service. Live Demo Download In this project we will have the most simple Create, Read, Update, Delete operations on customers table using REST API. To run the customer manager web application in your local machine, follow the following 3 simple steps Download the required filesImport angularcode_customer.sqlEnable rewrite_module in apache server At first lets start building the REST API using PHP, MySQL and then we will move on to the AngularJS part for the front end part of our Customer Manager Application. 1. [sql]

jScrollPane - cross browser styleable scrollbars with jQuery and CSS Tutoriel - Creer un site avec Bootstrap de Twitter Découvrez comment il est possible de réaliser une interface Web de manière simple et la rendre compatible avec les différents types de support mobiles en utilisant Bootstrap de Twitter, qui repose sur un système de grille. Son avantage est qu'il permet également un gain de temps énorme en proposant des fondations prédéfinies pour vos projets, une normalisation de votre code en respectant les standards et des éléments graphiques loin d'etre négligeables. En plus de tout ceci, et c'est là l'objet de ce tutoriel, Bootstrap permet de faire rapidement et efficacement des structures de sites en Responsive Web Design, en d'autres termes de prendre en compte et d'adapter le contenu de votre site Web aux différents types d'appareils, mobiles ou non. Afin de profiter pleinement de toutes le joies que peut proposer Bootstrap, il est préférable d'avoir déjà de bonnes connaissances en CSS et une approche plus ou moins familière de JQuery et LESS. Voir la réalisation effectuée avec ce tuto <! <! <!

Related: