jQuery Notes Plugin

jQuery Notes Plugin: "
jQuery-Notes is a simple and easy to use jQuery-Plugin that allows you to add notes to any image (even foreign ones) on your website or blog.

Demostration

Demo Page

Documentation

Documentation Page

Download

Download Source Code
"

read more

Posted in: jQuery,jQuery Plugin,Tagging

Thumbnails Navigation Gallery with jQuery

Thumbnails Navigation Gallery with jQuery: "

View demoDownload source

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

The beautiful photos are from Mark Sebastian’s photostream on Flickr. You can find all the images used in the demo in the set The “IT” Factor. Please review the Creative Commons license that is included in the demo.

So, let’s get started!

The Markup

Our HTML is mainly going to consist of a wrapper and the menu list. We will have some other elements, like the full image, the loading div and the halftone overlay. First, let’s create the wrapper:

<div id="st_main" class="st_main">

</div>

Inside of our wrapper we will add the following:

<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/>

<div class="st_overlay"></div>

<h1>Mark Sebastian</h1>

<div id="st_loading" class="st_loading">
<span>Loading...</span>
</div>

The first element is our full preview image. The overlay is going to be a fixed div which will stretch over the whole screen repeating a halftone pattern to create a fancy overlay effect on the image. We also add a title and a loading div.

We then add an unordered list where each li element is going to contain a span for its title and the thumbnails wrapper. The last li element is going to contain some wrapper for text, that’s why we will not give it the class “album”. Later, in the jQuery function we will need to distinguish that.

<ul id="st_nav" class="st_navigation">
<li class="album">
<span class="st_link">
Newest Collection
<span class="st_arrow_down"></span>
</span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
...
</div>
</div>
</li>
...
<li>
<span class="st_link">
About
<span class="st_arrow_down"></span>
</span>
<div class="st_about st_thumbs_wrapper">
<div class="st_subcontent">
<p>
Some description
</p>
</div>
</div>
</li>
</ul>

The thumbnail images get the alt value of the path to the full size image. That might not be the proper use of the alt attribute, but it’s just so convenient for our functionality that we will use it this way.

Let’s take a look at the style.

The CSS

First, let’s reset the paddings and margins for all elements and define the general styles:

*{
margin:0;
padding:0;
}
body{
font-family:'Myriad Pro','Trebuchet MS', Helvetica, sans-serif;
font-size:16px;
color:#fff;
background-color:#000;
overflow:hidden;
}
h1{
margin:20px;
font-size:40px;
}

Making the body overflow hidden we avoid any scroll bar appearing, but you can adapt that to your needs. I.e. if it is important that the full sized image is completely viewable by the user, you might want to remove the overflow:hidden property.

Next, we will define the style for the full size image, the overlay and the loading div:

.st_main img.st_preview{
position:absolute;
left:0px;
top:0px;
width:100%;
}
.st_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/pattern.png) repeat-x bottom left;
opacity:0.3;
}
.st_loading{
position:fixed;
top:10px;
right:0px;
background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
padding:15px 40px 15px 60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
opacity:0.6;
}

By setting the image width to be always 100%, we make sure that it occupies all the horizontal space on the page. For very large screens the image might look pixelated which can, of course, be avoided by using gigantic images. In our demo we use a maximum width of 1600 pixel to make the loading time bearable. The halftone pattern on top of the image helps a little to disguise a pixelated effect.

Please note that whenever opacity is used, the IE filter property needs to be used if you want to achieve semi-transparent effects in IE. The overlay looks like crap if you use the filter property, though. Check out the ZIP file, I added the IE DXImageTransform filter to the respective styles.

The navigation will be positioned absolutely:

ul.st_navigation{
position:absolute;
width:100%;
top:140px;
left:-300px;
list-style:none;
}

The initial left value is set to -300 pixel because we want to slide it in only after our full image is loaded. If you use longer titles in the list items, you might need to adapt this value.

Our list elements are going to have the following style:

ul.st_navigation li {
float:left;
clear:both;
margin-bottom:8px;
position:relative;
width:100%;
}

The span for the title will be styled as follows:

ul.st_navigation li span.st_link{
background-color:#000;
float:left;
position:relative;
line-height:50px;
padding:0px 20px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}

Next, we define the style for the spans with the up/down arrow for opening and closing the thumbnail container:

ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
position:absolute;
margin-left:15px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
background:#000 url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
background:#000 url(../images/icons/up.png) no-repeat center center;
}

The wrapper for the thumbnail container will be positioned absolutely and we want to hide any vertical overflow:

.st_wrapper{
display:none;
position: absolute;
width:100%;
height:126px;
overflow-y:hidden;
top:50px;
left:0px;
}

Although the thumbs are only 120 pixels high, we want to leave some space so that the box shadow of the images inside will not be cut away.

The thumbnails container will simply be styled as follows:

.st_thumbs{
height:126px;
margin: 0;
}

The thumbnails will have a neat box shadow and some spacing:

.st_thumbs img{
float:left;
margin:3px 3px 0px 0px;
cursor:pointer;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
opacity:0.7;
}

The st_about class is the wrapper class for the text container:

.st_about{
display:none;
position:absolute;
top:50px;
left:0px;
opacity:0.6;
}

And, finally the text container itself:

.st_subcontent{
background:#000;
padding:30px;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}

And that’s all the style! Let’s make some magic!

The JavaScript

In our jQuery function we will first define some variables:

//the loading image
var $loader  = $('#st_loading');
//the ul element
var $list  = $('#st_nav');
//the current image being shown
var $currImage  = $('#st_main').children('img:first');

The first thing that we want to do is to load the current full size image. After it’s loaded, we want the navigation to appear:

$('<img>').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));

The buildThumbs() function calculates the widths of all the thumbnail containers. We need that value for the automatic scrolling function later on:

buildThumbs();

function buildThumbs(){
$list.children('li.album').each(function(){
var $elem    = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs   = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW    = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}

Next, we define the behavior of clicking on the arrows. If it’s down, we will expand the thumbnail container and hide any other. If it’s up, we will make the current container hide again.

$list.find('.st_arrow_down').live('click',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});

Before we define the hideThumbs() function, we specify what happens when clicking on a thumb. The full size image will show and while it’s loading we will make the loading div appear. Then we animate the opacity and fade the image in:

$list.find('.st_thumbs img').bind('click',function(){
var $this = $(this);
$loader.show();
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});

The function to hide the thumbnails looks as follows:

function hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}

We animate the height of the li and make the thumbnails container disappear like that. We also need to set the class for the arrow span correctly.

And finally, we will define the makeScrollable() function that automatically scrolls the thumbnails div horizontally on mouse move:

function makeScrollable($outer, $inner){
var extra    = 800;
//Get menu width
var divWidth = $outer.width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
//Find last image in container
var lastElem = $inner.find('img:last');
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
$outer.scrollLeft(left);
});
}

For cufonizing the titles and adding some decent shadow, we will include the following into the head of our html document:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span,p,h1',{
textShadow: '0px 0px 1px #ffffff'
});
</script>

And that’s it! We hope you enjoyed the tutorial and find it useful!

View demoDownload source
"

read more

Posted in: jQuery,jQuery Plugin,Photo

Adds Notes Below Input Fields Based on Regex Patterns

Adds Notes Below Input Fields Based on Regex Patterns: "
InputNotes jQuery Plugin automatically adds notes below textareas and input fields based on regex patterns. The patterns are normal JavaScript regex patterns and you are free to create and style any type of notes and note texts as you want. Note texts can contain HTML. It has been tested on IE 6 and 7, Firefox 3.5, Safari 4, Google Chrome, Opera 9.6.

Requirements: jQuery Framework
Demo: http://fredibach.ch/jquery-plugins/inputnotes.php
License: License Free

"

read more

Posted in: Form,jQuery,jQuery Plugin

200+ Exclusive Free Icons: “Reflection”

200+ Exclusive Free Icons: “Reflection”: "
Icons are a great and quick way to enhance your projects. They add a certain personality to your designs and make things pop when they need to.

Today we release a new set of icons which we call “Reflection”. It’s simple yet elegant and stylish at the same time. You’ll find these icons great to use at small sizes, such as for website navigation, menus and more. Both vector and raster versions are included.

