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;
}
Related
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
When I use Material Box from Materialize along with Muuri grid items, the maximized Material Box will still display behind the subsequent Muuri grid items even though the Material Box's z-index is set high.
Here's my plunker example https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/.
In the example, if you click on box three it appears to work, but if you click on boxes one and two you will see that they will still have the other boxes overlapping them.
Here's the CSS:
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}
Here's the HTML:
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
Here's the JavaScript:
$(function() {
var grid = new Muuri('.grid');
});
I just created a new example from your code and it's working fine. Hope this will help!
here is the link to that example MUURI EXAMPLE
code:
HTML
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background: #fcfaf9;
}
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
height: 200px;
width: 200px;
line-height: 200px;
margin: 5px;
text-align: center;
z-index: 1;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
color: #fff;
background: #59687d;
font-size: 40px;
text-align: center;
}
.item.muuri-item-dragging .item-content {
background: #8993a2;
}
.item.muuri-item-releasing .item-content {
background: #152c43;
}
JS
const grid = new Muuri(".grid", {
dragEnabled: true
// dragAxis: 'y'
});
I have a video iframe that expands when clicking a button. This is contained inside of a header for the page which has 100vh height (full screen). When the video expands, it pushes the rest of the content in the header up in order to have everything vertically centred within the header. Instead, I would like to increase the height of the header div beyond 100vh to 100vh plus the video height. However, the code I have so far isn't working.
LINK TO PAGE
$(document).ready(function(){
$(".video" ).click(function() {
$(".header").height("+=315");
document.getElementById("video__player").style.maxHeight = "50vw";
document.getElementById("video-btn").style.display = "none";
});
});
.header {height: 100vh; width: 100vw;}
.header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;}
.header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;}
.video__container {text-align: center;}
.video {color: gray; width: 100%; height: auto;}
.play-btn {width: 20px; height: 20px; vertical-align: middle;}
.video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
<div class="header" id="header">
<div class="header__menu">
<div class="header__menu--left">
<div class="logo">
<img class="logo__full img__full" src="assets/kbd-logo-english.svg">
<img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg">
</div>
</div>
<div class="header__menu--right">
<div class="phone">
<h9 class="strong" style="color: #5CBDE1;">1-855-636-0002</h9>
</div>
<a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
<div class="language">
<h9 class="clickable strong" style="color: #5CBDE1;">FR</h9>
</div>
</div>
</div>
<div class="header__content">
<div class="header__content--container animatedParent animateOnce">
<h1>Hi, we're KBD Insurance.</h1>
<br>
<h2 class="text__center">Life is chaotic. Insurance doesn't have to be.</h2>
<br><br>
<div class="quote__wrapper header__quote--wrapper">
<a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
</div>
<br><br>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable" id="video-btn">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player" id="video__player">
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
The margin of .header__content--container is currently set to auto. Change the margin to some hard-coded value like, for example, 300px, and it works like you want it to.
EDIT: the requested function
function setMarginTop() {
const $header = $(".header__content--container");
const marginTop = $header.css("margin-top");
$header.css("margin-top", marginTop);
}
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);
});