...

View Full Version : jQuery SerialScroll not working in IE



GOAT2G
11-16-2009, 08:15 AM
Hi all,

I've just started playing with jQuery over the past few weeks. I have used a plugin on a portfolio site called SerialScroll which has proven useful in making a side-scrolling gallery.

Essentially the parts effected are three divs, all inside one another:


<div id="slideshow">
<div id="gallerydiv"
<div id="buttons">
</div>
</div>
</div>

I'm having problems with this though. It works fine in the latest versions of Chrome, Safari and Firefox, but the scrolling does not work in Internet Explorer (8 or lower). I'm also told this is not working in an earlier version of Firefox but I'm unable to test that personally.

I'm at my wit's end with this. If anyone could offer any assistance I would be really grateful.

http://sleepymeuk.dreamhosters.com/noid/reportage.html

Here's the 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"><!-- InstanceBegin template="/Templates/Template 01.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>No ID Photography / Fashion, portrait, music and event photography in London and Birmingham</title>
<!-- InstanceEndEditable -->

<link href='css/gal-style.css' type='text/css' rel='stylesheet' />
<link href='css/style.css' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='js/1/jquery.min.js'></script>
<script type='text/javascript' src='js/1/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/1/jquery.serialScroll-min.js'></script>
<!-- InstanceBeginEditable name="gallery-type" -->
<script type='text/javascript' src='js/1/no-caps/init.js'></script>
<!-- InstanceEndEditable -->

<script type="text/javascript">
$(document).ready(function() {
$('.fadein').hide()
.load(function () {
$(this).fadeIn("slow");
})
.attr('src', 'img/noidlogo.png', 'img/facebook.png', 'img/twitter.png', 'img/linkedin.png', 'img/behance.png');
});
</script>

<script type="text/javascript">
$(document).ready(function() {
$('.gal-images').hide()
.load(function () {
$(this).fadeIn("slow");
})
.attr('src', '01.jpg', '02.jpg', '03.jpg');
});
</script>
<!-- InstanceBeginEditable name="page-colour" -->
<style type="text/css">
.imgcaption {
border-color: #8867ac;
}
.gal-intro-text {
border-color: #8867ac;
}
#gallerydiv {
border-color: #8867ac;
}
#bottom-bar-line {
border-color: #8867ac;
}
.quotes {
color: #8867ac;
}
#slideshow li {
margin-right: 22px;
}
#slideshow span {
float: left;
display: inline;
width: 267px;
}
</style>
<!-- InstanceEndEditable -->

</head>

<body>

<div id="header">
<a href="index.html"><img src="img/noidlogo.png" alt="No ID Photography" id="logo" class="fadein"/></a>
</div>

<div id="contact">
<p>m / +44(0)7779 35 77 59<br />
e / ian@no-idphotography.co.uk</p>
</div>

<div id="nav">
<ul class="gallerylinks">
<li><a href="bacardi.html">Bacardi</a></li>
<li><a href="nhs.html">NHS South Birmingham</a></li>
<li><br /></li>
<li><a href="music.html">Music</a></li>
<li><a href="fashion.html">Fashion</a></li>
<li><a href="reportage.html">Reportage</a></li>
<li><a href="portrait.html">Portraiture</a></li>
<li><a href="commercial.html">Commercial</a></li>
</ul>
<h1>Personal Work</h1>
<ul class="gallerylinks">
<li><a href="social.html">Nightlife &amp Social Events</a></li>
<li><a href="energyandmovement.html">Energy &amp; Movement</a></li>
<li><a href="section.html">Another section <em>(coming soon)</em></a></li>
</ul>