The set contains 208 icons and is available free of charge for personal and commercial projects, with attribution required.

Redistribution isn’t allowed, so If you’d like to share these icons with your friends, please direct them to this page so that they can download their copy from here.

There is a full preview right after the jump… We hope you enjoy the new icons!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

"

read more

Posted in: Inspiration,Resources

30+ Places to Submit Your Website Designs

30+ Places to Submit Your Website Designs: "
Sometimes you finish a web design project and you’re really proud of the results. Maybe it’s a personal project, or the client gave you complete creative control.

Whatever the case, you know it’s some of the best work you’ve ever done, and you want the world to see it.

Besides adding it to your portfolio or sending out a Tweet about it, there are dozens of web design galleries out there for showing off your work.

All of the ones featured in this post are free to submit to, and all are picky about what sites they accept, so you can rest assured that you’ll only be shown alongside other high-quality designs.

If you have other favorite design galleries, please share them in the comments area below…

General Design Galleries

The design galleries included here accept all sorts of websites. Some might only accept CSS sites, but others also accept Flash-based sites. Most require valid or close-to-valid code, as well as outstanding visual appeal. While there are dozens of gallery sites out there, the ones featured below are some of the best. Feel free to share your favorites (whether featured here or not) in the comments.

BestWebGallery

BestWebGallery is run by Nick La, the guy behind N.Design Studio and Web Designer Wall. Sites must be technically competent, visually pleasing and creative in order to be considered for inclusion. There are a variety categories, including a “best of”, blog, CSS, Flash, Illustration and Portfolio. Submit here.

CSS Elite

CSSelite.com has fairly basic standards for inclusion: your site has to have valid XHTML and CSS and offer a “pleasant experience”, and it can’t be spam. You also have to submit the home page, not internal pages. Sites are categorized based on both the type of site (corporate, colleges & universities, etc.) and certain design characteristics (clean, dark, colorful, etc.). Submit here.

Unmatchedstyle

Unmatchedstyle has over 200 pages of great website designs. Visitors can rate sites on a scale of 1 to 10. There’s a custom Google search on the site, but otherwise there’s no real way to browse except chronologically. Submit here.

Site Inspire

siteInspire has over 1700 websites in their gallery, all browsable by theme, type, or style. They also have a “Selected” section, which are the editorial picks for the best design examples out there. Submit here.

Nice Stylesheet

Nice Stylesheet is a gallery of CSS-based designs. There are over 800 designs included, browsable by categories like fixed layout, liquid layout, single columns, dark, minimalistic, and blogs. Sites need to be free of tables (except for tabular data), should make minimal use of Flash (preferably none), cannot be adult themed, and have to be a custom design. Submit here.

Nicely Done CSS

Nicely Done CSS is a gallery of CSS-based designs with over 800 designs currently included. Designs are tagged by the type of site, design style, color, and other descriptive terms. Submit on their homepage.

Beautiful 2.0

Beautiful 2.0 is a Flash and CSS gallery that focuses on the best websites out there as inspiration to designers, art lovers and clients. Websites need to be as well-designed and artistic as possible for inclusion. They should also have amazing technical achievement and be very original. Submit here.

Gallery Buzz

Gallery Buzz stands out from many other gallery sites by including screenshots of the entire web page being featured. They’ve incorporated these screenshots in an irregular grid that’s still visually appealing. You can browse their sites by tag, color, or favicon. Submit here.

Styleboost

Styleboost is a long-running (since 2001) web design gallery currently showcasing around 1250 sites. You can browse sites by most recent, most liked, or last commented, as well as by tag or color. Submitting sites is done through Twitter with the hashtag #styleboost.

Web Creme

Web Creme is a gallery of excellent website designs, sorted chronologically but also browsable by color. Currently, more than 3700 sites are included in the archives. Submit here.

The Drawar Design Gallery

The Drawar Design Gallery showcases some of the best and most creative website designs out there. They have more than 1400 sites featured. They also have a section where you can get feedback on your work. Submit here.

Creattica

Creattica has galleries for all sorts of design projects, including CSS/HTML websites and Flash websites. You’ll need to sign up for an account in order to submit items. Submissions generally take a few days to be reviewed. Submit here once you have an account.

