What is the best way to align a div right below an image that has been clicked on?

I am designing a website that features social media icons spread out horizontally across the page. When a user clicks on one of these icons, I envision a pop-up window appearing below it, displaying additional information. Here is a visual representation of how I would like it to appear after the user interaction.

The entire pop-up window is encapsulated within its own div element.

Instead of manually inputting coordinates for each icon, I am seeking a more dynamic approach to implement this functionality.

Thank you in advance for any assistance you can provide.

The HTML structure:

<div id='inset'>
    <div id='icon-gutter'>
        <div id='gutter-loader'>


        </div>
        <div id='icons'>
        <img src='images/facebook.png' id='facebook' />
        <img src='images/twitter.png' id='twitter' />
        <img src='images/google+.png' id='google+' />
        <img src='images/linkedin.png' id='linkedin' />
        <img src='images/reddit.png' id='reddit' />
        <img src='images/tumblr.png' id='tumblr' />
        <img src='images/pinterest.png' id='pinterest' />
        <img src='images/youtube.png' id='youtube' />
        <img src='images/lastfm.png' id='lastfm' />
        <img src='images/instagram.png' id='instagram' />
        <div id='pop-over-wrap'>
            <div id='arrow'>
            </div>
        <div id='pop-over-body'>
            Hello
        </div>
        </div>
        </div>

    </div>
</div>

The CSS styling:

#inset {
margin: 0;
padding: 0;
background: url(grey-fabric.png) repeat; /*#001121;*/
height: auto;
max-width: 100%;
position: relative;
padding: 14px 10px 10px 22px;

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px;

}
#icon-gutter {

    height: auto;
    min-height: 43px;
    position: relative;
    text-align: center;
}

#icons {
    opacity:0;
}
#icons img {

    height: 95px;
    position: relative;
    margin: 0 8px;
    cursor: pointer;

    transition: all .2s;
-moz-transition: all .2s; /* Firefox 4 */
-webkit-transition: all .2s; /* Safari and Chrome */
-o-transition: all .2s; /* Opera */

}
#pop-over-wrap {
    padding: 10px;
    position: absolute;
    width: 200px;
    height: 230px;
    background-color: white;
     border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px;
    margin-top: 20px;
    margin-left: 300px;

    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}
#arrow {
    position: relative;
    background: url(images/arrowup.png) no-repeat;
    background-position: top center;
    height: 40px;
    margin-top: -30px;

}
#pop-over-body {


}

Answer №1

Modify the #pop-over-wrap css rule by eliminating the margins and utilizing jQuery for positioning.

$(function(){

    var popup = $('#pop-over-wrap'),
        popupOffset = popup.outerWidth()/2,
        arrowExceed = 30; // determine how many pixels the arrow extends beyond the wrapper.

    $('#icons > img').click(function(){
        var icon = $(this),
            iconPos = icon.position(),
            iconW = this.width,
            iconH = this.height,
            popupTop = iconPos.top + iconH + arrowExceed,
            popupLeft = iconPos.left + iconW/2 - popupOffset;

        popup.css({left:popupLeft, top:popupTop});
        popup.show();
    });

});

View the demonstration at http://jsfiddle.net/ALFfs/1/
The demo contains hardcoded image widths due to lack of image access.

Answer №2

Take a look at the jquery plugin suggested here to achieve your desired functionality

Answer №3

Check out this interesting resource: CSS Tooltips and Speech Bubbles.

No need to manually calculate the positions of those elements. There are various CSS3 techniques that can achieve the same effect. Plus, you can avoid using Javascript altogether! However, if you're concerned about compatibility, you may want to explore using this jQuery plugin for creating tooltips.

Answer №4

How about grouping each img with its pop over inside a div, and then positioning the container div relatively while positioning the pop over absolutely?

Here's an example:

<div class="icon">
    <img src='images/facebook.png' id='facebook' />
    <div class="popover">
        <div id='arrow'>
        </div>
        <div id='pop-over-body'>
            Hello
        </div>
    </div>
</div>

Then in the CSS:

.icon{
    position:relative;
}
.popover{
    position:absolute;
    left:-30px;
    top:10px;
}

Do you see what I'm getting at? It could be even better to organize the icons in an unordered list.

Answer №5

Creating a layout with image containers and information divs is a common practice in web development. Here's an example:

<div id="container-1">
   <img src='images/instagram.png' id='instagram' />
   <div id="info-1" class="info-block hideContent"></div>
</div>
<div id="container-2">
   <img src='images/linkedin.png' id='linkedin' />
   <div id="info-2" class="info-block hideContent"></div>
</div>

You can control the visibility of the information block using CSS:

.hideContent { display: none; }
.info-block { position: relative; top: 10px; left: -20px; width: 100px;} //example styling

To show the information block for container-1 when clicking on it, you can utilize jQuery:

$("#container-1").click(function() {
   $("#info-1").removeClass("hideContent");
});

Answer №6

To set up events for each image, you can do the following:

$('#icons').find('IMG').each(function(){
    $(this).click(function(){  
       var idBlock = $(this).attr('id');
        //Display popup window based on idBlock
          var htmlBasedonIdBlock = GetBlockHtml(idBlock)
         $('#pop-over-wrap').html(htmlBasedonIdBlock)
   })
})

The GetBlockHtml function retrieves HTML based on the type of block.

If you are using tipsy, you only need to create the HTML content for the body, and the rest will be handled automatically.

If you are not using tipsy, there are plenty of other jQuery plugins available here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I take to host my Vue js single page application on my Django server?

At present, I am in the process of following a tutorial to integrate my Vue.js frontend with my Django backend. You can find the guide here: https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c ...

Convert JSON data into an HTML table using JavaScript without displaying the final result

I need help troubleshooting my JavaScript code that is supposed to populate an HTML table with data from a JSON file. However, the table remains empty and I can't figure out why. Sample JSON Data [{"User_Name":"John Doe","score":"10","team":"1"}, { ...

Pulling a div from beneath numerous other divs

I have been attempting to create a test case for a web application we are developing and I am on the verge of finding a solution, but there is one final hurdle that has me puzzled... Our requirement is to enable div elements to be draggable (which is work ...

Is there a way to programmatically prevent the back button from functioning if the previous route pathname in React was 'Login'?

When it comes to navigating back on previous pages, the traditional back button is typically used instead of relying solely on the navigation bar. However, I am currently looking to disable this feature specifically when the next previous route in line is ...

Identifying mobile devices on OpenCart and automatically redirecting them to a mobile-optimized theme

My OpenCart theme is no longer responsive. I have created a new theme that is mobile-friendly and located in catalog/view/theme/mobile/.... So now my store's theme folder has the following two themes: catalog/view/theme/desktop catalog/view/theme/mob ...

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames

After finding inspiration from this question about rotating objects around a circle using CSS, I decided to modify the code to include images of Earth orbiting the Sun. The challenge was to make one image orbit another like a planet circling its star. Ear ...

Troubleshooting: Angular ng-if not correctly detecting empty strings

When looking at my code, I have the following snippet to showcase data from angular scope variables. The initial two lines are functioning correctly and displaying data from the scope variables; however, there seems to be an issue with the line using ng- ...

Bing Translator and XMLHttpRequest are two powerful tools for translating and

When running the code snippet below, I encounter an issue where I am not receiving status 200 and responseText. However, when using the following URL: http://api.microsofttranslator.com/V2/Http.svc/GetLanguagesForTranslate?appId=F1B50AB0743B541AA8C070890 ...

Error 404 encountered while trying to access a website with parameters using Vue.js

Currently, I am in the process of building a website using VueJS and recently discovered how to use url parameters. Everything was working perfectly on my local machine - I could easily navigate to different pages by including parameters in the URL. For e ...

How can I create a JSON output from my MySQL database that includes the total count of records per day for a Task entry?

I am looking to implement the JavaScript library called Cal-Heatmap (https://kamisama.github.io/cal-heatmap/) to create an Event style heatmap similar to GitHub's. The objective is to visualize the number of actions taken on each Task record in my Pr ...

Activate and deactivate form fields on Safari

I have been working on a script to enable and disable a field using Javascript. It functions correctly in Internet Explorer, but I am encountering issues with Safari. FIELD If "Yes" is selected, the free text field below should be enabled; otherwise, it s ...

Is the shift key being pressed during the onClick event in React?

To trigger an onClick event only when the meta(mac) / ctrl(win) key is pressed, follow these steps: This is what I attempted: const [shiftOn, setShiftOn] = useState(false) useEffect(() => { document.addEventListener('keydown', (e) => ...

The issue of AJAX .done() method returning undefined when using $.each() on JSON response

I am having trouble retrieving the JSON response from an $.ajax() request. After selecting a car model, I receive data from the API, but I am unable to access the JSON results to populate a new drop-down list with the required information. HTML <div cl ...

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

Add a stylish border to your image within a container of fixed width

I am facing a challenge with a fixed width DIV element. Inside this element, there is a second DIV containing only an IMG element. My goal is to add a border to the image without exceeding the boundaries of either of the enclosing DIV tags. Solution #1: ...

How can I switch the values of two select components in React js when clicked?

I am working on a project where I have two select components positioned on the right and left side respectively, each with different values - A on the right side and B on the left side. Now, in response to a button click event, I need to swap component A t ...

Uncovering Secret Information with Beautiful Soup 4

I've hit a roadblock with my current project. I'm attempting to extract player names and projections from this website: The plan involves running a script that loops through various PID values, but that part is not causing any issues. The real c ...

What is the best way to make an input text the focus when an item on a dropdown menu is clicked?

I have a website with a dropdown menu and an input box. I want the user experience to be more seamless by automatically focusing the mouse cursor inside the input box when they click on an option in the dropdown menu. This way, users can start typing right ...

Using Javascript with the Google Calendar API: How can I swiftly make a new event with the Quick Add feature?

Currently, I am exploring the Google Calendar API and struggling with implementing a Quick Add Event using javascript. Is it possible to achieve this task? Are there any resources or examples that can help me understand how to do it? My issue lies in the ...

Angula 5 presents a glitch in its functionality where the on click events fail

I have successfully replicated a screenshot in HTML/CSS. You can view the screenshot here: https://i.stack.imgur.com/9ay9W.jpg To demonstrate the functionality of the screenshot, I created a fiddle. In this fiddle, clicking on the "items waiting" text wil ...