Fullscreen Pageflip Layout. A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. View demo Download source We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to customize BookBlock and use some available options for navigating the content. The idea is to navigate the pages using the arrows or swiping the pages, and to slide out the menu when clicking on the menu button.
We’ll also use jScrollPane by Kevin Luck to add a custom scrollbar for the content when needed. Please note: CSS 3D transforms will only work in modern browsers that support those properties. The demo contains excerpts form the hilarious “The Funny Side of Physic” by A. The following libraries and jQuery plugins will be used: So, let’s get started! The Markup The CSS. Internet Policy Exception - Access Denied / Acces refusé. Nice & Clean Sliding Login Panel built with jQuery.
Remember my Sliding Login Panel with Mootools 1.2? Well, I thought it could have been improved both for design and functionnalities and so I did! But with jQuery this time. Preview/Download This script is distributed under the GNU General Public License version 3. The sliding panel works like a charm in IE6, IE7, Firefox, Safari, Opera and Chrome. Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g.
What’s new in this version? Panel has been redesigned to be “slicker”.Panel overlaps content instead of “pushing” it.Images are transparent… and work in IE6! Login button when panel in closed state: Close button when panel in opened state: Toggle effect (.toggle() in the javascript code below) behaves differently in jQuery than in Mootools and makes it dead simple to switch the login and close buttons on click. . … and the javascript to expand/collapse panel and switch the buttons on click: Known Bugs.
[Jquery] Effet de slide d'une page à une autre. jQuery Multi-Pageslide - Ian Lewis. Earlier this week I came across the jQuery Pageslide plugin via Ajaxian and was impressed with the design. I set about using it to display help messages to the user for a site I am working on. It worked well and all but I found that you can only have one pageslide per page. Say you want to have multiple links one one page that each invoke a page slide but with different settings. So I made some changes to the plugin to allow multiple pageslides per page. The demo includes a version of page slide that allows multiple pageslide links per page and allows them all to have their own individual settings.
I made it so that only one pageslide can be open at a time. Check out a demo here: Demo View the source: How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3. More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons. Horizontal sliding panels are great for many situations, but like everything else, they’re not always ideal. It depends on the project. The Plan So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens?
Here’s what I had in mind (click to enlarge or check below the image for working demos): First we’ll create the markup, then the CSS and then we’ll use jQuery to open and close our vertical sliding panel. Here are the files we will need for this tutorial: index.htmlstyle.cssjQuery libraryimages 1- Markup Let’s start with the head of our document. As you’ll see the CSS is pretty straight forward. 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.
jBar - Créer une barre call to action avec jQuery. jBar est une combinaison d'instructions jQuery permettant de créer une barre call to action pour afficher des infos importantes sans géner vos utilisateurs. C'est une tendance assez répandue sur le web, les barres call to action permettent d'ajouter une zone d'information cachée par défaut (ou pas) avec un ruban incitant l'utilisateur à cliquer dessus pour afficher le contenu de cette dernière. Cette pratique est intéressante pour ajouter des infos sans détourner de prime abord l'attention de vos visiteurs de votre contenu principal. On peut par exemple y afficher le lien vers le téléchargement de la ressource, ou encore les dernières actus sur la mise à jour de votre service ...
De base le plugin affiche le ruban en haut à droite (après le load de la page) et cache le contenu. Au clic sur le ruban, la bannière fait un slide down comme ceci: Vous pouvez replier à tout moment la barre en cliquant sur la flèche montante. Coté utilisation, c'est simple, et ça tient en 7 lignes de code jQuery: