...

View Full Version : How add "Feature Banner is Loading" placeholder??



jemacba
10-06-2011, 01:04 AM
Hi!

The banner on my page takes longer to load than the website... Right now nothing is at the top, then suddenly it will appear then after it loads.

I was wondering if it's possible to have a placeholder there that says "Feature Banner is Loading" so visitors know something will appear there before they click away to another page.

Could someone please tell me the code for something like this? Thanks!

The index.html is pasted below.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Suspense Author Jeremy Bates - White Lies</title>
<link href="css/reset.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
<div id="page">
<aside id="sidebar">
<nav><a class="logo" href="#top" id="nav-logo"><span>suspense author</span>jeremy bates</a>
<ul>
<li class="active" id="nav-1"><a href="#home">Home</a></li>
<li id="nav-2"><a href="#work">media</a></li>
<li id="nav-3"><a href="#about">About</a></li>
<li id="nav-4"><a href="#contact">Connect</a></li>
<li id="nav-4"><a href="http://jeremybatesbooks.blogspot.com/">Blog</a></li>
</ul>
<div class="bg_bottom"></div>
</nav>
</aside>
<div id="main-content">
<section id="top"></section><!-- do not remove ;)-->
<section id="home">
<div id="loader" class="loader"></div>
<div id="ps_container" class="ps_container"> <span class="ribbon"></span>
<div class="ps_image_wrapper">
<!-- First initial image -->
<img src="images/1.jpg" alt="" /> </div>
<!-- Navigation items -->
<div class="ps_next"></div>
<div class="ps_prev"></div>
<!-- Dot list with thumbnail preview -->
<ul class="ps_nav">
<li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
<li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
<li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
<li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
<li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
<li class="ps_preview">
<div class="ps_preview_wrapper">
<!-- Thumbnail comes here -->
</div>
<!-- Little triangle -->
<span></span> </li>
</ul>
</div>
<!--end ps_container-->
<header class="divider intro-text">
<h2>welcome</h2>
<!-- <div class="contact-me"><a class="contact button" href="#contact">Contact Me</a></div>-->
</header>
<div class="recent-work columns">
<h3>coming soon</h3>
<div class="two-column">
<figure><a href="images/pricing_table_3.jpg" rel="recent_work" class="zoom"><img src="images/cover.jpg" alt="Image"></a></figure>
<blockquote><center><form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" value="_s-xclick" name="cmd" /> <input type="hidden" value="SJ4GFJH5CCQ94" name="hosted_button_id" />ISBN: 978-1-60809-043-3<br /><br>Pre-Order Your Copy Now!
<p></p>
<table>
<tbody>
<tr>
<td>
<select name="os0">
<option value="Pre-order Hardcover" />
Pre-order Hardcover $19.50

</select>
</td>
</tr>
</tbody>
</table>
<input type="hidden" value="USD" name="currency_code" /> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" style="border-width: 0px; border-style: solid;" />
<p></p>
</form></center></blockquote>
</div>
<div class="two-column last">
<p>While driving to a charming village tucked away deep in the Cascade Mountains of eastern Washington, where she is to begin a new job teaching high school English, Katrina Burton picks up a young hitchhiker who turns out to be drunk and predatory. Fearful for her safety, she lies about her destination in order to get him out of the car. But when she later discovers that he is a teacher at the same school, she finds herself feeding that initial lie with more lies.</p>
<p> Then Katrina meets a mysterious man. Handsome, charismatic and strong, he is exactly what she needs to extricate her from the expanding network of lies, now spinning out of control. She falls fast and hard for him.</p>
<p> But her perfect solution soon becomes a nightmare that lands her in the middle of a grisly murder. And Katrina’s problems don’t stop there. She must decide whether to betray her new love or to cover up the murder and hope for the best…until she discovers that the choice may not be hers to make.</p>
</div>
</div>

<div class="one-column columns testimony">
<div class="clearfix says">
<figure class="marginRight"><img src="images/sophocles.jpg" alt="Image" /></figure>
<blockquote>
<p>A lie never grows old.</p>
<cite>&mdash; <a href="#">Sophocles</a></cite> </blockquote>
</div>
<div class="clearfix says">
<figure class="marginRight"><img src="images/aman.jpg" alt="Image" /></figure>
<blockquote>
<p>The least initial deviation from the truth is multiplied later a thousandfold.</p>
<cite>&mdash; <a href="#">Aristotle</a></cite> </blockquote>
</div>

</div>
</section> <!--end section-->

