4 replies [Last post]
kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

This is mostly a JavaScript question, I guess. I wanted to have a picture on the opening page of my Web site (rediscoveringthebible.com) fade in to full opacity slowly. I found some code to do this that was free to use at the following site:

http://www.cryer.co.uk/resources/javascript/script19_fade_image.htm#self

The original code faded one image into another. I wanted only to fade in my one picture on my opening page, so I used only part of the original code.

The problem is that there is sometimes a quick flash of the picture with normal full opacity before the fade-in starts. My basic question is how to prevent this. I made an attempt to solve the problem by using the CSS property, "visibility," using JavaScript to change between "visible" and "hidden." This modification seems to work most of the time with Firefox, but it doesn't work at all with IE.

The task seems to be twofold:

(1) When the page is first opened, keep the downloaded picture from displaying momentarily before the fade in starts.

(2) On reloading the paging--when the picture is already in cache--make the user's browser download the picture again from my server rather than use the one in cache. Then if task (1) has been solved, this completely solves the whole problem.

Here what I have now:

--------------------

<script type="text/javascript">
//<![CDATA[
 
// Begin Fade In Script
 
// Opacity and Fade in script.
// Script copyright (C) 2008 <a href="http://www.cryer.co.uk/.
//" rel="nofollow">http://www.cryer.co.uk/.
//</a> Script is free to use provided this copyright header is included.
 
function SetOpacity(object,opacityPct)
{
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}
 
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var opacity = element.style.opacity * 100;
  var msNow = (new Date()).getTime();
  opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity<0) 
    SetOpacity(element,0)
  else if (opacity>100)
    SetOpacity(element,100)
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
  }
}
 
function FadeIn(id)
{
   var element=document.getElementById(id);
 
   // In the last line, the fade-in speed is set to 3000
   if (element.timer) window.clearTimeout(element.timer); 
   var startMS = (new Date()).getTime();
   // The following line is mine addition
   element.attributes["class"].nodeValue = "imagecentered ImageVisible"; 
   element.timer = window.setTimeout("ChangeOpacity('" + id + "',3000," + startMS + ",0,100)",1);  
}
 
// End Fade In Script
 
function onLoadTasks ()
{
   FadeIn("OJerusalem");
}
 
//]]>
</script>
 
<style type="text/css">
.ImageVisible
{
   visibility: visible;
}
.ImageNotVisible
{
   visibility: hidden;
}
</style>

--------------------

Now here's the markup code:

--------------------

<body onload="onLoadTasks()">
 
<div class="Container"> <!-- Begin First Container -->
 
   <div class="TwoColumns"> <!-- Begin Left Column Container -->
      <img id="OJerusalem" class="imagecentered ImageNotVisible" src="OJerusalem.jpg"
           style="width: 431px; height:300px; padding-top: 20px;" alt="O Jerusalem"/>
<p>Jesus looks over Jerusalem and ponders its future; based on Matt. 23:37-39; Luke 13:34-35.</p>
   </div> <!-- End Left Column Container -->

--------------------

Any help would be most appreciated. Thanks.

Ken

Tags:
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

kenmorgan wrote: This

kenmorgan wrote:

This modification seems to work most of the time with Firefox, but it doesn't work at all with IE.

Without a link to the page to see it for ourselves in action, can you describe what exactly does/doesn't work?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Hi Tyssen, I'd be glad to

Hi Tyssen,

I'd be glad to supply the link: rediscoveringthebible.com

Thanks.

Ken

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try moving the js to the end

Try moving the js to the end of the page so that the CSS that hides the image is loaded first.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Moving the JavaScript just

Moving the JavaScript just before the closing two HTML tags (which wouldn't print here) had no effect on IE. Firefox had been working the way it was--at least most of the time. For some reason, every once in a while, even Firefox gave that quick flash of the image. There was no apparent pattern when it would happen. With the JavaScript moved to the bottom, I didn't see the flash in Firefox, but then I tried it only six or seven times. Maybe Firefox wasn't "in the mood" on those occasions!

I left the JS at the bottom--that's where it is now, if you want to look at the site again.

Ken