Check out the fiddle link below to see the issue:
https://jsfiddle.net/0a0yo575/10/
The goal is to display a single box in the top-left corner based on user interaction. However, the current JavaScript is causing the point to disappear instead of the box. Can you help troubleshoot the issue?
$('.red-point').click(function() {
$('.infobox').removeClass('hidn').addClass('show');
$(this).removeClass('show').addClass('hide');
});
When you click on a marker in your current code, $(this) is referring to that specific marker. By using
$(this).removeClass('show').addClass('hide');If you assign a class to your .infobox elements that matches the id of the clicked marker...
<div class="infobox hide termini">Bar<br>Termini</div>...you can toggle them in this way...
$('.red-point').click(function() {
$('.infobox').removeClass('show').addClass('hide');
$('.' + $(this).attr('id')).addClass('show');
});
See this in action on JSFiddle
Personally, I prefer to give each marker a data attribute with the desired infowindow text and use it to populate a single infowindow...
<div class="infobox hide"></div>
<div class="abs red-point" id="termini" data-description="Bar<br>Termini">
<a onClick="turnGreen(event)">
<span class="num">1</span>
</a>
</div>
$('.red-point').click(function() {
$('.infobox').removeClass('hide').addClass('show').html($(this).data('description'));
});
I want to generate a JavaScript list of my model. I am currently working on an ASP.NET MVC app The model 'testModel' looks like this: public string prop1{ get; set; } public string prop2{ get; set; } public string prop3{ get; set; } ...
I want the hint-bubble div to smoothly slide out (using 'transition: 0.5s') whenever the hint-btn is clicked. I have successfully implemented it so that the hint-bubble appears when the button is clicked, but it appears instantly and I am struggl ...
I'm trying to create a function that automatically sets the height of a div by counting lines. I managed to get it partially working, but then it stopped. Can someone please help me with this? function set_height() { var div_obj=document.getEleme ...
Having an issue with my JQuery Validate on Internet Explorer and Firefox (it functions properly on Chrome). The problem is causing a redirect to a blank page displaying only "[Object object]." Upon further investigation, it appears that the error message d ...
I'm facing an issue with passing a large amount of data to the controller using XmlHttpRequest. Here's the code snippet I've implemented: var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = ...
Could someone assist me in aligning a logo on the left and navigation menu on the right using HTML and CSS? I envision it to look like the image displayed. I have tried various approaches to adjust my CSS styling, but nothing seems to be working as inten ...
I am attempting to display a div only when certain elements with a specific class are visible in the viewport. I made progress with this example: http://jsfiddle.net/blowsie/M2RzU/ $(document).ready(function(){ $('.myclass').bind('inv ...
I am working on implementing scroll events to create a smooth "snapping" effect for the top sections of my webpage. While I have successfully captured and animated the scroll position, I am encountering an issue where the scroll event is being triggered mu ...
Looking for some help with aligning the blue title on my website (under the "about us" section) with the Norway flag positioned to its left. I've attempted adjusting the padding-bottom and margin-bottom to shift the title up a few pixels, but it didn ...
Imagine a scenario where I have a collection of vendor documents in firestore: vendors : { vendor1: { id: "vendor1", name: "John", shopId: "shop1" }, vendor2: { id: "vendor2", name: "Mary", shopId: "shop2" } } Additionally ...
Simple question! I have a div identified as #toCopy, along with a button identified as #copy. Can you suggest the most efficient method to copy the content of #toCopy to the clipboard upon clicking #copy? ...
Below are the HTML codes: <div id="divPage"> div_Page <br/> <img id="captchaimglogin" src="https://www.emirates.com/account/english/login/login.aspx?cptLogin_captcha=86e2a65e-f170-43b6-9c87-41787ff64a35&t=88d296b19e5e8000&mode=ss ...
Despite searching for numerous solutions, I am still facing issues with UTF8. The "special" characters are not displaying correctly in my browser. Here is the setup I am using: - PHP Designer 8 - Wampserver 3.1.4_x86 - MySQL 5.6 - Navicat10 ...
Currently, I am utilizing a combination of YQL and jQuery to retrieve content from a distant page. While I am able to successfully load the content during the initial page load, I encounter an issue when attempting to return to the same page after navigati ...
I have a plugin set up to handle the CSS3 attribute. It currently rotates 45 degrees when clicked, but doesn't rotate back when clicked again to hide the content. Any ideas on how to fix this? $("#faq dt").click(function() { $(this).next('dd ...
I recently completed a Vue.js project and now I'm interested in turning it into a native app. I'm wondering if I'll need to completely rewrite the application using Vue-Native components, or if there is a way to convert my existing project i ...
const express = require('express'); const app = express(); const jade = require('jade'); const path = require('path'); const server = require('http').createServer(app); const io = require('socket.io').liste ...
I can't figure out why I keep experiencing 504 Gateway timeouts. app.get("/api/exercise/log", function(req,res) { let userId = req.query.userId; let from = req.query.from; let to = req.query.to; let limit = req.query.limit; console.log("lim ...
I have been attempting to utilize webpack-4 for generating a production build of my React project (not built with Create React App), but I am facing difficulties. The project is written in TypeScript and uses ts-loader, as well as React version 15.6.2. Be ...
I'm facing a frustrating issue. I am using Ajax to call a PHP file and then incorporating the response into my HTML content. This method allows me to have dynamic content without having to reload the page. The problem I'm encountering is that th ...