The Diary of an Apprentice Web Developer: Month One

Hello to everyone reading this, my name is Ty Howden and I am an apprentice web developer at Eclipse Creative.

I joined Eclipse on 5th December and have to say I have found it very easy to settle in here as everyone has been very welcoming and to be honest it feels like I have been part of the team for ages… apart from my lack of skills on the foosball table!

This is my first blog post and is something I will be doing from time to time to give you an insight into the life of an apprentice web developer in an exciting creative design and marketing agency.

So far my time has been spent in four main areas:

• Developing WordPress Themes
• Learning jQuery
• Tea Making
• And Foosball practice

My first WordPress template took me about two days to finish… not perfectly but I had learned how to build a template from scratch. One of the reasons we use WordPress at Eclipse is because it allows our clients to easily update their sites themselves, saving them money in the long run.

My foosball skills have advanced since my first week, from getting beat constantly 10-0, to eventually winning my first game against company Director, Colin… followed by another 3 wins against, yes, you guessed it: Colin! All close games until I hammered him 10-4.

Anyway, back to more relevant subjects after building the WordPress templates I learned more on jQuery and ways to use bits of jQuery within a WordPress template, first of all building a jQuery slider.

Here’s how I did it, it’s basic, however you might find it useful:

Basic jQuery Slider

First of all the HTML:

<div id="slider">
<div class="current"><img src="images/hover-img.jpg" alt="" /></div>
<div><img src="images/slide-2.jpg" alt="" /></div>
<div><img src="images/slide-3.jpg" alt="" /></div>
</div>

Now the CSS:

#slider {
height: 400px;
width: 900px;
margin: 0 auto;
}
#slider div {
position: absolute;
z-index:0;
}
#slider div.current {
z-index:2;
}

#slider div.previous {
z-index:1;}

And the important part the jQuery. You can download the jQuery library from jquery.com.

$(function() {
setInterval("rotateImages()", 4000);

});

function rotateImages() {
var oCurPhoto = $("#slider div.current");
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
oNxtPhoto = $("#slider div:first");

oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
function() {
oCurPhoto.removeClass('previous');

});
}

In more detail what this code does.

$(function() {
setInterval("rotateImages()", 4000);

});

This sets the interval for the function “rotateImages” basically the the time the image is shown, before changing to the next image.

var oCurPhoto = $("#slider div.current");
var oNxtPhoto = oCurPhoto.next();

These lines of code set variables for the current photo and next photo, so var oCurPhoto = $(“#slider div.current”); finds the div with the class “current” inside the element with the ID “slider” and names it oCurPhoto. var oNxtPhoto = oCurPhoto.next(); finds the next div and names it oNxtPhoto.

if(oNxtPhoto.length == 0)
oNxtPhoto = $("#slider div:first");

This basically says if there is no div after the current div the next photo will be the first div.

oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
function() {
oCurPhoto.removeClass('previous');

});
}

This bit, from top to bottom, gets oCurPhoto and removes the class “current” and adds the class “previous” then it gets the oNxtPhoto and changes the CSS element “opacity” to 0.0 so it can’t be seen and animates it back to 1.0 over a time of 1 second to give it a fading effect after this is done it gets the oCurPhoto which is now the new photo’s div and removes the class “previous”.

One of the things I like the most about jQuery is the effects on hover such as a caption that slides up in front of an image. I have wanted to learn this since I saw it first. Here it is:

The HTML

<div class="sliding"><img src="images/hover-img.jpg" alt="" />
<div class="sliding-caption">Lorem ipsum dolar</div>
</div>

The CSS

.sliding{
position:relative;
width:304px;
height:180px;
overflow:hidden;
color:white;
border: 3px solid #bfbca6;
}

.sliding-caption{
position:absolute;
top:180px;
opacity:0.7;
background: #000;
padding: 10px;
width:290px;
height: 80px;
}

.clear {clear:both;}

The jQuery

$(document).ready(function() {

$('.sliding').hover(function(){

$(this).children('div').animate({ top : '100px' },{queue:false,duration:300});

}, function(){

$(this).children('div').animate({ top : '200px' },{queue:false,duration:300});

});

});

From top to bottom, what this code does.

$(document).ready(function() { anything inside here is executed when the document loads});

So first of all it gets the element with the class “sliding” then on hover it adds two functions. The first function is for when the user hovers over and the second function is for when they come off the element. So, in the first function (when the user hovers) it gets the child div of the element with the class “sliding” and animates its position to top:100px over 0.3 seconds. Queue false means that if it is hovered over again the animations won’t queue.

The second function basically does the same but it animates the position to top: 200px therefore positioning it out of view because of the overflow:hidden CSS.

The above examples are quite basic, however I am sure I will be writing more detailed and advanced examples soon.

My first month at Eclipse has been fun and I’ve learned a lot, I have no doubt that the next month will develop my skills even more.