When editing your view, click on (+Add) button at the top and select block. So now you should have 2 blocks.
In block 1, for pager, select Display a specified number of items, then for items to display, put 10 and leave offset 0.
In block 2, do the same, except you need to put an offset 10, so it starts displaying at row 11.
Then add block 1 and block 2 to your panel.
EDIT: Possible solution when you don't know the number of items
In summary: We are going to move row x and everything below that using jquery.
- You would have to use php in the template file and divide the view
total count by 2 and round up the answer (cause you might have 21 in
total).
- Add a Global view result counter field, to your view.
So now we are able to target each row.
So for example if total is 21 then /2 = 10.5, roundup to 11. The 11 will be saved as a variable.
Then just do an if statement if
( $fields["counter"]->raw = $variable) { print "<div class"move"> ... all the other stuff }
Then use the total to close the div at the last row.
Then just do an if statement
if ( $fields["counter"]->raw = $total) { print all the other stuff ... "</div>" }
You would also have to print the calculated number (11) inside a div, so then we can grab the total using jquery.
If your middle pane varies in height, you would have target the div and calculate the height with jquery so then we can add this number to the jquery $('.move').css()
Also, you would need to caculate the height of the "move" div and and assign that to the last panel div.
Lastly, you move the "move" div using jquery .css()
by the height of the middle pane + 5 or so more px.