How to display a detail div / popup box just below the item clicked

Question

I am trying to built a layout using in html like following two images.

The detail div /popup for each item should open right below the item which is clicked..

In case of desktop

And in case of mobile/tablet

Right now I have no Idea how to proceed further ..

Please point me in the right direction or give me a link to some demo website where this kind of functionalit is happening Please help me out on this ..

Answer 1

Do you want Do something like "google images search" section?

If You want to do something like this, you can simply create your "div" with information and add some class to hidden it, when the user click on the main div you attache a "visible" class with javascript. This is all.

If you need take your information with some ajax call, the logic is the same. Supose, that you have this html for each image:

<a href="/link/for/no/js" data-id="idDivWithInformation" class="link-information">...</a>
//hidden div    ..... 
<div id="idWidthInformation class="hidden">....</div>

Then, with jQuery you can do something like this;

$('#contentImages').on('click','a.link-information',function){
     var $this = $( this );
      // show the hidden div
     $($this.data('id')).removeClass('hidden').fadeIn()

})

The style and design, is define with css, for a "modal" view or for some view like google images search. The animation in showing your modal, can also be create with css and changing de "fadeIn" code for "addClass" for example, if you want to use some css library like animate.css

Answer 2

You can use bootstrap modals, try to visit this links to see the documentation. http://www.w3schools.com/bootstrap/bootstrap_modal.asp

in there explained about it, you can use data-toggle="modal" and data-target="#your_model_id" bottstrap attribute.

hope that can answer your questions :D

Answer 3

There are couple of ways... one of them in clean javascript is to have one container that you load with data or many containers (one for each element).

1. create container element for information

   var someContainer = "<div id='msgContainer'>someMessage</div>" ;

2. define onclick='elementClicked(event)' action on element or in some other way

   function elementClicked(event) { //get mouse coords where clicked //mouse X event.clientX; //mouse Y event.clientY; //get element you use as a container for messages //var msgContainer = document.getElementById("msgContainer"); //this will set //load container with any info if you're using one container element for all 'menus' //msgContainer.style.position = "absolute"; //msgContainer.style.top = event.clientY"; //msgContainer.style.left = event.clientX; }

alternatively as I said you could have one hidden container (div or any other element) per element and then you just need to show and hide them.

All of this should be easier using jquery.