views:

2448

answers:

1

Hey, it's me again with a question about jquery and that gridlayout I made a php template with switch and the code i am inserting is this

<div id="wrapper">

<div id="grid">
<div class="box"><img src="img/an_005_BUR_thebeat.jpg" width="310px" height="438px" />3 index</div>
<div class="box"><img src="img/an_014_GUE_homme_a.jpg" width="310px" height="404px" />4 Culture</div>
<div class="box"><img src="img/an_044_BVL_springmotiv.jpg" width="310px" height="310px" />5 Pharma</div>
<div class="box"><img src="img/an_039_AN_diskette.jpg" width="310px" height="465px" />6 Pharma IT</div>
<div class="box"><img width="310px" height="100px" />7 Culture</div>
<div class="box"><img width="310px" height="120px" />8 Cosmetics</div>
<div class="box"><img width="310px" height="400px" />9 IT</div>
<div class="box"><img width="310px" height="400px" />10 Culture</div>
<div class="box"><img width="310px" height="400px" />11 IT</div>
<div class="box"><img width="310px" height="400px" />12 Culture</div>
</div>

</div>
    <script type="text/javascript">

    $(document).ready(function(){

     $('#grid').gridLayout('.box', {col_width: 340, min_cols: 2});
     // options - (values above are the defaults)
     // col_width: the width of each grid block
     // min_cols: the minimum number of cols on the page (reducing browser width below this will not decrease number of columns). Set to your largest block (3 = block spans 3 columns)

     // gridLayout.placeAtEnd() - for placing a block at bottom right of grid
     var final_block = $('');
     $('#grid').gridLayout.placeAtEnd( final_block );

     // gridchange event fires when window resize forces a grid refresh
     $('#grid').bind( "gridchange", function(e){
      console.log('gridchange event fired');
      // reposition the final block
      $('#grid').gridLayout.placeAtEnd( final_block );
     });

     // this forces a redraw of grid
     $('body').gridLayout.refresh();

     // returns heights of each column
     console.log( 'gridLayout.info():', $('#grid').gridLayout.info() );
    });

</script>

The jquery script and the plugin are loaded in the header. When i try to run this. Firebug tells me:

"Node cannot be inserted at the specified point in the hierarchy" code: "3"

Do anybody know how to fix this?

Here is an example i loaded up: http://18735.webhosting7.1blu.de/neu/index.php?item=lifestyle

+1  A: 

I am pretty sure your error is with the following. What is $('') !

var final_block = $('');
$('#grid').gridLayout.placeAtEnd( final_block );

It works if I say

var final_block = $('<div />');
$('#grid').gridLayout.placeAtEnd( final_block );
redsquare
No this is not the error. In this variable you can place a div, wich u want tp appear last. I just left it empty because i didnt need it..
mourique
You're right, the errors is gone. But still the grid is not being arranged. It just puts on div under another.
mourique
cool, question answered then :) I would ask another question for your next issue. It will then help others who have the same issue rather than the answer being held under this question (hard to find via google etc)
redsquare
sorry i didn't mark your comment as answered ;)
mourique