I made many changes on this code but it didn't work, what step should I follow? I want to make whole section that include icon and button's text clickable. I have tried this method already but not sure is it true or not: onclick="location.href='http://www.example.com';"
You can make corrections as you want, I'm open to any help, thank you.
#ana_div {
height: 400px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;
}
.ikon {
margin-left: 30px;
margin-top: 15px;
position: absolute;
}
.div {
display: inline-block;
float: left;
height: 80px;
width: 300px;
margin: 10px;
}
.btn {
border: none;
color: black;
height: 80px;
width: 300px;
font-size: 19px;
cursor: pointer;
background-color: #fff;
}
.btn:hover {
background-color: #4d4d4d;
}
<div id="ana_div">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1
</button>
</div>
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2
</button>
</div>
</div>
This is as simple as it gets, a div tag enclosed by an anchor tag.
a {
text-decoration: none;
}
.big-div {
height: 100px;
width: 200px;
background-color: red;
}
<a href="https://www.facebook.com/">
<div class="big-div">
<p>Click anywhere</p>
</div>
</a>
you can write button click like this:
<button onclick=" window.open('http://www.google.com', '_blank'); return false;">Continue</button>
if you don't want to use JS in your code, just add a tag before your columns
check this code
#ana_div {
height: 400px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;
}
.ikon {
margin-left: 30px;
margin-top: 15px;
position: absolute;
}
.div {
display: inline-block;
float: left;
height: 80px;
width: 300px;
margin: 10px;
}
.btn {
border: none;
color: black;
height: 80px;
width: 300px;
font-size: 19px;
cursor: pointer;
background-color: #fff;
}
.btn:hover {
background-color: #4d4d4d;
}
<div id="ana_div">
<a href="https://google.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1</button>
</div>
</a>
<a href="https://microsoft.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2</button>
</div>
</a>
</div>
Try enclosing div into anchor tag.
<a href= "http://www.example.com">
<div id="ana_div">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1
</button>
</div>
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2
</button>
</div>
</div>
</a>
Add an anchor tag and add the href attribute to it. Then add some style to remove the line and change the color. finally you can add anything you want inside it.
Otherwise you can create a anchor tag add the href and id. inside the onclick function of your div call a function redirect(). Inside the redirect() function add this code:
document.getElementById("your-tag-id").click()
You need to create an event listener, then you can use a function to run the javascript you wish when the user clicks the div / button.
As for your redirect, you can create a new <a> tag element using JS, then add the appropriate attributes for target, src and lastly, use the click() function on it.
See JS Fiddle
Javascript:
let btn = document.querySelectorAll('.btn')
function redirectHeader(){
let url = 'https://google.com'
const a = document.createElement('a')
a.target = '_blank'
a.href = url
a.click()
}
btn.forEach(button => {
button.addEventListener('click', redirectHeader)
})
OK now I understood. Use this code snippet:
<div id="ana_div">
<a href="https://example.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1
</button>
</div>
</a>
<a href="https://example.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2
</button>
</div>
</a>
</div>
Related
This question already has answers here:
When click on <li> I when display none div and display table one div
(2 answers)
Closed 2 months ago.
Load div into target from onclick using image nav. Then I want to hide divs that are not active. The 1st div should initially load when page loads. I have searched but can't find a solution.
// JavaScript Document
const mus = document.querySelector("#mus"),
albNav = mus.querySelector(".albnav img"),
/*hideAlbNav = mus.querySelector(""),*/
tunes = mus.querySelector("#tunes"),
gen0Nav = mus.querySelector("img #gen0"),
gen1Nav = mus.querySelector("img #gen1"),
gen0Tunes = mus.querySelector("#tunes .gen0"),
gen1Tunes = mus.querySelector("#tunes .gen1");
/*$(document).on('click', '.menu', function(){
$(this).addClass('active').siblings().removeClass('active')
});*/
tunes.style.display = 'none';
$("albNav").on('click', function() {
$(this).attr('.menu');
$('tunes').hide();
$('tunes').show();
});
<div id="mus">
<div class="albnav">
<img id="gen0" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen1" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen2" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen3" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen4" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen5" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
</div>
<div id="tunes">
<div class="gen0">Gen 0</div>
<div class="gen1">Gen 1</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="js/stQ-plrnav-12-14-22.js"></script> -->
isherwood DID NOT find the solution. The author mim did. isherwood Please stop editing my post just to save face. The original answer by the author mim is as follows:
No thanks to isherwood, who has deleted his comments..haha, I found the answer from Jakob # When click on <li> I when display none div and display table one div. Here is the solution:
$('.menu').on('click',function(){
$(".hidden[show-hide="+$(this).attr('id')+"]").show();
$(".hidden[show-hide!="+$(this).attr('id')+"]").hide();
});
.albnav {
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
width: 80%;
/*height: auto;*/
border-style:dashed;
border-color: #F431F0;
}
.menu {
position: relative;
width: 14.75%;
object-fit: cover;
max-width: 85px;
height: auto;
vertical-align: middle;
padding: 5px 0 5px 2px;
cursor: pointer;
}
.active, .albnav img:hover {
/*background: rgba(0, 0, 0, 0.8);*/
opacity: 0.8;
}
#tunes {
/*margin-top;: 100px;*/
margin-left: auto;
margin-right: auto;
padding: 5px 20px 5px;
border-style:dashed;
border-color: #EB1215;
}
.hidden:first-of-type {display:block}
.hidden {display:none}
<div class="albnav">
<img id="gen0" class="menu" src="genpx.png"/>
<img id="gen1" class="menu" src="genpx1.png"/>
<img id="gen2" class="menu" src="genpx2.png"/>
<img id="gen3" class="menu" src="genpx3.png"/>
<img id="gen4" class="menu" src="genpx.png"/>
</div>
<div id="tunes">
<div id="tun0" class="hidden" show-hide="gen0">Gen 0</div>
<div id="tun1" class="hidden" show-hide="gen1">Gen 1</div>
<div id="tun2" class="hidden" show-hide="gen2">Gen 2</div>
<div id="tun3" class="hidden" show-hide="gen3">Gen 3</div>
<div id="tun4" class="hidden" show-hide="gen4">Gen 4</div>
</div>
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>
This question already has an answer here:
javascript setAttribute style
(1 answer)
Closed 3 years ago.
I am trying to place an svg over an image using javascript. However, the position:relative style isn't working. I think it might be due to the style getting overwritten by the style sheet. Is there something im missing?
function button() {
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for (var i = 0; i < evenPic.length; i++) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
svg.setAttribute("position", "absolute");
svg.setAttribute("top", "0");
svg.setAttribute("left", "0");
svg.setAttribute("fill", "yellow");
svg.setAttribute("opacity", "0.5");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "30");
circle.setAttribute("cy", "45");
circle.setAttribute("r", "31");
svg.appendChild(circle);
evenPic[i].appendChild(svg);
}
}
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family: arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position: relative;
}
.avatar img {
width: 17%;
padding-top: 4%;
float: left;
}
<div id="container">
<header>
Recent Conversations
</header>
<ol id="userList">
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id="buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
With this code, the svg image is created next to the avatar. Is there a way to create it on top of the avatar?
svg.setAttribute("position", "absolute");
position isn't an HTML or SVG attribute, it is a CSS property
svg.style.position = "absolute";
Simply add this CSS to .avatar svg :
position: absolute;
left: 0;
Since position: relative is set on your avatar, your SVG will be placed over it.
You could actually do this using CSS only instead of an SVG (simply by creating a yellow circle and placing it over it using the code below) :
<!DOCTYPE html>
<html>
<head>
<style>
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family:arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position:relative;
}
.avatar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background: yellow;
/* Using the same width and float as your image */
/* Forced to set a height using pixels since its parent has no height */
float: left;
width: 17%;
margin-top: 4%;
height: 62px;
opacity: 0;
transition: opacity 300ms;
}
.avatar.active:after {
opacity: 0.5;
}
.avatar img {
width: 17%;
padding-top:4%;
float: left;
}
</style>
</head>
<body>
<div id = "container">
<header>
Recent Conversations
</header>
<ol id = "userList">
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id = "buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
</body>
<script>
function button(){
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for(var i=0; i<evenPic.length; i++){
evenPic[i].classList.add("active");
}
}
</script>
</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>
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);
});