Javascript Opacity Onmouseover help.

[Tyrial101]

Hello,

I want to make a div appear (fade in would be more appropriate) with javascript onmouseover of a link.

<div id="mainContent">
		<div id="mainNav">
			<ul class="ULnav">
				<li class="LInav"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li>
				<li class="LInav"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a></li>
				<li class="LInav"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Research</a></li><!-- Link I want to have the mouseover command on-->
				<li class="LInav"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Links</a></li>
				<li class="LInav"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Site Info</a></li>
				<li class="LInav"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact</a></li>
			</ul>	

		</div>	
                  <div id="researchNav">
                   <!--this is the div I want to fade in-->
                  </div>
</div>

I tried looking the script up online, but I never could find one that allowed an opacity = 100% onmouseover of a different object. Any ideas?

I figure I want 0 to 100 opacity with a speed of 6. I also want it to be compliant in as many browsers as possible.

[Arbitrator]

You need to set the CSS3 opacity property for compliant browsers and the (Microsoft proprietary) filter: alpha(opacity=###) declaration for Internet Explorer. You can set a time interval between each fade by using JavaScript setInterval and clearInterval. You can get the specific effect you want by attaching a mouse‐over event to the hyperlink and targeting the div element using getElementById().

By the way, I don’t see a need for all of those no‐break spaces. Why not just use CSS margins or padding for that?

[Tyrial101]

For some reason the browser aren't using the margin for the way I intend.

I've tried using the margin-left: 10px; on the LInav class, but it doesn't seem to work right. The only way I can indent the text the way I want is with those breaks. I am planning on looking into it further, but for now, I want to get the overall layout for this site done, before getting into the technical fixes.

Now, I am very new to Javascript.

I've only ever used it for browser and screen resolution detection...

How exactly would I write that code?

function RSnav() {
getElementById('researchNav').style:MozOpacity=100%';
getElementById('researchNav').style.filter:alphaOpacity=100%';
}
setInterval("RSnav()", 10);
clearInterval("RSnav()", 10);

I know I am doing at least one thing wrong. Any help is appreciated

Thanks for the help so far.

[Arbitrator]

The proprietary CSS -moz-opacity property is obsolete; use the CSS3 opacity property understood by both Mozilla and Opera. The JavaScript is also contains numerous errors.

function RSnav() {
  document.getElementById('researchNav').style.opacity = "1";
  document.getElementById('researchNav').style.filter = "alpha(opacity=100)";
  }

window.setInterval("RSnav()", 10);
window.clearInterval("RSnav()", 10);

With the orange code, you first need something to trigger the interval timer; that would be the mouse‐over in this case. Then you need to set up some sort of counter‐event that calls clearInterval() when setInterval() is done. That would probably be in the function you call with setInterval() and would cancel out the interval counter when the opacity reaches a certain threshold (100 percent).

[ikilledsanta]

Hey, Tyrial, if you ever get that working, would you mind pasting all the javascript involved? I want to use that for my site, if I can get it to work.

EDIT:: Well, I looked around for a script that would do this. I found quite a few that would do the trick for Tyrial, like this one:
http://www.brainerror.net/scripts_js_blendtrans.php

But, I my div has multiple possibilities. For instance: By clicking link 1, "Donate Online" comes up. By clinking link 2, "Donate by Phone" comes up. I want the div to first fade out, show the content, and then fade back in (in that order, so that it doesn't blink). I tried editing the javascript included at brainerror, but I couldn't get it to work. Please help! I have 1 page left on my project (the home page), after I fix this last page.

[Tyrial101]

Sure thing.

[Tyrial101]

Originally Posted by ikilledsanta

Hey, Tyrial, if you ever get that working, would
EDIT:: Well, I looked around for a script that would do this. I found quite a few that would do the trick for Tyrial, like this one:
http://www.brainerror.net/scripts_js_blendtrans.php

This does help with the fade, and I thank you, but I am realizing that I do need to direct the script at the researchNav div, and I am still confused at how I am to do that.

I've googled it for about 2 days now, and nothing that I can really understand, seeing as I am very new to JS.

Any more help would be appreciated

[ikilledsanta]

Here is the link code you would need to show the div (you can edit the 500 number...lower will make it faster, higher will make it shorter):

<a href="javascript:opacity('researchNav', 0, 100, 500)">Show</a>

And here is the corresponding javascript:

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

[Tyrial101]

More help needed.

Because the above script does not work well, (it blinks and goes out)

I tried writing my own, simpler script.

function opac(opac, id) {
	var obj = document.getElementById(id).style; 
	obj.opacity = (opac / 100);
	obj.-moz-Opacity = (opac / 100);
	obj.KhtmlOpacity = (opac / 100);
	obj.filter = "alpha(opacity=" + opac + ")";

Then I just added opacity(100, 'researchNav') into a onmouseover, and opacity(0, 'researchNav') in onmouseout. For some reason this doesn't work. ANy ideas?

[Arbitrator]

Originally Posted by Tyrial101

Then I just added opacity(100, 'researchNav') into a onmouseover, and opacity(0, 'researchNav') in onmouseout. For some reason this doesn't work. ANy ideas?

Try moving the style portion of document.getElementById(id).style down to the next four lines. Also make sure that you close the function. Example:

Edit: Okay, the first of the above suggestions may be incorrect if that two‐posts‐above script works. I’ve just never done it that way before.

function opac(opac, id) {
  var obj = document.getElementById(id); 
  obj.style.opacity = (opac / 100);
  obj.style.-moz-Opacity = (opac / 100);
  obj.style.KhtmlOpacity = (opac / 100);
  obj.style.filter = "alpha(opacity=" + opac + ")";
  }

Note also that you need to separate those using some sort of if statement so that browsers that don’t recognize a given property don’t read that code and throw errors. For example, Internet Explorer probably won’t understand what “KhtmlOpacity” means, as a result will throw an error, and finally will stop scripting before it gets to the piece of code that it needs.

Edit: Same thing as the previous edit regarding the above paragraph if the browsers have some kind of JavaScript error handling.

[Tyrial101]

nEVER mind. I got it working. My code was correct, but I forgot the quotes in on 'researchNav' in my actual document.

Thanks for the help guys. I appreciate it alot