<section id="work" class="clearfix">
<header>
<h2>media room</h2>
</header>
<blockquote><center><object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/U-E4e0Q9NzU?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/U-E4e0Q9NzU?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object></center></blockquote>

</section> <!--end section-->
<section id="about" class="clearfix">
<header>
<h2>Who is this Guy?</h2>
</header>


<figure class="marginRight"><img src="images/me.jpg" alt="Image" /></figure>
<p>Jeremy Bates has spent the last ten years traveling the world, visiting more than thirty countries. He has lived in Canada, the United States, Australia, Japan, South Korea, and the Philippines.</p>
<p> Bates is a graduate of the University of Western Ontario with a degree in English literature and philosophy.</p>
<p> His frightening debut novel, <a href="http://oceanviewpub.com/white-lies"><em>White Lies</em></a>, is set in a small village in the Cascade Mountain range of eastern Washington. In the book, he succeeds in bringing world-class terror to this tranquil community.</p>

<div class="clearfix"></div>
<h3>bucket list</h3>
<ul class="skills">
<li>quit the day job<span class="bar_100"><span class="percent">100%</span></span></li>
<li>visit all the continents <span class="bar_90"><span class="percent">90%</span></span></li>
<li>learn more languages<span class="bar_50"><span class="percent">50%</span></span></li>
<li>go to space<span class="bar_70"><span class="percent">70%</span></span></li>
<li><span class="bar_60"><span class="percent">60%</span></span>riverboat down the amazon</li>
</ul>

</section> <!--end section-->
<section id="contact" class="clearfix">
<header>
<h2>Get in touch</h2>
</header>

<form action="#" method="post">
<p><input type="text" name="name" value="Your Name" id="name" onblur="if (this.value == ''){this.value = 'Your Name'; }" onfocus="if (this.value == 'Your Name') {this.value = '';}" /></p>
<p><input type="text" name="email" value="Your Email" id="email" onblur="if (this.value == ''){this.value = 'Your Email'; }" onfocus="if (this.value == 'Your Email') {this.value = '';}" /></p>
<p><input type="text" name="url" value="Your Site" id="url" onblur="if (this.value == ''){this.value = 'Your Site'; }" onfocus="if (this.value == 'Your Site') {this.value = '';}" /></p>
<p><textarea cols="20" rows="7" name="message" id="message" onblur="if (this.value == ''){this.value = 'Your Message'; }" onfocus="if (this.value == 'Your Message') {this.value = '';}" >Your Message</textarea></p>
<p><input type="submit" name="submit" value="Send Message" class="button" /></p>
</form>
<div class="social_wrapper">
<h3>Where to find me?</h3>
<ul class="social">
<li class="dribble"><a href="#">Dribble</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="lastfm"><a href="#">Last FM</a></li>
<li class="facebook"><a href="#">Facebook</a></li>
<li class="location"><a href="#">Location</a></li>
<li class="forrst"><a href="#">Forrst</a></li>
</ul>
</div>

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-2679675032294530846" style="width:276px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-2679675032294530846',
site: '03179725261382987771' },
skin);
</script>

<div class="copyright">
<p><small>Copyright 2011. Jeremy Bates. All rights reserved.<em></em></small></p>
</div><!--end copyright-->
</section> <!--end section-->
</div>
</div>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery_003.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

<!-- The JavaScript -->
<script type="text/javascript">
/*
the images preload plugin
*/
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options),
o = $.meta ? $.extend({}, opts, this.data()) : opts;
return this.each(function() {
var $e = $(this),
t = $e.attr('rel'),
i = $e.attr('href'),
l = 0;
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',i);
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',t);
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');

/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();


/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});

function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;

//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
}
else{
imageLeft = -75;
}
}
currentHovered = idx;

//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);

//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();

//prepend the new image
$ps_preview_wrapper.prepend($newImage);

var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;

//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}

function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}

function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();

//if we click the current one return
if(current == idx) return false;

//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');

//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);

//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();

//prepend the new image
$ps_image_wrapper.prepend($newImage);

//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();

//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);

e.preventDefault();
}

function nextImage() {
var cache='';
cache = cache==''?current+':'+total_images:cache;
if(current < total_images)
$links.eq(current+1).trigger('click');
if(cache == (current+':'+total_images))
$links.eq(0).trigger('click');

}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
setInterval( function(){
$('.ps_next').click();
},4000 );

});
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">

$(document).ready(function() {


$('.projects li figure a img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'opacity' : .5});
}, function() {
$(this).animate({'opacity' : 1});
});
$('.zoom img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'opacity' : .5});
}, function() {
$(this).animate({'opacity' : 1});
});

