Several Tips on Dynamic Filters
| Category | : CSS | Views | : 2902 | ||
| Version | : 2.0 | Rating | : | ||
| Type | : Text | ||||
Before we start talking about the basics of dynamic filters I may need to talk a little about scripting. Now, whenever you write a certain script you will find yourself in the need to decide between to families of programming (in some cases development) languages: BASIC and C. Sincerely, now, my personal favorite is C (and Java, since they are rather similar from many points of view), even though some people like working with BASIC as well. I will use Java with this tutorial because it is shorter and far more used than BASIC. Now, what I am about to show you is how you can trigger several transition filters (or dynamic filters as I written in the title) using a script.
<SCRIPT>
var toggle = 0;
function fader() {
mydiv.filters[0].Apply();
if (toggle) {
toggle = 0;
mydiv.style.backgroundColor=blue;}
else {
toggle = 1;
mydiv.style.backgroundColor=orange;}
mydiv.filters[0].Play();
}
</SCRIPT>
Now, of course, the difference between a JavaScript script and a BASIC script is not that massive after all. What I can complain regarding the JS script is that it inserts all over the place several semicolons and braces that are truly unnecessary. Still, what programming language you choose to build your script is totally up to your taste and knowledge if you feel more comfortable to use C-like programming languages will provide you lots of support, rather than with BASIC. The reason was stated above.
Now, look at the script if you execute it, you will see that a big large square will be fading from blue to orange (not a very good choice of colors, you can change them in your test, I just picked randomly two colors). Now, if you click it again, you will see how it fades back to blue. Who should we be thanking for this cool effect? The fade filter deserves most of the credit whenever you click the button, your browser will respond with exactly what has been assigned to the onclick attribute. In our case, a function has been assigned to the onclick attribute a function that has been named fader. This behavior is described in many programming books, and another thing that you should know about functions is that you can name them however you want. What does actually happen? The browser follows any instruction that is written in the fader function. How do you trigger the function? Take a look below:
<button onclick=fader()>Click</button>
Good luck !
More cool tech articles from other blogs.
