CSS Layouts: 40 Tutorials, Tips, Demos and Best Practices - Noupe Design Blog Jul 28 2008 The main idea behind CSS-based layouts is offering more flexibility and enhancing the visual experience of visitors. Some important tips and related key-factors can help to learn basics and keep essential techniques in mind. And this is what this article is all about. Finding the perfect Layout that have Total Flexibility, Equal Height Columns and just works fine. So we’ve decided to take a deep look at articles about CSS-based layouts and the result was a list of 40 tutorials, resources and best practices offering gorgeous and valid CSS-based Layouts. You might be interested to check other CSS related posts: CSS Layout Tutorials 1-Three column fixed layout structure using CSS- This post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects. Best Practices
jQuery Smooth Div Scroll by Thomas Kahn Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Smooth Touch Scroll has just been released! I have just released Smooth Touch Scroll, a slim touch version of Smooth Div Scroll. If Smooth Div Scroll is the Swiss Army Knife of smooth scrolling, Smooth Touch Scroll is the lightweight cousin, slimmed down and geared towards touch scrolling. Smooth Touch Scroll will still work on desktop computers that don't have touch (using drag scrolling) but it's primarily for touch devices. Check out Smooth Touch Scroll att smoothtouchsroll.com Consider using Smooth Touch Scroll if you don't need the full functionality of Smooth Div Scroll and if your content is primarily for touch devices. Main features Works on touch devices like iPhone, iPad and Android smartphones. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. Table of contents How does it work? Quick demo About me
jQuery.LocalScroll Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. What does this plugin do ? This plugin will animate a regular anchor navigation [1] [2]. Each time a link is clicked, the element you decide(can be the whole screen), will gradually scroll to the targeted element, instead of "jumping" as it'd normally do.jQuery.ScrollTo is used for the animation. How to implement it ? That's easy! <a href="#the_id">your_text</a> Let's call these "local links". So if (for example) you have a div with id "navigation" and the local links are inside. $('#navigation').localScroll(); If your links are all spread, you can use: $.localScroll(); That gets all the local links in the page. Settings targetWhat to scroll (selector, DOMElement, or jQuery Object). How do I use the settings ? Instead of the window, an element with id 'content' will be scrolled. Troubleshooting Strange things happen Links
Animated Scrolling for Same-Page Links Many months ago, I posted a note to the jQuery discussion list showing a script I wrote that uses the Interface plugin's ScrollTo() method to automatically scroll smoothly to any id or named anchor on the current page when clicking on a same-page link. The code was unwieldy and unneccessarily long, but it worked. A little game of one-upmanship followed among some of the gurus, ultimately reducing my 18 lines of code to 11. And that made me happy—until I tried the code in Internet Explorer 6. It didn't throw an error, but the smooth scrolling didn't seem to work in that one sad-sack browser. Since I was writing the code for my day job and I didn't have a lot of extra time to investigate the issue, I just left my initial code in there and shrugged it off. The other night, however, as I was digging around some old files, I came across the code from my discussion list friends again, so I decided to see if I could fix what ailed it in IE. JavaScript: This code does the following: Try it out
» Jquery Wizard Plugin » Worcester Web Site Development Blog After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here. The code: First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");} Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number. Step 1 Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam turpis duisi Step 4: XXXXXXXXEt nequ a quam turpis duisiStep 5: XXXXXXXX Et nequ a quam turpis duisi Step 2 Step 3 Step 4 Step 5 A Demo of the wizard
Open Source - Scroll Follow - The Kitchen @ Net Perspective Overview Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. Scroll Follow has been successfully tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. It has been successfully tested on FF3 and Safari 3 on MacOSX. Requirements jQuery (tested with 1.2.6) jQuery UI Core (tested with 1.5.2) Optional Installation Parameters • speed int - default: 500 The duration of the sliding animation (in milliseconds). • easing string - default: 'linear' If included, use any one of the easing options from the easing plugin. • offset int - default: 0 Number of pixels the Scroll Follow object should remain from top of viewport. • container string - default: object's immediate parent ID of the containing div. • killSwitch string - default: 'killSwitch' ID of the On/Off toggle element. • onText string - default: 'Turn Slide Off' killSwitch text to be displayed if sliding is enabled. • offText • relativeTo • delay History • October 29, 2008 - Version 0.4.0
Dynamic Drive DHTML Scripts- CMotion Image Gallery Note: Updated Aug 24th, 06' by jscheuer1 for various improvements. Description: CMotion Image Gallery is a versatile gallery script that uses the most intuitive input devise available, the user's mouse, to control it! The user can direct both the image scrolling direction and speed just by placing the mouse on either spectrums of the image gallery. Clicking on an image can then load a larger version of it, navigate to a page etc. Apart from the gallery's dimensions, you can also specify its top scrolling speed, with the script then creating a range from 0-top speed and distributing it evenly across the gallery. Improvements by Jscheuer1 (Aug 24th, 06') to this script are: Allows for easy optional centering. Demo. Directions Step 1: Add the following code to the <head> section of your page: This script references an external .js and .css file. 1) motiongallery.js 2) gallerystyle.css Step 2: Add the below HTML code to the <BODY> section of your page. Have fun! Recent Change log
Arrows-and-boxes - headjump.de flash game development and game design About Easy to use javascript plugin to draw nice boxes and arrows to your website from simple markup like (User) > (Admin) ... which will be transformed to: Setup (it's easy!) Put javascript links inside HTML head to jquery.js, jquery.wz_jsgraphics.js, arrowsandboxes.js You can download the source files or simply put this in:<link href=" rel="stylesheet" type="text/css" /><script type="text/javascript" src=" src=" type="text/javascript"></script><script src=" type="text/javascript"></script> Place a <pre> block around your arrows-and-boxes markup and set the class to arrows-and-boxes: <pre class="arrows-and-boxes"> (User) > (Admin) </pre> Arrows-and-boxes automatically detects the code and builds nice boxes and arrows from it. Basic example (Dennis) >likes (Food)
Animated Scrolling with jQuery 1.2 » Learning jQuery - Tips, Tec A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I've successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone. Here is what the code looks like with the minor change: JavaScript: $(document).ready(function(){ $('a[href*=#]').click(function(){ if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name='+this.hash.slice(1)+']'); if ($target.length) {var targetOffset = $target.offset().top; $('html,body') return false; } } });}); Not a bad little adjustment when you consider that we're able to get rid of a plugin dependency. var targetOffset = $target.offset().top; Ease on down the page Update
The 20 Most Practical and Creative Uses of jQuery There have been plenty of posts on the number of awesome jQuery plugins and where to find them. However, sometimes it is best not to rely on third party plugins and resources. Do it yourself the old fashioned way! Today, we will have a look at 20+ creative uses of jQuery in modern day websites and applications; sure to inspire you for your next project. One of our sporadic writers, James Padolsey, has a nice feature on his website. I've saved my absolute favorite site for last. Keep in mind that jQuery is simply a tool and is only limited by your creativity and skill level.