We Keep Coding

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

My jQuery scripts work when i test them in jsfiddle, but not in my HTML document

Everything in my code works so far except the jQuery function. It works completely fine in jsfiddle, but the function does not work in my html file for some reason. I don't think it's that extra characters are appearing when I'm copying because from the HTML file. I haven't changes the HTML file at all i just copy/pasted the code from it to jsfiddle and it started working. Here is a link to the jsfiddle and the code for my html document. If you want to open the program the way it's meant to be, copy/paste the code into the developer tools in a google chrome tab that has all of the elements deleted. The big gap with black squares is where an image is that is based from a local file. The jQuery function is directly above my body element. Also, I am pretty new to coding so the mistake is probably a very obvious one to someone who has been doing this for years.
https://jsfiddle.net/Lukkuss/dshcp1f2/2/
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link class="" crossorigin="anonymous" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Is it a good team comp?</title>
<style>.body-size {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
width: px;
height: 800px;
background-color: #09c1a9;
}
h3 {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
h1 {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
h2 {
height: 610px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
p {
color: yellow;
width: 650px;
background-image: url("rift map.PNG");
height: 650px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.img-size {
width: 670px;
height: 670px;
}</style>
<style>
#map-container {
position: relative;
}
</style><style>
#toplane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 150px;
left: 100px
}</style>
<style>
#jungle {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 300px;
left: 200px;
}
</style>
<style>
#midlane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 325px;
left: 290px;
}
</style><style>
#botlane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 520px;
left: 450px;
}
</style><style>
#support {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 520px;
left: 360px;
}
</style>
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$(this).css("background-color", "#4c6ccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body class="body-size">
<h1 class="text-center" style="color: #78ff00;">Is it a good team composition?
</h1>
<div class="row">
<div id="map-container">
<p class="col-md-6">Images of the selected champions will appear within the lanes that they are assigned. The program will not functon properly if you do not reset the lane assignments before entering a new team. </p>
<div id="toplane"></div>
<div id="jungle"></div>
<div id="midlane"></div>
<div id="botlane"></div>
<div id="support"></div>
</div>
<h2 class="col-md-4">
Insert the names of the champions on your team into their respective lanes.
<form>
<input id="lane-assignment" type="text" placeholder="Top Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Jungle" required=""><br>
<input id="lane-assignment" type="text" placeholder="Middle Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Bottom Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Suppport" required=""><br>
<button type="submit">Enter lane assignments
</button>
<button>
Reset lane assignments
</button></form>*IMPORTANT* The program will not function properly if the champions' names are not spelled correctly.
</h2>
<h3 class="col-md-4">
Pros:
Cons:
</h3>
</div>Specific comments about your team will appear here.</body></html>

Works fine to me as per written javascript / jquery. Have you checked following URL is accessible from your browser?
https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js

Popup window on landing page

I made a landing page with goods.
Every good has a description and a price.
When you click open a "popup window" should open, with the picture and description.
The question is, what if i have a lot of goods so with html and some framework popup, I will need to do all the description in html, can I somehow make a template of popup window, and provide description of goods in popup window through javascript ?

Basically you need a code which displays a modal window and the same code should also display full product details in it.
Normally, if you have a category page which displays product summary you would need to populate the modal window (which some call popup) with complete product details taken in via Ajax (the website should be able to output product data in JSON format if you got to an URL like mystore.com/ajax/p/10101 where 10101 is the product id. It depends on the website creator.
Anyways, an example JS code with modal window and which displays the product info from the page you are on is below.
$(".view").click(function(){
$(".overlay").show();
var pName = $(this).parent().children(".itemName").text();
var pPrice = $(this).parent().children(".itemPrice").text();
var pDescription = $(this).parent().children(".itemDescription").text();
$(".productName").text(pName);
$(".productPrice").text(pPrice);
$(".productDescription").text(pDescription);
});
$(".close").click(function(e){
e.preventDefault();
$(".overlay").hide();
});
.content {
display: block;
width: 100%;
position: relative;
}
.products {
width: 100%;
float: left;
display: block;
position: relative;
}
.item {
position: relative;
width: 45%;
float: left;
display: block;
margin-right: 10px;
border: solid 1px #ccc;
padding: 4px;
height: 150px;
box-sizing: border-box;
}
.itemImage {
width: 50%;
float: left;
height: 138px;
border: solid 1px green;
margin-right: 10px;
}
.itemName {
font: 500 20px/25px Arial;
}
.itemPrice {
font-weight: bolder;
}
.itemDescription {
font: 300 16px/18px Arial;
}
.view {
font: 100 9px/10px Arial;
}
.view:hover {
cursor: pointer;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 300px;
background: rgba(0,0,0,0.4);
}
.popup {
display: block;
position: absolute;
top: 50px;
left: 200px;
width: 300px;
height: 150px;
background: #fff;
}
.close {
position: absolute;
top: 10px;
right: 10px;
}
.product {
position: absolute;
top: 30px;
left: 20px;
}
.productImage {
width: 100px;;
display: block;
float: left;
margin-right: 10px;
position: relative;
height: 100px;
border: solid 1px red;
}
.productName {
font: 500 15px/16px Arial;
float: left;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="products">
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 1</div>
<div class="itemPrice"> $100 </div>
<div class="itemDescription"> Description 1 in here.</div>
<span class="view">View popup</span>
</div>
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 2</div>
<div class="itemPrice"> $300 </div>
<div class="itemDescription"> Description 2 in here.</div>
<span class="view">View popup</span>
</div>
</div>
<div class="overlay">
<div class="popup">
Close X
<div class="product">
<div class="productImage"><img src="" /></div>
<div class="productName"> xxxxxx</div>
<div class="productPrice"> uuuuuuuu </div>
<div class="productDescription"> tttttttt </div>
</div>
</div>
</div>
</div>

Make elements below absolute positioned div clickable

I am working on a project where I need to upload screenshots that are copy pasted into the browser. The system works but I have a problem to click the images to show them in full-screen.
I made a JSFiddle of what it looks like:
<div id="screenshot-container" class="vertical-scroll-div">
<div id="editor" contenteditable="true"> </div>
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
</div>
.vertical-scroll-div {
width: 100%;
padding-top: 10px;
height: 220px;
min-height: 220px;
overflow-x: auto;
white-space: nowrap;
border: 2px dashed #a9a9a9;
}
#editor {
position: absolute;
top: 0px;
width: 100%;
height: 220px;
outline: 0;
}
.screenshot {
margin-left: 10px;
height: 200px;
width: 200px;
max-height: 200px;
max-width: 200px;
}
.screenshot:hover {
cursor: pointer;
border: solid 2px #3498db;
}
The editor div can't be used as parent because it will be cleared when inserting a new image.
Hope someone got an idea.
Thanks

Just add these properties to the .screenshot selector:
.screenshot {
position: relative;
z-index: 10;
}

use this css
.screenshot {
height: 200px;
margin-left: 10px;
max-height: 200px;
max-width: 200px;
position: relative;
width: 200px;
z-index: 5;
}

Force or Embed 7 images positioned Absolute into specific div?

so I am building a website, where users have their avatars loaded based on code that's given to JS function, it's 7 images all same size but different elements - Skin base, hair, eyes, mouth, shirt, shoes, pants.
They get loaded on page loading and they need to be stacked on top of each other.
Here is html:
<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
<div id="DataFrame">
<div class="DataObjects"><div class="InfoLabels">Account Level: </div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Profile Views: </div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Messages: </div><div class="InfoData" id="MessageData">0</div></div>
</div>
<div id="AccountFrame">
<div id="AccountAvatar">
<div id="AvatarImgFrame"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/></div>
<input type="button" id="sendPm" value="Send Message" name="sendPm"/>
</div>
<div id="AccountInfo">
<div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ." ". "(".$row['username'].")");?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
</div>
</div>
</div>
</body>
"LoadCharDiv()" is a JS function which just places images into div based on character code provided, don't think it's related but here it is anyway:
function LoadCharDiv(codas, div){
var code = "1c0c1c0c1c2c1";
var data = code.split("c");
var skins2 = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];
var inhtml = "";
for(var d = 0; d < skins2.length; d++){
inhtml = inhtml + "<img src='"+skins2[d]+"'/>";
}
document.getElementById(div).innerHTML = inhtml;
}
And here is my CSS on page:
*{
margin: 0px;
padding: 0px;
font-family: 'Ubuntu', sans-serif;
}
body{
background-color: #111111;
margin: 1%;
}
#MainBody{
width: 60%;
margin-left: auto;
margin-right: auto;
height: 800px;
}
#AccountFrame{
width: 100%;
padding: 15px;
height: 100%;
background-color: #eeeeee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
}
#DataFrame{
font-size: 2.0vh;
padding: 15px;
background-color: #eeeeee;
border-radius-top: 4px;
width: 100%;
text-align: right;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
display: inline-block;
}
#AccountAvatar{
float: left;
width: 30%;
}
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
#sendPm{
width: 100%;
height: 5.0vh;
background-color: #0071ff;
border: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #1A1A1A;
font-size: 2.0vh;
}
#sendPm:hover{
background-color: #308CFF;
}
.DetailLabel{
display: inline-block;
width: 9.7vh;
color: #0071ff;
}
.DetailInput{
width: 40%;
display: inline;
}
.DetailObjects{
width: 100%;
display: inline-block;
padding: 1vh;
}
#AccountName{
color: #0071ff;
}
#AccountInfo{
width: 68%;
float: left;
font-size: 1.7vh;
padding: 1vh;
height: 100%;
}
#NameObject{
font-size: 3vh;
padding: 0px;
padding-left: 1vh;
}
As you can see in image, with current
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
Character is placed on side of page, I want it to be placed right above Send Message button, and stay there without floating around screen if page gets resized.
Here is what it should be like:
I am thinking perhaps there is a way to layer images on top of each other without position: absolute?
Thanks.
Tried setting Parent position to relative.
#AccountAvatar{
float: left;
height: 500px;
position: relative;
width: 30%;
}
#AccountAvatar img{
width: 60%;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
}
Character appears below button.
Any way to adjust him to be above button?

Your absolute positioning is fine however, absolute elements are not in the normal content flow so you need to add a height to the container of the absolute elements.
http://jsfiddle.net/rwh3emp2/1/
#AvatarImgFrame is the container of the image
#AvatarImgFrame {
height: 230px;
}
You can remove the height from #AccountAvatar