For one of my clients, i had to clean up some mess which was done by another college. The web site has a registration form and a login form which is both in the same screen. This makes the screen look too big and too complicated. There were also some fields and forms which are at wish if you only choose specific options.
So i decided to make the form look smaller. I wanted to hide some fields until they are not checked or used. I stared to program at 21:40.
1. Scenario 21:50 (after some cigarets and jagermeister)
I have some background experience with http://mootools.net and http://script.aculo.us. Because I allready use scriptticolumous in the web site i decided to use scriptaulimoumus but I still don’t know how to spell it or read (always have to search on google.com that he corrects my misspelling).
After like an half an hour reading i tried to use the toggle function. And some code which i would write would look like:
-
<table width="100%" border="0" cellspacing="0" cellpadding="0">
-
</tr>
-
</div></td>
-
</tr>
-
</tr>
-
</table>
-
</form>
I think this is pretty straight forward. What it does, on the beginning the checkbox is not checked and the div is not shown so if you would click on the checkbox it would be checked and the layer would be shown. Basiclly it works, if you are smart and with no adrenalin and no stress. But for me no way, as soon as i see something to click i would click on it like 5 billion times a second to make it crash or to relax. So after clicking a few million times i saw that the checkbox was checked but the div was not shown and some more million clicks the checkbox was not checked and the div was shown. :-( no shit.
2. Scenario 22:30(some more cigarets and …)
What now? I decided to handle the toggle function on my own. Now the new code:
-
<script type="text/javascript">
-
function toggleSomeEffect() {
-
if($(‘checkMeToSeHiddenFields’).checked == true) { // the checkbox to check
-
if($(‘content_to_show’).visible()) { // if the div is visible do nothing
-
-
} else { // else show the div.
-
Effect.SlideDown(‘content_to_show’);
-
}
-
} else { // not checked so dont show it
-
if($(‘content_to_show’).visible()) { // if div visible hide it
-
Effect.SlideUp(‘content_to_show’);
-
}
-
}
-
}
-
</script>
-
<table width="100%" border="0" cellspacing="0" cellpadding="0">
-
</tr>
-
</div></td>
-
</tr>
-
</tr>
-
</table>
-
</form>
I thought this might work and started to click on it 5 billion times a second same thing they are not syncronized as they should be. :-( kiss my ass.
3. Scenario 11:50 (more smoke)
There are some more smaller in scenarios in the story but will just skip them not make it so exciting huh. So i decided to make a fuse which would tell me if everything is allready done. So this is the last one.
I started to read the callback functions and found beforeStart and afterFinish. So would before start make a variable true and after finish make the variable false. In that way i would know when i could make another Effect call. in the afterFinish callback function i would also implement a checking for the checkbox which would tell me if it is checked or not and show the div or not. In this way they will be always syncronized.
-
<script type="text/javascript">
-
var finito = true; // our fuse variable
-
-
function beforeStartCallMe(obj) { // this gives you the div object obj.
-
finito = false; // we started an Effect.
-
}
-
-
function afterFinishCallMe(obj) {
-
finito = true; // the effect is finished.
-
if($(‘checkMeToSeHiddenFields’).checked == true) { // if checked.
-
if($(‘content_to_show’).visible() == false) { // and div not visible
-
Effect.SlideDown(‘content_to_show’, {beforeStart: beforeStartCallMe, afterFinish: afterFinishCallMe});
-
}
-
} else {
-
if($(‘content_to_show’).visible()) { // if visible div but not checked checkbox
-
Effect.SlideUp(‘content_to_show’, {beforeStart:beforeStartCallMe, afterFinish: afterFinishCallMe});
-
}
-
}
-
}
-
-
function toggleSomeEffect() {
-
if($(‘checkMeToSeHiddenFields’).checked == true) {
-
if($(‘content_to_show’).visible()) {
-
} else {
-
if(finito) {
-
Effect.SlideDown(‘content_to_show’, {beforeStart: beforeStartCallMe, afterFinish: afterFinishCallMe});
-
}
-
}
-
} else {
-
if($(‘content_to_show’).visible() && finito) {
-
Effect.SlideUp(‘content_to_show’, {beforeStart: beforeStartCallMe, afterFinish: afterFinishCallMe});
-
}
-
}
-
}
-
</script>
-
<table width="100%" border="0" cellspacing="0" cellpadding="0">
-
</tr>
-
</div></td>
-
</tr>
-
</tr>
-
</table>
-
</form>
Now this it. The time is 3:00 i am half drunk but the thing work. I does not mess up the screen and they stay syncronized.
Some about me, i am not a javascript programmer and as a programmer I suck. There are for sure some shorter ways to to this, feel free to send them to me i will publish them and learn from them. I go sleep. :-) damn I am good.
Recent Comments