We Keep Coding

dropdown menu is covered

i have problem like this
dropdown-menu covered
btw it isn't covered by other div, but dropdown-menu can't be out of the navbar, if i can ilustrate this it can be like this
ilustration of the navbar and dropdown-men
i make the navbar native with this code
<div id="topnav" class="topnav close-sidebar">
<div class="col d-inline">
<a href="#" onclick="sidebarToggle()">
<i class="fa-solid fa-bars"></i>
</a>
<p class="mt-1" style="text-align: left; font: normal normal normal 14px/17px Helvetica; letter-spacing: 0.34px;"><%: DateTime.Now.ToString("dddd, dd MMMM yyyy") %></p>
</div>
<div class="form-inline mr-5" style="max-width: 350px;">
<div class="d-inline">
<img class="mb-3" src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-button-header-a-button-header-icon.svg")%>" alt="Alternate Text" />
</div>
<div class="d-inline mb-3">
<img style="height: 24px;" class="" src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-globe.svg")%>" alt="Alternate Text" />
</div>
<div class="d-inline mb-3">
<div id="en" class="">EN</div>
</div>
<div class="d-inline" style="max-width: 250px;">
<div id="profile" class="text-right mb-3 ml-4" style="max-width: 250px; width: 150px;">
<div class="dropdown">
<div style="cursor: pointer;" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-inline">
<img style="height: 32px; width: 32px;" src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/img_avatar.png") %>" class="img-fluid mr-2 rounded-circle" alt="Responsive image" />
</div>
<div class="d-inline">
Nama User
</div>
<div class="d-inline">
<img src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-angle-down.svg") %>" alt="Text" />
</div>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="opacity: 1 !important; z-index: 99;">
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
and the css of is like this
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
}
.close-sidebar {
margin-left: 56px;
}
for the dropdown-menu i used boostrap 4.3.1
when i inspect the web, the css is like this
css inspect 1
css inspect 2
css inspect 3
css inspect 4
Update:
i try to see my z-index using 3d view in ms edge, and the dropdown-menu is already in front of the navbar, but on the website it is covered
3D View

set position relative to parent or container and set position absolute to child elements. try to change overflow
.topnav {
top: 0;
overflow: hidden; // try to change this not hidden
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
position: relative; // parent}
.close-sidebar {
margin-left: 56px;
position: absolute; // child};
if dont work let us to know and type more describe. thank you

You can try
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
position: relative;
}
.close-sidebar {
margin-left: 56px;
position: absolute;
z-index: 10;
}
This should work. Let us know if this doesn't

Try using this
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
z-index: 999;
}
.close-sidebar {
margin-left: 56px;
}

v-for with axios mysql in page.vue

I'm new with Vue2... I have a 3840x2160 grid, in an offline.vue template page this is my project directory
I have to populate the grid with images taken from a mysql database with an axios.post.
<div id="mybanner" class="adGrid" style="background-image: url('/img/grid.svg');">
<a href="https://yourdomain.com" target="_blank">
<img src="https://yourimage.png" title="Your title" style="left: 1500px; top: 0px; width: 10px; height: 10px; position:absolute;">
</a>
...
<a href="https://yourdomain.com" target="_blank">
<img src="https://yourimage.png" title="Your title" style="left: 1500px; top: 0px; width: 10px; height: 10px; position:absolute;">
</a>
</div>
from the Post i get the following array:
{idx: "58", height: "10", width: "10"​​, x: "1500", ​​y: "0", image: "https://yourimage.png", link: "https://yourdomain.com", title: "your title​​"}
how can i write v-for function?
for something like:
<a v-for="image in images" :href="image.link">
<img :src="image.image" :title="image.title" :style="left:${image.x}px; top:${image.y}px; width:${image.width}px; height:${image.height}px; position:absolute;">
</a>
how can I write the script ?

Get different hidden value containing same class via jquery

I have create different product via for loop so the input hidden field have same class but the value is different in it so what I want is to get the different value of the same class when I click on send enquiry button. You can understand after watching this jsfiddle link. Sorry for the English in advance.

Hidden input is sibling to the clicked element either you can get it using siblings() or next() ( next() can be use since it's a sibling which is immediately after the element )
var pro_nm = $(this).siblings('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).parent().find('.proname').val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
or get the parent using parent() and find the element inside
var pro_nm = $(this).parent().find('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).siblings('.proname').val();
// or
// var pro_nm = $(this).next().val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>

Just try this:
Fiddle: http://jsfiddle.net/kjoLyf9d/
just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
alert(pro_nm);
});

Since jQuery uses CSS selectors you could technically do something like
$('#proimg:nth-of-type(2)')
in order to select the second #proimg element, but having more than one element with the same id is just bad practice.
Other, better options is having them have the same class (for style purposes) and give each one of them a different id, you just have to write in something like "product1","product2"... with the loop you already have

Your jQuery code should be replaced with class selector.
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val();
console.log("test",pro_nm);
});

Changing pin colour for active item on static map

Here's the fiddle:
https://jsfiddle.net/0a0yo575/1/
There's no errors with the JS. As far as I can tell, it should remove the "red-point" class from whatever is clicked and replace it with the "green-point" class?
if (previousTarget) {
previousTarget.className = "";
}
event.target.className = "green-point";

I'm not very familiar with Javascript, but using jQuery I can easily fix your problem (I'm assuming this is OK since you have the jQuery tag on your question ;-) ). I've also made some minor changes to the CSS so the pins on the map are actually the correct size. Furthermore, I added a cursor: pointer to the pins so it's actually clear that you can click them. See fully working example below, or on Fiddle: https://jsfiddle.net/0a0yo575/3/
$(document).ready(function() {
$('.abs').click(function() {
$('.abs').removeClass('green-point').addClass('red-point');
$(this).removeClass('red-point').addClass('green-point');
$('.link').css('font-weight', '');
$('.link[data-marker="' + $(this).attr("id") + '"]').css('font-weight', 800);
});
$('.link').click(function() {
$('.abs').removeClass('green-point').addClass('red-point');
$('#' + $(this).data('marker')).removeClass('red-point').addClass('green-point');
$('.link').css('font-weight', '');
$(this).css('font-weight', 800);
});
});
a {
cursor: pointer;
}
.abs {
position: absolute;
width: 20px;
height: 32px;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
#termini {
top: 37.5%;
left: 61.8%;
}
#french {
top: 45.5%;
left: 55.1%;
}
#mark {
top: 58%;
left: 39.3%;
}
#hakkasan {
top: 65%;
left: 12.6%;
}
#american {
top: 62%;
left: 42.8%;
}
#experiment {
top: 54%;
left: 57.2%;
}
#milk {
top: 37.3%;
left: 39.5%;
}
#pig {
top: 37.1%;
left: 38.5%;
}
#opium {
top: 55%;
left: 55.7%;
}
div {
position: relative;
}
div.img-responsive {
width: 100%;
height: 65.5%;
}
.red-point {
background-image: url("http://s23.postimg.org/842300vmv/point.png");
background-position: center center;
background-repeat: no-repeat;
}
.green-point {
background-image: url("http://s21.postimg.org/9u6n8t38z/green.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img class="img-responsive" src="http://s11.postimg.org/cbggzlpib/map.png">
<div class="abs red-point" id="termini">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="french">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="mark">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="hakkasan">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="american">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="experiment">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="milk">
<a onClick="turnGreen(event)"></a>
</div>
<div class="ab red-point" id="pig">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="opium">
<a onClick="turnGreen(event)"></a>
</div>
</div>
<ol>
<li class="link" data-marker="termini">
<a>Bar Termini</a>
</li>
<li class="link" data-marker="french">
<a>French House</a>
</li>
<li class="link" data-marker="mark">
<a>Mark's Bar</a>
</li>
<li class="link" data-marker="hakkasan">
<a>Hakkasan (bar)</a>
</li>
<li class="link" data-marker="american">
<a>Bar Americain at Brasserie Zedel</a>
</li>
<li class="link" data-marker="experiment">
<a>Experimental Cocktail Club</a>
</li>
<li class="link" data-marker="milk">
<a>Milk & Honey</a>
</li>
<li class="link" data-marker="pig">
<a>Blind Pig</a>
</li>
<li class="link" data-marker="opium">
<a>Opium</a>
</li>
</ol>

Your problem is that the a tag inside the red-point has no width and no height, so you cannot click it. Give them
width: 100%;
height: 100%;
display: block;
And you can.

Unable to Empty a div using Jquery

I have the following jQuery Code. What I want to do is I want to empty the am-container but I am unable to do so.
jQuery(document).find("div[id='am-container']").html('');
and following is my HTML structure.
<div class="mid-part-right">
<div class="match-image">
<div class="main-gallary">
<div class="container">
<div id="am-container" class="am-container">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 263px; height: 133px; margin: 2px;">
</div>
</div>
</div>
</div>
</div>
Here's a complete code snippet:
jQuery(document).find("div[id='am-container']").html('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mid-part-right">
<div class="match-image">
<div class="main-gallary">
<div class="container">
<div id="am-container" class="am-container">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 263px; height: 133px; margin: 2px;">
</div>
</div>
</div>
</div>
</div>

jQuery('#am-container').html('');
Try this one :
$("#am-container").children().text("");
$("div#am-container a").each(function(el){$(el).empty();});

Try:
$('#am-container').html('');
Or
$('#am-container').empty();
If you want to remove the container and its children, use:
$('#am-container').remove();

It sounds like you want to remove the element am-container not what it contains, try this
$('#am-container').remove();

You can simply use like
$("#am-container").empty();

Since you want to remove the element you're trying to select:
$('#am-container').remove();