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.
A Complete Guide to the Table Element The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article we're going to look at how to use them, when to use them, and everything else you need to know. A Very Basic Example Here's a very simple demo of tabular data: It is data that is useful across multiple axis. Head and Body One thing we didn't do in the very basic example above is semantically indicate that the first row was the header of the table. That HTML would be like this: When you use <thead>, there must be no <tr> that is a direct child of <table>. Foot Along with <thead> and <tbody> there is <tfoot> for wrapping table rows that indicate the footer of the table. What is unique about <tfoot> is the placement in the HTML. Despite coming first in the source order, <tfoot> does indeed render at the bottom of the table, making it a rather unusual HTML element. Basic Styling Then:
RoyalSlider - Touch-Enabled Image Gallery and Content Slider Plugin Features of jQuery version Modular Script architecture allows you to create your own version of the script using online tool and include in build only features that you need. Touch-friendly Touch navigation for slider and thumbnails, vertical or horizontal. Responsive down to mobile Size of slides and thumbnails can be dynamically changed (all sliders on this site are responsive). HTML content in slides and thumbs Any content can be inserted inside each slide and thumbnail. For developers: Cross-platform & cross-browser Slider works and has been tested on IE7+, iOS, Opera Mobile, Android 2.0+, Windows Phone 7+, BlackBerry OS and even black&white Kindle Keyboard browser :). View pricing or View demos
Sliding Boxes and Captions with JQuery One Mighty Roar Jarek Kubicki ArtistMore Work Kamil Smala ArtistMore Work Martin Stranka PhotographerMore Work Florian Nicolle Graphic DesignerMore Work The Nonsense Society Art, Music, WordWebsite Démo en ligne Retour au tutoriel pour savoir comment réaliser cela ! Avoiding common HTML5 mistakes Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them. Don’t use section as a wrapper for styling One of the most common problems I see in people’s markup is the arbitrary replacement of <div>s with HTML5 sectioning elements — specifically, replacing wrapper <div>s (used for styling) with <section>s. In XHTML or HTML4, I would see something like this: <! Now, I’m instead seeing this: <! Frankly, that’s just wrong: <section> is not a wrapper. With that in mind, here’s the correct way to mark up the above example using HTML5 and a couple of ARIA roles. <body> <header> <h1>My super duper page</h1> <! If you’re not quite sure which element to use, then I suggest you refer to our HTML5 sectioning content element flowchart to guide you along your way. Ah, <figure>. <! Summary
nemec/deck.lazyload.js Table with details in AngularJS Element Index <header> <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href=" Osborne</a></h4> <time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.