Coordinating fading captions with portions of a scrolling image
I'm trying to coordinate fading captions with different aspects of a 5500 pixel wide image which scrolls horizontally. Right now, the captions fade into other text according to intervals of milliseconds. Since different browsers scroll the image at different rates, is there a way to coordinate the fading elements with how much of the image has been scrolled, such as a percent of its width, or a number of pixels of width, instead of milliseconds? For reference, please visit http://mauitradewinds.com/test/test.htm
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
yes sure, I replaced this block in your test.htm:
<script type="text/javascript">
$(document).ready(function(){
$('#element1').fadeIn().delay(2500).fadeOut();
$('#element2').delay (4000).fadeIn().delay(10000).fadeOut();
$('#element3').delay (16000).fadeIn().delay(10000).fadeOut();
$('#element4').delay (34000).fadeIn().delay(10000).fadeOut();
});
</script>ASKER
That totally works. Much appreciated!
You're welcome! I just can't stop looking at those pictures ;-)
ASKER
Yes, we're so fortunate to live here.
There's a small issue I just discovered. On mobile devices, such as iPad, and also under Chrome and Safari, the initial caption says "Sun sets over West Maui Mountains..." etc. The first three captions do not appear. Would you mind checking into that?
There's a small issue I just discovered. On mobile devices, such as iPad, and also under Chrome and Safari, the initial caption says "Sun sets over West Maui Mountains..." etc. The first three captions do not appear. Would you mind checking into that?
It seems the picture width is not yet known at that point, as a quick fix try this:
var pw, bakelem=0;
$(document).ready(function(){
document.getElementById("pic1").onload = function() { pw = document.getElementById("pic1").width; };
});ASKER
Perfect. I wish I had your skill set!
ASKER
Dear Robert:
I've posted a new question, relating to this subject, at https://www.experts-exchange.com/questions/28183308/Possible-conflict-between-jQuery-and-regular-javascript.html
If you're available to comment on the new question, please do so. I'm thinking that it may help if the caption call back script could work without reference to jquery.min.js.
Even if the scaling issue can't be resolved, I'll still happily use your solution with desktop and notebook visitors, which constitute 86% of our web traffic.
I've posted a new question, relating to this subject, at https://www.experts-exchange.com/questions/28183308/Possible-conflict-between-jQuery-and-regular-javascript.html
If you're available to comment on the new question, please do so. I'm thinking that it may help if the caption call back script could work without reference to jquery.min.js.
Even if the scaling issue can't be resolved, I'll still happily use your solution with desktop and notebook visitors, which constitute 86% of our web traffic.
The callback mechanism itself actually doesn't need jQuery, it's only used for the fading. There is a regular javascript alternative for that which works cross browser. I'll try to implement it and post on your new question.
ASKER
Thank you. I'm not sure that eliminating jQuery will correct this, but I think it's worth a try, if you're willing to do that.
ASKER
On the main page, I'm unclear about exactly what is to be replaced with the script you provided. Would you clarify that please?