15 Replies Latest reply: Jun 13, 2012 8:25 PM by reelhero RSS

    java fade vs scrollbar conflict

    reelhero Community Member

      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

        • 1. Re: java fade vs scrollbar conflict
          reelhero Community Member

          help? ill send good karma..

          • 2. Re: java fade vs scrollbar conflict
            Nancy O. CommunityMVP

            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.

            • 3. Re: java fade vs scrollbar conflict
              reelhero Community Member

              hey nancy thanks (sorry got caught on a job)

               

              the old jquery library code was legacy..i actually have 1.7.2 in there and the scroller plugin is updated -- i think its a float issue..

               

              here is the current site

               

              http://toddheymandirector.com/REEL/

               

              here is the same page with the faded class operating

               

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

               

              it fades on but the thumbs dont lay across the page one after the other ..

               

              any ideas?

              • 4. Re: java fade vs scrollbar conflict
                reelhero Community Member

                do you know of other scrollbars nancy that use 1.7.2

                • 5. Re: java fade vs scrollbar conflict
                  Nancy O. CommunityMVP

                  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/

                  • 6. Re: java fade vs scrollbar conflict
                    reelhero Community Member

                    nancy you are a rock star - thank you!

                    im learning - i dont know if you remember..only a year ago i couldnt do any of this--

                     

                    thats almost it.. though i want the thumbnails to fade on one by one like they do here - except in  a scrollbar like you did above

                     

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

                     

                    its more elegant than all at once.. and will look good when the user goes from page to page

                     

                     

                     

                    im also trying to make the body content (but not the navigation bar or the footer) fade out (the thumbnails one by one but quicker than the fade on) when the user clicks any of the naviagtion buttons in the header or footer - my next goal

                    • 7. Re: java fade vs scrollbar conflict
                      Nancy O. CommunityMVP

                      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.

                      • 8. Re: java fade vs scrollbar conflict
                        reelhero Community Member

                        thank you!!

                        it worked except the scrollbar jumps on then disappears before they fade on:

                         

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

                         

                        i adjusted the delay and fade in in your script to match the below but when it fades on its not quite as liquidly smooth as

                         

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

                         

                        how do i tweak it?

                        • 9. Re: java fade vs scrollbar conflict
                          Nancy O. CommunityMVP

                          Try adding this to your CSS.

                           

                          #tS1 img {display:none}

                           

                           

                          Nancy O.

                          • 10. Re: java fade vs scrollbar conflict
                            reelhero Community Member

                            with that style only the first image comes on:

                             

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

                            • 11. Re: java fade vs scrollbar conflict
                              Nancy O. CommunityMVP

                              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.

                              • 12. Re: java fade vs scrollbar conflict
                                reelhero Community Member

                                same thing nancy -

                                 

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

                                 

                                 

                                what am i doing wrong?

                                • 13. Re: java fade vs scrollbar conflict
                                  Nancy O. CommunityMVP

                                  Remove this from your CSS:

                                   

                                  #tS1 img {display:none}

                                   

                                   

                                  My test page works in FF12 & IE9

                                   

                                  Nancy O.

                                  • 14. Re: java fade vs scrollbar conflict
                                    reelhero Community Member

                                    thanks nancy! you are wonderful for giving it so much time (timing is great - im up for a big directing job - i just shot a nike running commercial in central park last week)

                                     

                                    so it works in FF but not Safari

                                     

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

                                     

                                    also the first thumbnail seems to come on much quicker than the rest- its laready there on page load - how can i slow that down?

                                    • 15. Re: java fade vs scrollbar conflict
                                      reelhero Community Member

                                      UPDATE:

                                      it works in safari on the first load but if you refresh the page it doesnt work.

                                      FF you can reload and it works fine