Divs not in the right position when clicking button - javascript

I got 6 divs of which they each have an image and a button (javascript). When I click on a button of one of the divs, another div will show on the exact same place of the button of the div you clicked. When I click on all buttons separate, there is no problem. But when I click by example 'auto 2' and 'auto 3', 'auto 3" will show on the right side of the screen, not on the place where it will show when you click on the button separate. I got also this problem with 'auto 4,5 and 6. I dont got this problem with the first div 'auto 1' because its has an absolute position. When I used an absolute position on the other divs i couldnt position them properly. I think the problem has to do something with the fact that a div has a block display and that by example 'auto 2' pushes 'auto 3" to the side because it is wider than it looks.
PS. srry for my bad english and I used and internal javascript with tags because an external document like .js doesnt work for me for some reason
Thanks in advance!
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
background-color: #234aa6;
}
.auto{
padding-top: 4em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
}
.auto h1{
font-size: 40px;
}
.auto img{
width: 90%;
height: auto;
padding-top: 1em;
}
.auto button{
background-color: darkblue;
color: white;
padding: 20px;
font-family: helvetica;
font-size: 20px;
text-transform: uppercase;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 10px;
}
.auto button:hover{
transition: 0.4s;
background-color: #011b57;
}
.container {
text-align: center;
}
.auto:nth-of-type(3n+1) {
clear:left;
}
.wrapper input{
padding: 20px 100px 20px 100px;
text-align: center;
margin-top: 10em;
background-color: white;
border: none;
}
.select1{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: absolute;
display: none;
}
.select1 h1{
font-size: 40px;
}
.bg{
width: 570.83px;
height: 325px;
background-color: darkblue;
text-align: center;
margin: auto;
margin-top: 0.5em;
font-family: helvetica;
font-size: 2.5em;
padding-top: 3.5em;
}
.select2{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 65.5em;
}
.select2 h1{
font-size: 40px;
}
.select3{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 65.5em;
}
.select3 h1{
font-size: 40px;
}
.select4{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 0.25em;
bottom: 32.9em;
}
.select4 h1{
font-size: 40px;
}
.select5{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 32.9em;
}
.select5 h1{
font-size: 40px;
}
.select6{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 32.9em;
}
.select6 h1{
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sleutelkast</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="autolijst">
<div class="auto">
<h1>Auto 1</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button1">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 2</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button2">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 3</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button3">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 4</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button4">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 5</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button5">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 6</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button6">SELECTEER</button>
</div>
</div>
</div>
<div class="selectlijst">
<div class="select1" id="select1">
<h1>Auto 1</h1>
<div class="bg" id="bg">
Sleutel 1
</div>
</div>
<div class="select2" id="select2">
<h1>Auto 2</h1>
<div class="bg" id="bg">
Sleutel 2
</div>
</div>
<div class="select3" id="select3">
<h1>Auto 3</h1>
<div class="bg" id="bg">
Sleutel 3
</div>
</div>
<div class="select4" id="select4">
<h1>Auto 4</h1>
<div class="bg" id="bg">
Sleutel 4
</div>
</div>
<div class="select5" id="select5">
<h1>Auto 5</h1>
<div class="bg" id="bg">
Sleutel 5
</div>
</div>
<div class="select6" id="select6">
<h1>Auto 6</h1>
<div class="bg" id="bg">
Sleutel 6
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".select1").hide();
$("#button1").click(function(){
if($(".select1").is(':visible')){
$(".select1").slideUp(100);
}
else
{
$(".select1").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select2").hide();
$("#button2").click(function(){
if($(".select2").is(':visible')){
$(".select2").slideUp(100);
}
else
{
$(".select2").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select3").hide();
$("#button3").click(function(){
if($(".select3").is(':visible')){
$(".select3").slideUp(100);
}
else
{
$(".select3").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select4").hide();
$("#button4").click(function(){
if($(".select4").is(':visible')){
$(".select4").slideUp(100);
}
else
{
$(".select4").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select5").hide();
$("#button5").click(function(){
if($(".select5").is(':visible')){
$(".select5").slideUp(100);
}
else
{
$(".select5").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select6").hide();
$("#button6").click(function(){
if($(".select6").is(':visible')){
$(".select6").slideUp(100);
}
else
{
$(".select6").slideDown(100);
}
});
});
</script>
</html>

Related

Jquery - FadeIn appears to be pushing down div

Jquery Fadein appears to be pushing down the div, after fading in the hidden one.
What would
be the best way to tackle this? I have read a few of the old solutions, but they haven't helped. I've also tried removing the div class(the div class I want hidden, when it fades in) but that hasn't appeared to have helped either.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="itemWithin">
<div class="hiddenOne">
<h2 class="center2">Mining & Resources</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Mining & Resources</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin2">
<div class="hiddenOne">
<h2 class="center2">Defence</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Defence</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin3">
<div class="hiddenOne">
<h2 class="center2">Energy & Water</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Energy & Water</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin4">
<div class="hiddenOne">
<h2 class="center2">Public & Private Infrastucture</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Public & Private Infrastucture</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin5">
<div class="hiddenOne">
<h2 class="center2">Commercial & Residential Building</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Commercial & Residential Building</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin6">
<div class="hiddenOne">
<h2 class="center2">Industrial Manufacturing</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Industrial Manufacturing</h2>
<button class="button">View More</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis{
text-align: center;
margin-top:20px;
}
.center2{
text-align: center;
background-color:red;
}
.container{
margin-top: 20px;
display: flex; /* establish flex container */
flex-wrap: wrap; /* enable flex items to wrap */
justify-content: space-around;
}
.button{
background: red;
color: white;
padding:10px;
}
.buttonTwo{
background: red;
color: white;
padding:10px;
}
.buttonThree{
background: red;
color: white;
padding:10px;
}
.buttonFour{
background: red;
color: white;
padding:10px;
}
.buttonFive{
background: red;
color: white;
padding:10px;
}
.buttonSix{
background: red;
color: white;
padding:10px;
}
.white{
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne{
height:300px;
padding-top: 20px;
background-color: red;
color: white;
}
.itemWithin{
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
.itemWithin2{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin3{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin4{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin5{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin6{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
JavaScript/Jquery
$(document).ready(function () {
$(".hiddenOne").hide();
$(".button").hover(function () {
$(this).parent().find('.hiddenOne').fadeIn("slow");
})
$(".hiddenOne").mouseleave(function () {
$(this).fadeOut("slow");
})
});
change hiddenOne class to :
.hiddenOne{
height:300px;
padding-top: 20px;
background-color: red;
color: white;
position: absolute;
width:100%;
}
and add this class
.container > div{
position:relative;
}
full code
$(document).ready(function() {
$(".hiddenOne").hide();
$(".button").hover(function() {
$(this).parent().find('.hiddenOne').fadeIn("slow");
})
$(".hiddenOne").mouseleave(function() {
$(this).fadeOut("slow");
})
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis {
text-align: center;
margin-top: 20px;
}
.center2 {
text-align: center;
background-color: red;
}
.container {
margin-top: 20px;
display: flex;
/* establish flex container */
flex-wrap: wrap;
/* enable flex items to wrap */
justify-content: space-around;
}
.button {
background: red;
color: white;
padding: 10px;
}
.buttonTwo {
background: red;
color: white;
padding: 10px;
}
.buttonThree {
background: red;
color: white;
padding: 10px;
}
.buttonFour {
background: red;
color: white;
padding: 10px;
}
.buttonFive {
background: red;
color: white;
padding: 10px;
}
.buttonSix {
background: red;
color: white;
padding: 10px;
}
.white {
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne {
height: 300px;
padding-top: 20px;
background-color: red;
color: white;
position: absolute;
width: 100%;
}
.itemWithin {
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
.itemWithin2 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin3 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin4 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin5 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin6 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.container>div {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<div class="container">
<div class="itemWithin">
<div class="hiddenOne">
<h2 class="center2">Mining & Resources</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Mining & Resources</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin2">
<div class="hiddenOne">
<h2 class="center2">Defence</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Defence</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin3">
<div class="hiddenOne">
<h2 class="center2">Energy & Water</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Energy & Water</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin4">
<div class="hiddenOne">
<h2 class="center2">Public & Private Infrastucture</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Public & Private Infrastucture</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin5">
<div class="hiddenOne">
<h2 class="center2">Commercial & Residential Building</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Commercial & Residential Building</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin6">
<div class="hiddenOne">
<h2 class="center2">Industrial Manufacturing</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Industrial Manufacturing</h2>
<button class="button">View More</button>
</div>
</div>
<script src="app.js"></script>

How can I arrange my divs in 2 columns so it looks like a grid/photo gallery?

I am new to coding and web design. Right now, I am constructing a portfolio website which showcases the other websites I've created. I am trying to create a layout where my Divs on the site are in two columns (under 'my work'). I am trying to figure out what to use but I'm unsure if I'm being honest. I've played around with display flex and display grid but I did not get the result I wanted. Here is my below... I will also link another persons' site to give you a visual of what I'm trying to achieve. Any help or tips would be greatly appreciated... Thank you!
Also, I will include my code.
My page and work so far
What I'm trying to create
* {
margin: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
padding-top: 370px;
padding-bottom: 370px;
background-color: rgb(38,61,66);
color: white;
font-family: 'Courier New', monospace;
font-weight: normal;
}
h2 {
text-align: center;
padding-top: 100px;
padding-bottom: 30px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
.main-body {
background-color: rgb(244,132,95);
width: 100%;
overflow-x: hidden;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 25%;
}
#tribute {
width: 100%;
}
#product {
width: 100%;
}
#survey {
width: 100%;
}
#technical {
width: 100%;
}
.work {
border: 1px solid #ccc;
}
.work:hover {
border: 1px solid rgb(38,61,66);
}
.desc {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
</div><!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Welcome To My Portfolio</h1>
<main>
<div class="main-body">
<h2>Some of my work</h2>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/poEOXVz">
<img src="https://lh3.googleusercontent.com/P8cbTC4Y-l-4nwkjTh3S67d5qHCvRMX7XyE6cXAsbTg4IX1AvB9-xEHexWDOK1q5YidvZtxXLo4TzjqLd3n21kJM8j_3xr_a5aZM3UyX3GrCg_0C--3zujKK-AL7TEyJxbmyJaRv16NvcTR6-B1y-P03TcvNtp11zB3tHYEtvf5TrwZJtInwwE0l_BkhUR-0OKuQO4O2RZZY0zeoo0Mrq7fd4i5rjf3HWb0yJ4WAC3TQP8w1vW0XdarfZZeBtfvnZny9BAEfYqIoUw9Rp9hcXp5Se4zkRs4TaJmJmRwOiWb44RjvNCJ4-oYTGfJZ9R2vL21eUEO28G0TexVTkhHxeB4c4APGteu-iNAB6jx-xUZa37WATiDPylYTtUS4vBU5tbFgvxu9Lvfb4mwVJN8gG6CzuKHou80TJS0yEgxQI6tOZrunP1DtIOAKgXgbGtGqLe6bK8YxYc5yYBH9a5mbp3eA2k50Rrh3Uh7YXpl02GmaPI05fak2wGJ0o0lyWgo0rNd6H0w3bpC91Anqvv_hTVnI1drISA5n8bCfY1m8UNM827qozZQh9Q7CUXOjf_Vkh2NunlyGiKtksT94gtCk59_HfDeBiNb-FPFlKjcRnxS9OyGAQdHFGWgrs5i40KOUKqsEyxY-2zujyECMZidTp4Vvi7mRRsiUMVPAdEkWyLO462xkFUiYVN5_hKOXlQ=s571-no?authuser=0" alt="Tribute Page" id="tribute">
</a>
<div class="desc">Tribute Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/VwKgmBg">
<img src="https://lh3.googleusercontent.com/IJaG-M-uOIMWYyrEv1yOZRtlRmTV8diJY-d6DmFxyVJt2BE2-iXsRwFH1G21cOJgDBJCbjAZdvEG01gOTixgkZGmxaRbdlRqvaaVUI0wggikKtB8sGXa6irKIe3B3VB2apWyNghvYGEC0IoCCJgCskOP9x1Bs6wJAUSPONZa1maJrkOBYL_T3PPlfj5Jym_mj9hiuCAKYTMM_rV3ErLk94DJk3bSj2_ppQfo0meoZ_abrk7M81bB171SdDEKQ-q4MKf5SNQkZpZ4Xt-DWYINMbKe6ify9a_9jnAytdJxtcsDGzymzCAfTsW9Oo1QKuRVcp_fZmlKuL8ddJ2TPoYjW4UgwdU6Zt2Qya4Q2NvWcjUSsuScgChbtrqPFUDRuKAwkKD3YAdjAozXQxgGWHqKIR9Uvfd50NYGJRspzXm9t4HNmTHnknO3Alq80HUPVvXuxM3v6rtbfmj8k5__o5YXh7yAUBhO2WYRJxx3255laQXIPxXzXt9013nUp35bKsHGHxL56m6fdADPtxAm1grkEcICHlIoOyNayX2c34pMpXwaJFajEODZ4Le7ng0K7_ORv0CnfFM4Z4tEuw5B1DSK17UpPsRn2NFjPLSkI9BqCA-7ZL_DSlYZYwba7A4PyDbIXHstNzHjKuFPhmb3seCfVYkzMj4mOeGGzHwtL-P9ABTK9ImvZ4l4ILFgGMomXw=w567-h568-no?authuser=0" id="survey">
</a>
<div class="desc">Survey Form</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/oNzrYQZ">
<img src="https://lh3.googleusercontent.com/QkjpqBlrvlMgUdoK6qSnXAcaqSFAdsZEDwrEsl96CGa-QXQrSUOiuf87cQlnYw6ciaelPWkk6hffKoyys4rcWb24DzGId2g2mHUFE52N0toZ6RzIQlXogtYDyWk2YVdnKshfyU_uEmIZJXED_qQ-M4bJ-l22us9yhDOSOSprhEp1oQoB4tICP-d8VPetANQihYa018aa87ixwKu9IA1vRgeS1QEPNcs9MXl0mPaEYx7br_jZuT-DJ2Ae_revIXieopvH_s7Iw-p9kEbb0OzB8lbqThiwCXmDaF6RcfhEDhI_A-sRlnscG6sqCOMn2bPGkNoWbKLkd3KpFnknwFwGpyMX-E3Q4jiBAcbaiROV70WlzkkypOSRwHAZuwWDRwf9qlnAOx-hJ46kMryfuH4ONqh6pe2UMe5lzaEnBaKMYpFuzupAelufIxl2maSraO7LFVEhixhAPJF7ldSMbaFNhXjNEk93DnvxOQuTqLAsWYCBfmFxVCFzWF2hfOHmK2YW7kTI4wTdt66QaI_fbfKeBrKOdAQ3qozVbnpBWymdgXc0rPmn2NrJFoLt327yX0XlIhOdvN-u31koYN3ThSUmJpKI15Pid8ScF7JifzAat4mEJQxk_bDZvCSTQnTCYQQagTVOHfixcQZ-OHfUp5korzvdg4L9sjLVK66meA19KXNNeWDYc3iadl1LscknFQ=w572-h571-no?authuser=0" id="product">
</a>
<div class="desc">Product Landing Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/RworweN"><img src="https://lh3.googleusercontent.com/_K_RWpOCQKs5GZYhQkoupmelGzWqrZmhnOJ9zcRpSMZfDDGF8Z9x6KzCA-DpZdYKoh-sXB4B8wjzGXKiOseSkreQwa-rLboJmonxq1Ea2OdNYTIx5Ztdx4ZdHBliSKlEVPDej1yp1VqT80FYpcpao4TOpaS2doyBPFHg-KSkHID-Rr1tPHc8waaA44DiCvDpFI8zbT2E1qP9KprXOl5Zl9oKyOFOTr102ZqWvnWi4PnxgsnNSwQ34qDvYJmVX1C1XdcC1Yf7GNHbNjJ_Elh612G3tC2Ool7ynQ9TWnttk5T9Ah0HKks1BctQolk8NFHNnOKXAu0i2qVrz7Bq7GbYMH2h96v_btud-dGaV05E8rKQ2bMDLIhZeSq4cTPyBvhkHru5L0FgRUNuajR45suoZgbNVtkllKv5PM7pKfXbpgxDtTikii6-y6OhpoAZC3sFkyX0tWQP93PbJIJdXBPLjE1zoUNgxLqE0J2TDmU0mTYl1QcumbP2_C1biY9Q4fRj6MYgwiULgcsgb1EICpUVnsPIRVlc_jeMa81zTfoF-GJ_cIChtE0jTQt6IrDWjW55FU8rICtOUyRRyVhfy81_tkXdObtmzlJ8w9ZJL7RCXjbeCbl4YW0lTBoEqygUZJwRDAYuJTBOm4FWJIBIhC__lI1OKrVEwelyWyugOPVjSiyEt_IXk-V78vb2KkiJ7g=w570-h571-no?authuser=0" id="technical">
</a>
<div class="desc">Technical Documentation Page</div>
</div>
</div>
</div>
</main>
</body>
</html>
use display : flex :
warp the four divs in a big div with class flex-main.
and this is the css:(only the parts with changes)
.main-body {
background-color: rgb(244,132,95);
width: 100%;
}
.flex-main{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 35%;
margin-right: auto;
margin-left: auto;
}
that would work as you want.good luck!

toggle Jquery doesn't work

I have an issue with jquery toggle, it does not toggle the current div but instead the next div of the current one, when I try to change the class of the toggle div it doesn't work at all. Can anyone help me please ?
P.S: I'm toggling the SITES block, I wrapped it's content (background: yellow) in the class="clsDashRegion_sitesBloc", when I put this class in my JS it does not work.
Here is my code
(function zipContentBloc($) {
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() {
// Toggle the panel next to the item that was clicked
$(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
})(jQuery);
/* Plus and Minus Signs */
.clsDashRegion_zipIndicator {
position: absolute;
top: 6%;
right: 0.5rem;
transform: translateY(-50%);
font-size: 1.8rem;
}
/* Plus */
.clsDashRegion_zipIndicator::after {
content: '\002B';
}
/* Minus */
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after {
content: '\002D';
font-size: 3rem;
}
.clsDashRegion_levelOne {
width: 25rem;
/* height: 100%; */
background: #3c4647;
position: relative;
}
.clsDashRegion_catgBloc {
position: relative;
left: 2%;
width: calc(100% - 1rem);
height: 12.6rem;
}
.clsDashRegion_catgBlocBackground {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.9);
opacity: 0.6;
}
.clsDashRegion_catgHeaderBloc {
height: 2.5rem;
background: aqua;
}
.clsDashRegion_catgLogoBloc {
width: 2.5rem;
height: 2.5rem;
float: left;
}
.clsDashRegion_catgTitleBloc {
float: left;
width: calc(100% - 5.5rem);
height: 2.5rem;
color: #000000;
font-weight: bold;
font-size: 1.4rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgReduceBloc {
float: right;
width: 3rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgTNTFMBloc {
/* position: absolute; */
/*float: none;*/
display: block;
float: right;
width: 10rem;
height: 2.5rem;
}
.clsDashRegion_catgTitleTNTFM {
float: left;
width: 5rem;
height: 2.5rem;
color: #000000;
text-align: center;
font-weight: bold;
}
.clsDashRegion_catgInfoBloc {
position: relative;
float: right;
display: block;
width: 100%;
height: 2.5rem;
}
.clsDashRegion_infoTitleBloc {
float: left;
width: 50%;
height: 2.5rem;
font-weight: bold;
margin-left: 1rem;
}
.clsDashRegion_infoValueBloc {
float: right;
width: 5rem;
height: 2.5rem;
text-align: center;
}
.clsDashRegion_wrapbuttonBlocTicket {
position: relative;
float: left;
display: block;
width: 100%;
height: 4rem;
}
.clsDashRegion_wrapbuttonBlocGE {
position: relative;
float: left;
display: block;
width: 100%;
height: 5rem;
}
.clsDashRegion_catgbuttonBloc {
position: relative;
float: left;
top: 1rem;
text-align: center;
}
.clsDashRegion_buttonValue {
width: 5rem;
height: 1.5rem;
margin-left: 2rem;
border: 1px solid;
line-height: 1.4rem;
background: chartreuse;
border-style: groove;
}
.clsDashRegion_buttonTitle {
margin-left: 1.5rem;
line-height: 1.4rem;
font-weight: bold;
}
.clsDashRegion_catgInfoBlocSite {
position: relative;
float: right;
display: block;
width: 100%;
top: 0.5rem;
text-align: center;
font-weight: bold;
}
.clsDashRegion_valueTech {
float: left;
width: calc(100% - 4rem);
margin-bottom: 0.5rem;
border-style: groove;
letter-spacing: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsSubPageArea">
<div class="clsDashRegion_levelOne">
<div class="clsDashRegion_catgBloc">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div>
<div class="clsDashRegion_catgTitleBloc">ALARMES</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Critique</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:8em;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TICKETS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocTicket">
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:20rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div>
<div class="clsDashRegion_catgTitleBloc">SITES</div>
<div class="clsDashRegion_zipIndicator"></div>
</div>
<div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;">
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">-3dB</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Rx</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Perte HF</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Décrochage HS</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocGE">
<div class="clsDashRegion_catgInfoBlocSite">GE Actif</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V2</div>
<div class="clsDashRegion_buttonTitle">- 10 jrs</div>
</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:18rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div>
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div>
</div>
</div>
</div>
</div>
</div>
Happens because you use extra selector with on('click', '.clsDashRegion_catgBloc',...
Try this:
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) {
// Toggle the panel next to the item that was clicked
$( event.target ).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
$(this) = $('.clsDashRegion_levelOne'); - block which you add .on();
$( event.target ) =$('.clsDashRegion_catgBloc'); - block which was exactly clicked
Fiddle example: https://jsfiddle.net/z4tdxmbk/
Check this also

View divs when click buttons

As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>
JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>

the inner java script is override the css property on this html code

The inner Java script is override the CSS property on this HTML code initially I set the value of ID bad as none using CSS. However it is not working on the code example below. The Java script is not working properly if you look at the ID bad, initially it's value is none but it shown the data before clicking on the image.
How can I fix it?
function myFunction(){
document.getElementById("bad").style.display="block";
}
#good{
width: 100%;
height: 100%;
}
#bad{
position:absolute;
width: 15%;
height: 100%;
background-color: #023b3b;
top:0%;
display: none;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<img src="button.jpg" onclick="myFunction()" id="button"><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
function myFunction(){
document.getElementById("bad").style.display="block";
}
#good{
width: 100%;
height: 100%;
}
#bad{
position:absolute;
width: 15%;
height: 100%;
background-color: #023b3b;
top:0%;
display: none;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
.icon{
color :red;
background-color:yellow;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<i class="icon fa fa-anchor" onclick="myFunction()" id="button"></i>
<!-- <img src="button.jpg" onclick="myFunction()" id="button">--><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
Your issue shows when you load the page:
VM748:162 Uncaught SyntaxError: Unexpected token {
And in the console when you try to click the button:
VM851:178 Uncaught ReferenceError: myFunction is not defined
The problem is that your function is missing parentheses. Change it to:
function myFunction() {
document.getElementById("bad").style.display = "block";
}
Example fiddle.
It seems to be a syntax error. Look at the way you have deifned the function.
function myFunction{
document.getElementById("bad").style.display="block";
}
it should be
function myFunction**()**{
document.getElementById("bad").style.display="block";
}

Categories

Resources