tags:

views:

321

answers:

4

I'm using jQuery at wordpress (@the HOME page) and the ready function doesnt work for me. I have a index.php which is including (php) a header, footer and a sitebar. I tested this code:

<script type="text/javascript" src="path_to_jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      alert ("test text");
   });
</script>

The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sitebar has been loaded. This means while I'm seeing the index page (sitebar is not loaded yet) I have to wait a few seconds until the sitebar has finished loading, and only then the jQuery code is executed: the alert is popping up. So the ready function just wont work. Can anybody tell me why and how I can solve this problem? Thanks.

A: 

The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sitebar has been loaded.

That's exactly the advantage of using ready. When you want it to popup right away, simply do

<script type="text/javascript">
  alert ("test text");
</script>
Arjan
A: 

thanks that works. What I initially wanted to do is this: I have two < DIV >'s with a dynamic height in my index.php. With my jQuery Code I'm adjusting the hight of div1 with div2 to the same height. So what I need is just the height of the two divs before they are shown (at the index page) and for that I might load the DOM.

I'm getting the height with this code: $('#div_ID_1').height() and $('#div_ID_2').height()

I'm always seeing the two div's displayed with theire initial height (for 3 seconds), but only after the sitebar has been loaded the div-height is changing abrupt. this looks ugly, so I need the height of the div's being adjusted before displaying them before. How can I achieve this? Thanks!

And why does loading that sitebar/sidebar take so long?
Arjan
A: 

is there a chance to use the ready function to just load the two divs with theire content before showing them, so that I could change theire height and then display them? that would be the most performant way for me.

A: 

Please read the FAQ first. This is not a forum. And answers may be shown in a different order than in which they were posted. So in future questions, please do not answer your own question with more questions, and do not ignore warnings like "Are you sure you want to answer your own question? If you're responding to answers left on your question, use the comments link under each answer." and "Are you sure you want to add another answer? You could use the edit link to refine and improve your existing answer, instead." And people will only get notifications when you comment, not when you add an answer to your own question. I know you need a little reputation to be allowed to comment, but this surely won't get you that upvotes.

It seems to me you'd better change your layout to not require this hack. But as for your hack, your problem might be solved by ensuring your CSS is loaded before getting the jQuery libraries:

<head>
  ...
  <link rel="stylesheet" type="text/css" href="..." />
  <script type="text/javascript" src=".../jquery.min.js"></script> 
</head>

Next, don't use ready() but simply invoke the jQuery code directly, after the two <div>s:

<div id="div_ID_1"> ... </div>
<div id="div_ID_2"> ... </div>

<script type="text/javascript"> 
  var h1 = $('#div_ID_1').height();
  var h2 = $('#div_ID_2').height();
  var m = Math.max(h1, h2);
  $('#div_ID_1').height(m);
  $('#div_ID_2').height(m);
</script>

(Many details about possible problems at Is $(document).ready() also CSS ready?)

Arjan