Skip navigation
Currently Being Moderated

java fade vs scrollbar conflict

May 15, 2012 7:34 PM

i created a scrollbar:

 

http://toddheymandirector.com/REEL/

 

but i want the rollover images to fade on one by one like they do here:

 

http://toddheymandirector.com/MORE/

 

i tried here but it stacks them and gets funky - float left doesnt work

 

http://toddheymandirector.com/REEL/scrollie.html

 

help?

 

thanks

 
Replies
  • Currently Being Moderated
    May 17, 2012 2:14 PM   in reply to reelhero

    It's a well known fact that some JavaScript plugins (not Java BTW which is entirely different) won't play nice with other scripts on your page. Using open source JS is a mixed bag of delights & disappointments because the core library gets updated while older plugins don't. 

     

    The current jQuery library is 1.7.2.  It looks as if you're trying to add jQuery 1.3 and 1.5 to the mix.   If your older plugins won't work with 1.7.2, find a newer plugin.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 10, 2012 9:38 AM   in reply to reelhero

    Try this.  Your previous code was a mess.  I fixed the major errors and gave the thumbnail scroller images  (#tS1 img) a fadeIn rate of 7200 milliseconds. Function code is near the bottom. You can adjust fadeIn rate to suit.  Tested & works in Firefox12 & IE9.

     

     

    <!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>
    <link rel="shortcut icon" href="http://toddheymandirector.com/favicon.ico" />
    <title>TODD HEYMAN</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" href="http://toddheymandirector.com/css/supersized.core.css" type="text/css" media="screen" />
    
    <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css' />
    
    <!--jquery latest-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <!--jquery ui custom build (for animation easing) -->
    <script type="text/javascript" src="http://toddheymandirector.com/js/jquery-ui-1.8.13.custom.min.js"></script>        
    
    <!--thumbnail scroller stylesheet-->
    <link rel="stylesheet" type="text/css" href="http://toddheymandirector.com/css/jquery.thumbnailScroller.css" />
    
    <!-- thumbnailScroller script-->
    <script type="text/javascript" src="http://toddheymandirector.com/js/jquery.thumbnailScroller.js"></script>
    <script type="text/javascript" src="http://toddheymandirector.com/js/supersized.core.3.2.1.min.js"></script>
    
    <!--shadowbox-->
    <link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
    <script type="text/javascript" src="../js/shadowbox.js"></script>
      
    <style type="text/css">
    body {background-color: #3e403f;}
    
    #mast_ {
    position:absolute;
    left:-10px;
    top:20px;
    width:296px;
    height:70px;
    }
    #reel_ {
    position:absolute;
    left:-10px;
    top:97px;
    width:161px;
    height:26px;
    }
    #more_ {
    position:absolute;
    left:-10px;
    top:123px;
    width:161px;
    height:26px;
    }
    #film_ {
    position:absolute;
    left:-10px;
    top:149px;
    width:161px;
    height:22px;
    }
    #boards_ {
    position:absolute;
    left:-10px;
    top:171px;
    width:161px;
    height:27px;
    }
    #news_ {
    position:absolute;
    left:-10px;
    top:198px;
    width:161px;
    height:25px;
    }
    #about_ {
    position:absolute;
    left:-10px;
    top:223px;
    width:161px;
    height:25px;
    }
    
    #contact_ {
    position:absolute;
    left:-10px;
    top:248px;
    width:161px;
    height:25px;
    }
    div.fadehover {
    position: relative;
    }
    img.a {
    position: relative;
    left: 0;
    top: 0;
    z-index: 10;
    
    }
    img.b {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    opacity: 0;
    filter: alpha(opacity=0);
    }
    #footer {
    background:  url(http://toddheymandirector.com/Images/common_jsh/footer_bg5.png) 0 0 repeat;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    }
    #reel_footer {
    position:absolute;
    left:0px;
    bottom:0px;
    }
    #more_footer {
    position:absolute;
    left:75px;
    bottom:0px;
    }
    #film_footer {
    position:absolute;
    left:122px;
    bottom:0px;
    }
    #boards_footer {
    position:absolute;
    left:161px;
    bottom:0px;
    }
    #news_footer {
    position:absolute;
    left:215px;
    bottom:0px;
    }
    #about_footer {
    position:absolute;
    left:263px;
    bottom:0px;
    }
    #contact_footer {
    position:absolute;
    left:311px;
    bottom:0px;
    }    
    #copyright_footer {
    position:absolute;
    right:0px;
    bottom:0px;
    }    
    #facebook_footer {
    position:absolute;
    right:141px;
    bottom:0px;;
    }    
    #twitter_footer {
    position:absolute;
    right:80px;
    bottom:0px;
    }    
    #share_footer {
    position:absolute;
    right:20px;
    bottom:0px;
    }
    #container { width: 100%; height: 100%; display: table; }
    #position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
    </style>
    
    <script type="text/javascript" src="http://toddheymandirector.com//js/supersized.3.1.3.min.js"></script>
    
    <script type='text/javascript'>
    $(document).ready(function(){
        $("img.b").hover(function() {
        $(this).stop().animate({"opacity": "1"}, "70");
        },
        function() {
        $(this).stop().animate({"opacity": "0"}, "100");
        });
    });
    </script>
    
    <script type="text/javascript">
        (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
       
    <!--[if IE]>
    <style type="text/css">
    #container { position: relative; }
    #position { position: absolute; top: 50%; }
    #content { position: relative; top: -50%; }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id= "mast_"><a href="http://toddheymandirector.com/"><img id="mast" src="http://toddheymandirector.com/Images/common_jsh/mast.png" width="296" height="70" alt="mast" /></a></div>
    <div id="reel_"><a href="http://toddheymandirector.com/REEL/"><img src="http://toddheymandirector.com/Images/common_jsh/reel_down.png" alt="" /></a> </div>
    <div class="fadehover" id="more_"><a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/more.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/more_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="film_"><a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/film.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/film_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="boards_"><a href="http://toddheymandirector.com/BOARDS/"><img src="http://toddheymandirector.com/Images/common_jsh/boards.png" alt="" class="a" /></a><a href="http://toddheymandirector.com/BOARDS/"> <img src="http://toddheymandirector.com/Images/common_jsh/boards_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="news_"><a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/news.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/news_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="about_"><a href="http://toddheymandirector.com/ABOUT/"><img src="http://toddheymandirector.com/Images/common_jsh/about.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/ABOUT/"><img src="http://toddheymandirector.com/Images/common_jsh/about_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="contact_"><a href="mailto:info@toddheymandirector.com?subject=Director Todd Heyman"><img src="http://toddheymandirector.com/Images/common_jsh/contact.png" alt="" class="a" /></a> <a href="mailto:info@toddheymandirector.com?subject=Director Todd Heyman"><img src="http://toddheymandirector.com/Images/common_jsh/contact_hot.png" alt="" class="b" /></a></div>
    
    <div id="footer" style=" height: 20px">
    <div class="faded2 fadehover" id="reel_footer"><a href="http://toddheymandirector.com/REEL/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/reel_footer_hot.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/REEL/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/reel_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="more_footer"><a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/more_footer.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/more_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="film_footer"><a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/film_footer.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/film_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="boards_footer"><a href="http://toddheymandirector.com/BOARDS/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/boards_footer.png" alt="" class="a" /></a><a href="http://toddheymandirector.com/BOARDS/"> <img src="http://toddheymandirector.com/Images/common_jsh/footer/boards_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="news_footer"><a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/news_footer.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/news_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="about_footer"><a href="http://toddheymandirector.com/ABOUT/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/about_footer.png" alt="" class="a" /></a><a href="http://toddheymandirector.com/ABOUT/"> <img src="http://toddheymandirector.com/Images/common_jsh/footer/about_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="contact_footer"><a href="mailto:info@toddheymandirector.com?subject=Director Todd Heyman"><img src="http://toddheymandirector.com/Images/common_jsh/footer/contact_footer.png" alt="contact"/></a>
    
    <a href="mailto:info@toddheymandirector.com?subject=Director Todd Heyman"> <img src="http://toddheymandirector.com/Images/common_jsh/footer/contact_footer_hot.png" alt="" class="b" /></a></div>
    
    <div class="fadehover2" id="facebook_footer"><a href="https://www.facebook.com/lists/10150298499390382" target="new"><img src="http://toddheymandirector.com/Images/common_jsh/footer/facebook_footer.png" alt="" class="a" /></a> <a href="https://www.facebook.com/lists/10150298499390382" target="new"><img src="http://toddheymandirector.com/Images/common_jsh/footer/facebook_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="twitter_footer"><a href="http://twitter.com/toddheyman" target="new" ><img src="http://toddheymandirector.com/Images/common_jsh/footer/twitter_footer.png" alt="" class="a" /></a><a href="http://twitter.com/toddheyman" target="new" > <img src="http://toddheymandirector.com/Images/common_jsh/footer/twitter_footer_hot.png" alt="" class="b" /></a></div>
    <div class="fadehover" id="share_footer"><a href="mailto:?subject=TODDHEYMANDIRECTOR: REEL &amp;body=Check This Out: http://toddheymandirector.com/REEL" target="new" ><img src="http://toddheymandirector.com/Images/common_jsh/footer/share_footer.png" alt="" class="a" /></a> 
    
    <a href="mailto:?subject=TODDHEYMANDIRECTOR: REEL &amp;body=Check This Out: http://toddheymandirector.com/REEL" target="new" ><img src="http://toddheymandirector.com/Images/common_jsh/footer/share_footer_hot.png" alt="" class="b" /></a></div>
    </div>
    
    <!-- thumbnail scroller markup begin -->
    <div id="tS1" class="jThumbnailScroller" style="margin-top:325px;">
    <div class="jTscrollerContainer" >
    <div class="jTscroller">
    <div style="float:left;" class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike.png" alt="nike > the getaway" border="0" class="a"  /></a> <a href="http://toddheymandirector.com/movies/spots/800/NIKE_theGetaway_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Nike > The Getaway"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png" alt="" class="b"  /></a> </div>
    <div style="float:left;"  class="faded fadehover"><a href="" title="Total Defense > Bad Cops"><img src="http://toddheymandirector.com/Images/thumbs_jsh/td_cops.png" alt="nike" border="0" class="a"  /></a> <a href="http://toddheymandirector.com/movies/spots/800/TD_COPS_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Total Defense > Bad Cops"><img src="http://toddheymandirector.com/Images/thumbs_jsh/td_cops_hot.png" alt="" class="b"  /></a> </div>
    <div style="float:left;"  class="faded fadehover"><a href="p"><img src="http://toddheymandirector.com/Images/thumbs_jsh/chex.png" alt="nike" border="0" class="a"  /></a> <a href="http://toddheymandirector.com/movies/spots/800/chex_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Chex > Mix It Up"><img src="http://toddheymandirector.com/Images/thumbs_jsh/chex_hot.png" alt="" class="b"  /></a> </div>
    <div style="float:left;"  class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/florastor.png" alt="nike" border="0" class="a"  /></a> <a href="http://toddheymandirector.com/movies/spots/800/Florastor_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Florstor > Because"><img src="http://toddheymandirector.com/Images/thumbs_jsh/florastor_hot.png" alt="" class="b"  /></a> </div>
    <div style="float:left;"  class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/ulife.png" alt="nike" border="0" class="a"  /></a> <a href="http://toddheymandirector.com/movies/spots/800/ULIFELINE_JUMPER_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Ulifeline > Jumper"><img src="http://toddheymandirector.com/Images/thumbs_jsh/ulife_hot.png" alt="" class="b"  /></a> </div>
    <div style="float:left;"  class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/fdic.png" alt="nike" border="0" class="a"  /></a> <a href="http://toddheymandirector.com/movies/spots/800/FDIC_800.mov" rel="shadowbox[REEL];width=800;height=450" title="FDIC > the Mattress"><img src="http://toddheymandirector.com/Images/thumbs_jsh/fdic_hot.png" alt="" class="b"  /></a> </div></div>
    </div>
    
    <a href="#" class="jTscrollerPrevButton"></a>
    <a href="#" class="jTscrollerNextButton"></a>
    </div>
    
    <!--thumbnail scroller markup end-->
    <script type="text/javascript">
    (function($){
    window.onload=function(){ 
        $("#tS1").thumbnailScroller({ 
            scrollerType:"hoverAccelerate", 
            scrollerOrientation:"horizontal", 
            scrollSpeed:2, 
            scrollEasing:"easeOutCirc", 
            scrollEasingAmount:600, 
            acceleration:4, 
            scrollSpeed:800, 
            noScrollCenterSpace:10, 
            autoScrolling:0, 
            autoScrollingSpeed:2000, 
            autoScrollingEasing:"easeInOutQuad", 
            autoScrollingDelay:500 
        });
    }
    })(jQuery);
    </script>
    
    <!--thumbnail scroller function-->
    <script type="text/javascript">
    jQuery(function($){
        $.supersized({
        slides  :      [ {image : 'http://toddheymandirector.com/Images/common_jsh/bgs/nike.jpg'} ]
        });
    });
    </script>
    
    <!--shadowbox function-->
    <script type="text/javascript">
    Shadowbox.init();
    </script>
    
    <!--fade-in thumbnail images-->  
    <script type="text/javascript">
    $(window).ready(function(){
        $('#tS1 img').hide().fadeIn(7200);//fadeIn rate in milliseconds. A bigger value = slower fade rate//
    });
    </script>
    
    </body>
    </html>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 10, 2012 11:01 AM   in reply to reelhero

    For sequential fadeIn on images, replace this:

     

    <!--Fade-in thumbnail images-->

    <script type="text/javascript">

    $(window).ready(function(){

        $('#tS1 img').hide() .fadeIn(7200);//fadeIn rate in milliseconds. A bigger value = slower fade rate//

    });

    </script>

     

    With this:

     

    <!--Sequential fade-in on thumbnail images-->

    <script type='text/javascript'>

    $(window).load(function(){

        $('#tS1 img') .hide() .each(function(i) {

      $(this).delay(i*600).fadeIn(2200);

        });

    });

    </script>

     

     

    The other stuff is going to be problematic because of the way browsers unload on page exit. Keep things simple. Use the HTML validator & focus on error free code.  You'll have fewer problems.

    HTML - http://validator.w3.org/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 10, 2012 11:30 AM   in reply to reelhero

    Try adding this to your CSS.

     

    #tS1 img {display:none}

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 10, 2012 4:51 PM   in reply to reelhero

    OK, Todd.  I finally see a source of conflict.  The scroller is initializing on page load.

     

    Change function code to this:

     

    <!--thumbnail scroller function-->

    <script type="text/javascript">

    $(document).ready(function(){

        $("#tS1").thumbnailScroller({

            scrollerType:"hoverAccelerate",

            scrollerOrientation:"horizontal",

            scrollSpeed:2,

            scrollEasing:"easeOutCirc",

            scrollEasingAmount:600,

            acceleration:4,

            scrollSpeed:800,

            noScrollCenterSpace:10,

            autoScrolling:0,

            autoScrollingSpeed:2000,

            autoScrollingEasing:"easeInOutQuad",

            autoScrollingDelay:500

        });

    });

    </script>

     

    and this:

     

    <!--fade-in thumbnails-->

    <script type='text/javascript'>

        $(document).ready(function(){

        $('#tS1 img') .hide() .each(function(i) {

      $(this).delay(i*800).fadeIn(2500);

        });

    });

    </script>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 10:04 AM   in reply to reelhero

    Remove this from your CSS:

     

    #tS1 img {display:none}

     

     

    My test page works in FF12 & IE9

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points