Time to add some nice touches to your layouts - smooth scrolling as well as showing and hiding content elements. To keep you practising your coding skills in preparation for the production of your client project - create the following layout of this single sample portfolio page. The source files include the screenshots as well as the Illustrator file of the original cube graphic for the creation for the sprite rollover.
We will go through the JS part together once you have completed the page :)
smooth scrolling
script courtesy of Devin Sturgeon
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
slideToggle
this code will of course require a specific markup - as used in the given sample.
// custom function for sliding content show/hide
function showWork() {
$('#folio ul').hide();
$('#folio h4').addClass('hidden');
$('#folio h4').click(function() {
// trigger element showing on/off
$(this).next().slideToggle('normal');
// remove or add class to selected item (showing the content)
var $this = $(this);
if( $this.is('.selected') ) {
$this.removeClass('selected');
$this.addClass('hidden');
}
else {
$this.removeClass('hidden');
$this.addClass('selected');
}
return false;
//
});
}
// activate custom function for sliding content show/hide
$(document).ready(function() {
showWork();
});