$("a[rel=work]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
$("a[rel=recent_work]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});


});

</script>
</body>
</html>

ironboy
10-06-2011, 06:48 AM
Try:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Suspense Author Jeremy Bates - White Lies</title>
<link href="css/reset.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
<div id="page">
<aside id="sidebar">
<nav><a class="logo" href="#top" id="nav-logo"><span>suspense author</span>jeremy bates</a>
<ul>
<li class="active" id="nav-1"><a href="#home">Home</a></li>
<li id="nav-2"><a href="#work">media</a></li>
<li id="nav-3"><a href="#about">About</a></li>
<li id="nav-4"><a href="#contact">Connect</a></li>
<li id="nav-4"><a href="http://jeremybatesbooks.blogspot.com/">Blog</a></li>
</ul>
<div class="bg_bottom"></div>
</nav>
</aside>
<div id="main-content">
<section id="top"></section><!-- do not remove -->
<section id="home">
<div id="loader" class="loader"><!-- fix inserted by ironboy-->
<div style="width:636px;height:345px;background:#222;margin-bottom:70px">
<div style="padding:170px 0 0 245px">Feature Banner is Loading...</div>
</div>
<!-- end fix-->
</div>
<div id="ps_container" class="ps_container"> <span class="ribbon"></span>
<div class="ps_image_wrapper">
<!-- First initial image -->
<img src="images/1.jpg" alt="" /> </div>
<!-- Navigation items -->
<div class="ps_next"></div>
<div class="ps_prev"></div>
<!-- Dot list with thumbnail preview -->
<ul class="ps_nav">
<li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
<li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
<li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
<li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
<li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
<li class="ps_preview">
<div class="ps_preview_wrapper">
<!-- Thumbnail comes here -->
</div>
<!-- Little triangle -->
<span></span> </li>
</ul>
</div>
<!--end ps_container-->
<header class="divider intro-text">
<h2>welcome</h2>
<!-- <div class="contact-me"><a class="contact button" href="#contact">Contact Me</a></div>-->
</header>
<div class="recent-work columns">
<h3>coming soon</h3>
<div class="two-column">
<figure><a href="images/pricing_table_3.jpg" rel="recent_work" class="zoom"><img src="images/cover.jpg" alt="Image"></a></figure>
<blockquote><center><form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" value="_s-xclick" name="cmd" /> <input type="hidden" value="SJ4GFJH5CCQ94" name="hosted_button_id" />ISBN: 978-1-60809-043-3<br /><br>Pre-Order Your Copy Now!
<p></p>
<table>
<tbody>
<tr>
<td>
<select name="os0">
<option value="Pre-order Hardcover" />
Pre-order Hardcover $19.50

</select>
</td>
</tr>
</tbody>
</table>
<input type="hidden" value="USD" name="currency_code" /> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" style="border-width: 0px; border-style: solid;" />
<p></p>
</form></center></blockquote>
</div>
<div class="two-column last">
<p>While driving to a charming village tucked away deep in the Cascade Mountains of eastern Washington, where she is to begin a new job teaching high school English, Katrina Burton picks up a young hitchhiker who turns out to be drunk and predatory. Fearful for her safety, she lies about her destination in order to get him out of the car. But when she later discovers that he is a teacher at the same school, she finds herself feeding that initial lie with more lies.</p>
<p> Then Katrina meets a mysterious man. Handsome, charismatic and strong, he is exactly what she needs to extricate her from the expanding network of lies, now spinning out of control. She falls fast and hard for him.</p>
<p> But her perfect solution soon becomes a nightmare that lands her in the middle of a grisly murder. And Katrina's problems don't stop there. She must decide whether to betray her new love or to cover up the murder and hope for the best…until she discovers that the choice may not be hers to make.</p>
</div>
</div>

<div class="one-column columns testimony">
<div class="clearfix says">
<figure class="marginRight"><img src="images/sophocles.jpg" alt="Image" /></figure>
<blockquote>
<p>A lie never grows old.</p>
<cite>&mdash; <a href="#">Sophocles</a></cite> </blockquote>
</div>
<div class="clearfix says">
<figure class="marginRight"><img src="images/aman.jpg" alt="Image" /></figure>
<blockquote>
<p>The least initial deviation from the truth is multiplied later a thousandfold.</p>
<cite>&mdash; <a href="#">Aristotle</a></cite> </blockquote>
</div>

</div>
</section> <!--end section-->

<section id="work" class="clearfix">
<header>
<h2>media room</h2>
</header>
<blockquote><center><object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/U-E4e0Q9NzU?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/U-E4e0Q9NzU?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object></center></blockquote>

