davidbehan
New Member
Ok, have a look at http://images.google.ie/images?q=fi...0&hl=en&lr=&newwindow=1&safe=off&start=0&sa=N
Now my browser window is at 1288x1004 at the moment and Google is displaying 6 images per row on 3 rows (18 results). If I reduce my firefox window to 1024x768... Google changes the display to 5 images per row on 4 rows (20 results) without a refresh. Now resize again to 800x600 and it's 4 images per row on 5 rows (20 results). And lastly, resize to 640x480 and it's 3 per row on 6 rows (18 results). I'm using FF Web Developer Toolbar to resize my window BTW.
This looks and works very neat I think. You always have an even amount of results going across the page. Now I'm hoping to achieve something similar. If you have a look at http://www.raymondpotterton.com/v2/listings.asp?cat=1 you'll see that there are 5 images on each of the 2 rows, but this is a fixed width website catering for 800x600 and above. What I'm hoping to do for a different client is build a 100% width website and having the display of the properties per page, match that to the users window width. Does that make sense? In other words:
- if you have a screen resolution (or window size) of 1280x1024 then display 8 images across on 3 rows down,
- if you have a screen resolution of 1024x768 (or window size) then display 6 images across on 2 rows down,
- if you have a screen resolution of 800x600 (or window size) then display 5 images across on 2 rows down,
Something like that. So, the bigger your screen resolution, the bigger the amount of information will be displayed on the page.
So, I presume Google are using AJAX to first check the window size, add x amount of results based on that screen size using a select case (or nested if) and displaying a certain amount per rows based on the above as well. If the window size changes, a listener runs the script again and either adds/subtracts results to the list (or does nothing if not needed). I presume the images per row is done using CSS and having AJAX modify the CSS to suit each window size or possibly rewriting the xhtml on the page each time the page is resized (and loaded).
I suppose the simple way to do it would be to have the css handle as many per row as possible and add as many as is needed to "even" it out at the end so there is no "white space" on the page. Here's an example of what I don't want to happen:
http://www.istockphoto.com/file_search.php?action=Browse&Cache=70390950&page=3
Am I on the right lines with this do you think? Anyone know of any scripts out there to handle this kinda thing? I can't imagine so as it seems rather unique. Is there an easier way of doing this and I've just over complexed things? Anyone want to point me in the right direction for doing this or possible offering their services (for payment of course)???
Thanks in advance.
Rgds,
Dave
Now my browser window is at 1288x1004 at the moment and Google is displaying 6 images per row on 3 rows (18 results). If I reduce my firefox window to 1024x768... Google changes the display to 5 images per row on 4 rows (20 results) without a refresh. Now resize again to 800x600 and it's 4 images per row on 5 rows (20 results). And lastly, resize to 640x480 and it's 3 per row on 6 rows (18 results). I'm using FF Web Developer Toolbar to resize my window BTW.
This looks and works very neat I think. You always have an even amount of results going across the page. Now I'm hoping to achieve something similar. If you have a look at http://www.raymondpotterton.com/v2/listings.asp?cat=1 you'll see that there are 5 images on each of the 2 rows, but this is a fixed width website catering for 800x600 and above. What I'm hoping to do for a different client is build a 100% width website and having the display of the properties per page, match that to the users window width. Does that make sense? In other words:
- if you have a screen resolution (or window size) of 1280x1024 then display 8 images across on 3 rows down,
- if you have a screen resolution of 1024x768 (or window size) then display 6 images across on 2 rows down,
- if you have a screen resolution of 800x600 (or window size) then display 5 images across on 2 rows down,
Something like that. So, the bigger your screen resolution, the bigger the amount of information will be displayed on the page.
So, I presume Google are using AJAX to first check the window size, add x amount of results based on that screen size using a select case (or nested if) and displaying a certain amount per rows based on the above as well. If the window size changes, a listener runs the script again and either adds/subtracts results to the list (or does nothing if not needed). I presume the images per row is done using CSS and having AJAX modify the CSS to suit each window size or possibly rewriting the xhtml on the page each time the page is resized (and loaded).
I suppose the simple way to do it would be to have the css handle as many per row as possible and add as many as is needed to "even" it out at the end so there is no "white space" on the page. Here's an example of what I don't want to happen:
http://www.istockphoto.com/file_search.php?action=Browse&Cache=70390950&page=3
Am I on the right lines with this do you think? Anyone know of any scripts out there to handle this kinda thing? I can't imagine so as it seems rather unique. Is there an easier way of doing this and I've just over complexed things? Anyone want to point me in the right direction for doing this or possible offering their services (for payment of course)???
Thanks in advance.
Rgds,
Dave