Question

I’m trying to use javascript to code up a dynamic form, where elements are shown or hidden based on whether or not checkboxes are selected.

For the most part, it works okay. I defined methods that read the value of the checkbox, and rearrange the page accordingly, and then set them to the checkboxes’ onclick methods. I then also set them up to run on document loading once so that the page renders correctly on refresh by the user, with code like this Event.observe(window, 'load', manageCheckbox1); (this uses the Prototype library to set it to run on loading; I’m not really sure why this is better than just a raw call to the function placed in the html after all relevant elements but this is how I’ve seen others do it).

However, the trouble with this approach is that the page is visible for a split second on load before the javascript is run, and then all the elements jump as the javascript inserts or removes elements.

Is there a better way to do this to avoid that unpleasant jumping effect?

Answer 1

make your form invisible through a css rule and use the prototype library to set it to visible after you have re-arranged them through you function ..

so your form would be something like

<form ...... class="just_loading">

you css should have

.just_loading{display:none;}

and in your manageCheckbox1 function add at the end

$$('.just_loading').removeClassName('just_loading');

update
use the following to create the css rule if you want the page to also work without javascript ..

<script type="text/javascript">
  document.write( '<style type="text/css">.just_loading{display:none;}</style>' );
</script>

this way if javascript is disabled the rule that hides the form will not be created at all..