</section> <!--end section-->
<section id="about" class="clearfix">
<header>
<h2>Who is this Guy?</h2>
</header>


<figure class="marginRight"><img src="images/me.jpg" alt="Image" /></figure>
<p>Jeremy Bates has spent the last ten years traveling the world, visiting more than thirty countries. He has lived in Canada, the United States, Australia, Japan, South Korea, and the Philippines.</p>
<p> Bates is a graduate of the University of Western Ontario with a degree in English literature and philosophy.</p>
<p> His frightening debut novel, <a href="http://oceanviewpub.com/white-lies"><em>White Lies</em></a>, is set in a small village in the Cascade Mountain range of eastern Washington. In the book, he succeeds in bringing world-class terror to this tranquil community.</p>

<div class="clearfix"></div>
<h3>bucket list</h3>
<ul class="skills">
<li>quit the day job<span class="bar_100"><span class="percent">100%</span></span></li>
<li>visit all the continents <span class="bar_90"><span class="percent">90%</span></span></li>
<li>learn more languages<span class="bar_50"><span class="percent">50%</span></span></li>
<li>go to space<span class="bar_70"><span class="percent">70%</span></span></li>
<li><span class="bar_60"><span class="percent">60%</span></span>riverboat down the amazon</li>
</ul>

</section> <!--end section-->
<section id="contact" class="clearfix">
<header>
<h2>Get in touch</h2>
</header>

<form action="#" method="post">
<p><input type="text" name="name" value="Your Name" id="name" onblur="if (this.value == ''){this.value = 'Your Name'; }" onfocus="if (this.value == 'Your Name') {this.value = '';}" /></p>
<p><input type="text" name="email" value="Your Email" id="email" onblur="if (this.value == ''){this.value = 'Your Email'; }" onfocus="if (this.value == 'Your Email') {this.value = '';}" /></p>
<p><input type="text" name="url" value="Your Site" id="url" onblur="if (this.value == ''){this.value = 'Your Site'; }" onfocus="if (this.value == 'Your Site') {this.value = '';}" /></p>
<p><textarea cols="20" rows="7" name="message" id="message" onblur="if (this.value == ''){this.value = 'Your Message'; }" onfocus="if (this.value == 'Your Message') {this.value = '';}" >Your Message</textarea></p>
<p><input type="submit" name="submit" value="Send Message" class="button" /></p>
</form>
<div class="social_wrapper">
<h3>Where to find me?</h3>
<ul class="social">
<li class="dribble"><a href="#">Dribble</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="lastfm"><a href="#">Last FM</a></li>
<li class="facebook"><a href="#">Facebook</a></li>
<li class="location"><a href="#">Location</a></li>
<li class="forrst"><a href="#">Forrst</a></li>
</ul>
</div>

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-2679675032294530846" style="width:276px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-2679675032294530846',
site: '03179725261382987771' },
skin);
</script>

<div class="copyright">
<p><small>Copyright 2011. Jeremy Bates. All rights reserved.<em></em></small></p>
</div><!--end copyright-->
</section> <!--end section-->
</div>
</div>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery_003.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

<!-- The JavaScript -->
<script type="text/javascript">
/*
the images preload plugin
*/
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options),
o = $.meta ? $.extend({}, opts, this.data()) : opts;
return this.each(function() {
var $e = $(this),
t = $e.attr('rel'),
i = $e.attr('href'),
l = 0;
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',i);
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',t);
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');

/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();


/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});

function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;

//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
}
else{
imageLeft = -75;
}
}
currentHovered = idx;

//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);

//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();

//prepend the new image
$ps_preview_wrapper.prepend($newImage);

var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;

//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}

function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}

function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();

//if we click the current one return
if(current == idx) return false;

//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');

//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);

//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();

//prepend the new image
$ps_image_wrapper.prepend($newImage);

//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();

//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);

e.preventDefault();
}

function nextImage() {
var cache='';
cache = cache==''?current+':'+total_images:cache;
if(current < total_images)
$links.eq(current+1).trigger('click');
if(cache == (current+':'+total_images))
$links.eq(0).trigger('click');

}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
setInterval( function(){
$('.ps_next').click();
},4000 );

});
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">

$(document).ready(function() {


$('.projects li figure a img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'opacity' : .5});
}, function() {
$(this).animate({'opacity' : 1});
});
$('.zoom img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'opacity' : .5});
}, function() {
$(this).animate({'opacity' : 1});
});

$("a[rel=work]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
$("a[rel=recent_work]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});


});

</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum