0

I'm using several elements on my default.ctp layout, i.e.:

echo $this->element('messagesDialog');
echo $this->element('manualpDialog');

They belong in my layout to be available at any time. On my .js I hide these elements on document ready:

$('#dialog-messages').hide();

The problem is these elements (merely a div with a table, etc.) are partly visible as pages load, which looks ugly and buggy. Please note that since my element is on the layout, they briefly show on whatever home page a user sees.

To prevent these divs from semi-showing, I'd like to "create" them somehow when needed, and dispose of them afterwards. (I use jquery).

The solution below (from How can I make the browser wait to display the page until it's fully loaded?) is hard for me to use because my default.ctp is pretty crowded with elements and script code and cake stuff to be all put on a single div.

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

I think the solution would be to have my elements such as 

echo $this->element('messagesDialog');

loaded to my layout only when appropriate (when user wants to see his messages) and -if possible- be removed to prevent being semi-shown as pages load after they've been instantiated.

Any ideas on how to accomplish this?

Thanks a lot!

Community
  • 1
  • 1
Carlos Garcia
  • 359
  • 1
  • 5
  • 29

1 Answers1

1

You shouldn't load elements if they aren't needed. Instead, create an IF condition in your layout file that loads the element based on the controller name and action name. If you are tracking your users with sessions, you could also base the IF off of a session variable.

Alternatively, you could simply put the elements into a div such as:

<div class="hiddenClass" style="display: none;">
<?php echo $this->element('messagesDialog'); ?>
</div>

And then use the following in your javascript section: $('.hiddenClass').show();

user2066821
  • 26
  • 1
  • Thank you @user2066821. I took the suggested path of putting the element inside hidden div and then show via js when needed. It works like charm. – Carlos Garcia Feb 13 '13 at 22:55