increments?

@learningJavaSOct 05.2005

Hi,

I am trying to figure out a script that changes opacity of something in css over time. So for every minute the opacity would get either lighter or darker depending on the time of day.

How would you creat a script that did this? What handlers would I use?

I think I understand that I need to creat a math problem that gets the time and then turns it into a number that will then get applied to the css.

I am not sure how to set up this kind of math problem yet since I am still learning this.

But even then after the math problem has been figured out, how would you change the css? Would you do a document.write or something?

Thank you for your help.

to post a comment

JavaScript

@KorOct 05.2005 — #1.

Use Date object to set the time limits

see:

http://www.tutorialized.com/tutorial/JavaScript-Date-object/5964

2.

Opacity can be dynamically changed, but you must take care that IE and Mozilla have different methods to do that

ex: ([B]element[/B] must be asign by reference -id, tag, index, name...)

[code=php]
 var op=5 //give here values between 0 and 10
 if(window.sidebar){//Mozilla
 element.style.MozOpacity=(op!=10)?'0.'+op:'1';//Moz gets value from 0 to 1
 }
 else{//Internet Explorer
 element.style.filter='alpha(opacity='+(op*10)+')';//IE gets values from 0 to 100
 }
 [/code]

The above code will return only 11 degrees of opacity, but I guess that is enough

@konithomimoOct 05.2005 — #Simply take in the time in terms of hours and minutes, set your max and min opacity and then decide what times you want it to switch from increasing to decreasing and vice versa.

Below is some basic code to start you off. All you need to do is insert the part for the opacity.

<i>
 </i>function opacitySwitch() {
 
 var increase_decrease=1; //increasing
 var now=new Date();
 var hour=now.getHours();
 var mins=now.getMinutes();
 var secs=now.getSeconds();
 
 if ((hour&lt;=6) &amp;&amp; (secs == 0)) ))//runs only when minute changes
 {increase_decrease=-1;//decrease
 opacitySwitch2(increase_decrease);
 }
 else if ((hour&lt;=16) &amp;&amp; (secs == 0))))//runs only when minute changes
 {increase_decrease=1;//increase
 opacitySwitch2(increase_decrease);
 }
 else if ((hour&lt;=24) &amp;&amp; (secs == 0))//runs only when minute changes
 {increase_decrease=-1;//decrease
 opacitySwitch2(increase_decrease);
 }
 
 else
 {
 opacitySwitch();//keep loop running when minute has not passed
 }
 
 }
 
 
 function opacitySwitch2(i_d) {
 
 var max_Opac=70;
 var min_Opac=20;
 var old
 
 if (i_d&lt;0) //decrease
 {
 
 //make opacity decrease by a slight fraction
 
 opacitySwitch();//makes continuous loop that runs as long as page is loaded
 }
 else //increase
 {
 
 //make opacity increase by a slight fraction
 
 opacitySwitch();//makes continuous loop that runs as long as page is loaded
 }
 
 }
 // --&gt;
 &lt;/script&gt;

@learningJavaSauthorOct 05.2005 — #Hi,

Thank you guys so much for your information. I will see how it turns out. Thank you for helping me.

Best regards.

increments?

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

increments?

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