jQuery add class to one element instead of all with same class

jQuery add class to one element instead of all with same class - javascript

I have multiple battery meters on a page that get their power bar width values dynamically and I'm trying to add a 'lowBatt' class with JS and jQuery to the existing 'bar' class when when the 'bar' class width is less than 2px and I have 2 issues:
It is only checking the first 'bar' class element width.
If the width of that first 'bar' class elements width is less than 2px it adds the 'lowBatt' class to all 'bar' class elements.
What I need to happen is check all 'bar' class elements widths and any that are less than 2px width add the class 'lowBatt' to only those 'bar' class elements, leaving the other 'bar' class elements with greater than 2px widths alone.
$('.bar').each(function(i, obj){
if ($('.bar').width() < 2) {
$(this).addClass('lowBatt')};
});
.progress {
height: 8px;
width: 16px;
background: #fff;
border-radius: 0;
border: 1px solid #fff;
float: left;
margin-bottom: 0;
}
.progress .bar {
background-color: #000;
background-image: none;
background-repeat: repeat-x;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: none;
transition: width 0.6s ease 0s;
}
.battTip {
height: 6px;
margin-top: 1px;
margin-right: -3px;
width: 2px;
float: right;
background: #fff;
border: 1px solid #000;
border-left: none;
}
.battIcnWrap {
width: 18px;
height: 10px;
margin: 0 auto;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
.bar.lowBatt {
background: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 8px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 15px;"></div>
</div>
<div class="battTip"></div>
</div>
Thanks for any help.

Inside your loop you need to use this to refer to the element being looped on. So use:
if ($(this).width() < 2) {
$('.bar').each(function(i, obj){
if ($(this).width() < 2) {
$(this).addClass('lowBatt')};
});
.progress {
height: 8px;
width: 16px;
background: #fff;
border-radius: 0;
border: 1px solid #fff;
float: left;
margin-bottom: 0;
}
.progress .bar {
background-color: #000;
background-image: none;
background-repeat: repeat-x;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: none;
transition: width 0.6s ease 0s;
}
.battTip {
height: 6px;
margin-top: 1px;
margin-right: -3px;
width: 2px;
float: right;
background: #fff;
border: 1px solid #000;
border-left: none;
}
.battIcnWrap {
width: 18px;
height: 10px;
margin: 0 auto;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
.bar.lowBatt {
background: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 8px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 15px;"></div>
</div>
<div class="battTip"></div>
</div>

Just replace $(.bar) with the .each loop with $(this).
$('.bar').each(function(i, obj) {
if ($(this).width() < 2) {
$(this).addClass('lowBatt')
};
});
.progress {
height: 8px;
width: 16px;
background: #fff;
border-radius: 0;
border: 1px solid #fff;
float: left;
margin-bottom: 0;
}
.progress .bar {
background-color: #000;
background-image: none;
background-repeat: repeat-x;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: none;
transition: width 0.6s ease 0s;
}
.battTip {
height: 6px;
margin-top: 1px;
margin-right: -3px;
width: 2px;
float: right;
background: #fff;
border: 1px solid #000;
border-left: none;
}
.battIcnWrap {
width: 18px;
height: 10px;
margin: 0 auto;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
.bar.lowBatt {
background: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 8px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 15px;"></div>
</div>
<div class="battTip"></div>
</div>

Related

Problem aligning items using CSS and HTML [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I have a basic question, but not basic for me. I am facing an issue to align div and removing some extra spacing. I have attached to screen shots. One shows how design looks right now and another shows to remove the extra space that is marked in red box and also to align right most div to the bottom and top of the left div.
Or if some one can explain what is the best way to achieve this
Any help is highly appreciated.
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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="mainContainer">
<div class="topSection pd-10">
<div class="pd-10">
<div class="topBar">
<input type="text" value="36 pt">
<input type="text" value="Auto">
<div class="box">
<div class="leftAlign"></div>
</div>
<div class="box">
<div class="centerAlign"></div>
</div>
<div class="box">
<div class="rightAlign"></div>
</div>
<div>
<div class="circle"></div>
</div>
</div>
<div>
<textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
</div>
</div>
<div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5 ">
<div>
<div class="plus"></div>
</div>
</div>
</div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
</div>
</div>
<div>
<div class="mg-10 box">
<div class="logoUp"></div>
</div>
<div class="mg-10 box">
<div class="logoLeft"></div>
</div>
<div class="mg-10 box">
<div class="logoRight"></div>
</div>
<div class="mg-10 box">
<div class="logoDown"></div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background-color: #262626;
color: #c7c7c7;
font-family: lucidagrande;
/* font-size: 11px; */
font-weight: 400;
}
input[type=text] {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
width: 10%;
text-align: center;
}
textarea {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
text-align: center;
/* width: 95%; */
}
/* .topSection {
padding: 10px;
} */
.topSection>div,
.leftSection {
display: inline-block;
background-color: #323232;
}
.flexContainer {
display: flex;
flex-wrap: nowrap;
margin: 10px;
}
.box {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 16px;
text-align: center;
border-style: solid;
border-width: 2px;
}
.topBar {
margin-bottom: 15px;
margin-top: 5px;
}
.topBar>div {
display: inline-block;
vertical-align: bottom;
}
.leftAlign {
background: url(../images/leftAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.centerAlign {
background: url(../images/centerAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.rightAlign {
background: url(../images/rightAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.circle {
border: solid 2px #525252;
background-color: black;
border-radius: 50px;
height: 25px;
width: 25px;
}
.plus {
background: url(../images/plus.png) no-repeat center center;
background-size: auto;
height: 100%;
}
.iconBox {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 50px;
height: 50px;
border-style: solid;
border-width: 2px
}
.iconBox>div {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
text-align: center;
border-style: dotted;
height: 65%;
}
.logoUp {
background: url(../images/logoUp.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoLeft {
background: url(../images/logoLeft.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoRight {
background: url(../images/logoRight.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoDown {
background: url(../images/logoCenter.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.mg-5 {
margin: 5px;
}
.pd-10 {
padding: 10px;
}
.pd-5 {
padding: 5px;
}
.pd-b-5 {
padding-bottom: 5px;
}
.mg-10 {
margin: 10px;
}
Attached required designed. I don't need a code but approach to start this design in a best way. An explanation will be helpful.
[![enter image description here][3]][3]

sorry if it's a quick solution but it fix the problem of the space between the two elements. it's the simplest solution I didn't touch any of your elements.
i just add this properties to the pd10 class. check code :
*you can delete the margin if you want but I add it for style reasons:
body {
background-color: #262626;
color: #c7c7c7;
font-family: lucidagrande;
/* font-size: 11px; */
font-weight: 400;
}
input[type=text] {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
width: 10%;
text-align: center;
}
textarea {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
text-align: center;
width: 95%;
}
/* .topSection {
padding: 10px;
} */
.topSection>div,
.leftSection {
display: inline-block;
background-color: #323232;
}
.flexContainer {
display: flex;
flex-wrap: nowrap;
margin: 10px;
}
.box {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 16px;
text-align: center;
border-style: solid;
border-width: 2px;
}
.topBar {
margin-bottom: 15px;
margin-top: 5px;
}
.topBar>div {
display: inline-block;
vertical-align: bottom;
}
.leftAlign {
background: url(../images/leftAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.centerAlign {
background: url(../images/centerAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.rightAlign {
background: url(../images/rightAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.circle {
border: solid 2px #525252;
background-color: black;
border-radius: 50px;
height: 25px;
width: 25px;
}
.plus {
background: url(../images/plus.png) no-repeat center center;
background-size: auto;
height: 100%;
}
.iconBox {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 50px;
height: 50px;
border-style: solid;
border-width: 2px
}
.iconBox>div {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
text-align: center;
border-style: dotted;
height: 65%;
}
.logoUp {
background: url(../images/logoUp.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoLeft {
background: url(../images/logoLeft.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoRight {
background: url(../images/logoRight.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoDown {
background: url(../images/logoCenter.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.mg-5 {
margin: 5px;
}
.pd-10 {
padding: 10px;
display:flex;
text-align-last: justify;
margin:10px;
}
.pd-5 {
padding: 5px;
}
.pd-b-5 {
padding-bottom: 5px;
}
.mg-10 {
margin: 10px;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="mainContainer">
<div class="topSection pd-10">
<div class="pd-10">
<div class="topBar">
<input type="text" value="36 pt">
<input type="text" value="Auto">
<div class="box">
<div class="leftAlign"></div>
</div>
<div class="box">
<div class="centerAlign"></div>
</div>
<div class="box">
<div class="rightAlign"></div>
</div>
<div>
<div class="circle"></div>
</div>
</div>
<div>
<textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
</div>
</div>
<div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5 ">
<div>
<div class="plus"></div>
</div>
</div>
</div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
</div>
</div>
<div>
<div class="mg-10 box">
<div class="logoUp"></div>
</div>
<div class="mg-10 box">
<div class="logoLeft"></div>
</div>
<div class="mg-10 box">
<div class="logoRight"></div>
</div>
<div class="mg-10 box">
<div class="logoDown"></div>
</div>
</div>
</div>
</div>
</body>
</html>

I refactored a few classes. You can check working example here: https://jsfiddle.net/1924ovfp/78/.
And here is the snippet:
body {
background-color: #262626;
color: #c7c7c7;
font-family: lucidagrande;
/* font-size: 11px; */
font-weight: 400;
}
input[type=text] {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
width: 10%;
text-align: center;
}
textarea {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
text-align: center;
/* width: 95%; */
}
/* .topSection {
padding: 10px;
} */
.flexContainer {
display: flex;
flex-wrap: nowrap;
margin: 10px;
}
.box {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 16px;
text-align: center;
border-style: solid;
border-width: 2px;
}
.topBar {
margin-bottom: 15px;
margin-top: 5px;
width: 100%;
}
.bottomBar{
width: 100%;
padding-right:15px;
}
.bottomBar textarea{
width: 98%;
}
.topBar>div {
display: inline-block;
vertical-align: bottom;
}
.leftAlign {
background: url(../images/leftAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.centerAlign {
background: url(../images/centerAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.rightAlign {
background: url(../images/rightAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.circle {
border: solid 2px #525252;
background-color: black;
border-radius: 50px;
height: 25px;
width: 25px;
}
.plus {
background: url(../images/plus.png) no-repeat center center;
background-size: auto;
height: 100%;
}
.iconBox {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 50px;
height: 50px;
border-style: solid;
border-width: 2px
}
.iconBox>div {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
text-align: center;
border-style: dotted;
height: 65%;
}
.logoUp {
background: url(../images/logoUp.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoLeft {
background: url(../images/logoLeft.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoRight {
background: url(../images/logoRight.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoDown {
background: url(../images/logoCenter.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.mg-5 {
margin: 5px;
}
.pd-10 {
padding: 10px;
}
.pd-5 {
padding: 5px;
}
.pd-b-5 {
padding-bottom: 5px;
}
.mg-10 {
margin: 10px;
}
.mainContainer {
width: 100%;
display: flex;
flex-direction: row;
gap:5px;
}
.mainContainer>div {
display: inline-block;
background-color: #323232;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="mainContainer">
<div class="pd-10 container_1">
<div class="topBar">
<input type="text" value="36 pt">
<input type="text" value="Auto">
<div class="box">
<div class="leftAlign"></div>
</div>
<div class="box">
<div class="centerAlign"></div>
</div>
<div class="box">
<div class="rightAlign"></div>
</div>
<div>
<div class="circle"></div>
</div>
</div>
<div class="bottomBar">
<textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
</div>
</div>
<div class="container_2">
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5 ">
<div>
<div class="plus"></div>
</div>
</div>
</div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
</div>
</div>
<div class="container_3">
<div class="mg-10 box">
<div class="logoUp"></div>
</div>
<div class="mg-10 box">
<div class="logoLeft"></div>
</div>
<div class="mg-10 box">
<div class="logoRight"></div>
</div>
<div class="mg-10 box">
<div class="logoDown"></div>
</div>
</div>
</div>
</body>

In your CSS file, add width to 40%.
I think it will correct your problem.
.pd-10 {
padding: 10px;
width: 40%;
}

Create a new div on selecting the menu in javascript

I was working the project where there is two view and three view (or if possible multiple view). Here in my code selected option normal creates two div placed vertically and Three view creates three view vertically (i.e adding one more div in Normal option). Here default one is Normal
.header{
width:100%;
height:40px;
background:#f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top:0px;
color: green;
font-weight:bold;
}
.container{
width: 100%;
min-height: 150px;
padding-top:2px;
display: flex;
}
.container .box1{
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #inside{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
padding-bottom:10px;
border-radius: 1px;
background:#f4f3f1;
}
.container .box1.box2{
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom:10px;
background:#f4f3f1;
}
.tabb{
float:left;
margin-left:10px;
margin:5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<body>
<div class="header">
<select class="tabb" name="opt" id="opt" >
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="inside" >
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second" >
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
</div>
</body>
Currently by default two div is created, how can I create 3 div on selecting the Three view of selection menu, placed vetically. In code how to dynamically create <div class="box1 box2 box3"> .

You mean this?
Also IDs need to be unique
$(function() {
$("#opt").on("change", function() {
$(".box3").toggle(this.value == "three"); // toggle will show if true, hide if false
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
</div>
</body>
To add views, try this:
var views = {
"three": ".box3",
"four": ".box3,.box4"
}
$(function() {
$("#opt").on("change", function() {
var view = views[this.value]; // if three or four
$(".box3,.box4").hide(); // hide anyway
if (view) $(view).show(); // show box2 or box3 and box4
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box4 #fourth {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
<option value="four">Four view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
<div class="box1 box2 box4">
<div id="fourth">
<center>Inside Box4</center>
</div>
<center>Main Box4</center>
</div>
</div>
</body>

first you must addEventListener for your select input and when you chose Three View:
//create div element
const div = documnet.createElement('div');
// add class name
div.className = 'box1 box2 box3';
// get container
const container = document.getElementsByClassName('container')[0];
// add div to container
container.appendChild(div);

div position relative to two other divs

I have a div composed of multiple divs that can collapse down, followed by another div under them.
Curently, as shown in the fiddle under, the bottom div only scrolls down upon clicking box 3 or box 1(the left column).
I would like the right column (boxes 2 and 4) to scroll down just like the left column, but I am failing so far.
Thanks for the help in advance.
var drop = document.getElementsByClassName("drop");
var i;
for (i = 0; i < drop.length; i++) {
drop[i].addEventListener("click", function() {
this.classList.toggle("active");
var collapse = this.previousElementSibling;
if (collapse.style.maxHeight) {
collapse.style.maxHeight = null;
} else {
collapse.style.maxHeight = collapse.scrollHeight + "px";
}
});
}
#panel {
background-color: white;
float: center;
position: relative;
width: 800px;
/* height: 500px; */
margin: 0 auto;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 25px;
}
#box1 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 250px;
top: 0;
left: 0;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box2 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 525px;
top: 0;
float: right;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box3 {
border: 2px solid #B7B7B7;
display: inline-block;
top: 0;
left: 0;
width: 250px;
position: relative;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box4 {
border: 2px solid #B7B7B7;
display: inline-block;
position: relative;
top: 0;
float: right;
width: 525px;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#travel {
margin: auto;
background-color: black;
border-style: solid;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 5px;
position: relative;
margin-top: 15px;
width: 800px;
height: 300px;
}
.drop {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
border-radius: 5px;
bottom: 0;
}
.active, .drop:hover {
background-color: #ccc;
}
.collapse {
padding: 0 18px;
background-color: gray;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1">
<br>this is box 1<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2" style="margin-bottom: 15px;">
<br>this is box 2<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box4">
<br>this is box 4<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box3" style="margin-top: 15px;">
<br>this is box 3<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="travel">
</div>
</div>

As you made the box2 and box4 float on right, you will need a clearing element after all boxes to clear the effect of floating objects. I have added <div style="clear:both"></div> after boxes:
var drop = document.getElementsByClassName("drop");
var i;
for (i = 0; i < drop.length; i++) {
drop[i].addEventListener("click", function() {
this.classList.toggle("active");
var collapse = this.previousElementSibling;
if (collapse.style.maxHeight) {
collapse.style.maxHeight = null;
} else {
collapse.style.maxHeight = collapse.scrollHeight + "px";
}
});
}
#panel {
background-color: white;
float: center;
position: relative;
width: 800px;
/* height: 500px; */
margin: 0 auto;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 25px;
}
#box1 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 250px;
top: 0;
left: 0;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box2 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 525px;
top: 0;
float: right;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box3 {
border: 2px solid #B7B7B7;
display: inline-block;
top: 0;
left: 0;
width: 250px;
position: relative;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box4 {
border: 2px solid #B7B7B7;
display: inline-block;
position: relative;
top: 0;
float: right;
width: 525px;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#travel {
margin: auto;
background-color: black;
border-style: solid;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 5px;
position: relative;
margin-top: 15px;
width: 800px;
height: 300px;
}
.drop {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
border-radius: 5px;
bottom: 0;
}
.active, .drop:hover {
background-color: #ccc;
}
.collapse {
padding: 0 18px;
background-color: gray;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1">
<br>this is box 1<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2" style="margin-bottom: 15px;">
<br>this is box 2<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box4">
<br>this is box 4<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box3" style="margin-top: 15px;">
<br>this is box 3<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div style="clear:both"></div>
<div id="travel">
</div>
</div>

Here's an approach using display: flex. I also moved the common styles of the boxes to a class .box.
var drop = document.getElementsByClassName("drop");
var i;
for (i = 0; i < drop.length; i++) {
drop[i].addEventListener("click", function() {
this.classList.toggle("active");
var collapse = this.previousElementSibling;
if (collapse.style.maxHeight) {
collapse.style.maxHeight = null;
} else {
collapse.style.maxHeight = collapse.scrollHeight + "px";
}
});
}
#panel {
background-color: white;
position: relative;
width: 800px;
/* height: 500px; */
margin: 0 auto;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 25px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.box {
border: 2px solid #B7B7B7;
position: relative;
transition: max-height 0.2s ease-out;
margin-bottom: 15px;
border-radius: 5px;
}
#box1 {
width: 250px;
}
#box2 {
width: 525px;
}
#box3 {
width: 250px;
}
#box4 {
width: 525px;
}
#travel {
margin: auto;
background-color: black;
border-style: solid;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 5px;
position: relative;
width: 800px;
height: 300px;
}
.drop {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
border-radius: 5px;
bottom: 0;
}
.active, .drop:hover {
background-color: #ccc;
}
.collapse {
padding: 0 18px;
background-color: gray;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1" class="box">
<br>this is box 1<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2" class="box">
<br>this is box 2<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box4" class="box">
<br>this is box 4<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box3" class="box">
<br>this is box 3<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="travel">
</div>
</div>

First, I can see that you styled these boxes separately even though they look basically the same. One problem with that method is that it becomes difficult to track which styles are peculiar to each box. (Just do some research on this)
In this your case, the major issue is the fact that you used the float property in box 2 and box 4.
When using float, you need another property overflow to manage the contents that are floating. If not, they might be treated as if they don't exist.
In your fiddle, you can make these changes:
First, clean up your html:
<div id=panel>
<div class="boxes">
<div class="left">
<div class="box" id="box1">
<br>this is box 1</br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div class="box" id="box3">
<br>this is box 3</br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
</div>
<div class="right">
<div class="box" id="box2">
<br>this is box 2</br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div class="box" id="box4">
<br>this is box 4</br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
</div>
</div>
<div id="travel">
</div>
</div>
Notice how I removed irrelevant inline styles. Too much of that can turn your markup into a mess when working with a bigger application. I also added classes - a cool way to prevent unnecessary repetition.
Now, your css would be cleaner this way:
.boxes {
overflow: auto;
margin-bottom: 10px;
}
.boxes .right {
width: 525px;
float: left;
padding-left: 10px;
}
.boxes .left {
width: 250px;
float: left;
padding-right: 10px;
}
.box {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
border-radius: 5px;
transition: max-height 0.2s ease-out;
width: 100%;
margin-bottom: 10px;
}
Notice how I used overflow for any div whose child has a float property.

How to write jQuery or JavaScript equivalent for CSS

I would like to have an jQuery equivalent to CSS which when tab is clicked shows it content. For now, I'm able to get this from CSS only. I would like to have same function with jQuery or Javascript.
For example, now when SUN is clicked, it shows "It is Sunday" and when MON is clicked, it shows "It is Monday" and so on.
How can I have same functionality from jQuery or Javascript?
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>

Is that your suitable ? (see snippet)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
ul#daysList {
display: inline-block;
width: 100%;
list-style: none;
background: #fff;
padding: 1px 1px 0 1px;
font-family: Open Sans;
margin: 10px 0 0 0;
}
ul#daysList li {
position: relative;
box-sizing: border-box;
display: block;
float: left;
box-shadow: 0 0 15px #939393;
width: 70px;
height: 30px;
text-align: center;
line-height: 030px;
color: #ccc;
margin-bottom: -5px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
ul#daysList li:hover {
color: red;
cursor: pointer;
}
ul#daysList li.currentDay {
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
ul#daysList li.currentDay:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.content {
display: none;
border-top: 1px solid #bbb;
padding: 0 7px;
margin-top: 0;
background: #fff;
width: 100%;
height: 40px;
line-height: 38px;
box-shadow: 0 0 15px #939393;
}
.currentContent {
display: inline-block;
}
</style>
</head>
<body>
<ul id="daysList">
<li data-day="content1" class="currentDay">SUN</li>
<li data-day="content2">MON</li>
<li data-day="content3">TUE</li>
<li data-day="content4">WED</li>
<li data-day="content5">THU</li>
<li data-day="content6">FRI</li>
<li data-day="content7">SAT</li>
</ul>
<div id="content1" class="content currentContent">
<p> This is Sunday</p>
</div>
<div id="content2" class="content">
<p> This is Monday</p>
</div>
<div id="content3" class="content">
<p> This is Tuesday</p>
</div>
<div id="content4" class="content">
<p> This is Wednesday</p>
</div>
<div id="content5" class="content">
<p> This is Thursday</p>
</div>
<div id="content6" class="content">
<p> This is Friday</p>
</div>
<div id="content7" class="content">
<p> This is Saturday</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () { // Jquery ready. for complete page loaded
$("#daysList li").click(function () {
var
content_id = "#"+ $(this).data("day");
$("#daysList li").removeClass("currentDay");
$(this).addClass("currentDay");
$(".content").removeClass("currentContent");
$(content_id).addClass("currentContent");
});
}); // Jquery
</script>
</body>
</html>

I can not make the buttons workable

I am trying to make a page with 2 questions with yes/no button using jQuery. I have used jQuery fade in/out options for this. But the buttons are not working. Can anyone help me with that??
I have given all the codes of my page with CSS and jQuery.
jQuery:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").delay(100).fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100, Function() {
$(".four").delay(100).fadeIn(100);
});
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #EEF3FA;
text-shadow: none;
}
a {
text-decoration: none;
}
.left {
float: left;
}
.fix {
overflow: hidden;
}
.clear {
clear: both;
}
header {
background: #49639C;
text-align: center;
}
section {} footer {
text-align: center;
}
.main {
width: 750px;
margin: 0 auto;
}
.head {} .head > h1 {
color: #ffffff;
font-size: 40px;
padding: 10px;
}
.sec {
background: #6281B6;
margin-top: 15px;
border-radius: 20px 20px 0px 0px;
}
.sec > h2 {
background: url("../img/prize.png") no-repeat scroll left 80px center rgba(0, 0, 0, 0);
color: #ffffff;
font-weight: normal;
margin-bottom: 0px;
margin-top: 10px;
text-align: center;
padding: 25px;
}
.sec > h2 > span {
color: #E8ED1A;
}
.cove {
border: 1px solid #cccccc;
background: #ffffff;
padding-bottom: 10px;
}
.congrts {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.congrts > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.congrts > p {
font-size: 16px;
margin: 5px 15px 8px;
text-align: left;
color: #000000;
}
.congrts > p > strong {} .prizes {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.prizes > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.item {
border-bottom: 2px dashed #cccccc;
margin-bottom: 30px;
margin-top: 20px;
padding-bottom: 15px;
padding-left: 60px;
}
.img {} .img > img {
width: 250px;
}
.text > h1 {
font-size: 30px;
margin-bottom: 5px;
}
.text > p {
font-size: 35px;
}
.text > span {
color: #FF0000;
font-size: 35px;
}
.text {
margin-top: 5px;
margin-left: 15px;
}
.anchor {
border-radius: 15px;
}
.anchor > a {
background: none repeat scroll 0 0 #6bb155;
color: #ffffff;
font-size: 35px;
padding: 10px 164px;
text-align: center;
}
.anchor > a:hover {
text-shadow: none;
}
.fotter {
margin: 10px 0px;
}
.heiighrt {
height: 580px;
}
.kolo {
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
}
.kolo > h1 {
color: #3B5998;
font-size: 35px;
}
.kolo > p {
color: #666666;
font-size: 17px;
margin-top: 10px;
}
.kolo > p > strong {}.span {
text-align: left;
font-size: 14px !important;
color: #666666;
margin-top: 10px;
}
.kolo1 {
border: 1px solid #cccccc;
padding: 5px 20px;
text-align: center;
background: #ffffff;
}
.pok {
margin: 15px auto;
width: 500px;
}
.pok > img {
float: left;
}
.pok > p {
float: left;
font-size: 35px;
font-weight: bold;
margin-left: 15px;
margin-top: 50px;
}
.anchortext {
margin: 5px auto;
}
.anchortext > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 40px;
padding: 2px 150px;
}
.anchortext1 {
margin: 5px auto;
}
.anchortext1 > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 35px;
line-height: 50px;
padding: 1px 70px;
}
.up1 {
padding: 2px 157px !important;
}
.up2 {
padding: 2px 143px !important;
}
.full {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
margin-top: 30px;
text-align: center;
}
.full h1 {
color: #3c599d;
font-size: 35px;
margin-bottom: 0px;
margin-top: 10px;
}
.full h2 {
font-size: 30px;
margin-bottom: 10px;
}
.full h2 span {
color: #3C599D;
}
.full1 {
text-align: center;
}
.full1 img {
margin-top: 150px;
width: 300px;
height: 20px;
}
.qus {
margin-bottom: 5px;
}
.two, .three, .four, .load, .ditiyo, .titiyo, .chortor{display:none;}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="main head fix">
<h1>Message</h1>
</div>
</header>
<section>
<div class="main fix">
<div class="heiighrt one">
<div class="kolo">
<h1>We Need Your Comment</h1>
<p>We've selected you from 1,873,235 <strong>Mac mobile users in Australia</strong> to comment on a new app. The great news is you'll have a chance to <strong>win a cool iPad mini after this!</strong>
</p>
<p class="span">* Only 2 questions and take just 15 secs!</p>
</div>
<div class="kolo1">
<div class="pok fix">
<img src="img/ipad.png" alt="ipad on hand">
<p>Do you use Fb
<br>everyday?</p>
</div>
</div>
<div class="qusone">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">Yes
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">No
</div>
</div>
</div>
</div>
</div>
<div class="heiighrt two">
<div class="full fix">
<h1>Question 1</h1>
<h2>Have You ever heard of <br><span>Facebook Home</span>?</h2>
<div class="qustwo">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, i know
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, Never Heard of
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt three">
<div class="full fix">
<h1>Question 1</h1>
<h2>If you get a new iPad mini,<br>will you install<span>Facebook <br>Home</span>?</h2>
<div class="qusthree">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, I love to
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, I don't like FB
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt load">
<div class="full1 fix">
<img src="img/loading.gif" alt="i pad on hand">
</div>
</div>
<div class="heiighrt four">
<div class="full full1 fix">
<h1>Thank You</h1>
<h2>You've helped in creating better apps for mobile users! Please proceed to see if<br> you will<br><strong>win the New iPad mini!</strong> </h2>
<img src="img/ipad.png" alt="i pad on hand">
<div class="qusfour">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">I am feeling lucky Today!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="main">
<p class="fotter">copyright 2013 Terms
Privacy
</p>
</div>
</footer>
Here the Fiddle

If you are going to want to bind your buttons that are hidden then my suggstion would be to switch to the following format
$(document).on('click', '.qustwo', function() { ...your code here... });
That should take care of it.

Try replacing your script by this:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100);
$(".four").delay(100).fadeIn(100);
});
});
You still need to clean up your code though to get intended flow.

We Keep Coding

JavaScript is the programming language of the Web.

jQuery add class to one element instead of all with same class - javascript

Related

Problem aligning items using CSS and HTML [closed]

Create a new div on selecting the menu in javascript

div position relative to two other divs

How to write jQuery or JavaScript equivalent for CSS

I can not make the buttons workable

Categories

Resources