background preloader

Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery

Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery
Introduction Content Sliding website is one of the famous and creative design techniques for portfolio website. One thing, please make sure you put the menu on every single page to avoid confusion/dizziness. You should put the navigation menu in every single pageOr, fix the position of the menuLet your visitors know exactly what section they're reading, like highlight the selected menu item and have a clear title In this tutorial, we will learn to scroll your web content vertically, horizontally and plus diagonally! And, thanks to Ariel Flesler, his scrollTo plugin is simply amazing! Advertisement Depend on which direction you want to scroll your website, each of them have slightly different layout. I put <a name="name"></a>, just in case some of the browsers out there don't support javascript. Scroll Horizontally & Vertically Scroll Diagonally The CSS is basically almost the same with the tabbed based content slider tutorial. Scroll Horizontally & Diagonally Scroll Vertically 3. Vertical Update

Jade - Template Engine Introduction This tutorial is a work in progress. Once it's finished it will become a fully fledged getting started guide. Welcome to the Jade templating engine. Jade is designed primarily for server side templating in node.js, however it can be used in many other environments. This tutorial will take you through: The BasicsCreating Simple TagsPutting Text Inside your TagsAttributesIDs and ClassesJavaScriptOutputing TextSetting AttributesLoops and ConditionalsAdvanced TemplatingExtends & BlocksIncludesMixinsFilters The Basics Jade can be used just as a short hand for HTML. Creating Simple Tags Jade is whitespace sensitive, so there's no need to close your tags; Jade does that for you. Putting Text Inside your Tags By default, the content of a tag is parsed as more jade. Adding Attributes to your Tags To add attributes you put them in parentheses after the tag name, separated by an optional comma. IDs and Classes JavaScript Jade is much more than just a short hand for HTML. Outputing Text Includes

Related: