You learned about using WB browser code with timers and properties to achieve “eye candy” type of effects without having to know JavaScript in the CURE Effect Article. Today we are going to using some of those technique plus a few new items to achieve the Running Doctor that you can see on theTaxCure.com’s Under Construction Page.

It makes me a little sad that one of the features I had the most fun creating and I think is “cool”, our visitors are never suppose to really see. As we pre-launched our site we didn’t want to create the same old boring under construction page that everyone has, and we want to capture the email address of early visitors that are interested in the service so we can let them know when the site is up and fully running. theTaxCure.com’s Under Construction Page is what we came up with.

If you have a large enough screen resolution you will see the doctor starts to fade when he gets to the edge of the page, and completely disappears as his backend crosses the edge. The total code to achieve this was 10 lines!

Page Setup

First is the page setup, we are using the new V17 zoning for positioning and we are targeting 1280 x 1024, but 1024×768 as the minimum resolution. We have the page set to center in the browser and use a background graphic that gives a slight parchment paper look to the “white space” on the sides of the page. The actual width of the page is 802 pixels

The Doctor

The doctor is a 300 x 300 pixel image control that starts out at position 457 x 412.

Since the doctor overlays other controls and you will be moving him on the screen the “The control can be overlaid” check box must be on. Or as you learned in the CURE article, “the make it work check box”.

On to the Code

In the Onload browser code you will find the following line of code:

This starts a timer function, that will call the MoveTheDoc browser procedure ever 1/100 of a second, and the indentifier assigned to the timer is be stored in the local variable Doctimer.

And the full code, of the MoveTheDoc procedure is below. As promised a total of 10 lines of code!

PROCEDURE MoveTheDoc()
IF IMG_TheDoctor..X < CELL_MDL_Footer..X -300 THEN
	IMG_TheDoctor..Visible = False
	EndTimer(Doctimer)
END
IF IMG_TheDoctor..X < CELL_MDL_Footer..X  THEN
	IMG_TheDoctor..Opacity = 100 - ((CELL_MDL_Footer..X - IMG_TheDoctor..X)/3)
END
IMG_TheDoctor..X = IMG_TheDoctor..X - 2

So what the heck is that code doing?

Lets step through the code from the bottom up. IMG_TheDoctor as I am sure you have guessed is the image control holding the doctor. And the ..X property tell you the current horizontal position of the control. That line of code is decreasing the ..X property of the doctor by 2 pixels every time it runs, move the doctor two pixels to the left. The doctor starts 457 pixels from the edge of the page and the procedure runs once ever 1/100th of a second. So that mean the leading edge of the doctor takes 2.28 seconds to reach the edge of the page.

The Cell_MDL_Footer control is a cell control at the bottom of the page that is the full width of the page, so its ..X property tells you where the “edge” of the page is. Note this is not “0”. It is the edge of the defined page so its value is relative to the resolution of the visitors monitor, and makes the rest of the logic resolution independent.

So relatively speaking if the ..X of the footer cell were “0” the ..X of the doctor would be 457 on the first execution of the procedure. Again those values will be different based on the resolution the page is being displayed at, but regardless the doctor starts out 457 pixels from the edge of the page.

What the IF statement is doing is one the leading edge of the doctor reaches the edge of the page, the additional line of code begins being executed. The ..Opacity property controls the transparency of an object, 100 being solid. Since this code doesn’t begin firing until the leading edge of the doctor reaches the edge of the page, you know that it will take 300 pixels for the doctor to fully leave the page. So by taking the delta of the ..X property of the Footer and the doctor you will get a value that starts at 0 and increase to a maximum of 300. Dividing that by 3 gives you a perfect 100 steps of transparency, to the doctor starts solid, once he hits the edge of the page, he starts fading and right as completely cross the threshold he will be completely transparent.

That first IF statement which simple checks to see if the doctor has fully left the page, meaning it is 300 pixels less than the edge. Once it has it makes the doctor invisible, belts and suspenders never let a guy down! And issue the EndTimer function using the variable created in the onload so that the procedure will stop running as there is nothing more for it to do.

Once you see all 10 lines of code in all their glory, its a little anticlimactic compared to the effect, isn’t it? That is the beauty of WebDev taking something that would have been complication and wordy (at least for me) to do in JavaScript and making it possible in a language that you already know!

Note: There is a webinar on wxlive.us that goes with this article.

More to Come!

Next time we will combine everything you learned from the CURE effect, and the Running Doctor, to create timed fade-in and fade-out photo panels like you see at our “We Know Why” page.

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

 

• WEBDEV