Raymond Selda » jQuery http://www.raymondselda.com Web Designer Turned Internet Marketer Wed, 08 Sep 2010 09:55:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Creative Use Of jQuery Cycle In Fancy Curved Layout http://www.raymondselda.com/creative-use-of-jquery-cycle-in-fancy-curved-layout/ http://www.raymondselda.com/creative-use-of-jquery-cycle-in-fancy-curved-layout/#comments Wed, 01 Jul 2009 16:00:45 +0000 Raymond Selda http://www.raymondselda.com/?p=1397 This article is an effort to answer a layout question posted in CSS-Tricks’ forum. I decided to answer this because it’s also one of the layouts that I have not been accustomed to converting.

Micha posted a link to the layout that needs to be sliced. I checked it out and I really liked it. I’m not sure if Micha wanted the image to be animated but I decided to do just that by using the jQuery Cycle plugin.

Take a look at the final result if you’re interested.

I didn’t convert the said layout, instead I created a basic web site design layout in Photoshop with curves similar to the layout.

Photoshop Layout Design with Fancy Curves

The main thing that you should plan out is where to slice your layout. This is one of the reasons why I think it’s important for a web designer to know how to write HTML and CSS. Knowing HTML and CSS basics will help you to design a layout that can be easily sliced and converted to HTML. You can design a layout in Photoshop with a lot of different methods but the difference will show up when it’s time to slice the design.

Let’s slice the main background graphic.

Main Background Graphic

Then let’s slice up the images we need to cycle. I saved them as a .GIF but you can save them in .PNG if you like because we are after the transparency here.

Transparent image to be sliced

Now let’s see how easy it is to convert this into HTML and CSS

HTML Basic Markup

We only have the main container which will hold up the images and the content.

<body>
<div id="container">
	<div id="cycle">
		<img src="image1.gif" width="610" height="522" alt="description of image here" />
		<img src="image2.gif" width="610" height="522" alt="description of image here" />
		<img src="image3.gif" width="610" height="522" alt="description of image here" />
	</div>
	<div id="content">
		<h1>Welcome!</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lectus mauris, pretium sed viverra eu, luctus quis risus. Cras convallis euismod eros, eu varius magna condimentum scelerisque. Vivamus eu tellus justo. Nam urna nisl, aliquet vitae sollicitudin ut, feugiat non est.</p>
		<p>Aliquam blandit tortor lectus. Cras at nisi consequat dolor suscipit venenatis eget ullamcorper eros. Vivamus nec purus nisi. Integer ut lorem risus, ac feugiat sem. Nam et massa enim, quis dictum purus. Proin tortor dui, laoreet at volutpat eu, pharetra elementum risus. </p>
	</div>
</div>
</body>

CSS Basic Styles

We apply a relative position to the container so we can absolutely position the images. Then we just float the content to the right and apply proper paddings on the side.

body {
	background:#eee2d2;
	font-size:12px;
	font-family:Arial;
}

p {
	line-height:18px;
}

#container {
	width:960px;
	height:697px;
	background:transparent url(containerbg.png) no-repeat;
	margin:0 auto;
	position:relative;
}

#cycle {
	width:610px;
	height:522px;
	float:left;
	position:absolute;
	top:99px;
}

#content {
	width:310px;
	float:right;
	padding:0 20px;
	position:relative;
	top:240px;
}

Calling and Initializing jQuery Cycle

Just put this inside the head section and you’ll be up and running.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery-cycle-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#cycle').cycle({
	    fx:    'fade',
	    speed:  3000
	 });
});
</script>

Conclusion

This is basically one quick way to deal with curves and I’m sure you can come up with a lot more creative and unique layouts. This article also shows how you can get creative with the jQuery Cycle plugin. I hope you get something out of this article and I would love to hear your thoughts. Thanks for checking this out.

]]> http://www.raymondselda.com/creative-use-of-jquery-cycle-in-fancy-curved-layout/feed/ 8 jQuery Looped Slider Tutorial http://www.raymondselda.com/jquery-looped-slider-tutorial/ http://www.raymondselda.com/jquery-looped-slider-tutorial/#comments Wed, 17 Jun 2009 16:00:52 +0000 Raymond Selda http://www.raymondselda.com/?p=1201 Today we’re going to use Nathan Searles’ jQuery loopedSlider, a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.

This is going to be a quick and easy tutorial. You can just copy and paste the code and have yourself a looping slider in minutes. You can view a working demo and feel free to download the complete source files.

Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>loopedSlider jQuery Plugin</title>

	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="loopedslider.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen">	

	</style>
</head>

