I am looking to display detailed descriptions for each city in the same consistent location on my map. With multiple pieces of information to include for each city, I want to ensure that the description box is positioned at the bottom of the map. Can anyone provide guidance on how I can achieve this? Despite several attempts, I have been unsuccessful in getting the description box to appear consistently at the bottom of the page.
I've simplified your code for better clarity. I removed some parts of your code that were commented out. Additionally, please use viewBox="0 0 959 593" instead of
width="959px" height="593px" viewBox="none"$description = $(".description");
$('.enabled').hover(function() {
$(this).attr("class", "enabled heyo");
$description.addClass('active');
$description.html($(this).attr('id'));
}, function() {
$description.removeClass('active');
});
html, body {
width: 100%;
}
svg {
width:100vh;
display: block;
border:1px solid;
}
.heyo:hover {
fill: #CC2929;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.enabled {
fill: #21669E;
cursor: pointer;
}
.description {
font-size: 18px;
text-align: center;
background: white;
padding: 10px 15px;
z-index: 5;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: #21669e;
border-radius: 5px;
box-shadow: 0 0 0 1px #eee;
display: none;
}
.description.active {
display: block;
}
.description:after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" viewBox="0 400 959 193" preserveAspectRatio="xMidYMid meet" xml:space="preserve" >
<path id="Alaska" class="enabled" fill="#21669E" stroke="#FFFFFF" stroke-width="0.75" d="M158.1,453.7l-0.3,85.4l1.6,1l3.1,0.2... (SVG Path continues) ... ">
</svg>
<div class="description"></div>This modification is based on the forked version of your pen: https://codepen.io/enxaneta/pen/87dc4facb04e657fea5c9a5eb7b2ea3c/
I am facing an issue with one field in my form, endTimeMins, as it is not registering in the formState. I have a total of four fields, and all of them are properly recognized as dirty except for the endTimeMins field. It is worth mentioning that I am utili ...
I am facing an issue with my error function while checking the browser error, and I am unsure why adding a console.log with the error is causing trouble. I need some assistance in troubleshooting this problem which seems to be occurring at line 29 of my im ...
For my HTML/Javascript audio player that supports playlists, I have implemented a feature where the ended event automatically plays the next media in line. Everything works smoothly when using the player on Android Bromite browser, including the playback c ...
I recently implemented the 62.5% trick to adjust my font-size for various screen sizes. However, I noticed that on larger screens, the text appears too small. To address this, I tried increasing the font-size to 80% using a min-width media query. Unfortuna ...
As part of my coding routine, I often utilize the following code snippet to center specific content: <!-- horizontal --> <div class="d-flex align-items-center justify-content-center h-100"> .. </div> <!-- vertical --> & ...
I am working with a reactive form where I need to extract values and assign them to a variable defined in an interface. The form is populated using the Google Places API, which disables user interaction with all controls except for the initial address inpu ...
I have a fully functioning website and now I am looking to add some logic and data analysis to it. Below is the code snippet for rendering my /data page: app.get("/data", (req, res) => { const sql = "SELECT * FROM MyMoods"; cons ...
Is it possible to attach variables to TextField and have those variables deleted as a whole and not editable? Check out the Codesandbox example HERE code <CardContent> <Autocomplete value={values.variable} options={variables} ...
I have successfully implemented a pop-up modal in my Angular page using code from a reliable source. However, when I include a button for an HTTP request on the same page, the functionality of the AngularJS modal stops working after the HTTP request is mad ...
I recently started learning about socket.io and began following a tutorial on the socket.io website. I have installed everything correctly, but it seems that the socket is unable to emit the event in the index.html file. Can anyone help me with this? Here ...
I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...
Utilizing the wdio tool provided by the webdriver.io npm package is how I execute Mocha test-cases. The snippet below showcases a segment of the wdio.conf.js file: var htmlReporter = require('./js/reporter/htmlReporter'); htmlReporter.reporterN ...
What should happen when the form is empty and the Login button is pressed? Currently, the page opens without any errors. However, I want to display an error message under such circumstances. How can I modify the function to achieve this? const login = (e ...
While learning React through coding, I encountered an error (Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)). I am unsure where the problem lies. Any suggestions? When utilizing useEffect to activate setFiltere ...
I am currently working on a website using cakephp. Strangely, when I load the login form, both the username and password fields are already prefilled. The interesting part is that this information is not hardcoded anywhere in the form or controller files. ...
I've written a code to fetch weather data from an API. Currently, the location is set to "chennai" in the link provided. I'd like to make this location user-dependent. How can I achieve this using React? import React,{useState,useEffect} from ...
Can you explain how to properly call the next error function using promise chaining? I initially believed that placing a return statement within the error function would automatically trigger the next error function. //This code is executed in a contr ...
I recently started using the ESLint extension in my VSCode editor for my React project. After creating the starter files, I ran the following command in my terminal: eslint --init This allowed me to choose the AirBnb style guide with React, which generat ...
In my current code, I am using a jQuery $.post function like this: $.post('/test', json_data, function(data) { result = data }); This function is being used in a validation process where the return value (data) contains either true or false ...
I'm encountering an issue with my JSON file that I am rendering to a table. I have 11 columns including id, name, and more. I want to search by every column, but the functionality only works for one column. If I try to filter the data multiple times, ...