SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Fade In Effect

  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fade In Effect

    I have found a great fade out fade in function that I'm trying to adapt here:
    http://www.brainerror.net/scripts_js_blendtrans.php (see fade in and out with one link)

    The javascript that runs this fade in out is:

    PHP Code:
    function opacity(idopacStartopacEndmillisec) {
        
    //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(
    opacStart>= opacEndi--) {
                
    setTimeout("changeOpac(" ",'" id "')",(timer speed));
                
    timer++;
            }
        } else if(
    opacStart opacEnd) {
            for(
    opacStart<= opacEndi++)
                {
                
    setTimeout("changeOpac(" ",'" id "')",(timer speed));
                
    timer++;
            }
        }
    }

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

    function 
    shiftOpacity(idmillisec) {
        
    //if an element is invisible, make it visible, else make it ivisible
        
    if(document.getElementById(id).style.opacity == 0) {
            
    opacity(id0100millisec);
        } else {
            
    opacity(id1000millisec);
        }

    What I need to happen is have the image hidden when the page is loaded and when the hide/show link is pressed have it fade in.

    So essentially what I'm looking for is a FADE IN and FADE OUT function rather than a FADE OUT and FADE IN function.

    Can someone please help me out with this? I can't seem to figure it out!!!!

    Thanks everyone!!!

  2. #2
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Murphey's Law!!!

    I was just working on a script like this, and came here for help, but I might be able to help you after all.

    Ok...you have two JS functions. A 'fade in' function and a 'fade out' function. You need to have a <div> layer hidden on page load, and then make it fade in (appear) on a specific action and then fade out (disappear) on another specific action.

    Firstly, you need to set the following style to your <div> layer :

    HTML Code:
    <div style="display:none ; z-index:99 ; position:absolute">
    This <div> layer will be hidden on page load.

    Off course, you might not need the 'position' or the 'z-index' styles set, depending on what you are trying to do. If you are creating a floating <div> layer on top of other layers, you need these set.

    To create an onclick action, use the following :

    HTML Code:
    <a href="#" onclick="show_div();">Click here to view the div</a>
    To make this <div> layer visible, you could use the following JS function :

    HTML Code:
    <script type="text/javascript">
    <!--
    
    function show_div()
    {
        var layer = document.getElementById('div_id');
        
        layer.style.display = "block";
    }
    
    -->
    </script>
    You might not want to use the function below since you already have the fade in function which will do that for you. Eventually your fade in function should set the display style to "block" on the opacity that you want it.

    You can always call your fade in function from the 'show_div()' function.

    PS : I don't really know much about JS, but I'm sure this will help. I think you only needed to know the 'style="display:none"' part, right?

    I'm confused now. Please post more questions so that I can be sure of what you really need.

    All the best,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  3. #3
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Anyhow...in the process I figured my problem as well.

    I have a script which makes a floating <div> layer appear with an onclick handler, and at the same time fades the rest of the page in the background to a 50% opacity. The <div> layer has a 'close' link on it and when this link is clicked, the <div> disappears, and the rest of the page in the background fades back to 100% opacity.

    If you want this script, PM me and I'll give you the source.

    It's crossbrowser compatible. Works with FF, IE and Opera.

    Best,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Would like a copy of that script.. to fade / unfade a div

    Could I get a copy of that Script? I need to do the same thing.

  5. #5
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AboutMeadows.com View Post
    Could I get a copy of that Script? I need to do the same thing.
    Have you looked into Scriptaculous?
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I have looked at Scriptaculous. It's to big and bulky. I need some code that is very small and lightweight.

  7. #7
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AboutMeadows.com View Post
    Yes I have looked at Scriptaculous. It's to big and bulky. I need some code that is very small and lightweight.
    jQuery is lightweight.
    It's about 20Kb I think.
    Compressed, it would be even less.
    With jQuery, you can also use Thickbox.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software


Bookmarks

Posting Permissions

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