<body>
<div id="loopedSlider">
	<div class="container">
		<div class="slides">
			<div><img src="image-01.jpg" width="600" height="393" alt="First Image" /></div>
			<div><img src="image-02.jpg" width="600" height="393" alt="Second Image" /></div>
			<div><img src="image-03.jpg" width="600" height="393" alt="Third Image" /></div>
			<div><img src="image-04.jpg" width="600" height="393" alt="Fourth Image" /></div>
		</div>
	</div>
	<a href="#" class="previous">previous</a>
	<a href="#" class="next">next</a>
	<ul class="pagination">
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	</ul>
</div>
</body>
</html>

Styles (CSS)

/*
 * Required
*/
.container { width:600px; height:393px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:600px; display:none; }
/*
 * Optional
*/
#loopedSlider,#newsSlider { margin:0 auto; width:500px; position:relative; clear:both; }
ul.pagination { list-style:none; padding:0; margin:0; }
ul.pagination li  { float:left; }
ul.pagination li a { padding:2px 4px; }
ul.pagination li.active a { background:blue; color:white; }

Power Up The Slider

This time we’re going to initialize the plugin from the bottom section of our document in order to load our content first before the calling our plugin.

<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider();
	});
</script>
</body>
</html>

Autostart the slider:

<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider({
			autoStart: 3000
		});
	});
</script>
</body>
</html>

Initialize multiple sliders:

<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider({
			autoStart: 3000
		});
		$('#anotherSlider').loopedSlider({
			autoHeight: 400
		});
	});
</script>
</body>
</html>

View Demo for both autostart and multiple sliders

Conclusion

I really like the simplicity of this plugin and I think I’m going to use this in my future projects. How about you? Have you ever used jQuery loopedSlider before? What other jQuery sliders would you recommend? Thanks for reading.

]]> http://www.raymondselda.com/jquery-looped-slider-tutorial/feed/ 45 Create A Tabbed Content Rotator Using jQuery http://www.raymondselda.com/create-a-tabbed-content-rotator-using-jquery/ http://www.raymondselda.com/create-a-tabbed-content-rotator-using-jquery/#comments Wed, 06 May 2009 17:04:08 +0000 Raymond Selda http://www.raymondselda.com/?p=958

Today we are going to create a tabbed content rotator (not sure what to call it really) using everyone’s favorite Javascript framework, jQuery and an interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.

jQuery UI 1.6 Book

jQuery UI 1.6 – The User Interface Library for jQuery

Javascript is not really my cup of tea that’s why I use jQuery, a framework for easily interacting with Javascript. jQuery UI is a library built on top of jQuery which allows you to create interactions, full-featured widgets and animation effects. jQuery UI 1.6: The User Interface Library for jQuery, written by Dan Wellman, is a book that will give you a good foundation in learning jQuery UI.

jQuery UI 1.6: The User Interface Library for jQuery has in-depth explanations on each component; building from its default basic state into a more advanced state. Additionally, the book also looks at how components can be used in real world scenarios. This book is aimed at user interface designers and developers who need to learn how to implement jQuery UI quickly.

I also have a tutorial on coding up a professional menu in case rotating content with tabs is not your thing. You can view a working demo of this tutorial in case you’re curious and feel free to download the source files for reference.

Let us begin.

Build A Solid Structure – XHTML

We have our usual wrapper that wraps the rotator div which contains the tabs structured as a list and the content fragments that we’re going to rotate. We also reference jQuery and jQuery UI in the head section. The key point here are the class names ui-tabs-selected and ui-tabs-hide for the list and content fragments. Those class names are part responsible for rotating our content.

Updated: We just called ui.core.js and ui.tabs.js instead of using a customized code. Please check out the updates. Hope most of you will be able to use this one. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Tabbed Content Rotator Using JQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.tabs.js" type="text/javascript"></script>

<body>
<div id="wrapper">
	<div id="rotator">
		<!-- Tabs -->
	    <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Maximize Profits</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Flexible Technology</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Practical Solutions</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Customer Support</span></a></li>
	    </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
	        <h2>Maximize Profits</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Flexible Technology</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Practical Solutions</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Customer Support</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>
	</div><!-- end rotator -->
</div><!-- end wrapper -->
</body>
</html>

Wrapper and Rotator Styles

After establishing our structure, we now design our rotator with some CSS. Assign a width and a couple of borders to our wrapper then center it. We then make some room for the tabs by adding a bottom padding to our rotator div. 

/* Rotator Styles */
#wrapper {
	width:960px;
	border-top:3px solid #92a5bc;
	border-bottom:1px solid #92a5bc;
	margin:0 auto;
}

#rotator {
	background:#FFF;
	color:#000;
	position:relative;
	padding-bottom:2.6em;
	margin:0;
	font-size:16px;
}

Tab Styles

