How to write jQuery or JavaScript equivalent for CSS - javascript

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>

Related

Form input checkbox and file type isn't functioning

I'm trying to make a form for adding a blog page.
I have title form, date form, content form, checkbox for blog category form and image form for the topic image.
When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.
Here's the screenshot:
Form screenshot
This is what I'm trying to achieve:
Form screenshot
I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.
Please help, I've stuck on this for 3 hours.
Here's the full code:
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
Thanks

The very first mistake is you have added different id than for
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
Here for value is reactJs but input id is checkReact
Second mistake is same as above
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
label for value is input-blog-image but input id is inputImage
Make those changes, will work fine.
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="reactJs" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>

The problem is the wrong value for the for attribute on two label elements. These are:
<label for="reactJs" class="check-label">
<label for="input-blog-image">
And the correct values would be:
<label for="checkReact" class="check-label">
<label for="inputImage">

How to do a input box placeholder animation

I seen this on a website, where the placeholder text "Pounds" remains on top of input box. Example:
How exactly is that accomplished?
<div id="my-ajax-filter-search">
<form action="" method="post">
<label id="label-lg">Weight</label>
<input type="text" name="search" id="search" value="" >
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>
CSS:
.input-text {
min-width: 84px;
}div#my-ajax-filter-search input#search , label#label-lg {
max-width: 250px;
margin: 0 auto;
display: block;
border-radius: 5px;
}
label#label-lg {
color: #fff;
margin-bottom: 6px;
font-weight: bold;
}
div#my-ajax-filter-search input#submit:focus {
outline: none;
}
div#my-ajax-filter-search input#submit {
max-width: 192px;
display: block;
width: 100%;
margin: 15px auto;
background: #fff;
font-family: "Montserrat", Sans-serif;
fill: #373278;
color: #373278;
background-color: #ffffff;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #ffffff;
border-radius: 50px 50px 50px 50px;
box-shadow: 0px 10px 30px -8px rgb(0 0 0 / 16%);
}
div#my-ajax-filter-search input#submit:hover {
color: #ffffff;
background-color: rgba(255,255,255,0);
border-color: #ffffff;
}
.elementor-price-table__feature-inner input {
min-width: 1px;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner {
margin: 0;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner .quantity {
max-width: 67px;
margin: 0 auto;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner a.add_cart.button.product_type_simple {
max-width: 106px;
margin: 12px auto;
display: block;
padding: 17px;
border-radius: 10px;
border: 1px solid;
background: #00a8ff;
color: #fff;
}

You can use this code
body {
font-family: sans-serif;
}
.label-before, .field input:focus + label::before, .field input:valid + label::before {
line-height: 15px;
font-size: 12px;
top: 5px;
background: #fff;
padding: 0 6px;
left: 9px;
}
.field {
position: relative;
margin-bottom: 15px;
margin-top:10px;
display:inline-block;
}
.field label::before {
content: attr(title);
position: absolute;
top: 10px;
left: 15px;
line-height: 30px;
font-size: 14px;
color: #777;
transition: 300ms all;
}
.field input {
width: auto;
height: 50px;
padding: 0px 15px;
padding-top:12px;
box-sizing: border-box;
font-size: 14px;
color: #222;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
.field input:focus {
outline: 0;
border-color: blue;
}
.field input:valid + label::before {
content: attr(data-title);
}
.field input:focus + label::before {
color: blue;
}
<div id="my-ajax-filter-search">
<form action="" method="post">
<div class="control-group">
<div>
<label id="label-lg">Weight</label>
</div>
<div class="field">
<input type="text" required autocomplete="off" name="search" id="search" value="" >
<label for="search" title="Pounds" data-title="Pounds"></label>
</div>
</div>
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>

Can't figure out how to make button be selected

I'm trying to make it so that you can select the buttons on my quiz but I can't figure out how. I have it set so the option to go to the next page is hidden until you select something, however, I've spent most of today trying to find a way to actually select one of the buttons. I have the hover and active events assigned in my css, but don't know what to do to actually make the button when pressed stay selected.
We aren't allowed to use external libraries like JQuery. Is angularJS considered an external library? May have to ask the professor that.
#import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body {
background-color: black;
padding: 20px;
}
#myQuiz {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
width: 650px;
650px;
position: relative overflow: hidden;
color: white;
background: black;
}
#myQuiz h1 {
font-weight: 100;
font-size 2em;
margin: 0px;
position: absolute;
top: 25px;
left: 36px;
}
myQuiz h1 span {
display: block;
font-weight: 900;
font-family: 'Titillium Web', sans- serif;
font-size: 3.2 em;
line-height: 65px;
}
#myQuiz h2 {
font-size: 3em;
margin: 0px;
font-weight: 100;
}
#myQuiz h3 {
font-size: 2em;
margin: 0px;
font-weight: 100;
}
#myQuiz p {
margin: 0px 0px 14px 0px;
}
#myQuiz .btn {
display: inline-block;
cursor: pointer;
background-color: #7E3517;
color: white;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .btn:hover {
background-color: white;
color: black;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .btn:active {
background-color: red;
color: black;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .progress {
width: 550px;
position: absolute;
top: 160px;
left: 40px;
}
#myQuiz .progress div {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
transition: background-color 1s;
}
#myQuiz .progress div.on,
#myQuiz .progress div.answered {
background-color: #ef0101;
}
#myQuiz .intro {
position: absolute;
top: 225px;
left: 50px;
width: 550px;
}
#myQuiz .intro p {
margin: 0px 0px 40px 0px;
}
#myQuiz .question {
width: 550px;
position: absolute;
top: 225px;
left: 50px;
}
#myQuiz .question .text {
font-size: 1.6em;
margin: 0px, 0px, 20px, 0px;
}
#myQuiz .question .ans {
display: inline-block;
font-size: 1.1em;
width: 225px;
border: 2px solid red;
border-radius: 6px;
padding 10px;
margin: 0px 15px 15px 0px;
}
#myQuiz .question .ans.selected {
border-color: blue;
}
#myQuiz .question.unanswered .ans {
cursor: pointer;
}
#myQuiz .question.unanswered .ans:hover {
background-color: rgba(163, 111, 155, .2);
}
#myQuiz .question.answered .ans {
cursor: default;
}
#myQuiz .done {
color: yellow;
margin-top: 50px;
transition: opacity 1.5s, margin-top 1.5s;
visibility: hidden;
opacity: 0;
}
#myQuiz .done .btn {
margin-top: 5px;
}
myQuiz .answered . done {
visibility: visible;
opacity: 1;
margin-top: 10px;
}
#myQuiz .results {
position: absolute;
top: 225px;
left: 660px;
width: 550px;
}
<div id="myQuiz">
<h1>Spirit Animal Quiz</h1>
<div class="progress">
<div class="on"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="question">
<form action="">
<p> <input type="radio" class="btn" value="male"> Rough<br></p>
<p><input type="radio" class="btn" value="female"> Soft<br></p>
<p> <input type="radio" class="btn" value="other"> both </p>
</form>
<p class="text">How would you describe your skin?</p>
<p class="btn">Rough</p>
<p class="btn">Smooth</p>
<p class="btn">Both</p>
<div class=d one>
<div class="btn">Next</div>
</div>
</div>
</div>

You can use the css property display to show and hide your next button.
use: display: none; to hide an element display: inline; to return to default
I gave the button and ID of "nxt" for easy access, and added event listeners to all of the buttons (because I don't know which one you want pressed before revealing next) With the onClick event you can do anything that should happen after the click in the callback function.
var btns = document.getElementsByClassName("btn");
for( var i =0; i < btns.length; i++){
btns[i].addEventListener("click", function(){
document.getElementById("nxt").style.display = "inline";
});
}
#nxt{
display: none;
}
#nxt, p.btn{
background-color: black;
color: white;
width : 150px;
height: 40px;
text-align: center;
}
<head>
<meta content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Find Out Your Spirit Animal</title>
<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div id= "myQuiz">
<h1>Spirit Animal Quiz</h1>
<div class = "progress">
<div class="on"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class = "question">
<form action="">
<p> <input type="radio" class= "btn" value="male"> Rough<br></p>
<p><input type="radio" class="btn" value="female"> Soft<br></p>
<p> <input type="radio" class="btn" value="other"> both </p>
</form>
<p class = "text">How would you describe your skin?</p>
<p class = "btn">Rough</p>
<p class = "btn">Smooth</p>
<p class = "btn">Both</p>
<div class = done>
<div class="btn" id="nxt">Next</div>
</div>
</div>
</div>
</body>

JavaScript Close on click outside

I know that this topic is already talked about but each problem is unique in some way. I tried other fixes and examples on how to make the submenu close when clicking outside of it but without success.
How can I make the uslugi > block_menu close when clicking outside of the box? (not toggling the link)
Currently, the nav item opens on click and closes when clicking on it. See code snippet:
$(".uslugi").click(function() {
$(this).children().children().toggle();
});
$(".uslugi").click(function() {
$(this).fadeIn(300, function() {
$(this).focus();
});
});
$(".uslugi").on('blur', function() {
$(this).fadeOut(300);
});
html,
body {
margin: 0;
padding: 0;
text-align: center;
}
#font-face {
font-family: Pompadur;
src: url(fonts/Times New Roman Cyr Regular.ttf);
}
#font-face {
font-family: COPRGTB;
src: url(fonts/COPRGTB.ttf);
}
#main {
width: 1100px;
margin: 0 auto;
padding: 0;
}
#header {
width: 1100px;
margin: 0 auto;
padding: 0;
}
#active {
width: 50px;
}
.block_menu {
margin: 0;
padding: 0;
width: 600px;
position: absolute;
z-index: 50;
background: #fff;
margin-top: -2px;
-moz-margin-top: -2px;
-webkit-margin-top: -2px;
-ms-margin-top: -2px;
tabindex: -1;
}
/* Начало описания верхнего меню сайта. */
.nav {
margin: 0;
padding: 0;
width: 973px;
height: 25px;
float: left;
background: #51284f;
border-radius: 0px 0px 5px 5px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
}
.nav li {
float: left;
}
.nav ul li a {
padding: 0;
padding-top: 6px;
padding-bottom: 6px;
margin: 0px 8px;
color: #fff;
text-decoration: none;
display: block;
font-family: Pompadur;
font-size: 12px;
}
.nav ul li a:hover {
padding: 0;
padding-top: 4px;
padding-bottom: 6px;
margin: 0px 8px;
border-top: 2px solid #fff;
}
.nav ul li ul li a:hover {
border: 0;
padding: 6px 0px;
margin: 0px 8px;
}
.nav ul li ul li a {
padding: 6px 0px;
margin: 0px 8px;
color: #000;
}
.pod_nav1 {
background: #red;
width: 149px;
margin-top: 0px;
padding-left: 0px;
position: absolute;
display: none;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 0 0 5px;
float: left;
}
.pod_nav2 {
background: #red;
width: 150px;
margin-top: 0px;
margin-left: 150px;
position: absolute;
display: none;
border-bottom: 1px solid #000;
float: left;
}
.pod_nav3 {
background: #red;
width: 150px;
margin-top: 0px;
margin-left: 300px;
position: absolute;
display: none;
border-bottom: 1px solid #000;
float: left;
}
.pod_nav4 {
background: #red;
width: 149px;
margin-top: 0px;
margin-left: 450px;
position: absolute;
display: none;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 0 5px 0;
float: left;
}
/*Конец описания верхнего меню*/
/*Начало описания языковой панели*/
#languages_menu {
margin: 0px;
padding: 0px;
width: 110px;
height: 35px;
background: #51284f;
border-radius: 0px 0px 15px 15px;
float: right;
}
#languages_menu ul {
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
}
#languages_menu li {
float: left;
}
#languages_menu li a {
padding: 4px 0px;
margin: 0px 7.3px;
color: #fff;
font-size: 16px;
text-decoration: none;
display: block;
}
#languages_menu li a:hover {
padding: 0px 0px;
border-top: 3px solid #fff;
}
/*Конец описания языковой панели*/
.logo {
margin: 0;
padding: 0;
margin-top: 25px;
float: left;
opacity: 0.7;
position: relative;
z-index: 30;
}
.logo:hover {
opacity: 1;
}
.logo img {
border: none;
}
/*Начало описания центрального меню*/
#middle_menu {
width: 1100px;
padding: 0;
margin: 0 auto;
margin-top: 20px;
border-top: 1px solid #c4c4c4;
border-bottom: 1px solid #c4c4c4;
float: left;
}
#middle_menu ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#middle_menu li {
list-style: none;
float: left;
}
#middle_menu li a {
padding: 0px 10px;
margin: 0px;
margin-right: 5px;
text-decoration: none;
color: #000;
font-size: 18px;
font-family: Pompadur;
display: block;
}
#middle_menu li a:hover {
background: #444444;
color: #fff;
}
/*Конец описания центрального меню*/
.wrapper_content {
margin: 0;
margin-top: 10px;
padding: 0;
width: 1100px;
/* border:1px solid #000; */
float: left;
}
.wrapper_new {
margin: 0;
padding: 0;
float: left;
}
.news_table {
margin: 0;
padding: 0;
margin-bottom: 20px;
float: left;
width: 800px;
}
.news_table h3 {
width: 800px;
margin: 0;
padding: 0;
text-align: left;
float: left;
}
/*----------------------Для пунктов меню и тегов----------------*/
.content {
margin: 0px;
padding: 0px;
}
/*-------------------------------------------------------------*/
.one_new {
margin: 0;
padding: 0;
margin-right: 10px;
width: 250px;
max-height: 350px;
float: left;
}
.one_new h4 {
margin: 0;
padding: 0;
}
.one_new p {
margin: 0;
padding: 0;
font-family: "Arial";
font-size: 12px;
text-align: center;
color: #717171;
}
.one_new a {
color: #000;
text-decoration: none;
}
.one_new a:hover>h4 {
color: #444;
}
.one_new a:hover>p {
color: #000;
}
.right_div {
margin: 0;
padding: 0;
float: right;
width: 230px;
height: 400px;
}
.cloud_tegs {
margin: 0;
padding: 0;
float: right;
width: 226px;
border: 2px solid #c1c1c1;
border-radius: 15px;
}
.zaglav p {
margin: 3px 3px;
padding: 2px 8px;
color: #fff;
font-size: 18px;
font-family: "Times New Roman";
background: #51284f;
border-radius: 15px;
}
.tegs {
margin: 0px;
padding: 3px 6px;
}
.tegs img {
margin: 0;
padding: 0;
width: 40px;
height: 34px;
}
.tegs a {
margin: 3px 4px 0px 0px;
padding: 0;
font-size: 15px;
text-decoration: none;
color: c1c1c1;
float: left;
}
.tegs a:hover {
margin: 3px 4px 0px 0px;
padding: 0;
color: #444444;
}
.social_networks {
margin: 0;
padding: 0;
margin-top: 5px;
float: right;
width: 226px;
height: 86px;
border: 2px solid #c1c1c1;
border-radius: 15px;
}
.social_networks p {
margin: 3px 3px;
padding: 2px 8px;
color: #fff;
font-size: 18px;
font-family: "Times New Roman";
background: #51284f;
border-radius: 15px;
}
/*---------------------------Меню соц. сетей -----------------------*/
.social_networks ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.social_networks li {
float: left;
}
.social_networks li a {
padding: 2px 2px;
margin: 3px 5px;
display: block;
}
.social_networks li a:hover {
padding: 1px 1px;
border: 1px solid #c1c1c1;
border-radius: 15px;
}
/*-----------------------------Для IE(Бордюр у изображений)-----------*/
.social_networks img {
border: none;
}
/*-----------------------------Описание футера------------------------*/
.footer {
margin: 0 auto;
margin-bottom: 0px;
padding: 0;
width: 1100px;
height: 15px;
border-radius: 5px 5px 0px 0px;
background: #51284f;
float: left;
}
.footer p {
margin: 0;
padding: 0;
font-size: 12px;
color: #fff;
font-family: "Arial";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Имя сайта</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="main">
<div id="header">
<div class="nav">
<ul>
<li>О ПРОЕКТЕ</li>
<li class="uslugi">УСЛУГИ
<div class="block_menu">
<ul class="pod_nav1">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
<ul class="pod_nav2">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
<ul class="pod_nav3">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
<ul class="pod_nav4">
<li>SEO Pakalpojumi</li>
<li>Izpēte un audits</li>
<li>Mājas lapas optimizācija</li>
<li>Ārējā optimizācija</li>
<li>SEO Speciālisti</li>
</ul>
</div>
</li>
<li>НАПРАВЛЕНИЯ</li>
<li>ГОВЫЕ РЕШЕНИЯ</li>
<li>ПОРТФОЛИО И КЕЙСЫ</li>
<li>ЦЕНЫ</li>
<li>КОМАНДА</li>
<li>КЛИЕНТЫ</li>
<li>ДРУЗЬЯ И ПАРТНЁРЫ</li>
<li>КОНТАКТЫ</li>
</ul>
</div>
<div id="languages_menu">
<ul>
<li>EN</li>
<li>LV</li>
<li>RU</li>
</ul>
</div>
<div class="logo">
<img src="images/logo.gif" alt="Логотип">
</div>
</div>
<div id="middle_menu">
<ul="structures_menu">
<li>IT&DIGITAL
<!-- <ul>
<li>DIGITAL</li>
<li>IT</li>
<li>PROGRAMMING</li>
<li>SMM</li>
</ul> -->
</li>
<li>BUSINESS</li>
<li>LIFESTYLE</li>
<li>HORECA</li>
<li>ESTATE</li>
<li>ART</li>
<li>PRODUCTION</li>
<li>PERSONALITY</li>
</ul>
</div>
<div class="wrapper_content">
<div class="right_div">
<div class="cloud_tegs">
<div class="zaglav">
<p>ОБЛАКО ТЕГОВ</p>
</div>
<div class="tegs">
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
<a href="#">
<ТЕКСТ ТЕГА>
</a>
</div>
</div>
<div class="social_networks">
<p>МЫ В СОЦ. СЕТЯХ</p>
<ul>
<li>
<img src="images/facebook_icon.png" />
</li>
<li>
<img src="images/VK_icon.png" />
</li>
<li>
<img src="images/twitter_icon.png" />
</li>
<li>
<img src="images/YouTube_icon.png" />
</li>
</ul>
</div>
</div>
<div class="wrapper_news">
<div class="news_table">
<h3>Обобщающий текст</h3>
<div class="one_new">
<img src="images/foto_news_1.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_2.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_3.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<!-- Новостей можно добавить больше простым копированим. Новости пойдут в 2 ряда -->
</div>
<div class="news_table">
<h3>Обобщающий текст 2</h3>
<div class="one_new">
<img src="images/foto_news_1.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_2.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<div class="one_new">
<img src="images/foto_news_3.png">
<a href="#">
<h4>Заголовок новости</h4>
</a>
<p>Какой то поясняющий текст к новости. Возможно дата и автор новсти. Текст описания не может привысить общую высоту блока: 350px</p>
</div>
<!-- Новостей можно добавить больше простым копированим. Новости пойдут в 2 ряда -->
</div>
</div>
</div>
<div class="footer">
<p>SOFITEL© Все права защищены. 2014г.</p>
</div>
</div>
</body>
</html>
Thank you!
I tried this:
a)
window.addEventListener ("mouseup", function(event) {
var box = document.getElementByClassName ("uslugi");
if (event.target != box && event.target.parentNode != box) {
box.style.display = "none";
}
});
b)
$(".uslugi").click(function () {
$(this).children().children().toggle();
});
$(".uslugi").click(function(){
$(this).fadeIn(300,function(){$(this).focus();});
});
$(".uslugi").on('blur',function(){
$(this).fadeOut(300);
});

Easiest way is to do it this way:
$(".uslugi>a").click(function (e) {
e.preventDefault();
$(this).siblings().children().toggle();
$(this).focus();
}).blur(function () {
$(this).siblings().children().hide();
});
Clicking outside the link will trigger blur event. Codepen example. Please note, had to focus anchor, because webkit browsers and IE do not focus it.

Add event handler to the html element (applies to all children elements) HTML:
<html onclick="hidePopupMenus(event);">
Make the html element take up the whole page. CSS:
html
{
height:100%;
}
Obviously you have a button or something that opens up the dialogue (if that isn't your case just make a small change to my script). When the function is fired it will make sure the event.target.id is not equal to the button that opens up the dialogue. If it isn't it continues with hiding whatever you're wanting to hide. If you don't have a button opening up this element just get rid of the if statement. javascript:
function hidePopupMenus(event)
{
if(event.target.id != 'whateverOpensMyPopup')
{
document.getElementById('popUpThingy').style.display = 'none';
}
}

The basics of toggling with a dropdown:
1) Use CSS to show and hide your dropdown based on a class being present
.uslugi .block_menu {
display: none;
}
.uslugi.open .block_menu {
display: block;
}
2) When the user clicks anywhere in the body, close all drop-downs
$(body).on("click", function() {
$(".uslugi").removeClass("open");
});
3) Stop that event from firing when you click on a toggler, or within the dropdown itself:
$(".uslugi").on("click", function(e) {
e.stopPropagation();
});
4) Set an event on the toggler to toggle the class:
// You should set a class to fix this poor selector
$(".uslugi").children("a").on("click", function() {
$(".uslugi").toggleClass("open");
});

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.

Categories