Hi guys looking for some assistance as the heat appears to be melting my brain. I'm having a stupid problem and in once of those situations where i should probably take a break and come back to this but hey.
Basically all i want to do is I add/removeClasses when the user clicks on the primary About Me button and then close with the .close class button.
For some reason I just can't see what I've dont wrong lol. I know I need jquery for this to add/removeClass. I also know I need to setup a new class to add the active state of the overlay and set a width to 100%. I'm just not having much joy at the moment. I have it working fine on hover but that isnt adequate for mobile so I need an onClick event for this. Came up with this so far. I know im close, any help would be appreciated. Thanks in advance
Jquery Code
//open on click
$(".slideIn").click(function(){
$(".overlay").addClass('.overlay-active');
});
//close on x button click
$(".close").click(function(){
$(".overlay").removeClass('.overlay-active');
});
HTML CODE
<section class="intro" role="region">
<div class="split-screen row">
<div class="col-sm-12 col-lg-6 left">
<a class="btn-btn-primary slideIn" style="color:#fff;" title="link to landing page task" href="#"><h2>About Me</h2></a>
<div class="overlay">
<div class="text">
<figure class="col-lg-4"><img class="img-responsive" src="img/nick_avatar.png" ></figure>
<div class="col-lg-8">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3>Nick</h3>
<p>some text| some text | some text</p>
<q>a bit more text for us to read here, why not</q>
<br/><br/>
<h3>Lets Connect</h3>
<div class="social row">
<i class="fa fa-phone" aria-hidden="true"></i></li>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a target="_blank" href="#" alt="Connect With Me On Twitter" title="Connect With Me On Twitter" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On LinkedIn" title="Connect With Me On LinkedIn" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>
<a target="_blank href="#" alt="Connect With Me On CodePen" title="Connect With Me On CodePen" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-codepen fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On GitHub" title="Connect With Me On GitHub" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 right">
<a class="btn-btn-primary" title="link to landing page task" href="#"><h2>To The Task</h2></a>
</div>
</div>
</section>
CSS CODE
html{
height:100%
}
body{
height:100%;
}
.intro{
height:100%
}
.split-screen{height:100%;}
.left{
position: relative;
display : flex;
justify-content : center;
align-items : center;
background-color:#009dcc;
height : 100%;
color : #FFF;
}
.right{
display : flex;
justify-content : center;
align-items : center;
background-color:#FFF;
height : 100%;
color : #000000;
}
#media (max-width: 1200px) {
.left{
height:50%
}
.right{
height:50%
}
}
.fa{margin:15px;}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 100%;
background-color: #008CBA;
overflow: hidden;
transition: .5s ease;
}
.overlay-active {
width: 100%;
}
.fa{color:#ffffff;}
.fa:hover{color:#fac600;}
.text {
position: absolute;
top: 50%;
left: 50%;
width:84%;
height:50%;
white-space: nowrap;
color: white;
font-size: 20px;
overflow: hidden;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
figure{padding:10px;}
figure img{
border:3px solid #fff;
border-radius:50%;
}
.social{border-top: 2px solid #fff;}
#media all and (max-width: 768px) {
figure{display:none;}
.text{padding:5px; height:67%;}
}
#media all and (max-width: 468px) {
p,q{font-size:12px;}
}
In your functions, remove the . from the class name in addClass() and removeClass(). With it you're actually adding a class called .overlay-active which includes the ..
Also, worth noting, you do not need jQuery to add or remove a class. Remember, jQuery is just javascript.
Related
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;
}
folks!
Me might be stupid, but i cant get working video popUp box.
Okay, let's start from beginning. I have 3D style image carousel gallery with button and title in it. I have edited this (important) - "button" to tens of times to get it working, but still no results. It feels like the current 3D CSS, JQuery, Javascript and HTML image slider gallery doesn't work together with Video popUp box. I`m not sure, but it feels like. The working popUp video sample (demo) is here and I would like it to get this done combined with my 3D carousel(slider) image gallery. When I put few script lines from working sample to the gallery page i got no response from the script lines. Like the 3D gallery blocked the popUp video box and it does not show up.
My goal : I want to get popUp video box over the 3D image gallery slider.
Problem : PopUp box doesn't respond (not working), it is not displayed over the 3D gallery slider, after button (Watch movie) click.
Here it is the full code of 3D carousel image gallery and working popUp video box. To make it easier for you i put all the source links for this script sample, so you can just create your own index.html file with this script.
<html>
<head>
<meta charset="UTF-8">
<title>3D Smooth Carousel - Slider</title>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://kinobalss.lv/3d/css/style.css">
<style type="text/css">
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.popuptext {
display: none;
}
.mfp-hide {
display: none !important;
}
.button {
padding: 20px 40px;
border-color: #f3f3f3;
font-size: 17px;
font-size: 1.7rem;
font-family: "museo-sans", Arial, Verdana;
font-weight: 500;
margin-top: 40px;
display: inline-block;
}
.button {
border: 2px solid #fcf;
color: #000;
text-transform: uppercase;
transition: all 0.15s ease-in-out;
}
.button .fa {
margin-left: 20px;
}
.button:hover {
background-color: #07d;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.content {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$('#videoLink')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
}
//]]></script>
</head>
<body>
<div class="slider-container" id="slider">
<div class="slider-content">
<div class="slider-single">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="1" />
<a class="slider-single-download" href="#videoStory" id="videoLink">Watch movie <i class="fa fa-play-circle" aria-hidden="true"></i></a>
<div id="videoStory" class="mfp-hide" style="max-width: 75%; margin: 0 auto;"><iframe width="853" height="480" src="https://www.kinobalss.lv/media/tvantena.mp4" frameborder="0" allowfullscreen=""></iframe>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>311,247</p>
</a>
</div>
<!--- Down below is only other 3D carousel image slider script lines. Those are not immportant. I`m working on this the first image from slider gallery, sample Above. Rest of these lines are because of full page script. //-->
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="2" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-play-circle"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="3" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="4" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="5" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="6" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
</div>
<a class="slider-left" href="javascript:void(0);"><i class="fa fa-arrow-left"></i></a>
<a class="slider-right" href="javascript:void(0);"><i class="fa fa-arrow-right"></i></a>
</div>
<script src="https://kinobalss.lv/3d/js/index.js"></script>
</body>
</html>
I'm running into a small problem.
I want to display 3 houses and when you hover over them with your mouse it displays tooltip text. This is what I got so far. It runs fine as you can see, but when adding a style sheet it is interfering and deleting the houses and the tooltip text :
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 110%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.linkhome {
display: inline-block;
font-size: 2.25rem;
padding-left: 10px;
padding-right: 10px;
}
.linkhome :hover {
color:#23739b;
transition: color 0.3s ease-in-out;
}
.links {
}
</style>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="links">
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Homepage</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
</div>
</body>
</html>
But when I add this in the head-tag:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">
The houses with the toolbelt disapears, Is there any reason to fix this problem?
Thanks for reading this post, I hope some can help me or give me a suggestion.
I would suggest you please use bootstrap4 tooltip
Please try below solution.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
</body>
</html>
I have a variety of different size images that I am overlaying a button on the top left and top right corners.
The left button is fine because the images are left justified, but the right button is inconsistent.
In Chrome, the button appears on the top right corner of the image (correct) in IE, the button appears on the top right of the containing div (incorrect).
See attached, any ideas?
HTML:
<div class="center-block results">
<img src="../assets/dataworks/img/card-test.png" class="img-responsive draggable" />
<div class="resultOptions">
<i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
<i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>
</div>
CSS:
.results {
display: inline-block;
}
.resultOptions {
position: relative;
display: block;
width: 80%;
}
.resultOptions i {
position: relative;
padding: 5px;
margin-top: -120px;
}
IE:
Chrome:
Position the icon container absolutely over the image and the align the icons how you want.
.results {
display: inline-block;
position: relative;
}
.resultOptions {
position: absolute;
width: 100%;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
}
i {
margin: .5em;
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="center-block results">
<img src="http://www.placebacon.net/400/200?image=0" class="img-responsive draggable" />
<div class="resultOptions">
<i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
<i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>
</div>
<div class="center-block results">
<img src="http://www.placebacon.net/250/210?image=2" class="img-responsive draggable" />
<div class="resultOptions">
<i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
<i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>
</div>
Use absolute positioning inside an a relative positioned parent. Trying to shove things around with negative margins and such can be error prone.
body {
margin: 0;
display: flex;
}
.group {
margin: 10px 5px;
position: relative;
}
.options .option {
position: absolute;
width: 20px;
height: 20px;
}
.options .bookmark {
top: 5px;
left: 5px;
background-color: rebeccapurple;
}
.options .info {
top: 5px;
right: 5px;
background-color: indianred;
}
<div class="group">
<img src="https://placehold.it/200x300/fc0">
<div class="options">
<span class="option bookmark"></span>
<span class="option info"></span>
</div>
</div>
<div class="group">
<img src="https://placehold.it/300x300/fc0">
<div class="options">
<span class="option bookmark"></span>
<span class="option info"></span>
</div>
</div>
as commented earlier: the duo : relative/absolute and text-align-last can be used together.
.results {
display: inline-block;
position: relative;
}
.resultOptions {
position: absolute;
top: 0.5em;
left: 0.5em;
right: 0.5em;
text-align-last: justify;
color:blue;
;
}
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<div class="center-block results">
<img src="http://lorempixel.com/150/150" class="img-responsive draggable" />
<div class="resultOptions">
<i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
<i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>
</div>
<div class="center-block results">
<img src="http://lorempixel.com/120/150" class="img-responsive draggable" />
<div class="resultOptions">
<i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
<i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>
</div>
I think that you are trying the wrong way. You should try to handle this by using the position css property. See https://www.w3schools.com/css/css_positioning.asp
for your right top icon
.resultOptions-left {
position: absolute;
top:0px;
right:0px;
}
for your left top icon
.resultOptions-right {
position: absolute;
top:0px;
left:0px;
}
This should place that div on the top right corner of It's first relative parent
I would use absolute positioning on the buttons. The image will fill the width of the wrapping div which is positioned relatively, then just position the buttons absolutely with left:0 (or whatever) and right:0. Right now you have them floated via pull-left and pull-right. You will need to position the wrapper relatively to make the absolutes work correctly. See my codepen.
<div class="center-block results">
<img src="http://via.placeholder.com/350x150" class="img-responsive draggable" />
<i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
<i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>
.results {
display: inline-block;
position:relative;
}
.resultOptionBookmark, .resultOptionInfo {
position: absolute;
padding: 5px;
top:0;
}
.resultOptionBookmark{
left:0;
}
.resultOptionInfo{
right:0;
}
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);
});