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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts

    New Opacity Question

    I want to amke something fade out, if and only if it is already set at 100% opacity.

    I need to make a function that will allow me to do this.

    Here is my current code
    Code:
    //Time=millisecond Start and End = Amount of Opac to start with. Id = which div to affect
    function opacity(id, Start, End, time) {
        //frame speed here
        var speed = Math.round(time / 100);
        var timer = 0;
    
        //
        if(Start > End) {
            for(i = Start; i >= End; i--) {
                setTimeout("Opac(" + i + ",'" + id + "')",(timer * speed));
                timer++;
            }
        } else if(Start < End) {
            for(i = Start; i <= End; i++)
                {
                setTimeout("Opac(" + i + ",'" + id + "')",(timer * speed));
                timer++;
            }
        }
    }
    
    
       
    function Opac(opacity, id) {
    	var obj = document.getElementById(id).style; 
    	obj.opacity = (opacity / 100);
    	obj.MozOpacity = (opacity / 100);
    	obj.KhtmlOpacity = (opacity / 100);
    	obj.filter = "alpha(opacity=" + opacity + ")";
    }

    How would I write a function that would allow me to fade out if opacity was already 100, otherwise it does nothing?

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was wondering the exact same thing a few days ago. You have to determine whether an element has opacity 100%, but also have to think about whether it doesn't have an opacity setting and is still displayed. There might be an easier way, but this is the function that determines if an object should be faded:

    Code:
    function setToOpaque (id) {
        var object = document.getElementById(id).style;
        var hasVisibility = new Boolean(getStyleById(id,'visibility'));
        var setToVisible = new Boolean(getStyleById(id,'visibility') == 'visible');
        var hasDisplay = new Boolean(getStyleById(id,'display'));
        var setToDisplayed = new Boolean(getStyleById(id,'display') != 'none');
        var isOpaque = new Boolean();
        if (hasDisplay.valueOf() && hasVisibility.valueOf()) return (setToVisible.valueOf() && setToDisplayed.valueOf());
        if (!hasDisplay.valueOf() && !hasVisibility.valueOf()) return true;
        if (hasDisplay.valueOf() && !hasVisibility.valueOf()) return setToDisplayed.valueOf();
        if (!hasDisplay.valueOf() && hasVisibility.valueOf()) return setToVisible.valueOf();
    }
    
    function hasOpacity100 (id) {
       var object = document.getElementById(id).style;
       if ((object.opacity==1 || object.filter=='alpha(opacity=100)' || object.MozOpacity==1 || object.KhtmlOpacity==1) && (setToOpaque(id))
    .........
    }
    Notes:
    MozOpacity is no longer necessary; it only ensure older versions of Mozilla work.
    GetStyleById is a function that searches inline CSS as well as global settings. See http://developer.apple.com/internet/...nt/styles.html
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I need to use MozOpacity, because I need all commonly used browsers to have the ability to view my Page.

    This is for a competition.

    I have it almost where I want.

    Code:
    function fade(id) {
    	var obj = document.getElementById(id).style;
    	if (obj.opacity>.99 || obj.filter>'alpha(opacity=99)' || obj.MozOpacity>.99 || obj.KhtmlOpacity>.99) {
    opacity(id, 100, 0, 500)
    	}
       else {
    opacity(id, 1, 0, 500)
    	}
    }
    Whenever I start the function fade() my opacity instantly jumps to 100 before the opacity decrease. Is there a way that I can start the decrease from the current opacity.

    What would I use to get the current opacity style?

    I think this may have been what you were doing tipper, but I am not sure, as I don't completely understand your code. (Not saying its bad, I'm just in experienced.

  • #4
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The flicker that you're talking about is a common problem when dealing with opacity issues. Have you read this page?

    http://www.brainerror.net/scripts_js_blendtrans.php

    It has a lot of great info and solved my opacity issues on my own site. There are several places where it mentions ways to prevent the flicker that you mention. It also describes how to change opacity from any number to any other number. Take a look, I think it will help.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."


  •  

    Posting Permissions

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