Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript Opacity Onmouseover help.

    Hello,

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

    Code:
    <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.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    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?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?


    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.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    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.

    Code:
    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).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Last edited by ikilledsanta; 12-28-2006 at 08:03 AM.

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sure thing.

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ikilledsanta View Post
    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

  • #8
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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):
    Code:
    <a href="javascript:opacity('researchNav', 0, 100, 500)">Show</a>
    And here is the corresponding javascript:
    Code:
    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 + ")";
    }

  • #9
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    More help needed.

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

    I tried writing my own, simpler script.

    Code:
    
    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?

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Quote Originally Posted by Tyrial101 View Post
    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.

    Code:
    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.
    Last edited by Arbitrator; 12-29-2006 at 03:33 AM. Reason: Clarification.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •