Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How add "Feature Banner is Loading" placeholder??

    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>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    remove this:

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

    Code:
    <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...query-for-you/
    its an old article but it still applies.

  • Users who have thanked DanInMa for this post:

    jemacba (10-06-2011)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh and make sure you add it in your head section.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    remove this:

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

    Code:
    <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...query-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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,862
    Thanks
    78
    Thanked 4,418 Times in 4,383 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jemacba (10-06-2011)

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,862
    Thanks
    78
    Thanked 4,418 Times in 4,383 Posts
    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:
    Code:
    .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
    Code:
         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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jemacba (10-06-2011)

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Not hard if you find the actual site on the web ;-) I did:

    Try:
    Code:
    <!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>

  • Users who have thanked ironboy for this post:

    jemacba (10-06-2011)

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •