Creating a floating popup within a designated DIV by containing a panel with a textbox and a button inside

The code snippet for the popup is as follows:

<div id="commentBox" class="commentBox">
  <div class="panel panel-default">
    <div class="panel-body">
       <input type="text" value="" id="annotationText" />
       <button type="button" ng-click="setComment()">OK</button>
    </div>
   </div>
</div>

CSS Styling:

.commentBox {
    position: absolute;
    z-index: 9999;
    left: 72px;
    top: 58px; 
    display:none;
}

#commentBox:before {
    position: absolute;
    top: -7px;
    left: 1px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

#commentBox:after {
    position: absolute;
    top: -6px;
    left: 0px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

The commentBox:after and commentBox:before elements create a small arrow-tip and shadow on the top-right corner of the commentBox.

There is an issue where clicking on the extreme right-side of the map causes the popup div to show outside the main Map Div. Refer to the screenshots below:

https://i.sstatic.net/bA8nM.png

When clicked somewhere else:

https://i.sstatic.net/NRCwM.png

How can I ensure that this DIV (popup) displays within the limits of the MAP DIV when clicked on the extreme right side?

javascripthtmlcssangularjsarcgis-js-api

Answer №1

To accomplish this using javascript, you can utilize a script similar to the following:

function handleMapClick(event) {
  let tooltip = document.getElementById('tooltipBox');
  let topPosition = event.target.offsetTop + event.target.offsetHeight/2 - tooltip.offsetHeigth/2;
  let leftPosition = event.target.offsetLeft + event.target.offsetWidth/2 - tooltip.offsetWidth/2;
  tooltip.style.left = leftPosition+"px";
  tooltip.style.top = topPosition+"px";
  tooltip.style.display = "inline-block";
}

CSS styling:

.tooltipBox {
   position: absolute;
   z-index: 10;
}

Answer №2

To achieve this, I introduced several new CSS classes.

.commentDiamond {
        background: #F7F7F7;
        display: block;
        height: 16px;
        position: absolute;
        width: 16px;
        z-index: -1;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        box-shadow: 0 0 0.75em #777777;
        -webkit-box-shadow: 0 0 0.75em #777777;
    }

.commentDiamond.topleft {
    left: 5px;
    top: -6px;
}

.commentDiamond.topright {
    right: 5px;
    top: -6px;
}

.commentDiamond.bottomleft {
    left: 5px;
    top: 45px;
}

.commentDiamond.bottomright {
    right: 5px;
    top: 45px;
}

Then in the JS file, I checked for the screen point and applied the necessary CSS classes based on my requirements from the list above.