Design|Snips

Design|Snips categorizes and tags submitted sites based on elements of their design: typography, backgrounds, hover effects, textures, etc. There are currently a few hundred designs included. When submitting a design, you have to describe the snippet you like, rather than the entire website. Submit here.

CSS Fresh Blend

CSS Fresh Blend showcases the best CSS designs out there. Sites can only be browsed chronologically. Submit here.

Styleprone

Styleprone is a gallery of HTML/CSS and Flash websites that only accepts the best designs available. Sites are browsable by tag or date, and there’s also a rating system. Submit here.

InspireMix

InspireMix showcases a variety of design types, including CSS/HTML and Flash website designs, WordPress themes, and portfolios. There are also tools to share designs you like on Facebook, Twitter, or Delicious, as well as a rating system. Submit here.

Divine CSS

Despite its name, Divine CSS also includes Flash websites. Sites are categorized by type (blog, CSS, Flash, ecommerce, corporate, etc.). They won’t feature sites with adult or offensive content or incomplete sites. Submit here.

The Web Based

The Web Based separates their designs by category, including blog designs, entertainment, personal, life style, and corporate, among others. Their requirements for being included are pretty basic: minimal validation errors and a great design. Submit here.

Niche Galleries

In addition to general web design galleries, there are also a number of galleries that feature specific types of websites. There are galleries included below that focus on blogs, ecommerce sites, minimalist sites, and one page sites, among others. If there are additional galleries you think should be included, please share them in the comments!

Minimal Sites

Minimal Sites is a gallery specifically for clean, minimalist designs. They have both editor’s pick sites and publicly submitted sites. They also have forums and other resources for designers (which are invite-only). Submit here.

We Love WP

We Love WP is a gallery of only WordPress sites. You can browse by category (including illustration, organization, technology, education, entertainment, and more). The requirements for inclusion are that the design is built on WordPress and is either entirely original or an entirely original modification of an existing free or premium theme. Submit here.

CSS Nature

CSS Nature contains only nature-themed websites. They accept high quality designs with valid CSS/XHTML. Really exceptional designs are added to their featured designs section. Submit here.

Blog Design Heroes

Blog Design Heroes is a blog design gallery with over 400 designs included. Most of the designs featured are for WordPress blogs, but there are also examples from Expression Engine, Drupal, Textpattern, Tumblr, Blogger, Movable Type, Joomla and more. Submit here.

WP Inspiration

WP Inspiration is a gallery of more than 200 WordPress-powered sites. Sites can be browsed by color or category. Sites have to be visually appealing to be included. Free themes cannot be submitted. Submit here.

CartFrenzy

CartFrenzy is a showcase of ecommerce site designs. Over 700 sites are currently featured. Submit here

Folio Focus

Folio Focus is a gallery of portfolio designs with around 800 designs currently included. Site are categorized by style (hand drawn, colorful, clean, dark, etc.), design element (lighting effects, wood, textured, etc.) and other things (PSD, HTML Templates, etc.). Submit here.

WPView

WPView.com is a smaller gallery of innovative and imaginative WordPress-powered websites. They don’t include blogs in the gallery, which is a departure from most other WP galleries. Sites submitted should bring some novel or different functionality to WP, and should be more than a blog or basic CMS. Submit here.

Minimal Exhibit

Minimal Exhibit is a minimalist design gallery with more than 500 sites currently included. You can browse sites by categories, which are mostly broken down by either the type of site (blog, ecommerce, gallery, etc.) or the industry it serves (music, non-profit, photography, etc.). Submit here.

Siiimple

Siiimple is a gallery of clean, minimalist and simple website designs. You can browse sites by topic, as well as view those that are most favorited. Submit through the link on their home page.

The Horizontal Way

The Horizontal Way is a showcase of sites that use horizontal rather than vertical scrolling. They include a few dozen sites. Submit here.

One Page Love

One Page Love is a gallery of single-page websites. You can search or browse by category or tag. They don’t allow full flash websites, sites with links to any other page on the same domain, or (obviously) sites with more than one page. They do allow sites with pop-up or modal windows, as well as sites with multiple language versions. Submit here.










Written exclusively for WDD by Cameron Chapman.

Don’t forget to post your favorite galleries, whether featured above or not, in the comments section below…



If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

"

read more

Posted in: Inspiration,Web Design

Design Your Dream House with Floorplanner

Design Your Dream House with Floorplanner: "
Floor plans are an important medium to visualize the house in scale for aspiring home owners. In the competitive real estate market, listings with floor plans draw significantly more interest. Like all design verticals, professional floor plans will cost you dearly.

Floorplanner gives us the tools to make our properties stand above the rest of the crowd. With Floorplanner, in addition to creating plans, we can export great images for printing brochures or code to embed the plan in our website or blog.

Overview

The idea behind Floorplanner is to be the easiest way to create and share building floor plans as awesome looking and interactive as possible. With its simple drag and drop tools Floorplanner makes it easy for just about anyone to come up with floor plans that are accurate and on scale in all places.

Overview

Floorplanner has my kinda sign up page – just three fields and no email activations. After signing we have the option to choose the premium plan of our choice.

Sign Up

Skipping this page will still ensure you access to the free personal account. Please note that you can create only one floor plan with this free account.

Pricing

While the pricing page at Floorplanner offers just subscriptions for both personal and professional use, they don’t mention the prices of the plans.

Pricing

The personal plan is free and you will have to pay if you want extra features like high quality image import, generate leads etc.

Now, once you sign up, you are shown a page to upgrade the account. Only here we get to see the pricing details.

Subscription Plans

If you are an individual home-owner you can pay an one time fee of $29 to get ads removed and to make upto 5 complete plans. Large real estate companies can opt for a monthly subscription of $29.

Dashboard

The dashboard of Floorplanner is minimal with a squeaky clean layout. There is not even an unwanted pixel in the screen. Good job UI design team.

Dashboard

On top of listing all the floor plan projects currently associated with the account, the dashboard also shows a feed from the official blog which intimates users about the new additions to the app like orange trees, daisies, beds, windows etc.in the respective categories.

Creating a floor plan

Now it’s time to swap the writer’s hat with a yellow hardhat. I slept through most of the civil engineering & engineering design classes in my UG and I know jack about building design to begin with. With that disclaimer, let us go design the ultimate geek bachelor pad ever designed.

So what is the most important part of a house that a geek cannot live without? Anyone, anyone?

A basement! I could not find a specific layer for basement and hence going to use the entire ground floor as one.

New floorplan

All you have to do is drag the mouse around the canvas to draw a structural layout or to add interior design elements.

Adding a Window

Let us just add a tiny window to the basement by choosing Doors & Windows from the drop down. Select the type of window you like and drag & drop it to wherever you want in the floor plan.

Adding a wall & comments

Walls and surfaces can also be created in a few mouse clicks. You can also add comments to any section of the floor plan for the reference of your collaborators.

Editing dimensions

Erasing & correcting on paper no more! I do remember the painful process of correcting my mangled engineering design sheets. Any layout dimension can be altered by clicking on it and entering the new measurements.

New Floors can be created in tabs by using the Settings icon on the top left corner.

Adding Interior Decorations

Floorplanner has a great collection of interior design elements in various categories that are common when building something. For example, if you select Bedroom from the drop down, we have a wide range of beds, pillows, night stands, dressers, and for those who have not come out yet, closets to add to the plan.

Fully furnished design

It is just amazing to see how detailed of a floor plan we can create with this amazing web app. A fabulous three dimensional view of the plan can be generated instantaneously by toggling to the 3D option.

3D View

Sharing the Plan

Sharing the Plan

From the dashboard, you can get the embed codes to share the plan on your website or you can email a copy of it directly to collaborators. The plan can also be allowed to be viewed by everyone publicly or just in a gallery. With a free plan, you cannot keep the plan completely private.

Final Thoughts

I found Floorplanner to be so easy to work with in all levels right from creating an account to creating floor plans. Despite the complex looking demo examples, I was able to create my very first floor plan in no time.

During evaluation, I did not notice any lags and the app did not hog system resources even with multiple layers in the design. Floorplanner has all the qualities to be a go to app for professional architects and aspiring house owners alike.
"

read more

Posted in: FloorPlanner,Web Application