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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    SerialScroll not working in IE

    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:

    Code:
    <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:
    Code:
    <!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:
    Code:
    @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
    Code:
    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;
    
    		}
    Last edited by GOAT2G; 11-16-2009 at 09:18 AM.

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fumigator View Post
    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


  •  

    Posting Permissions

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