if (scrn_pt.x > (mapwidth - $("#commentBox").width() + 10) && scrn_pt.y > (mapHeight - $("#commentBox").height())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond bottomright");
    $("#commentBox").css({
        left: scrn_pt.x - 187 + "px",
        top: scrn_pt.y - 13 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else if (scrn_pt.x > (mapwidth - $("#commentBox").width())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond topright");
    $("#commentBox").css({
        left: scrn_pt.x - 187 + "px",
        top: scrn_pt.y + 60 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else if (scrn_pt.y > (mapHeight - $("#commentBox").height())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond bottomleft");
    $("#commentBox").css({
        left: scrn_pt.x + 1 + "px",
        top: scrn_pt.y - 13 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond topleft");
    $("#commentBox").css({
        left: scrn_pt.x + 1 + "px",
        top: scrn_pt.y + 60 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
}

As a result, the popup now appears like these examples: https://i.sstatic.net/2peuS.png https://i.sstatic.net/hK5et.png https://i.sstatic.net/gEyt4.png

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

Managing keypress events on a single page within Vue Router

Looking for a solution in my Vue.js SPA, where I have a specific page requiring keyboard interaction and using Vue Router for navigation. Currently, I have set up the following to handle keyboard events: const interactiveComponent = { // methods: ...

javascriptvue.jsvue-router

Reprinting information from my server / overlooked a task

After saving "Ben and Jerry's" to my database and retrieving it later for editing/resaving in an input tag, I am encountering an issue. Ben & Jerry&#39;s What could be the problem? (I have noticed that the "&" is correctly translated but ...

javascriptphpjquerymysql

How come the words are clear, but the background remains unseen?

My markup looks like this: <div class="one">Content</div> <div class="two"></div> I have the following CSS styles: .one, .two { height: 20px; } .one { background-color: #f00; } .two { background-color: #0f0; margi ...

css

Troubleshooting problems with Bootstrap datepicker in a Vue project

I am facing a problem with the b-datepicker feature while trying to select a date. The dates are not appearing correctly, as shown in the image linked below. Here is my code: <b-form-group class="my-3" > <b-input-group> ...

htmlvue.jswebbootstrap-4buefy

Dealing with performance issues in React Recharts when rendering a large amount of data

My Recharts use case involves rendering over 20,000 data points, which is causing a blocking render: https://codesandbox.io/s/recharts-render-blocking-2k1eh?file=/src/App.tsx (Check out the CodeSandbox with a small pulse animation to visualize the blocki ...

javascriptreactjstypescriptperformancerecharts

"Mastering the art of debouncing in Angular using

I am facing an issue where, during a slow internet connection, users can press the save button multiple times resulting in saving multiple sets of data. This problem doesn't occur when working locally, but it does happen on our staging environment. E ...

javascriptangularjstypescript

Adjusting the settings on my lightbox

Recently, I created a basic lightbox with the following code snippet: Here is the jQuery code: var $overlay =$('<div class="overlay"></div>'); $('body').append($overlay); $('img').click(function(){ $overlay.sho ...

javascriptjquerycss

When scrolling, numerous requests are sent to ajax - how can I consolidate them into a single request for lazy loading?

I encountered a problem where multiple Ajax requests are being sent when I try to call an Ajax function after scrolling. How can I resolve this issue? $(window).scroll(function(){ var element = $('.MainChatList'); var scrolled = false; ...

javascriptjqueryajaxlazy-loading

Assigning a class to the following item in a list with a click event (However, this action will cease once the last item

I have implemented a feature where users can scroll through different dates in a list using the Next or Prev buttons. The functionality involves removing the class active from the current element and adding it to the next one upon button click. However, I ...

htmljquery

Is there a way to prevent continuous repetition of JavaScript animated text?

I'm working on a code that displays letters and words one by one, but I can't figure out how to stop it from repeating. Can someone help me with this? <div id="changeText"></div> <script type="text/javascript"> var te ...

javascriptjqueryhtml

When double quotes are used in a string within an HTML input field, they may display as &

Using PHP, I am retrieving data from an SQL database and generating JavaScript code to create an edit button for each entry. The edit button triggers a text input field within a form. When the user clicks on the generated edit button, the text in this inpu ...

javascriptphphtmlsql

Eliminate the need for index.html in the URL when using MVC WebApi

I am currently utilizing Angular for the front end and have an index.html page as the starting point. On the main page, the URL appears as follows: localhost:588/index.html#/ I desire it to appear as: localhost:3478/#/ or simply localhost:3478/ The iss ...

asp.net-mvcangularjsmodel-view-controller

How to pass a JavaScript variable value to a SQL query in PHP on a separate webpage?

I have 2 elements - an auto search bar and Map using mapbox-gl. I want to load the location of the user whose id is searched. I am getting the same marker (location) for every user. I am loading "get_pin.php" through xmlHttpRequest from the main page "m ...

javascriptphpjqueryajaxxmlhttprequest

It is not possible to attach separate links to images in a JavaScript slider

I am struggling with linking individual images in a JavaScript slider for a client's website. The slider is fully functional and works well, but I can't seem to figure out how to link the images properly. When I remove items from <--ul class= ...

javascriptjqueryhtmlcss

Utilizing Bootstrap, Jquery, and Node.js for web development

I am seeking clarification on the process for running these two commands: npm install jquery npm install boostrap After adding the dependencies to my package.json file, I then include them in my app.js file using the code: var $ = require('jquery&a ...

javascriptjquerycssnode.jstwitter-bootstrap

What is the best way to align bars at the bottom of a CSS vertical bar chart?

Currently, I am exploring the functionality of two distinct bar charts that I designed using HTML and CSS: one horizontal and the other vertical. Is there a way to shift the bars in my vertical bar chart from the center down to the bottom? https://i.sstat ...

htmlcss

Issue with internal URI directory structure affecting SEO mod_rewrite

I recently implemented a mod_rewrite rule on my website that transforms example.com/en/about/topic into example.com/en/view.php?p=pages/about/topic.php The specific rule I used is: RewriteRule ^en/([a-zA-Z0-9/]+)$ en/view.php?p=pages/$1.php In view.p ...

htmlregex.htaccessmod-rewriteseo

Let's explore a way to make the button text wrap onto multiple lines for smaller screens when using Bootstrap 4.0

I am encountering an issue with the layout of my asp.net mvc core web application + bootstrap 4.0 FAQ section. The problem is that the question description overflows the screen on small screens, while the answer text aligns properly. I need a solution to m ...

csstwitter-bootstrapbootstrap-4asp.net-core-mvcmedia-queries

Arranging sequence of jQuery functions

I have implemented a loop using jQuery that iterates through specific elements on an HTML page. During each iteration, I switch over a variable and add HTML code to particular locations. The issue arises when one of the appends requires importing another ...

javascriptjqueryhtmlnode.js

Is it considered valid in JavaScript or TypeScript to group values using (value1 || value2) for comparisons, and if it is, what is the reasoning behind

Does anyone know if using the || operator to group values while comparing a single variable is valid in the most recent versions of JavaScript or TypeScript? If not, what could be preventing this from becoming a valid syntactic sugar feature at some point? ...

javascripttypescriptsyntaxcomparisoncomparison-operators