You may have noticed while working through the examples in this chapter that you usually see the layout occur as the page loads; for example, you might see ordinary text HTML representing some of the layout content, and then all of a sudden it magically transforms into this great-looking layout. While not totally unacceptable, you will probably not want to see the rendering take place in many situations.
A common technique for working around the situation is to
initially set the body of the page to be hidden, and then when the
page finishes loading, make it visible all at one time. Accomplishing
this technique is quite simple, and you merely have to provide a style
(or class) indicating that the body of the page should be hidden, like
so: <body
style="visibility:hidden;"> should do the trick. Just
remember to add the corresponding call to make it visible at the
desired time. Assuming you've made the entire body hidden, adding a
dojo.style(dojo.body( ), "visibility",
"visible") to a dojo.addOnLoad displays the page's content.
Any callback could be used in place of page load if for some reason
you wanted to delay showing the page until some arbitrary event
occurred (like an asynchronous callback that provides data for a
custom widget, perhaps).
Tip
Recall that the difference between the CSS styles of
visibility and display has to do with taking up space on the screen.
In general, nodes styled with visibility:hidden are hidden from display
but still take up space; nodes styled with display:none would not be visible and
would take up no spaceâresulting in a noticeable shift of content
when the display is changed to
display:block.
One caveat that should be noted, however, is that layout
containers do not always respond well when they are initially created
within a hidden container. If you find that your layout containers are
not visible when they should be, you may need to manually call their
resize( ) method to force them to
render properly. Historically, this issue has especially been the case
when displaying a layout container within a dijit.Dialog.
Warning
Layout dijits do not always render properly if they are
created in context that does not immediately make them visible.
Almost all of the time, you can simply call the layout container's
resize( ) method to render
it.
Get Dojo: The Definitive Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
