javascript - Info box similar to Google Image Search Results -
here factors borrow googles image search results:
each item sits next each other , falls next row if cant fit in current row because of browser windows width.
when 1 item clicked on, info box slides open directly below row of selected item, fills width of browser, indicator visible @ bottom of selected item.
when info box opened, if browser width changed, items fall row can fill (top first) or fall row below. not affect 100% width of info box or position directly below row of selected item.
i have implemented first bullet creating divs have display: inline-block
i want solution thats html , css first, , javascript (jquery, ajax etc.) if necessary, dont using many html attributes except ones i'd need make work, id, class, src etc. use css whenever possible instead.
if can stick html elements , style them css , ever remnants can't fulfilled css , html fulfilled javascript (or derivative jquery, ajax etc).
an example of im @ 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 came with, wanted do, hope helps looking same.
<html> <head> <script> "some javascript/jquery etc code will, first put 'info' div block right after selected item (code-wise), alternates 'display' css property of '.info' class none normal renders below selected item. changing none normal enough because of 'clear' , '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 cool details item selected. have js code put div block right after selected div block in code. notice no matter how change width of browser, block remains under selected item long javascript put code block directly after 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 , resize browsers width while display property of info div set normal. notice item boxes rise above info div width increases , fall under width decreases. hope helps ;d
if want avoid javascript as possible, can create <div class='info'> details image after each <div class="item"> so:
<div class="item"> <img src="some_relative_image.png"/> </div> <div class="info"> details first image. </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="info"> details second image. </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="info"> details third image. </div> after that, replace line in css:
div.info { display: normal; } with:
div.info { display: none; } this make details hidden when page loaded.
and finally, insert following jquery code make details appear when <div class="item"> clicked:
$("div.item").click(function (){ $("div.info").css("display", "none"); $(this).find("+ div.info").css("display", "block"); });
Comments
Post a Comment