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>

Make a div a wide rectangle with a circle in the middle

How can I make a div in to an irregular shape? I am trying to create a navigation bar that contains the logo in the center of the circular shape of this div. Here is what I am trying to make:
I really don't know where to start since I have never had to make any divs that aren't rectangular. The left of the div will contain 2 menu items, the right will contain 3 menu items and the center will contain my circular logo.

You will need to play with exact height and size, but this is a possible take on your problem
.menu {
background: darkgray;
padding: 1rem 0;
margin: 5rem;
text-align: center
}
.menu::after {
content: '';
background: darkgray;
border-radius: 50%;
padding: 5rem;
}
<nav class="menu"></nav>

You can try it with flexbox... I don't know, perhaps you have to build a little bit on it...but it's possible
.nav {
width: 100%;
height: 35px;
display: flex;
justify-content: center;
background-color: grey;
margin-top: 100px;
}
.logoContent {
height: 130px;
width: 130px;
border-radius: 130px;
background-color: grey;
margin-top: -50px;
}
<div class="nav">
<div class="logoContent"></div>
</div>

try this
html
<div id="rect">
<div id="cir">
</div>
</div>
css
#rect {
width: 500px;
height: 50px;
background: green;
margin: 100px;
}
#cir {
width:150px;
height: 150px;
background: green;
border-radius: 100%;
margin: 0 auto;
position: relative;
top: -50px;
}
see this https://jsfiddle.net/9rtoqpjc/

If you just trying for shape, then you can use gradients.
div{
width: 400px;
height: 100px;
color: #333;
background-image: radial-gradient(circle, currentColor 50px, transparent 0),
linear-gradient(transparent 30%, currentColor 30%, currentColor 70%, transparent 60%);
}
<div></div>
Working Fiddle

You should first of all get in confidence width css properties of div.
I suggest you to look here: w3schools.com
Anyway this is an example of code on what you can start working:
div{
background-color: gray;
}
#rectangle{
margin-top: 100px;
width: 500px;
height: 40px;
}
#circle{
position: relative;
width: 200px; /* radiant*2 */
height: 200px; /* radiant*2 */
border-radius: 50%;
left: 150px; /* rectangle_width/2 - radiant */
top: -80px; /* rectangle_height/2 - radiant */
}
#logo{
position: relative;
top: 36px; /* radiant - img_heigth/2 */
left: 36px; /* radiant - img_width/2 */
}
<div id="rectangle">
<div id="circle">
<img id="logo" src="http://findicons.com/files/icons/1070/software/128/mozilla_firefox.png" /> <!-- 128*128 -->
</div>
</div>

try this
html
<div class="header-area">
<div class="header-main">
<div class="menu-left">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
</ul>
</div>
<div class="logo">
<img src="#" />
</div>
<div class="menu-right">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
<li class="menu-3">Menu 3</li>
</ul>
</div>
</div>
</div>
css
.header-area {
width: 100%;
margin: 34px 0px;
}
.header-main {
width: 100%;
height: 60px;
position: relative;
background-color: #272727;
}
.menu-left {
width: 40%;
float: left;
}
.logo img {
width: 100%;
position: relative;
top: 38px;
vertical-align: middle;
}
.header-main ul li {
display: inline-block;
padding: 5px;
text-align: center;
}
.header-main ul li a {
color: #fff;
}
.logo {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: #272727;
color: #fff;
margin-left: auto;
margin-right: auto;
top: -27px;
float: left;
}
.menu-right {
width: 40%;
float: left;
}
see this https://jsfiddle.net/onn3b9z7/

You can try and use border-radius: 70% in your css file on a rectangular div and see if that works.

On display of hidden element it shows on wrong place because of scroll, only in chrome

