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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with gradual highlight script (not from dd)

    ok I made this very easy script that I will modify better 4 non IE users, but here it is

    Code:
    <script>
    
    var quikFade;
    
    function fadeIn(theId) {
    
    theobject=theId;
    
    
    document.getElementById(theId).filters.alpha.opacity+=10;
    quikFade=setInterval("fadeIn(theobject)",50);
    }
    
    function fadeOut(theId) {
    
    theobject=theId;
    
    
    document.getElementById(theId).filters.alpha.opacity-=10;
    quikFade=setInterval("fadeOut(theobject)",50);
    }
    
    </script>
    
    <body bgcolor="black">
    
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade1');" onmouseout="fadeOut('fade1');" id="fade1" style="filter:alpha(opacity=30);">
    I have the fadeIn down pat, but the fadeOut is really weird, so any smart IE users out there.... I NEED YOUR HELP!!! lol, but I dont want any really fancy stuff because Im new to the setInterval and setTimeout stuff, so plz reply
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't run the script but your fadeOut function is most likely acting weird because you are using the same global variable (quikFade) and have failed to clear the other setInterval.

    Try adding a clearInterval in your fadeOut function directly before you set the interval again and see if that helps.

    IE: clearInterval(quikFade);

    ......Willy

  • #3
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok Ill try that right now, thnx in advance (ps speedy reply lol)
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #4
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmmmmmmm..... doesnt seem to have any effect, I move my mouse off, then the image dulls a little, then a secnd later becomes 100 % opac
    strange........
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    This is a cross-browser image fader but the link of the script in that post is already broken. You can find it in this extension of that script.

  • #6
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ....huh? Im sorry but that script makes no sence (remember im new lol), cant u just build off og my script? plz
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #7
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I got it finally, but there are two problems, first, whenever I move my mouse off, it fades until it is fully transparent, and I want it to be 30% transparent, second, when I have many images in a row that do this (see code below), when I move my mouse off of one to go to the other, the image I just moved my mouse off of would stop fading away because the code says that it will stop ALL quikFade's from fading. And just to see what would happen, I changed the setInterval to setTimeout (is there really a difference?). Well, here is the code now:

    Code:
    <script>
    
    var quikFade;
    
    function fadeIn(theId) {
    
    theobject=theId;
    
    document.getElementById(theId).filters.alpha.opacity+=10;
    quikFade=setTimeout('fadeIn(theobject)',50);
    }
    function stopFade() {
    
    clearTimeout(quikFade);
    }
    function fadeOut(theId) {
    
    theobject=theId;
    
    
    document.getElementById(theId).filters.alpha.opacity-=10;
    quikFade=setTimeout('fadeOut(theobject)',50);
    }
    
    </script>
    
    <body bgcolor="black">
    
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade1');" onmouseout="stopFade();fadeOut('fade1');" id="fade1" style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade2');" onmouseout="stopFade();fadeOut('fade2');" id="fade2" style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade3');" onmouseout="stopFade();fadeOut('fade3');" id="fade3" style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade4');" onmouseout="stopFade();fadeOut('fade4');" id="fade4" style="filter:alpha(opacity=30);"><br>
    And I know I could assign a var to every single fading image, but if I can find an easier way, I'll go for it. Please Reply!!
    Last edited by DooM_MonkeY; 07-06-2004 at 05:39 PM. Reason: Fixed my problem, but now a new problem occured
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #8
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just was working on trying to get the fade out function so that it only faded until it got to 30 % opacity, I put: if(theId.filters.alpha.opacity<30)
    on the fade out, but all I get is an error

    Code:
    <script>
    
    var quikFade;
    
    function fadeIn(theId) {
    
    theobject=theId;
    document.getElementById(theId).filters.alpha.opacity+=10;
    clearTimeout(quikFade);
    quikFade=setTimeout('fadeIn(theobject)',50);
    }
    
    function fadeOut(theId) {
    
    if(theId.filters.alpha.opacity<30)
    theobject=theId;
    document.getElementById(theId).filters.alpha.opacity-=10;
    clearTimeout(quikFade);
    quikFade=setTimeout('fadeOut(theobject)',50);
    }
    
    </script>
    
    <body bgcolor="black">
    
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade1');" onmouseout="fadeOut('fade1');" id="fade1" style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade2');" onmouseout="fadeOut('fade2');" id="fade2" style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade3');" onmouseout="fadeOut('fade3');" id="fade3" style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade4');" onmouseout="fadeOut('fade4');" id="fade4" style="filter:alpha(opacity=30);"><br>
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The reason it is not working is this line:
    if(theId.filters.alpha.opacity<30)

    Should be:
    if(document.getElementById(theId).filters.alpha.opacity<30)


    I rewrote your codes without changing your code too much other than to give it some structure so it is easier to read, adding a status bar display to aide in debugging and converting all the variable to local variables other than the image id which I left global but could be made local as well.

    I commented the script to help you understand what I did:

    Code:
    <script type="text/javascript">
      function fadeIn(theId){ 
       theObj = theId; // GLOABAL VARIABLE TO HOLD IMAGE ID //;
       var image = document.getElementById(theId); // REUSABLE VARIABLE //;
           image.filters.alpha.opacity += 10; // ADD 10 TO OPACITY EACH FUNCTION CALL //;
       var quikFade = setTimeout('fadeIn(theObj)',50); // LOCAL VARIABLE USED TO CLEAR //;
        if(image.filters.alpha.opacity >= 100){ // IF OPACITY AT LEAST 100 CLEAR TIMEOUT //;
           clearTimeout(quikFade); // CLEAR TIMEOUT //;
        }  status = image.filters.alpha.opacity; // USED FOR DEBUGGING PURPOSES ONLY //;
      }
    
      function fadeOut(theId){
       theObj = theId;
       var image = document.getElementById(theId);
           image.filters.alpha.opacity -= 10;
       var quikFade = setTimeout('fadeOut(theObj)',50);
        if(image.filters.alpha.opacity <= 30){
           clearTimeout(quikFade);
        }  status = image.filters.alpha.opacity;
      }
    
    </script>
    </head>
    
    <body bgcolor="black">
    
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade1" 
    style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade2" 
    style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade3" 
    style="filter:alpha(opacity=30);"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade4" 
    style="filter:alpha(opacity=30);"><br>
    Oh, I also changed your function call to pass the image id thru the function.

    ......Willy

  • #10
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thank you very much, it works, there is just one problem, if I move my mouse straight off of one image to the other, the image I just moved my mouse off of doesnt finish fadeing out. That is the only problem I can find with your script (and a problem in mine too), but otherwise, it is a perfect script, but if you can fix that one thing, please do.

    Once again, thank you very much
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #11
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Man this opens up so many possibilities for me, thank you again, now im working on the glow properties.

    Code:
    <script type="text/javascript">
    
    var quikFade;
    
      function fadeIn(theId){ 
      
    IdObj = theId;
    document.getElementById(theId).filters.glow.strength+=1;
    document.getElementById(theId).filters.alpha.opacity+=10;
    quikFade=setTimeout('fadeIn(IdObj)',50);
    if(document.getElementById(theId).filters.alpha.opacity>=100&&document.getElementById(theId).filters.glow.strength<=13){
    clearTimeout(quikFade);
    }window.status="Opacity:" +document.getElementById(theId).filters.alpha.opacity +" Glow Strength:" +document.getElementById(theId).filters.glow.strength;
    }
    
    function fadeOut(theId){
    
    IdObj = theId;
    document.getElementById(theId).filters.glow.strength-=1;
    document.getElementById(theId).filters.alpha.opacity-=10;
    quikFade=setTimeout('fadeOut(IdObj)',50);
    if(document.getElementById(theId).filters.alpha.opacity<=30&&document.getElementById(theId).filters.glow.strength<=1){
    clearTimeout(quikFade);
    }window.status="Opacity:" +document.getElementById(theId).filters.alpha.opacity +" Glow Strength:" +document.getElementById(theId).filters.glow.strength;
    }
    </script>
    </head>
    <style>
    
    #fade1, #fade2, #fade3{filter:alpha(opacity=30) glow(color=red strength=0);}
    </style>
    
    <body bgcolor="black">
    
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade1"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade2"><br>
    <img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade3"><br>
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #12
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DooM_MonkeY
    there is just one problem, if I move my mouse straight off of one image to the other, the image I just moved my mouse off of doesnt finish fadeing out.
    theObj = theId; // GLOABAL VARIABLE TO HOLD IMAGE ID //;


    That is because the global variable theObj which holds the image id is changed to focus the new image and leaves the last one hanging.

    I was aware of this, but if you wish to write a script from scratch, you may well as well learn to debug and overcome unexpected results.

    ....Willy

    BTW: If you look in the Post A Javascript forum you will find a fader script that JAVECO posted. Take a look at that.....

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Willy Duitt
    BTW: If you look in the Post A Javascript forum you will find a fader script that JAVECO posted. Take a look at that.....
    That is exactly the link I posted here but DooM_MonkeY ignored it.

  • #14
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I'm moving on from that script right now, but since the script im working on now relates to the fading in thing I guess... I'm going to post it here so as not to take up much space..... Anyway, I'm trying to get somewhat of the effect here (click a link to see the div slide out of view, then right back again), but I need to know if I can do the same thing with this sort of script..... I've tried

    Code:
    var quikFade;
    var DivVar= new Array();
    DivVar[0]="blah";
    
    
    function SlideOut(theId,theVar){ 
      
    IdObj = theId;
    document.getElementById(theId).style.left-=1;
    
    quikFade=setTimeout('SlideOut(IdObj)',50);
    if(document.getElementById(theId).style.left>=-100){
    clearTimeout(quikFade);
    document.getElementById(theId).innerHTML=theVar;
    document.getElementById(theId).style.left+=1;
    quikFade=setTimeout('SlideOut(IdObj)',50);
    if(document.getElementById(theId).style.left<=200){
    clearTimeout(quikFade);
    }
    }
    }
    then 4 the html I have:

    Code:
    <div id="mainDiv" style="position:relative;height:100px;width:100px;border:1px solid black;">
    Foo
    </div>
    
    <br>
    
    <a href="#" onclick="SlideOut('mainDiv',DivVar[0]);">Slide to home</a>
    I keep getting the error


    Invalid Argument
    Plz help!

    Oh and ps:

    I did reply to your post glen, right here:

    Quote Originally Posted by DooM_MonkeY
    ....huh? Im sorry but that script makes no sence (remember im new lol), cant u just build off og my script? plz
    I'm sorry, but I didn't get that code, I'm trying to learn something, not copy and paste
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk

  • #15
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    should it be document.getELementById(theId).style.position.left+=1; ?

    because I already described that the position was relative in the css coding.
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    M_Mk


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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