CubicCrayon
22 Dec 2010, 06:18 AM
Hi everyone, unfortunately I don't have the site online yet but i'll copy pasta the html here lower down.
I'm building a portfolio site for myself using the Supersize (http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/) plugin. So far on Chrome, Safari, Opera and Firefox it works great, but as per usual not so well in IE.
I'm not developing for IE6, it can die in fire: but IE7 and 8 are versions I'd like to cater for on my site. What happens in IE8 is that the background slideshow doesn't even appear. The same happens in IE7 with an additional problem: initially all content on the page is pushed outside of the page, and it snaps back into place when you do anything (resize the window, toggle an option in developer tools, so it's almost impossible to debug this by process of elimination).
It works fine in other browsers and the code I used works fine on the default page that comes with the plugin's zip file, so I think something else is co***icting with it, I'd really appreciate any help:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cubic Crayon</title>
<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="base_styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/effects.core.js"></script>
<script src="js/effects.slide.js"></script>
<script type="text/javascript" src="supersized.3.0.js"></script>>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 0,
thumbnail_navigation: 0,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 0,
slide_captions: 0,
slide_interval: 3000,
slides : [
{image : 'slides/background_1.jpg', title : 'City Clock Tower'},
{image : 'slides/background_2.jpg', title : 'City Clock Tower'},
{image : 'slides/background_3.jpg', title : 'City Clock Tower'},
{image : 'slides/background_4.jpg', title : 'City Clock Tower'},
]
};
$('#supersized').supersized();
});
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadimages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadimages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body class="gallery_bg">
<div id="content-wrapper">
<div class="content">
<div class="navigation">
<div class="nav"><img src="images/news_nav_on.png" width="140" height="40" alt="news" name="news" /></div>
<div class="nav"><a href="gallery.html" onmouseover="MM_swapImage('gallery','','images/gallery_nav_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/gallery_nav.png" width="140" height="40" alt="gallery" name="gallery" /></a></div>
<div class="nav"><a href="about.html" onmouseover="MM_swapImage('about','','images/about_nav_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/about_nav.png" width="140" height="40" alt="about" name="about" /></a></div>
<div class="nav"><a href="contact.html" onmouseover="MM_swapImage('contact','','images/contact_nav_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/contact_nav.png" width="140" height="40" alt="contact" name="contact" /></a></div>
</div><!--navigation end-->
<div class="logo">
<a href="mailto:marc@cubiccrayon.co.nz" onmouseover="MM_swapImage('logo','','images/logo_news_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/logo_news.png" width="120" height="40" alt="Email Cubic Crayon" name="logo" /></a>
</div><!--logo end-->
<div class="maincontent">
<div class="column">
<h1>new website</h1>
<p>22 Dec 2010 - Hey you, yeah you... I'm amazed you're reading this. This website's new so you must be the only person reading... wanna be my friend?</p>
<p class="more"><a href="news_dec_2010.html">read more</a></p>
</div>
<div class="column">
<h1>merry christmas</h1>
<p>22 Dec 2010 - I don't really want to wish you a merry christmas, I just need to fill up this space with something for the site launch.</p>
<p class="more"><a href="news_dec_2010.html">read more</a></p>
</div>
<div class="column">
<h1>fill this spot too</h1>
<p>22 Dec 2010 - blah blah doobily doody rumteedum borachadada YOU SHALL NOT PASS and all that mumbo jumbo malarky.</p>
<p class="more"><a href="news_dec_2010.html">read more</a></p>
</div>
</div><!--main content-->
</div><!--content end -->
</div><!--content-wrapper end-->
<!--Slides-->
<div id="supersized"></div>
</body>
</html>
(this' a page on my site that has filler text at the moment)
Thanks,
Marc
I'm building a portfolio site for myself using the Supersize (http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/) plugin. So far on Chrome, Safari, Opera and Firefox it works great, but as per usual not so well in IE.
I'm not developing for IE6, it can die in fire: but IE7 and 8 are versions I'd like to cater for on my site. What happens in IE8 is that the background slideshow doesn't even appear. The same happens in IE7 with an additional problem: initially all content on the page is pushed outside of the page, and it snaps back into place when you do anything (resize the window, toggle an option in developer tools, so it's almost impossible to debug this by process of elimination).
It works fine in other browsers and the code I used works fine on the default page that comes with the plugin's zip file, so I think something else is co***icting with it, I'd really appreciate any help:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cubic Crayon</title>
<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="base_styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/effects.core.js"></script>
<script src="js/effects.slide.js"></script>
<script type="text/javascript" src="supersized.3.0.js"></script>>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 0,
thumbnail_navigation: 0,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 0,
slide_captions: 0,
slide_interval: 3000,
slides : [
{image : 'slides/background_1.jpg', title : 'City Clock Tower'},
{image : 'slides/background_2.jpg', title : 'City Clock Tower'},
{image : 'slides/background_3.jpg', title : 'City Clock Tower'},
{image : 'slides/background_4.jpg', title : 'City Clock Tower'},
]
};
$('#supersized').supersized();
});
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadimages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadimages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body class="gallery_bg">
<div id="content-wrapper">
<div class="content">
<div class="navigation">
<div class="nav"><img src="images/news_nav_on.png" width="140" height="40" alt="news" name="news" /></div>
<div class="nav"><a href="gallery.html" onmouseover="MM_swapImage('gallery','','images/gallery_nav_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/gallery_nav.png" width="140" height="40" alt="gallery" name="gallery" /></a></div>
<div class="nav"><a href="about.html" onmouseover="MM_swapImage('about','','images/about_nav_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/about_nav.png" width="140" height="40" alt="about" name="about" /></a></div>
<div class="nav"><a href="contact.html" onmouseover="MM_swapImage('contact','','images/contact_nav_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/contact_nav.png" width="140" height="40" alt="contact" name="contact" /></a></div>
</div><!--navigation end-->
<div class="logo">
<a href="mailto:marc@cubiccrayon.co.nz" onmouseover="MM_swapImage('logo','','images/logo_news_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/logo_news.png" width="120" height="40" alt="Email Cubic Crayon" name="logo" /></a>
</div><!--logo end-->
<div class="maincontent">
<div class="column">
<h1>new website</h1>
<p>22 Dec 2010 - Hey you, yeah you... I'm amazed you're reading this. This website's new so you must be the only person reading... wanna be my friend?</p>
<p class="more"><a href="news_dec_2010.html">read more</a></p>
</div>
<div class="column">
<h1>merry christmas</h1>
<p>22 Dec 2010 - I don't really want to wish you a merry christmas, I just need to fill up this space with something for the site launch.</p>
<p class="more"><a href="news_dec_2010.html">read more</a></p>
</div>
<div class="column">
<h1>fill this spot too</h1>
<p>22 Dec 2010 - blah blah doobily doody rumteedum borachadada YOU SHALL NOT PASS and all that mumbo jumbo malarky.</p>
<p class="more"><a href="news_dec_2010.html">read more</a></p>
</div>
</div><!--main content-->
</div><!--content end -->
</div><!--content-wrapper end-->
<!--Slides-->
<div id="supersized"></div>
</body>
</html>
(this' a page on my site that has filler text at the moment)
Thanks,
Marc