...

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



jemacba
10-06-2011, 01:05 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>

DanInMa
10-06-2011, 01:33 AM
remove this:


<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>

add this:



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



You are making the most common of jQuery beginner mistakes. You are loading the framework 3 times, only one is required.

also using the link Ive displayed your jquery is served from the google api CDN - see the advantages here: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
its an old article but it still applies.

DanInMa
10-06-2011, 01:34 AM
oh and make sure you add it in your head section.

jemacba
10-06-2011, 02:39 AM
remove this:


<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>

add this:



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



You are making the most common of jQuery beginner mistakes. You are loading the framework 3 times, only one is required.

also using the link Ive displayed your jquery is served from the google api CDN - see the advantages here: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
its an old article but it still applies.



thanks for the reply!

i did what you said... switched the three lines out and added the script you suggested, then added the script again to the top part of the code, under the header

but i havent noticed any change.... the banner still loads (not sure if it is quicker, but might be)

but i still would like a note to come up and say "Feature Banner Loading"

this is the website: www.jeremybatesbooks.com

thanks again!
jeremy

Old Pedant
10-06-2011, 04:24 AM
Well, problem is that's not so much a banner as a full blown slideshow, and for reasons known only to the author, it doesn't show the first image until all of the images are loaded.

If you could just modify it so it showed the first image right away and *THEN* waited for the other images before animating, I think that would be sufficient, no?

jemacba
10-06-2011, 04:45 AM
Well, problem is that's not so much a banner as a full blown slideshow, and for reasons known only to the author, it doesn't show the first image until all of the images are loaded.

If you could just modify it so it showed the first image right away and *THEN* waited for the other images before animating, I think that would be sufficient, no?


yes, that would be fantastic... showing the first image as soon as it loads, then let the others load after...

could you please tell me what part of the code i should change to allow that?

(i don't know much about coding... this was a pre-made site)

thanks so much old pendant!

Old Pedant
10-06-2011, 06:09 AM
Ugh...too hard. That code too much to figure out.

But there may be another way.

In your "style.css" file, you will find this:


.ps_container{
display:none;
width:656px;
height:345px;
margin:20px auto 80px auto;
position:relative;
background:url(../images/slider_bg.png) no-repeat center;
}

That's the space where the slider *WILL* appear.

But notice the display:none; That says that, when the page first comes up, that space *IS NOT THERE*.

So let's change it. Change it to

display: block;


If if we do that, then the background of the slider will appear as soon as the page is loaded.

And so all you have to do is modify that image!

Keep a copy of the original and then modify the file images/slider_bg.png to put a message *near* the top and centered. If you position the message right, then when the slider starts up, it will cover up the message. *I THINK*.

At least it's worth a try!

If the slider only partly covers the message, make the message smaller and/or move it.

Keep the file size of that slider_bg.png image small, and it will load fast.

I have to tell you, I'm winging this. But just looking at the structure of the HTML and a little bit looking at the JS code, it makes sense.

Give it a shot.

ironboy
10-06-2011, 06:56 AM
Not hard if you find the actual site on the web ;-) I did:

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>

jemacba
10-06-2011, 08:25 AM
thanks for the reply old pendant! what u said sounds good but i didn't try it because iron boy added the complete text (which works great!!)

anyway, thank you both!! that was the last bug with the site before i stop fooling around with it... huge help!
cheers

jeremy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum