How to control a loop?

#1
dbk

Posted 02 August 2010 - 11:59 AM

Newbie

Members
13 posts

Hi

I'm trying to make a function that increases the webkit-Opacity when the page loads.
But first problem is that the function don't overwrite the element style before the for loop is finished, and the setTimeout don't work in the loop!!

Are there any Ideas how to make this work?

<script language="JavaScript">

function fadein()

{

Val = 0.0;


    while(Val < 0.6)

    {

    document.getElementById("fadeDiv").style.webkitOpacity = Val;

    setTimeout(Val += 0.1, 1000);

    }

}

</script>

</head>


<body onload="fadein()">


    <div ID="fadeDiv" style="-webkit-opacity: 0.0; width:100%; height: 100%; background-color: red">

Welcome to my Homepage!

</div>


</body>

</html>

#2
InitVI

Posted 02 August 2010 - 12:43 PM

Newbie

Members
11 posts

I would suggest not using a while statement for your loop. I would suggest making your own loop.

Like so:

var val = 0;
function fadein(){
setTimeout("increase()", 100);
}

function increase(){
              //1 is the stopping opacity
		if(val < 1){
			val += 0.02;
			document.getElementById("fadeDiv").style.webkitOpacity = val;
			setTimeout("increase()", 100);
		}
}

I changed a the setTimeout and how much the opacity is increased. Which results in a smoother fade in.

#3
dbk

Posted 03 August 2010 - 10:08 AM

Newbie

Members
13 posts

Hi InitVI

Thank you!

I made a little adjustment to this:

<script language="JavaScript">
Opacity = 0;
function fadein(){

    if(Opacity < 0.5)
    {
        Opacity += 0.02;
        document.getElementById("fadeDiv").style.webkitOpacity = Opacity;
        setTimeout("fadein()", 20);
    }
}

But.. Why do I have to declare the variable outside the function?? Shouldn't it be possible to declare the variable when the function i called like this:

<script language="JavaScript">

function fadein(Opacity){

    if(Opacity < 0.5)
    {
        Opacity += 0.02;
        document.getElementById("fadeDiv").style.webkitOpacity = Opacity;
        setTimeout("fadein(Opacity)", 20)
    }
} 
</script>
</head>
<body onload="fadein(0)">

Why can't I make this work!! It would be easier to call the functions if they are made placed as external files!

#4
DarkLordofthePenguins

Posted 03 August 2010 - 10:54 AM

Programming Expert

Members
409 posts

Um, webKitOpacity? Most browsers just use opacity. What you used sounds like one of those things that only works in one browser.

#5
InitVI

Posted 03 August 2010 - 12:15 PM

Newbie

Members
11 posts

I agree opacity will give you a wider range of browsers, youll still have to make adjustments to get it to work in IE though.

Anyway the reason you function wont work is because setTimeout cant set your Opacity var.

So change this:

setTimeout("fadein(Opacity)", 20)

To this:

setTimeout("fadein("+Opacity+")", 20)

Hope that helps

#6
DarkLordofthePenguins

Posted 05 August 2010 - 02:10 PM

Programming Expert

Members
409 posts

Internet Explorer uses the filter property. I never got it to work, though.

#7
BlaineSch

Posted 05 August 2010 - 02:21 PM

Writes binary right handed and hex left handed

Members
2,448 posts

Why not use jQuery? Makes life simple :]

.fadeIn() – jQuery API

Google - I'm Feeling Lucky | Youtube Classes! | BlaineSch's Project Blog

Posted Image

#8
dbk

Posted 06 August 2010 - 08:54 AM

Newbie

Members
13 posts

Thanks for all the comments!

I know that there are some problems with webkit, but this little application I'm working on is only for use in chrome - and for my use only :)