I don't realy know how to explain this thing in short sentence.
I don't know if it is bug or not..
In parent div with fixed height and overflow-y scroll, I have multiple children elements, which has jquery function click, what displays hidden element in these divs. When I scroll down to last div, after click, hidden element displays in wrong place.
I tried to search for this problem, cause it should be pretty common. But nothing came up.s
It's realy hard to explain with words. Just look at this jquery example with mozilla and after that with chrome.
https://jsfiddle.net/zvwcdzjz/2/#
P.S. I need my original example work and look exactly the same on chrome and mozilla, cause right now on mozilla everything looks exactly as i want it to be, but it bugs on chrome.
It can be solved with jQuery too, makes no difference for me.
HTML:
<div id="el">
<div class="content">
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
</div>
</div>
CSS:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
margin-left: 300px;
background-color: red;
display: none;
}
JS:
$(function(){
$(".button").click(function(){
$(this).parent(".block").children(".blocktoopen").show();
});
$("#el").scroll(function(){
$(".blocktoopen").hide(); });
});

The set height of #el was causing the red box to appear in the incorrect location. I have removed this. See the example below:
Change:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
To:
#el {
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
And then you're good to go.

To make your life simpler make the parent .bloc relative so the blocktoopen will be computed relatively. Will help with the responsiveness.
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
bottom: 50%;
background-color: red;
display: none;
right: 0;
}

I can't post comment so here is another try with jsfiddle. I am not sure if you have horizontal scroll as well. remove margin-right from .blocktoopen and add right:0; Also wrap all your internal content inside a div and set the width to maybe 225px
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
display: none;
top: 50%;
bottom: 50%;
right: 0;
}
.internal{
width: 225px;
}

Have you tried to click on 2 buttons without scrolling? Try it. Looks like you were using visibility: hidden; and not display: none;. Maybe trying to set the position: relative; ...
Just seen the jquery script. Show() and hide() appears to work as visibility css property.
If u look with Chrome DevTools the jsFiddle example you will see that you can't see the red boxes but they are still there.

Loading an Image in `<div>` overrides html text

I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}

Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.

No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/

Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/

Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.

jQuery slideshow button that coordinates with picture #?

UPDATE: I figured it out thank goodness... So the key was to make the position: absolute and take out the bottom: 400px on the last thing on my CSS.
I'm trying to make a slide show of images that fade in and out when the circular buttons are clicked. There are 4 pictures and will be 4 circular buttons, so if I click the 3rd button the 3rd pic will fade in. However, my code isn't doing it properly. I reckon I'm using index() improperly? The pictures aren't appearing. They just fade in halfway through and then fade back out and then all the pictures disappear altogether. I think it's because of my position:relative on the ".pic"s. Help please!
Here's my HTML:
<body>
<div class="wrapper">
<div class="image_frame">
<div src="" class="first"></div>
<img src="images/galaxy.jpg" class="gala pic">
<img src="images/aurora.jpg" class="auro pic">
</div>
<div class="buttonholder">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
Here's my CSS:
html, body {
background: black;
margin: 0;
padding: 0;
}
.wrapper {
width: 800px;
margin: 0 auto;
padding: 0;
}
.image_frame {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
}
img {
width: 700px;
height: 400px;
padding-top: 10px;
float: left;
}
.gala {
display: block;
position: relative;
}
.buttonholder {
display: block;
width: 400px;
margin: 0 auto;
text-align: center;
}
ul li {
list-style: none;
height: 3px;
width: 3px;
float: left;
background: #efefef;
padding: 10px;
margin: 0 5px;
border-radius: 100px 100px 100px 100px;
cursor: pointer;
text-indent: -9999px;
}
.button_normal {
background: #efefef;
}
.selected {
background: grey;
}
.pic {
position: relative;
bottom: 400px;
}
And here's my JS
$('ul li').click(function(){
$('img').fadeOut(300);
var listPos = $('ul').index(this);
$('img').eq(listPos).fadeIn(300);
});

To minimally change your code replace your code
var listPos = $('ul').index(this);
with this:
var listPos = $('ul li').index(this);
or, better:
var listPos = $(this).index();
To answer the second part of your question you might want to refer to this answer: How to overlay images, or this Image over Image CSS