Basically we position the tabs below the content fragments and we display them horizontally. You’re also going to notice that we stacked up a few selectors (the list and the elements inside it) because each of them will share the same properties and values and we always strive to write optimized CSS.

/* Tabs */
ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	line-height:1.3;
	text-decoration:none;
	font-size:100%;
	list-style:none;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
}

ul.ui-tabs-nav {
	position:absolute;
	bottom:0px;
	left:0;
	z-index:1;
	width:100%;
	background:#FFF url(images/uitabsbg.gif) repeat-x bottom right;
	border-top:1px solid #FFF;
}

Non-Selected Tab Styles

Assign our tabs some font and border styles. We also tile the same background image from the ul.ui-tabs-nav

/* Non-Selected Tabs */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {
	font-size:.8em;
	font-weight:normal;
	color:#999;
	background:#FFF url(images/uitabsbg.gif) repeat-x bottom left;
	border-left:1px solid #FFF;
	border-right:1px solid #c5ced9;
}

Hovered Tab Styles

We give our tabs some padding and give the hover state a background graphic.

/* Hovered Tab */
#rotator .ui-tabs-nav-item a:hover,
#rotator .ui-tabs-nav-item a:active {
	background:#FFF url(images/uiactivetabbg.gif) repeat-x bottom left;
	color:#333;
}

#rotator .ui-tabs-nav-item a span {
	float:left;
	padding:1em;
	cursor:pointer;
}

Active Tab Styles

We give all of the link states the same hover background graphic. Basically you can customize this graphic according to your design needs.

/* Active Tab */
#rotator .ui-tabs-selected a:link,
#rotator .ui-tabs-selected a:visited,
#rotator .ui-tabs-selected a:hover,
#rotator .ui-tabs-selected a:active {
	background:#fff url(images/uiactivetabbg.gif) repeat-x bottom left;
	color:#333;
}

Content Panel Styles

Now we’re going to style the content panel. This is the section that holds the content that is being rotated. The key point here is the padding which we’re going to use to enclose the text content and make some room for the background graphic associated with each rotated content. Then we use a class to hide the other panels.

/* Content Panels */
#rotator .ui-tabs-panel {
	font-family:Arial, Helvetica, sans-serif;
	clear:left;
	color:#000;
	padding:40px 540px 15px 15px;
	height:225px;
}

#rotator .ui-tabs-hide {
	display:none;
}

Content Styles

We’re just going to style our header, paragraph and links inside the content panel.

#rotator h2 {
	color:#E75D00;
	font-weight:normal;
	margin:0;
	font-size:1.8em;
	line-height:1.2em;
}

#rotator p {
	font-size:1.1em;
	margin:.5em 0;
	color:#333;
}

#rotator .btn_get_started {
	float:left;
	height:30px;
	width:99px;
	text-indent:-9999em;
	margin-right:7px;
	overflow:hidden;
	background:transparent url(images/getstarted.gif) no-repeat
}

#rotator .btn_learn_more {
	float:left;
	height:26px;
	font-size:.9em;
}

Background Images

Now we’re going to apply the background images. The first 2 panels have the images to the right part of the panel so we need to position the graphic to the right. Then we’re going to position the images to the left for the other 2 panels. Also take note that we need to set a new padding to make some room for the images that are positioned to the left. And that’s it for the CSS.

/* Background Images */
#rotator #fragment-1 {
	background:transparent url(images/coins.jpg) no-repeat top right;
}

#rotator #fragment-2 {
	background:transparent url(images/bearings.jpg) no-repeat top right;
}

#rotator #fragment-3 {
	background:transparent url(images/map.jpg) no-repeat top left;
	padding:40px 15px 15px 540px;
}

#rotator #fragment-4 {
	background:transparent url(images/support.jpg) no-repeat top left;
	padding:40px 15px 15px 540px;
}

Making the Contents Rotate

Now it’s time for some jQuery magic! If you’ll notice at the beginning when we first built our structure, we referenced two Javascript files in the head section. First reference is for jQuery and the second is for jQuery UI.

To make our content rotate we just need to invoke the function to rotate our tabs that is included in jQuery UI library. You just need to point the tabs function to the section where it holds the links, in this case we enter #rotator > ul inside our function.

<script type="text/javascript">
	$(document).ready(function(){
		$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
	});
</script>

Voila! We are Done!

Content rotators are one of the neat ways you can showcase your products and services without taking up too much screen real estate. After you’re finished, you can experiment and try placing the tabs above or lining them up vertically. Try looking up some websites that use this kind of interface for inspiration. Simple variations to the interface can be a great way to learn more about CSS.

I hope you will find this tutorial helpful. If you have any questions or comments please feel free to let me know. Until then, see you next week and have fun!

]]> http://www.raymondselda.com/create-a-tabbed-content-rotator-using-jquery/feed/ 129