Utilizing JQuery and CSS to strategically position the value of a div element

Within this function, I am passing a parameter called pos which contains the x and y position values. My intention is to use these values to determine where the output of the div tag should be placed. However, for some reason, it doesn't seem to be working as expected. Can anyone identify what mistake I might be making?

The main goal of this function is to show the HTML content within the div at the location of your mouse hover...

Currently, the content that appears on hover is being displayed at the bottom of the webpage instead.

Thank you, Chris

featureOver: function(ev,latlng,pos,data)   
{  
    var X = pos.x;  
    var Y = pos.y;  
    alert('X = ' + X + '  ' + 'Y = ' + Y);    
    document.body.style.cursor = "pointer";  
    $("div#over").css("top",  Y + "px");  
    $("div#over").css("left", X + "px");  
    $("div#over").html(data.name);  
},

HTML CODE

<table id=maptable border=2>
<th>
<div id="map_canvas" style="height:500px; width:700px; background-color:white; border:1px solid black; "></div>
<div id="over"></div>
</th>

Answer №1

Consider this alternative approach (utilizing the offset() method):

handleFeature: function(event, coordinates, position, info)   
{  
    var posX = position.x;  
    var posY = position.y;  
    alert('X Coordinate = ' + posX + '  ' + 'Y Coordinate = ' + posY);    
    document.body.style.cursor = "pointer";  
    $("div#over").offset().top =  posY + "px";  
    $("div#over").offset().left =  posX + "px";  
    $("div#over").html(info.title);  
}

Answer №2

The positioning of your div#over will determine the behavior. To understand how the 'top' and 'bottom' properties function in CSS for position:absolute and position:relative, refer to this explanation.

For elements with position : absolute or position : fixed, 'top' specifies the distance between the top margin edge of the element and the top edge of its containing block.

For elements with position : relative, 'top' specifies how much the element is moved below its normal position.

https://developer.mozilla.org/en/CSS/top

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

The bold horizontal line in HTML tables is a bit unusual and is caused by the border-collapse property

Edit 1: The strange issue appears to be related to the border-collapse property in CSS, as it can be resolved by using border-spacing: 0px. However, the question remains, why does border-collapse result in this behavior? It seems to be connected to scaling ...

Using Ajax URL in a Wordpress Plugin

Plugin Class File: function __construct() { add_shortcode('user_registration_form', array( $this, 'shortcode' )); } public function hook() { add_action('wp_ajax_get_product_serial_callback', 'get_product_se ...

Slow transition with a gradual appearance and disappearance for the background

I am currently implementing a fading background image effect on my web page, where the current image fades out as the next one fades in. Here is my code: var backgrounds = []; backgrounds[0] = './img/bg.jpg'; backgrounds[1] = '. ...

Having trouble parsing JSON with jQuery?

After running the json_encode PHP function, the output that I receive is as follows: [{"id":"1","size":"124","name":"Team1","picture":1}, {"id":"5","size":"76","name":"Team 4","picture":2}, {"id":"3","size":"25","name":"Team2","picture":3}, {"id":"4","s ...

Tips on eliminating the excess whitespace remaining at the bottom of the webpage when using JavaScript parallax scrolling

I'm currently working on a project that involves using parallax effects for images and divs. However, I've noticed that there is some space left at the end of the parallax effect for unknown reasons. Could someone please assist me in removing thi ...

Bootstrap 4 did not achieve the desired responsiveness for the image and h1 element

I am having trouble with my two Div elements, one for an image and one for a heading. I have set different font sizes based on different media queries in my CSS file. While it works when shrinking the width, the heading does not break into two lines. Addit ...

How to implement a delay for submenu dropdown in Bootstrap 3

I am trying to implement a delay on a submenu that I have created, rather than the entire bootstrap3 dropdown menu. The goal is to allow users to easily move their cursor to the submenu without it closing unexpectedly. Although the jquery code should still ...

Retrieving the value of a hidden ASP.NET field in the code-behind with JQuery

I'm trying to update an ASP.NET hidden field with JQuery and then access its updated value from the ASP.NET code behind. Although the value of the hidden field is changing with the current code, the code behind seems to be fetching the previous value ...

Confusing jQuery Selector Problem

Here is an example I have What this example should do: Check if there is a .box-wrapper in the document If there is, and if there is a click event on .tabs li a Locate .selected and remove the class Find the parent of the clicked link and add the class ...

"Unprecedented occurrence of double events firing in jQuery's sortable and draggable functions

I've implemented some drag and drop code that is functioning properly. However, I have encountered a minor issue. Whenever I add an alert within the drop function for debugging purposes (e.g. alert(draggedItem.text());), it triggers the alert twice wh ...

Tips for preventing automatic zoom on mobile devices

Check out this link for the test: The current layout of the site is exactly how I want it to be presented. However, I am facing an issue where if I set the viewport meta tag to <meta name="viewport" content="width=device-width, initial-scale=1"> i ...

Several buttons converging towards a single circle

https://i.sstatic.net/NyHXu.png I attempted to create a circular layout using 6 buttons, but the end result did not form a perfect circle as intended. In the image provided, I highlighted the areas of concern in red. Below, you will find my HTML and CSS c ...

Error message: jQuery expression not being detected

Here is some html code that I have in my view: <div id="divLoginName" style="display: none"> <input type="hidden" id="hidLoginName" /> @Html.TextBox("txtEditLoginName", null, new { maxlength = "1000", tabindex = "0", Multiline ...

The CSS center alignment is functioning properly on some pages, however, it seems to be malfunction

I have noticed that the CSS centering is effective on this page: However, it seems to not be working on this page: Despite both HTML pages utilizing the same CSS link, the centering issue persists on one page. Any assistance in resolving this discrepancy ...

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

Looking for a solution to hide scroll bars in Microsoft Chrome, but only when there is no content to scroll? The current div and styles always show the horizontal and vertical scroll bars, even when the height exceeds the content. <div style="backgroun ...

JQuery magic: A shrinking header that changes size as you scroll

There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too muc ...

How can I convert JSON into an object using JQuery?

const photoGallery = new PhotoGallery([[{"photo":{"updated_at":"2021-10-15T10:30:00Z","title":"Amazing Sunset","views":350,"uploaded_by_profile_id":5,"comment_count":12,"id":123,"description":"Beautiful sunset landscape","category":"nature","created_at":"2 ...

Generate a new style element, establish various classes, and append a class to the element

Is there a more efficient solution available? $("<style>") .attr("type", "text/css") .prependTo("head") .append(".bor {border:2px dotted red} .gto {padding:10px; font-size:medium}"); $("input:text").addClass("bor gto").val("Enter your t ...

The CSS file is not appearing, causing the styling not to be applied

I've included the following line in my html file: <link rel="stylesheet" href="css/styles.css"> Despite having the css file linked, the styling is not visible on the page. The HTML remains plain. The structure of my files is as follows: file ...

Obtaining the data attribute or id of a clicked element in Bootstrap 2.3.2 modal and jQuery 1.7.1: A step-by-step guide

Unfortunately, I am restricted to using bootstrap 2.3.2 modal along with jquery 1.7.1. Below is the code snippet for three conference rooms. When an element is clicked, a modal popup appears correctly, but there is a struggle in fetching t ...