Software by tag 'jQuery'

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin

May 16th, 2009 in Tutorial | 182 Comments

There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.

Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.

content-slider

So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.

  1. Create a style.css file, and insert the following code into the file: 
    #jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0;  width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

    2. (more…)

5 Extremely Simple Ways To Add Page Curl To Your Website

May 13th, 2009 in Flash, Javascript, Resources | 24 Comments

A lot of websites/blogs using page peel/page curl to add additional message such as advertisements at the corner. There are a lot of scripts that can achieve this function but unfortunately these scripts are not free.

Recently, 1 of my client requests me to implement page curl on his Wordpress theme. So, I search through the internet and found some free and extremely simple ways to implement it.

1) Simple Page Peel Effect with jQuery and CSS by Soh Tanaka

simple-page-peel-effect-with-jquery-css
In this example, Soh Tanaka show us how to achieve the page peel effect using purely jQuery and CSS.

2) The Sexy Curls jQuery Plugin

sexy-curls-jquery-plugin
This is another open source jQuery plugin to achieve page peel/page curl effect by Elliott Kember. To use this plugin, you are required to install both jQuery and jQuery UI.
(more…)

Page 2 of 212