Here are some factors I would like to borrow from Googles Image Search Results:
Each item sits next to each other and falls to the next row if it cant fit in the current row because of the browser windows width.
When one item is clicked on, an info box slides open directly below the row of the selected item, it fills the width of the browser, also an indicator is visible at the bottom of the selected item.
When the info box is opened, if the browser width is changed, the items fall into a row that it can fill (top first) or fall into the row below. this does not affect the 100% width of the info box or its position directly below the row of the currently selected item.
I already have implemented the first bullet by creating DIVs that have display: inline-block
I want a solution thats mostly HTML and CSS first, and JavaScript (JQuery, AJAX etc.) only if necessary, I dont like using too many HTML attributes except for ones I'd need to make this work, like id, class, src etc. I usually use CSS whenever possible instead.
If I can stick to just HTML elements and then style them with CSS and what ever remnants can't be fulfilled with just CSS and HTML be fulfilled with JavaScript (or any derivative JQuery, AJAX etc).
an example of where im at so far:
<html>
<head>
<style>
div
{
display: inline-block;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
<img/>
</div>
<div>
<img/>
</div>
<div>
<img/>
</div>
<div>
<img/>
</div>
<div>
<img/>
</div>
<div>
<img/>
</div>
</body>
</html>
EDIT: OK heres what I came up with, it does exactly what I wanted it to do, hope this helps anyone looking to do the same.
<html>
<head>
<script>
"Some JavaScript/JQuery etc code that will,
first put the 'info' DIV block right after
the selected item (code-wise), then alternates
the 'display' CSS property of the '.info' class
from none to normal so it renders just below the
selected item. Just changing none to normal is
enough because of the 'clear' and 'float' properties."
</script>
<style>
div.item
{
background-color: blue;
border: red 5px solid;
display: inline-block;
height: 200px;
width: 200px;
}
div.info
{
background-color: grey;
float: left;
clear: both;
width: 100%;
height: 200px;
display: normal;
}
</style>
</head>
<body>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="info">
Here lies some cool details about the item selected.
Have your JS code put this DIV block right after the selected DIV block in code.
You will notice that no matter how much you change the width of the browser,
this block always remains under the selected item as long as your JavaScript
put this code block directly after the selected item.
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
<div class="item">
<img src="some_relative_image.png"/>
</div>
</body>
</html>
try this and resize the browsers width while the display property of the info DIV is set to normal. You will notice all the item boxes rise above the info DIV as the width increases and they fall under it as the width decreases. Hope this helps someone ;D
