2 Replies - 2430 Views - Last Post: 17 August 2007 - 04:14 AM

#1 eddieboy665  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Another javascript fading opacity problem

Posted 16 August 2007 - 03:25 PM

Hi again,

Have used these forums a while back with a similar problem that is now sorted so was hoping I could get some help with this one:

- The Idea: post.hml is soon to become fully functional using php and AJAX to make a post in a forum I'm constructing. Currently some javascript and the layout is there. When you click reply to post a hidden div containing a form appears at the bottom of the page and hides the bottom reply to post button. Once you get through some basic javascript validation and click 'Post!' I have set up a transparent div to layer over the top saying loading and a animated gif. This will be used as to pass time while (when implemented) the AJAX does some work. What I was trying to do was make the div fade in as I have done for the nav drop boxes.

- The javascript function that is dodgy:
// Function and variables for loading div to fade in
var startOpacity = 0;
var endOpacity = 0.8;
var increment = 0.1;

function fadeIn(object, startOpacity){
	while (startOpacity < endOpacity){
		if (isIE){object.style.filter= "alpha(opacity=" + startOpacity*100 + ")";}
		else {object.style.opacity= startOpacity;}
		startOpacity += increment;
		xb.setTimeout (fadeIn, 500, [object, startOpacity]);
	}
}



(The set timeout function is special because for the nav I needed to send multiple args and found this altered function to sort out the problem - it shouldn't be the problem though)

- The error Currently it just appears and there is no fading at all. I have tried with longer timeouts and smaller increments with no sucess. The only thing that makes it work is putting an alert in the loop and you can then see it increment! Whats going wrong?? Anyone know?

- Useful links if you are interested or need more info:
/javascript/post.js
post.hml
/global.js <- Contains the set timeout function
/stylesheets/post.css

And another thing but not too worried about
Why is it the the top 'post reply' is only sometimes a link?? You can refresh the page and sometimes you can click, and sometimes you can't (this is the case in mozilla, IE7 and Safari)?!

Thanks in advance,
Ed

****** EDIT *******
Just realised I hadn't checked it in IE! Big mistake! IE7 isn't too bad but IE6 is. The problem above doesn't even display the transapent layer but gives the error:
'Could not get the display property' - is it the cause of the error or another problem?
I'll have to create some more conditional stylesheets for IE tomorrow. But would still love any suggestions to get it working in good browsers that conform to standards!

This post has been edited by eddieboy665: 16 August 2007 - 04:06 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Another javascript fading opacity problem

#2 serializer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 25-June 07

Re: Another javascript fading opacity problem

Posted 16 August 2007 - 04:40 PM

You misunderstand while loops, and what the settimeout function does.

A while loop means: repeat this block of code, so long as my condition is true. So this code:

	while (startOpacity < endOpacity){
		if (isIE){object.style.filter= "alpha(opacity=" + startOpacity*100 + ")";}
		else {object.style.opacity= startOpacity;}
		startOpacity += increment;
		xb.setTimeout (fadeIn, 500, [object, startOpacity]);
	}



Will keep repeating, as quickly as the script processor can manage, until startOpacity >= endOpacity.

The setTimeOut line registers a ticket with the browser to run the "fadeIn" function, in half a second's time.

It doesn't matter that this code is in fadeIn; the runtime will register the ticket and carry immediately on with the while loop until the first function has finished. setTimeOut *doesn't* cause the current code execution to pause. This means that the object is actually fading in, just so quickly as to appear instant.

Once that loop has finished running, the entire function will be called again in 500ms because of the timeout you set. Except, because it was setting timeouts at every step of the fadein and so the whole process will be called again multiple times, each time setting more timeouts... this function could be getting called a whole load of times, this is something you have to watch out for with recursive coding (functions that call themselves ... )

What I'm saying is, and spookily I said this exact same thing in a different room earlier today on a completely different topic; you need to replace the "while" with an "if".

--serializer
Was This Post Helpful? 0
  • +
  • -

#3 eddieboy665  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Re: Another javascript fading opacity problem

Posted 17 August 2007 - 04:14 AM

Ah! Thank you, that was me being stupid! I had started by forgetting to use the set timeout function and then added it in at the end after remembering but obviously forgetting about the while! Used an if for the navigation but forgot here.

Cheers,
Ed
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1