Help with Fading Text and Jumping Text

[Strangeplant]

Script: Fading Text: Textual Tool Tip II (Fade into view)
http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

I need help with a few very strange (to me) problems. Please take a look at the messed-up incomplete demo at: http://earth.engr.ccny.cuny.edu/noaa...nt/Earthy.html

The idea was to use random background images (I have only one loaded right now) and sometimes even that background comes up blank once in a while. The real problem is that the text jumps around so that the mouseover is hard to do. I'd like to have the left text in a fixed position and the top of the right text always in the same position too. I have tried and tried but cannot control it. I apparently need the image to be full size because every monitor is a different size, and also, the available screen size is different for users who have various toolbars added to their browser window. I suppose that the jumping could be controlled if I could get the background image into the div needed for the fading text, but I can't do that either. (I guess I've just been ignorant for a few weeks Oh, BTW, of course the script worked perfectly until I added the background image.

Last thing, I can't find suitable colors for the fader, but I think I should have a final mouseover color of white in the fader script. In my mind the fader would ideally fade from no text (showing the background) to white. I've tried fading transparancies but can't get that to work in this script. Please give me a clue or two to get me back on track. Just a little frustrated at my inability to fix this. Thanks for any advice.

[Twey]

May I suggest this script of mine instead? It's a little more complex, but it uses opacity rather than simply fading to different colours, so it will work OK with your background. It shouldn't be difficult to modify your page to use it.

The occasional blank background is due to this:

x = Math.floor(Math.random() * 12.00)

You've multiplied Math.random() by twelve, so the outcome could be anything from 0 to 11. However, you haven't taken 11 into account. I'd write this function like so:

function joke()
{
	var bgs = new Array(
		"url(earth_terminator.jpg) 40%",
		"url(something_else.jpg) 40%",
		"..."
	);
	document.body.style.background = bgs[Math.floor(Math.random() * bgs.length)];
}

This allows you to have as many or as few backgrounds in the array as you like, without needing to edit the rest of the code, and totally eliminates the chance of forgetting to deal with a possible case.

[Strangeplant]

tWEY, Thanks for the script. It looks to be exactly what I need. But the first question concerns your js note of:

FadeObject.fadeThreads:
An array of all the fadable objects.

********************
***** WARNING: *****
********************
IF THE OBJECTS AREN'T ALL IN HERE, OR AREN'T IN THE CORRECT
POSITIONS ACCORDING TO THEIR IDs, THE SCRIPT WILL NOT WORK.

Well, I was thinking of using something like this:

var inst = new array()
inst[0] = "<small><b>NOAA - CREST</b><br><br>CREST is a collaboration among institutions to educate and train students in the field of environmental remote sensing by conducting research consistent with NOAA\'s Science Mission of Environmental Assessment, Prediction and Stewardship by bringing together:<p><li>The City University of New York campuses:<ul><li>The City College of New York</li><li>Lehman College</li><li>Bronx Community College</li></ul></li></p><p><li>also in cooperation with<ul><li>Hampton University</li><li>University of Puerto Rico at Mayaguez</li><li>Bowie State University</li><li>University of Maryland, Baltimore County</li><li>Columbia University</li></ul></li></p><p>CREST forms a broad-based research team in remote sensing, with research applied in Earth Atmospheric, Environmental and Marine Sciences. </small>"

and then the call as:

<div id="scriptmenu" style="line-height: 20px; vertical-align: top;"><strong><br>
<A href="./noaa" onMouseOver="FadableObject('document.write.inst[0]', '1', '10', '0', '99', 'false', 'false')" onMouseOut="FadableObject('document.write.inst[0]', '3', '10', '30', '99', 'true', 'true')">NOAA - CREST</A>
<br><br>

But it occurs to me that FadableObject() needs to be called during onload. And I havent given the object an id..... I have it wrong, don't I?

I would have it easy if I were usisng img's, but I'm not. Do I have any of it right?

[Twey]

I have it wrong, don't I?

Yes.
To start with, give your fading objects IDs. There's no need to use Javascript to store them. Like so:

<p id="inst0"><small><b>NOAA - CREST</b><br><br>CREST is a collaboration among institutions to educate and train students in the field of environmental remote sensing by conducting research consistent with NOAA\'s Science Mission of Environmental Assessment, Prediction and Stewardship by bringing together:<p><li>The City University of New York campuses:<ul><li>The City College of New York</li><li>Lehman College</li><li>Bronx Community College</li></ul></li></p><p><li>also in cooperation with<ul><li>Hampton University</li><li>University of Puerto Rico at Mayaguez</li><li>Bowie State University</li><li>University of Maryland, Baltimore County</li><li>Columbia University</li></ul></li></p><p>CREST forms a broad-based research team in remote sensing, with research applied in Earth Atmospheric, Environmental and Marine Sciences. </small></p>

Then, for your menu, we'll want to define a new function to fade out all the old ones, and set up all the initialization stuff:

<script type="text/javascript" src="FadableObject.js"></script>
<script type="text/javascript">
function hideAllItems() {
  for(var i=0;i<FadableObject.fadeThreads.length;i++)
    FadableObject.fadeThreads[i].fadeOut();
}

onload = function() {
  FadableObject.init();
  var c;
  for(var i=0;c=document.getElementById("inst" + i);i++)
    new FadableObject(c, 3, 10, 0, 99, true, false);
}
</script>

<div id="scriptmenu" style="line-height: 20px; vertical-align: top;"><strong><br>
<a href="noaa" onmouseover="hideAllItems();document.getElementById('inst0').fadeThread.fadeIn();" onmouseout="document.getElementById('inst0').fadeThread.fadeOut();">NOAA - CREST</a>
<br><br>

Without any of the green bits, the code will function as I think you were trying to get it to in your attempt above. If you add in the green bits and remove the red bit, the user won't need to keep his/her mouse over the item for the text to be shown.

One day someone colour-blind is going to ask for help, and then we'll be stuck. Ah well.

[Strangeplant]

Twey, I did all that and put it up on the web at the same link. However, transparency doesn't work, and maybe I missed something. Tomorrow I'll take another look at it.

But one thing: All of the paragraphs do show up sequentially because they are all paragraphs and not dynamically written to the document. I can have only one, the one selected from the link onMouseover. The others can't show until they are replaced by the onMouseover event. Hummmmm.

Could you take another look when you have a moment, please? Thanks.