<div id="navlinks">
<ul>
<li><a href="statement.html">Mission Statement</a></li>
<li><a href="about.html">About/CV</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
<div id="network-links">
<a href="http://www.flickr.com/no-id" target="blank"><img src="img/flickr.png" alt="No ID Photography on Flickr" class="fadein"/></a>
<a href="http://www.facebook.com/pages/No-ID-Photography/167087479209" target="blank"><img src="img/facebook.png" alt="No ID Photography on Facebook" class="fadein"/></a>
<a href="http://www.behance.net/" target="blank"><img src="img/behance.png" alt="No ID Photography on Behance" class="fadein"/></a>
<a href="http://twitter.com/noidphotography" target="blank"><img src="img/twitter.png" alt="No ID Photography on Twitter" class="fadein"/></a>
<a href="http://uk.linkedin.com/pub/ian-davies/12/178/569" target="blank"><img src="img/linkedin.png" alt="No ID Photography on LinkedIn" class="fadein"/></a></div>
</div>
</div>
<!-- InstanceBeginEditable name="content" -->
<div id="gallerydiv">
<div id="slideshow">
<ul>
<li style="width: 600px;"><img src="img/reportage/01.jpg" class="gal-images"/><h2 class="imgcaptions-under">Swinging Carnaby 09</h2></li>
<li style="width: 600px;"><img src="img/reportage/02.jpg" class="gal-images"/><h2 class="imgcaptions-under">Swinging Carnaby 09</h2></li>
<li style="width: 600px;"><img src="img/reportage/03.jpg" class="gal-images"/><h2 class="imgcaptions-under">Josephine De La Baume, V Festival</h2></li>
<li><span style="width: 267px; margin-right: 22px;"><img src="img/reportage/04.jpg" class="gal-images"/><h2 class="imgcaptions-under">Climate Rush, RBS London</h2></span>
<span style="width: 267px;"><img src="img/reportage/05.jpg" class="gal-images"/><h2 class="imgcaptions-under">Joe Calzaghe, Cardiff Arena</h2></span></li>
<li style="width: 600px;"><img src="img/reportage/06.jpg" class="gal-images"/><h2 class="imgcaptions-under">Morning Stroll</h2></li>
<li><span style="width: 267px; margin-right: 22px;"><img src="img/reportage/07.jpg" class="gal-images"/><h2 class="imgcaptions-under">Perry Barr Protests, Birmingham</h2></span>
<span style="width: 600px;"><img src="img/reportage/08.jpg" class="gal-images"/><h2 class="imgcaptions-under">Stratford Town Jnrs</h2></li>
<li style="width: 600px;"><img src="img/reportage/09.jpg" class="gal-images"/><h2 class="imgcaptions-under">Yummy Mummies</h2></li>
<li><span style="width: 267px; margin-right: 22px;"><img src="img/reportage/10.jpg" class="gal-images"/><h2 class="imgcaptions-under">Vandalism</h2></span>
<span style="width: 600px;"><img src="img/reportage/11.jpg" class="gal-images"/><h2 class="imgcaptions-under">Qbert and Rob Swift, DMC Champs 09</h2></span></li>
<li style="width: 600px;"><img src="img/reportage/12.jpg" class="gal-images"/><h2 class="imgcaptions-under">Stratford Town Fan</h2></li>
<li style="width: 276px;"><img src="img/reportage/13.jpg" class="gal-images"/><h2 class="imgcaptions-under">Tutti Tuesday, Hungerford</h2></li>
<li style="width: 600px;"><img src="img/reportage/14.jpg" class="gal-images"/><h2 class="imgcaptions-under">Warwickshire Rapid Response Team</h2></li>
<li style="width: 276px;"><img src="img/reportage/15.jpg" class="gal-images"/><h2 class="imgcaptions-under">Tear Sheet, Warwickshire Life Magazine</h2></li>
<li style="width: 600px;"><img src="img/reportage/16.jpg" class="gal-images"/><h2 class="imgcaptions-under">Tear Sheet, Warwickshire Life Magazine</h2></li>
</ul>
<!-- InstanceEndEditable -->

<div class="buttons">
<div id="navigation">
<ul><li><a href="#"><img src="img/but_rewind.png" alt="Rewind image set"/></a></li></ul>
</div>
<div id="buttons">
<a class="prev" href="#"><img src="img/but_prev.png" alt="Previous image" style="margin-left: 8px;"/></a>
<a class="next" href="#"><img src="img/but_next.png" alt="Next image" style="margin-left: 4px;"/></a> </div></div>

</div></div>
</div>

<br class="clear" />
<div id="bottom-bar"><div id="bottom-bar-line"><p>All rights reserved. Ian Davies 2009</p></div></div>

</body>
<!-- InstanceEnd --></html>

Style:

