Menu
Hey everyone,
[URL=”http://www.thrusong.com/northwest/index.html”]LINK HERE
I’m working on a simple site for a client. Its their Annual Summary for 2009 and will be linked off their main site.
I modified the flipbook code to “lazy load” the flip book images to decrease the connections hitting the server (it loads 4 of the 24 images every 2 seconds). It works almost perfectly in Firefox but doesn’t load more than half the images in IE… In fact, the first smaller image you click to view the flipbook gives a 206 in my access log (all over images are shown and have a 200 status).
I’m much more of a PHP/MySQL developer- I’m getting better at JavaScript/AJAX but its still not my strong point, but I have no idea what I’m doing to make IE act so stubbornly.
Here’s the HTML:
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Northwest | Summary Annual Report 2009</title>
<style type=”text/css”>
body {
margin:0px;
padding:0px;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
color:#99A89E;
text-align:center;
}
#header {
background-image:url(‘header.png’);
width:970px;
height:45px;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0px;
overflow:hidden;
}
.logo {
background-image:url(‘logo.png’);
width:180px;
height:40px;
display:inline-block;
margin-left:15px;
float:left;
}
.logo:hover {
background-position:0px -40px;
}
.buttons {
display:inline-block;
margin-left:auto;
margin-right:auto;
font-size:12px;
font-family: arial;
font-size: 8pt;
color:#FFFFFF;
font-weight:bold;
padding:2px;
border:1px solid #003F33;
background-image:url(button_gradient.png);
cursor:pointer;
overflow:hidden;
}
#content {
position:relative;
width:970px;
height:590px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
clear:both;
display:none;
}
.clear_both{
clear:both;
}
.pages {
background-color:#FFFFFF;
background-repeat:no-repeat;
background-image:url();
display:block;
}
#myBook{
margin-left:auto;margin-right:auto;
}
.header_controls{
float:right;
display:inline-block;
text-align:center;
color:#FFFFFF;
font-weight:bold;
margin-top:7px;
margin-right:30px;
}
.next {
margin-left:7px;
}
.prev {
margin-right:7px;
}
.select_holder {
border:1px solid #CCCCCC;
padding:2px;
width:90px;
display:inline-block;
background-color:#FFFFFF;
cursor:pointer;
}
.select_element {
border:0px;
width:86px;
color:#004739;
font-size:11px;
font-weight:bold;
cursor:inherit;
}
.summary_preview {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
margin-top:10px;
cursor:pointer;
}
</style>
</head>
<body onload=”lazy_loopy_image_run()”>
<div id=”header”>
<a href=”http://www.northwest.ca/” class=”logo”></a>
<div class=”header_controls”>
<input type=”button” class=”buttons prev” value=”prev” onClick=”goprev();”>
<span class=”select_holder”>
<select id=”flipSelect” style=”display:none;” class=”select_element”></select>
</span>
<input type=”button” class=”buttons next” value=”next” onClick=”gonext();”>
</div>
<div class=”clear_both”></div>
</div>
<div id=”report_cover” onclick=”open_report();”>
<img src=”view_summary.jpg” class=”summary_preview” title=”Click here to view!” />
</div>
<div id=”content”>
<br><br>
<div id=”myBook” style=”display:none;”>
<div name=”Cover” class=”pages”>
</div>
<div name=”Page 1″ class=”pages”>
</div>
<div name=”Page 2″ class=”pages”>
</div>
<div name=”Page 3″ class=”pages”>
</div>
<div name=”Page 4″ class=”pages”>
</div>
<div name=”Page 5″ class=”pages”>
</div>
<div name=”Page 6″ class=”pages”>
</div>
<div name=”Page 7″ class=”pages”>
</div>
<div name=”Page 8″ class=”pages”>
</div>
<div name=”Page 9″ class=”pages”>
</div>
<div name=”Page 10″ class=”pages”>
</div>
<div name=”Page 11″ class=”pages”>
</div>
<div name=”Page 12″ class=”pages”>
</div>
<div name=”Page 13″ class=”pages”>
</div>
<div name=”Page 14″ class=”pages”>
</div>
<div name=”Page 15″ class=”pages”>
</div>
<div name=”Page 16″ class=”pages”>
</div>
<div name=”Page 17″ class=”pages”>
</div>
<div name=”Page 18″ class=”pages”>
</div>
<div name=”Page 19″ class=”pages”>
</div>
<div name=”Page 20″ class=”pages”>
</div>
<div name=”Page 21″ class=”pages”>
</div>
<div name=”Page 22″ class=”pages”>
</div>
<div name=”Page 23″ class=”pages”>
</div>
</div>
<br>
</div>
<script type=”text/javascript” src=”bookflip.js”></script>
<script type=”text/javascript”>
/****************************************************************************
//** Software License Agreement (BSD License)
//** Book Flip slideshow script- Copyright 2008, Will Jones (coastworx.com)
//** This Script is wholly developed and owned by CoastWorx.com
//** Copywrite: http://wwww.coastworx.com/
//** You are free to use this script so long as this coptwrite notice
//** stays intact in its entirety
//** You are NOT Permitted to claim this script as your own or
//** use this script for commercial purposes without the express
//** permission of CoastWorx Technologies!
//** Full credit to Scott Schiller (schillmania.com) for soundManager
//***************************************************************************/
var myPageW=480; //page width
var myPageH=590; //page height
var pageBorderWidth=1; //adjust border width
var pageBorderColor=”#E5E5E5″; //border color
var pageBorderStyle=”solid”; //border style eg. solid, dashed or dotted.
var pSpeed=20; //page speed, 20 is best for Opera browser. Less is faster
var pSound=false; //change to true for flip sound effect, if true, install SoundManager from schillmania.com
var showBinder=false; //change to false for no binder
var binderImage = “parchmentring2.gif”; //location of center binder
var binderWidth = 20; //width of center binder image
var numPixelsToMove = 20;//number of pixels to move per frame, more is faster but less smooth
//You must create the place holder for the dropdown on this page with an id attribute, eg. <select id=”flipSelect” style=”display:none;”></select>
var selectNavigation=true; //this builds a drop down list of pages for auto navigation.
allowPageClick=true; //allow clicking page directly
doIncrementalAutoFlip = false; //set this to true if you want to flip to selected page incrementally(ie.see each page turn)
ini();
function set_background_image(the_box) {
var el_name = ‘flipHtml’+the_box;
var image_number = the_box + 1;
var image_name = ‘nw/’+image_number+’.jpg’;
var elementz = document.getElementById(el_name);
elementz.style.backgroundImage = “url(‘”+image_name+”‘)”;
}
//setTimeout(“lazy_loopy_image_run()”, 100);
var lazy_image_loopy = 0;
function lazy_loopy_image_run() {
var i = 0;
for(i; i < 4; i++) {
set_background_image(lazy_image_loopy);
lazy_image_loopy++;
}
if (lazy_image_loopy < 23) {
setTimeout(‘lazy_loopy_image_run()’, 2000);
}
}
function open_report() {
var report_preview = document.getElementById(‘report_cover’);
report_preview.style.display = ‘none’;
var report_content = document.getElementById(‘content’);
report_content.style.display = ‘block’;
}
</script>
</body>
</html>
I really appreciate any help or pointers!
Thanks!