jquery - Programming Blog

Posts Tagged ‘jquery’

15 Mar 2010

A few weeks ago we published a showcase of one-page portfolios and pointed out some trends among them. Many of those sites are using jQuery to accomplish specific things. In this post we’ll feature some plugins and tutorials that are ideal for one-page portfolios. Of course, they can be used on other types of sites as well, but they are well-suited to match up with the trends among one-page portfolios.

Contact Forms:

All portfolio sites need to allow visitors to contact the designer, whether it is through an email address or a contact form. One-page sites face the challenge of including a usable contact form without using a separate page for it. These two resources can help for creating contact forms that will not take up too much space on the page.

Using Form Labels as Text Fields
CSS Globe provides a tutorial that is ideal for contact forms in limited spaces, which is often the case with one-page portfolios. The script can also be downloaded for use in your own work.

Creating a Slide-In jQuery Contact Form
Concealing a contact form can be very useful in situations where the page would otherwise be cluttered with a more traditional contact form. Design Shack shows us how to create a form that will slide in when clicked.

Navigation:

Although one-page portfolios keep everything on a single page, the size of that page usually requires some type of navigation that will make it easier for visitors to get from one section of the page to another.

Create a Hovering Scroll to Top Button with jQuery
Because one-page sites tend to be rather long, it’s helpful to have a link to allow visitors to easily return to the top of the page. Cherrysave has a tutorial that shows how to create a button that will hover as the user scrolls.

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
This tutorial shows how you can create a navigation menu that will be almost hidden before sliding out, which can save some space on crowded pages.

Scrolling:

JavaScript is often combined with the navigation on one-page sites to create a smooth scrolling effect. Here are a few resources.

Smooth Anchors jQuery Plugin

Smooth Page Scrolling
Chris Coyier shows an easy way to accomplish smooth scrolling.

Lightbox:

One-page portfolios often use thumbnails to showcase their work, with larger images being shown when clicked. LightBox scripts are frequently used to give these images a nice look and to make it more usable for visitors. Here are a few options.

jQuery lightBox Plugin

Fancybox

Shadowbox (JavaScript, but not jQuery)

Fancy Zoom

Sliders and Galleries:

jQuery sliders and galleries can also be used to showcase your work without taking up a lot of space. They can give the portfolio an attractive and impressive look, and there are a number of scripts and tutorials available.

Create a Slick and Accessible Slideshow Using jQuery
In this tutorial Jacob Gube shows how to create a slideshow that could be used for showcasing your work on a one-page portfolio.

Fancy Thumbnail Hover Effect with jQuery
Soh Tanaka has written a tutorial that demonstrates a thumbnail gallery that could also be used to showcase your work with limited space available.

Create a Beautiful jQuery Slider Tutorial
This tutorial demonstrates an attractive slider to showcase your work.

How to Create a Fancy Image Gallery with jQuery
Hear you will learn how to create a simple image gallery that displays full size images when the user hovers over a thumbnail.

Coda Slider Effect
This popular tutorial shows how to replicate the slider used by Coda.

Easy Slider
This is a plugin from CSS Globe that can be used for showcasing your work.

For more resources please see:

Go to Source

No Comments
Tags: beautiful slide, contact forms, jquery, labels, navigat, navigation menu, portfolios, separate page, showcase

MicroTut: The jQuery Hover Method

In: tutorial

27 Feb 2010

When building a navigation menu, or any other jQuery script, it is often necessary to have a robust method with which to define a mouse over and mouse out state. This is where the hover() method comes along. Here is how it is used:

$('.selectorClass').hover(
function(){
	$(this).stop().fadeTo('slow',0.4);
},
function(){
	$(this).stop().fadeTo('slow',1);
});

This assigns the first function to be executed when the mouse moves above the elements on the page, which share the selectorClass class name, and the second one is executed when the mouse moves away.

You can use “this” inside of the functions, to access the element that triggered the event.

Hover actually binds the first function to the mouseenter event, and the second one to mouseleave, so you could alternatively write this:

$('.selectorClass').mouseenter(function(){
	$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
	$(this).stop().fadeTo('slow',1);
});

As of version 1.4 of jQuery, it is now possible to pass a single function to hover, which will be called on both mouseenter and mouseleave. This way you can shorten your code even more by writing only one function:

$('.selectorClass').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

The example above increments this.check every time the function is run. Depending on whether the number is even or not, it chooses the opacity level to pass to fadeTo() (1 being completely visible).

This is also a great place to use the jQuery toggle functions like .slideToggle() and .toggleClass().

Go to Source

(2) Comments
Tags: element, elements, increments, jquery, navigation menu, robust method

Free XHTML & CSS3 One-Page Template

In: tutorial

21 Feb 2010

In response to this week’s tutorial, where we are creating a HTML5 & CSS3 template, here is the pure XHTML version. It is compatible with all browser versions, SEO friendly, and features a sleek jQuery scroll effect. Perfect for those cases when you need something up fast.

It is easily modifiable and the code is properly commented.