Work on a personal web project

Working on a personal project, whether it be a cool new web app idea, or just a site blogging about loving to knit , it’s a great way to escape the daily grind, while still updating your skills. Its something I tend to do very often on my movie review site.

Don’t be afraid to take a break

Taking a break from working can really help avoid burnout. Watching a movie when you would normally be working, taking a walk, anything to basically pull you away from working even if its just for a few minutes can make a world of difference. It may not be as easy if you work in an environment that won’t allow you to take these types of breaks, but finding little breaks between your day will help.

Take a vacation

The last idea would just be to take a one or two week vacation, and you don’t work on anything related to the web. When I’ve taken these types of breaks mid way through I find myself trying not to start doing little bits of work because I start to miss it.

VIEW FULL DEMO AND CODE

The HTML

The html strucutre is very simple. You have a main container div with an id of featuredProducts. You have a div with a class of wrapper followed by the ul with a class of productfeaturelist. The rest are just li items as many as you’d like.

   <div id="featuredProducts">
       <div class="wrapper">
          <ul class="productfeaturelist'">
		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 1</a>

    		<span class="price">Price</span>
   	 		<span class="priceInfo">$800.00</span>
    		</li>
    		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 2</a>
    		<span class="price">Price</span>

   	 	<span class="priceInfo">$800.00</span>
    		</li>
    		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 3</a>
    		<span class="price">Price</span>
   	 	<span class="priceInfo">$800.00</span>

    		</li>
    		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 4</a>
    		<span class="price">Price</span>
   	 	<span class="priceInfo">$800.00</span>
    		</li>

		</ul>
	</div>
</div>

The CSS

The css again is pretty simple, I’m only applying the css that matters the most to the elements. You can view the full css file in the demo.

The featureProducts div has a set width and a few more properties the most important is the position being set to relative. From there the wrapper div again has properties the most important of these being the overflow: hidden hiding the extra unordered lists outside of the wrapper area. I float the unordered list left and set a fixed width on it. This will make each element stack up beside each other. And last but not least don’t forget to float the list items and set a width on these to ensure the actual list items will work and look properly.

#featuredProducts {
	width: 689px;
	margin: 0 auto;
	height: 200px;
	position: relative;
}
#featuredProducts .wrapper {
	width: 649px;
	margin: 0 20px;
	overflow: hidden;
	height: 200px;
	position: relative;
}
#featuredProducts ul {
	width: 649px;
	float: left;
	height: 200px;
	margin: 0;
	padding: 0 0 0 0px;
	list-style: none;
}
#featuredProducts ul ul {
	margin: 0;
	padding: 0;
}
#featuredProducts ul li,
#featuredProducts ul li.productItem {
	float: left;
	width: 120px;
	padding: 16px 17px;
	height: 200px;
	position: relative;
}
#featuredProducts #archivePrev{
	width: 30px;
	height: 30px;
	background: url(images/prevbtn.gif) no-repeat top center;
	position: absolute;
	top: 50px;
	left: 0px;
	cursor: pointer;
	display: block;
	text-indent: -9999px;
}
#featuredProducts a#archiveNext {
	width: 22px;
	height: 22px;
	background: url(images/nextbtn.gif) no-repeat top right;
	position: absolute;
	top: 50px;
	right: 0px;
	cursor: pointer;
	display: block;
	text-indent: -9999px;
}

The Javsacript

The javascript is straightforward.

The max items variable can be set to anything you like but once you set it to a certain number each new ul will only have that many items in it at most and the slider will work according to the ul elements its sliding.

The jquery Each function is actually a for loop. You just need to pass in a variable in the anonymous function, which in this case is i. When the if statement passes as true, or when you get more then 4 items append a new ul element with the new children at the end of the last element of the current ul.

Once that is all done I create the forward and previous buttons on the fly and append that to the div with an id of featured products. Finally, after you are sure you have an unordered list and the next and previous buttons on the page then apply the jquery cycle plugin with the options I set.

That’s all there is for the javascript the rest is all in the css and html structure.

var maxItems = 4;
$(".wrapper li").each(function(i){
	if(i%maxItems == 0 && i>=maxItems){ $(".wrapper")
.append("<ul class='productfeaturelist'></ul>");}
	$(".wrapper .productfeaturelist").last().append(this);
});

/* ADD NEXT AND PREVIOUS BUTTON ONLY IF JAVASCRIPT ENABLED */
$("#featuredProducts").append('<a id="archiveNext"
class="fixPNG archiveNext" href="javascript:;">N</a>
<a id="archivePrev" class="fixPNG archivePrev" href="javascript:;">P</a>');

$('.wrapper').cycle({
	fx:     'scrollHorz',
	speed:  '600',
	timeout: 0,
	next:   '.archiveNext',
	prev:   '.archivePrev'
});

I planned a great design and last night started working on it. Today its live. I would love to hear what everyone thinks of the design.

Thanks guys and girls

I always seem to run into one issue… there isn’t an open source platform out there with this functionality. Sure, there is elgg and I’ve tried it a little but not wanting to have to hack it I decided on a solution that would take longer but in the end cheaper and more rewarding…. I am creating the cms/social network myself.

I have always done a little php so this wasn’t a huge step but learning to create a full web application is a little rough. I am doing it and going through every tutorial I can get my hands on, to get up to speed.  I can’t even begin to think of the possibilities of building my own social network app. How amazing will it be to just write up some custom code and get a new fuction out of your site?

I will blog about the social network from time to time. Right now i’m starting with a simple cms and hoping to expand on this.Its going to be great and even if i don’t ever get my dream site done I will at least have expanded a ton of knowledge in the process.