Adobe Community: java fade vs scrollbar conflict

Currently Being Moderated

1. reelhero,

May 17, 2012 11:22 AM in reply to reelhero

Report

help? ill send good karma..

|

Mark as:

Currently Being Moderated

2. Nancy O.,

May 17, 2012 2:14 PM in reply to reelhero

Report

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

3. reelhero,

May 25, 2012 11:54 AM in reply to Nancy O.

Report

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?

|

Mark as:

Currently Being Moderated

4. reelhero,

Jun 9, 2012 2:09 PM in reply to Nancy O.

Report

do you know of other scrollbars nancy that use 1.7.2

|

Mark as:

Currently Being Moderated

5. Nancy O.,

Jun 10, 2012 9:38 AM in reply to reelhero

Report

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

6. reelhero,

Jun 10, 2012 10:19 AM in reply to Nancy O.

Report

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

|

Mark as:

Currently Being Moderated

7. Nancy O.,

Jun 10, 2012 11:01 AM in reply to reelhero

Report

For sequential fadeIn on images, replace this:

$(window).ready(function(){

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

});

</script>

With this:

$(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

8. reelhero,

Jun 10, 2012 11:21 AM in reply to Nancy O.

Report

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?

|

Mark as:

Currently Being Moderated

9. Nancy O.,

Jun 10, 2012 11:30 AM in reply to reelhero

Report

Try adding this to your CSS.

#tS1 img {display:none}

Nancy O.

|

Mark as:

Currently Being Moderated

10. reelhero,

Jun 10, 2012 11:48 AM in reply to Nancy O.

Report

with that style only the first image comes on:

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

|

Mark as:

Currently Being Moderated

11. Nancy O.,

Jun 10, 2012 4:51 PM in reply to reelhero

Report

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

Change function code to this:

$(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:

$(document).ready(function(){

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

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

});

</script>

Nancy O.

|

Mark as:

Currently Being Moderated

12. reelhero,

Jun 10, 2012 8:08 PM in reply to Nancy O.

Report

same thing nancy -

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

what am i doing wrong?

|

Mark as:

Currently Being Moderated

13. Nancy O.,

Jun 11, 2012 10:04 AM in reply to reelhero

Report

Remove this from your CSS:

#tS1 img {display:none}

My test page works in FF12 & IE9

Nancy O.

|

Mark as:

Currently Being Moderated

14. reelhero,

Jun 11, 2012 10:26 AM in reply to Nancy O.

Report

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?

|

Mark as:

Currently Being Moderated

15. reelhero,

Jun 13, 2012 8:25 PM in reply to reelhero

Report

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

|

Mark as:

Dreamweaver

java fade vs scrollbar conflict

May 15, 2012 7:34 PM

More Like This

Bookmarked By (0)

Answers + Points = Status