@charset "utf-8";
html {
background-color: #252525;
font-family: helvetica, arial, sans-serif;
color:#FFF;
font-size: 12px;
width: 100%;
}
body {
width: 100%;
padding: 0px;
margin: 0px;
}
#header {
position: fixed;
top:30px;
left: 30px;
}
.imgcaption {
border-top-width: 6pt;
border-top-color: #fff;
width: 140px;
height: 250px;
margin-right: 18px;
border-top-style: solid;
float: left;
}
.gal-images {
margin-right: 14px;
background-color: #333;
float: left;
display: block;
}
h1 {
line-height: 30px;
}
.gal-intro-text {
border-top-width: 6pt;
border-top-color: #fff;
width: 220px;
height: 150px;
border-top-style: solid;
float: left;
}
#nav {
position: absolute;
top: 158px;
left: 35px;
float: left;
border-top-width: 6pt;
border-top-color: #fff;
width: 220px;
border-top-style: solid;
float: left;
line-height: 20px;
color: #grey;
z-index: 3;
}
.next {
text-align: right;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:visited {
color: #ccc;
text-decoration: none;
}
a:visited:hover {
color: #fff;
text-decoration: none;
}
img {
border:none;
}
#wrapper {
padding-top:30px;
padding-left:30px;
}
.landscapeimgframe {
width:500000px;
height:450px;
float:left;
}
.gal-intro-frame {
width:220px;
height:450px;
float:left;
margin-right: 18px;
}
#body {
position: absolute;
top: 180px;
}
h1 {
font-family: helvetica, arial, sans-serif;
color:#FFF;
font-size: 12px;
text-transform: uppercase;
}
h2 {
font-family: helvetica, arial, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: normal;
}
.landscapeimg {
padding-left: 0px;
padding-right: 0px;
float: left;
}
#gallerydiv {
position: relative;
left: 277px;
top: 158px;
height: 500px;
width: 100%;
overflow: hidden;
}
#textualdiv {
position: fixed;
left: 287px;
top: 191px;
height:600px;
width: 100%;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #8CC63F;
border-top-style: solid;
border-top-width: 6pt;
border-top-color: #fff;
margin-top: 0px;
margin-right: 100px;
margin-bottom: 0px;
margin-left: 0px;
}
#textual-div2 {
position: fixed;
left: 287px;
top: 196px;
width: 440px;
}
#contact {
position: fixed;
top: 58px;
right: 30px;
height: 100px;
width: 200px;
}
#legal {
position: fixed;
top: 650px;
right: 30px;
height: 100px;
width: 200px;
font-size: 10px;
}
.gallerylinks {
list-style-type:none;
margin: 0;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-transform: uppercase;
font-weight: bold;
}
#navlinks {
text-transform: uppercase;
font-weight: bold;
position: relative;
top: 25px;
height: 200px;
width: 220px;
border-top-style:solid;
border-top-width: 6pt;
font-style: italic;
}
#navlinks ul {
list-style-type:none;
margin: 0;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
z-index: 3;
}
.quotes {
font-size: 14px;
font-weight: bold;
color: #ccc;

}
.quotes p {
margin-top: 10px;
padding-bottom: 15px;
}
.buttons {
position: fixed;
left: 278px;
top: 603px;
}
#network-links {
position: relative;
top: 20px;
}
#network-links img {
margin-right: 5px;
}
#bottom-bar {
position: fixed;
top: 640px;
left: 0px;
right: 0px;
border-left: 35px solid;
border-color: transparent;
z-index: 23;
padding: 0px;
overflow: hidden;
}
#bottom-bar-line {
width: 100%;
border-top: 2px solid;
padding-top: 6px;
}
#trans {
float: right;
top: 458px;
right: 0px;
z-index: 5;
margin-top: -300px;
position: relative;
}
.fadeli {
opacity: 1;
}
.imgcaptions-under {
background-color: #151515;
margin-top: 5px;
padding-left: 5px;

display: block;
}

Gallery Style

ul, li, h4, h3, h2, h1, p{
padding:0;
margin:0;
list-style:none;
}

#slideshow{
width:10000px;
overflow: hidden;
float: left;
position: relative;
left: 0px;
}

#slideshow ul{
width:100000px;

}

#slideshow li{
float:left;
margin-right: 5px;
cursor:pointer;

}

Fumigator
11-16-2009, 05:21 PM
Thing about plugins... they have no guarantee and sometimes it's just better to find another solution rather than try to debug someone else's plugin.

There are tons of carousel-type plugins so if I were you I'd shop for one that works in all browsers.

This one looks pretty good:

http://plugins.jquery.com/project/jCarouselLite

GOAT2G
11-16-2009, 10:54 PM
Thing about plugins... they have no guarantee and sometimes it's just better to find another solution rather than try to debug someone else's plugin.

There are tons of carousel-type plugins so if I were you I'd shop for one that works in all browsers.

This one looks pretty good:

http://plugins.jquery.com/project/jCarouselLite

I could just scrap it, but I know it SHOULD work in IE. Take a look at the demo page in IE - it works fine: http://demos.flesler.com/jquery/serialScroll/

Could anyone offer any help? It's driving me nuts :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum