My divs are not appearing - javascript

My #abhimanyu, #arjun, #bheem and #eklavya divs are are not appearing. Right now the unit is percentage but if I put pixels it works but it wont be responsive. Any idea why its not appearing? Thank you in advance!
Update: One more problem, on the phone when i type in the text box everything goes out of their place.
Here's my code:
function displaySignInError() {
var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();
switch (schoolName) {
case 'new horizon gurukul':
window.location = "NHGLogin.php";
break;
default:
var schoolErrorMessage = document.getElementById('schoolErrorMessage');
schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist.";
schoolErrorMessage.style.color = 'red';
}
}
#import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');
#abhimanyu {
z-index: -1;
background-color: green;
width: 50%;
float: left;
height: 47%;
}
#arjun {
z-index: -1;
background-color: orange;
width: 50%;
float: right;
height: 47%;
}
#bheem {
z-index: -1;
background-color: red;
width: 50%;
float: left;
height: 47%;
}
#eklavya {
z-index: -1;
background-color: purple;
width: 50%;
height: 47%;
}
#container {
width: 30em;
background-color: #eee;
height: 30em;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
#wrapper {
width: 30rem;
height: 30rem;
border-radius: 50%;
}
#schoolSubmitButton {
margin-top: 35px;
text-align: center;
background-color: white;
border: 2px solid #fef;
height: 2em;
width: 10em;
}
#schoolName {
margin-bottom: 40px;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#schoolNameBox {
height: 2em;
border: none;
width: 26em;
margin-left: 0;
padding-left: 10px;
}
#schoolSubmitButton p {
position: relative;
top: 50%;
position: relative;
top: 30%;
left: 50%;
transform: translate(-50%, -70%);
transform: -webkit-translate(-50%, -70%);
transform: -ms-translate(-50%, -70%);
}
/*
::-webkit-input-placeholder {
padding-left: 10px;
}
:-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
*/
#schoolErrorMessage {
text-decoration: none;
position: relative;
top: 6em;
color: black;
width: 140%;
float: left;
font-size: 15px;
position: relative;
right: 20%;
}
#schoolNameDiv {
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#main-heading {
text-align: center;
text-decoration: none;
font-size: 24px;
z-index: 1;
}
#schoolAvatar {
height: 9em;
width: 9em;
border-radius: 50%;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.footerHR {
border-top: 1px solid grey;
position: absolute;
bottom: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 530px) {
#container {
width: 96%;
height: 80%;
border-radius: 5px;
margin-top: 15px;
}
#schoolNameBox {
width: 20em;
}
#main-heading {
font-size: 22px;
}
#main-heading h2 {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="abhimanyu"></div>
<div id="arjun"></div>
<br>
<div id="bheem"></div>
<div id="eklavya"></div>
<header>
<div id="main-head">
<!-- REMEMBER TO STYLE THE HEADING AND SIGN UP LINK -->
<h2>sKoolBook</h2>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
<div id="schoolNameDiv">
<div id="schoolName">
<input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name...">
<br>
<button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
<p>Next</p>
</button>
<br>
</div>
<br>
<p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p>
</div>
</div>
</div>
</section>
<br>
<footer>
<div class="footerHR">
</div>
</footer>
<script src="JS/script.js"></script>
</body>
</html>

You need to define parent's height since you are using percentage.
What is better to do is:
Change your HTML to:
<div class="show-this">
<div id="abhimanyu"></div>
<div id="arjun"></div>
<div id="bheem"></div>
<div id="eklavya"></div>
</div>
On your css. Add this code:
.show-this {
height: 100vh;
width: 100vw;
}
Or you can just declare
body {
height: 100vh; // or something
}
.show-this {
width: 100vw;
height: 100vh; }
.show-this #abhimanyu {
height: 10%;
width: 80%;
background: red; }
.show-this #arjun {
height: 20%;
width: 90%;
background: yellow; }
.show-this #bheem {
height: 40%;
width: 50%;
background: green; }
.show-this #eklavya {
height: 20%;
width: 100%;
background: blue; }
<div class="show-this">
<div id="abhimanyu"></div>
<div id="arjun"></div>
<div id="bheem"></div>
<div id="eklavya"></div>
</div>
Hope it helps! Cheers.

Related

Div does not center in another div

I have an extremely simple issue. I have nested divs. where I am trying to center a div(.gridcontainer) in div(.main). If you run the below snippet, you can see that the div does center full in the main div. It leaves the spaces uneven on the either side horizontally and vertically.
I have tried a lot of fixes and even tried dynamically centering them on load through JS. But, somehow it does not achieve the results.
I just want it to be the exact size of the parent but have little spaces left on each sides evenly.
body {
margin: 0;
padding: 0;
}
.tops {
position: fixed;
background: rgba(0,0,0,0.70);
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 100vh;
min-width: 100vw;
height: auto;
width: auto;
overflow: hidden;
}
.top_menu {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 70px;
background-color: green;
overflow: hidden;
}
.welcome {
position: relative;
top: 0;
bottom: 0;
left: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.welcome_message {
font-family: 'Palanquin Dark', sans-serif;
font-size: calc(2.5vw + 3vh);
position: relative;
top: 30%;
left: 50%;
margin: 0;
float: left;
color: white;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -30%);
}
.app_name {
font-size: calc(1.5vw + 2vh);;
}
.gradientText {
background: -webkit-linear-gradient(#FFA07A, #8B0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.downloadButton{
position: absolute;
top: 75%;
left:50%;
background-color: white;
width: 225px;
height: 50px;
border-radius: 25px;
border-width: 0px;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -75%);
transition: all .2s ease-in-out;
}
.downloadButton:hover
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: translate(-50%, -75%) scale(1.1);
}
.downloadText {
position: relative;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 1.4em;
font-weight: bold;
color: black;
}
.iphone {
position: relative;
top: 0;
bottom: 0;
right: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.iXFrame {
position: absolute;
height: 700px;
width: 350px;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
}
.main {
position: absolute;
display: block;
margin-top: 75px;
height: auto;
overflow: hidden;
width: auto;
min-width: 100vw;
min-height: 50vh;
}
.gridcont{
position : absolute;
/*height: auto;*/
width: auto;
/*min-height: 95vh;*/
min-width: 95vw;
margin: 0;
border-radius: 20px;
display: inline-block;
background-color: whitesmoke;
/*overflow: hidden;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Montserrat|Palanquin+Dark|Paytone+One|Rubik|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<section class="mains ui">
<div
class="tops"></div>
<!--.top_menu-->
<div class="ui grid marg-reset">
<div class="doubling two column row">
<div class="ui column welcome">
<h1 class="welcome_message"><span class="app_name">Example</span><br>we will<br>rock <br>you<br><span class="gradientText">Text</span></h1>
<a class="downloadButton" type="button" href="/app">
<div class="downloadText">Download Spotmi</div>
</a>
</div>
</div>
</div>
<div class="main">
<div class="ui grid gridcont">
<div class="doubling two column row">
<div class="ui column show_text">
<h1 class="emotion_message">Hello world</h1>
</div>
<div class="ui column emotion_show"></div>
</div>
</div>
</div>
</section>
This also poses an issue in the responsive nature of the site. Below are two screenshots. one of a HiDPI Laptop screen and other is a iphone X simulator. This even poses an issue there.
iPhoneX size screen.
Laptop Screen.
How exactly can I solve this?
Have you tried giving the giving the internal div that you want to center CSS properties:
position: relative;
top: 50%;
left 50%;
transform: translate(-50%, -50%);
this usually solves my balancing issues xD

Custom JQuery Slider doesn't work as expected

I tried to make a custom slider for my projects on my website.
It's important for me to use div tags to slide, because I want to include more information on it, like text and buttons.
It has a "next"- and "previous" button. The problem is that it doesn't slide back and it doesn't start at the beginning after it reached the last slide.
What's going wrong?
$(document).ready(function() {
projectSlider($('.projects').children('.project').first());
function projectSlider(projects) {
$(projects).show(function() {
$('.next').click(function() {
if (projects.next().hasClass('project')) {
projectSlider(projects.next());
} else {
projectSlider($('.projects').children('.project').first());
}
});
$('.previous').click(function() {
if (projects.prev().hasClass('project')) {
projectSlider(projects.prev());
} else {
projectSlider($('.projects').children('.project').first());
}
});
});
}
});
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
}
/* */
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: normal;
}
.inline-list {
list-style-type: none;
padding: 0;
}
.inline-list>li {
display: inline-block;
}
/* */
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 35%;
height: 100vh;
background: #fff;
}
.profile {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.avatar {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: url("../img/avatar.jpg") no-repeat center center;
background-size: cover;
border-radius: 100%;
}
.socialmedia>li {
padding: 0 5px 0 0;
}
.socialmedia>li>a {
color: #212121;
}
/* */
main {
display: block;
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
display: block;
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
display: inline-block;
position: absolute;
width: 36px;
height: 36px;
margin: 0 20px 0 20px;
background: #f5f5f5;
color: #212121;
border-radius: 100%;
cursor: pointer;
}
.backward {
left: 0;
float: left;
text-align: center;
}
.backward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/left-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/right-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward {
right: 0;
float: right;
}
.projects {
display: block;
position: relative;
width: 100%;
height: 100vh;
}
.project {
display: none;
position: absolute;
width: 100%;
height: 100vh;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
/* */
footer {
display: block;
position: relative;
bottom: 0;
padding: 0;
width: 100%;
height: 36px;
background: #fff;
}
.made {
display: inline-block;
position: absolute;
float: left;
left: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
.made>p {
display: inline-block;
}
.legal {
display: inline-block;
position: absolute;
float: right;
right: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
/* */
.envelope {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/envelope.svg") no-repeat center center;
background-size: cover;
}
.twitter {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/twitter.svg") no-repeat center center;
background-size: cover;
}
.dribbble {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/dribbble.svg") no-repeat center center;
background-size: cover;
}
.github {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/github.svg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<div class="control previous">
<div class="backward-arrow"><-</div>
</div>
<div class="control forward next">
<div class="forward-arrow">-></div>
</div>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>
JSFiddle
Your code seems to be unnecessarily recursive. Each time you click an arrow, the click handlers are bound again. Also, if you click "next", the object passed to projectSlider contains only a single project element, so there will be no "next" or "previous" in that object.
I suggest a different approach. In my example below, for each click, the appropriate project (based on a numeric index) is hidden, then appended to the project container (which stacks it on top of the others), and then re-shown (for animation purposes).
function refreshProjects(project_holder, projects, project_index) {
project_index = (project_index + projects.length) % projects.length;
var thisProject = projects.eq(project_index);
thisProject.hide().appendTo(project_holder).show(250);
}
$(function() {
var project_holder = $('.projects');
var projects = project_holder.children('.project');
var project_index = 0;
$('.control-next').click(function() {
refreshProjects(project_holder, projects, ++project_index);
});
$('.control-previous').click(function() {
refreshProjects(project_holder, projects, --project_index);
});
});
body {
padding: 0;
margin: 0;
font-size: 10px;
}
main {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
position: absolute;
background: #f5f5f5;
border: none;
color: #212121;
border-radius: 50%;
cursor: pointer;
width: 1.8em;
height: 1.8em;
padding: .5em;
box-sizing: content-box;
font-size: 1.4em;
outline: 0;
}
.control-previous {
left: 1em;
}
.control-next {
right: 1em;
}
.projects {
width: 100%;
height: 100vh;
}
.project {
position: absolute;
width: 100%;
height: 100%;
}
.project:not(:first-child) {
display: none;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<button type="button" class="control control-previous"><-</button>
<button type="button" class="control control-next">-></button>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>

How can I fade text in using JavaScript with button

I have a function for the button already but I can't figure out what I need to add to make it fade in
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Do I need to make a new function or can I add it to my existing one?
Here is my CSS
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
You can see the whole code here.
Your problem is you are removing the transition, so it causes it to not transition, but just jump. Leave the transition on the whole time, and just change the opacity:
const target = document.querySelector('#target');
document.querySelector('button').addEventListener('click', () => {
target.classList.contains('fade')
? target.classList.remove('fade')
: target.classList.add('fade');
});
#target {
transition: 1s opacity;
opacity: 1;
width: 100px;
height: 50px;
background: #F00;
}
#target.fade {
opacity: 0;
}
<div id="target"></div>
<button>Toggle</button>
Use fadeIn() and fadeOut() functions as given below.
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
$("#myDIV").fadeIn();
} else {
$("#myDIV").fadeOut();
}
}
.button-holder {
position: absolute;
margin: auto;
height: 25px;
top: 260px;
left: 0;
width:100%;
text-align: center;
}
.Box {
position: relative;
margin: auto;
display: block;
border: solid 4px skyBlue;
margin-top: 2%;
width: 600px;
height: 450px;
background: none;
z-index: -1
}
.tittle {
text-align: center;
font-family: 'courier new', Courier, monospace;
}
.speech-buble-top {
position: relative;
display: block;
border: solid 4px black;
top: -15%;
left: ;
width: 200px;
height: 100px;
background: white;
border-radius: 50%;
text-align: center
}
#h3 {
position: absolute;
text-align: center;
vertical-align: center;
width: 90%;
height: 80%;
left: 10px;
font-size: 25px;
background: none;
border: none;
border-radius: 5px;
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
.speech-buble-bottom {
position: relative;
display: triangle;
border-right: solid 4px black;
border-bottom: solid 4px black;
top: -23.5%;
left: 30%;
width: 15px;
height: 20px;
background: white;
z-index: 1;
transform: rotate(13deg);
}
.balloon-1 {
position: absolute;
top: -2%;
left: 70%;
width: 100px;
height: 110px;
background: red;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-1 {
position: absolute;
top: 22%;
left: 76%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid red;
z-inedx: 1;
}
.balloon-string-1 {
position: absolute;
top: 29.5%;
left: 69%;
width: 80px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(100deg);
z-inedx: -1;
}
.balloon-2 {
position: absolute;
top: -8%;
left: 75%;
width: 100px;
height: 110px;
background: #228B22;
border-radius: 50%;
z-index: -1;
}
.balloon-string-2 {
position: absolute;
top: 26%;
left: 69%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(115deg);
z-inedx: -1;
}
.balloon-3 {
position: absolute;
top: -4%;
left: 78%;
width: 100px;
height: 110px;
background: #9400D3;
border-radius: 50%;
z-index: -1;
}
.balloon-bottom-3 {
position: absolute;
top: 20%;
left: 84%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #9400D3;
}
.balloon-string-3 {
position: absolute;
top: 29%;
left: 71%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(120deg);
z-inedx: -1;
}
.balloon-4 {
position: absolute;
top: -2%;
left: 85%;
width: 100px;
height: 110px;
background: #FFD700;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-4 {
position: absolute;
top: 22%;
left: 91%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #FFD700;
}
.balloon-string-4 {
position: absolute;
top: 29.5%;
left: 73%;
width: 130px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(140deg);
z-inedx: -1;
}
.head {
position: absolute;
top: 5%;
left: 40%;
width: 125px;
height: 135px;
background: pink;
border-radius: 5px;
}
.l-lash-1 {
position: absolute;
top: 10%;
left: 28%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-50deg)
}
.l-lash-2 {
position: absolute;
top: 8%;
left: 30%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-30deg)
}
.l-lash-3 {
position: absolute;
top: 8%;
left: 33%;
width: 3%;
height: 6%;
background: black;
transform: rotate(-20deg)
}
.r-lash-1 {
position: absolute;
top: 10%;
left: 75%;
width: 3%;
height: 8%;
background: black;
transform: rotate(50deg)
}
.r-lash-2 {
position: absolute;
top: 8%;
left: 73%;
width: 3%;
height: 8%;
background: black;
transform: rotate(30deg)
}
.r-lash-3 {
position: absolute;
top: 8%;
left: 70%;
width: 3%;
height: 6%;
background: black;
transform: rotate(20deg)
}
.eye-left {
position: absolute;
top: 15px;
left: 35px;
width: 30px;
height: 50px;
background: white;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.eye-right {
position: absolute;
top: 15px;
left: 66px;
width: 30px;
height: 50px;
background: white;
border-radius: 5px;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.inner-eye-left {
position: absolute;
top: 15%;
left: 19%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.inner-eye-right {
position: absolute;
top: 15%;
left: 0%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.pupil-left {
position: absolute;
top: 15%;
left: 15%;
width: 42%;
height: 35%;
background: white;
border-radius: 50%;
}
.pupil-right {
position: absolute;
top: 15%;
left: 10%;
width: 35%;
height: 30%;
background: white;
border-radius: 50%;
}
.hair-left {
position: absolute;
top: -25%;
left: 45%;
width: 5%;
height: 30%;
background: pink;
transform: rotate(-30deg)
}
.hair-right {
position: absolute;
top: -18%;
left: 60%;
width: 5%;
height: 25%;
background: pink;
transform: rotate(30deg)
}
.hair-top-left {
position: absolute;
top: -30%;
left: 32%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.hair-top-right {
position: absolute;
top: -25%;
left: 65%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.mouth-top {
position: absolute;
top: 60%;
left: 29%;
width: 50%;
height: 17%;
background: pink;
border-radius: 50%;
z-index: 1;
}
.mouth {
position: absolute;
top: 61%;
left: 29%;
width: 50%;
height: 17%;
background: none;
border-radius: 50%;
border-bottom: solid 4px black;
}
.ear-bar-1 {
position: absolute;
top: 34%;
left: -9%;
width: 120%;
height: 31%;
background: lightGrey;
z-index: -1;
}
.ear-bar-2 {
position: absolute;
top: 40%;
left: -18%;
width: 140%;
height: 19%;
background: pink;
z-index: -2;
}
.ear-bar-3 {
position: absolute;
top: 45%;
left: -25%;
width: 155%;
height: 10%;
background: lightGrey;
z-index: -3;
}
.ear-left-circle {
position: absolute;
top: 41%;
left: -37%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.ear-right-circle {
position: absolute;
top: 41%;
left: 125%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.neck {
position: absolute;
top: 100%;
left: 26.5%;
width: 50%;
height: 12%;
background: lightGrey;
border-radius: 5px
}
.upper-body {
position: absolute;
top: 110%;
left: -15%;
width: 130%;
height: 125%;
background: pink;
border-radius: 5px;
z-index: +1
}
.bullet-1 {
position: absolute;
top: 5%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-2 {
position: absolute;
top: 5%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-3 {
position: absolute;
top: 88%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-4 {
position: absolute;
top: 88%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.heart-left {
position: absolute;
top: 20%;
left: 68%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(-25deg)
}
.heart-right {
position: absolute;
top: 20%;
left: 72%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(25deg)
}
.hand-left {
position: absolute;
top: 132%;
left: -85%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(30deg);
z-index: -1;
}
.hand-right {
position: absolute;
top: 132%;
left: 100%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(-35deg);
z-index: 1;
}
.h-line-1 {
position: absolute;
top: 34%;
left: 1%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-2 {
position: absolute;
top: 34%;
left: 20%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-3 {
position: absolute;
top: 34%;
left: 40%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-4 {
position: absolute;
top: 34%;
left: 60%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.palm-left {
position: absolute;
top: 0%;
left: -30%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(90deg);
}
.palm-right {
position: absolute;
top: 0%;
left: 85%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(270deg);
}
.left-leg {
position: absolute;
top: 235%;
left: 0%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.right-leg {
position: absolute;
top: 235%;
left: 68%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.l-line-1 {
position: absolute;
top: 0%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.l-line-2 {
position: absolute;
top: 20%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.l-line-3 {
position: absolute;
top: 40%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.shoe-left {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
.shoe-right {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 class="tittle">Robot</h1>
<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>
<div class="Box">
<div class="speech-buble-top">
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
</div>
<div class="speech-buble-bottom"></div>
<div class="balloon-1"></div>
<div class="balloon-2"></div>
<div class="balloon-3"></div>
<div class="balloon-4"></div>
<div class="balloon-bottom-1"></div>
<div class="balloon-bottom-3"></div>
<div class="balloon-bottom-4"></div>
<div class="balloon-string-1"></div>
<div class="balloon-string-2"></div>
<div class="balloon-string-3"></div>
<div class="balloon-string-4"></div>
<div class="head">
<div class="eye-left">
<div class="inner-eye-left"></div>
<div class="pupil-left"></div>
</div>
<div class="eye-right">
<div class="inner-eye-right"></div>
<div class="pupil-right"></div>
</div>
<div class="l-lash-1"></div>
<div class="l-lash-2"></div>
<div class="l-lash-3"></div>
<div class="r-lash-1"></div>
<div class="r-lash-2"></div>
<div class="r-lash-3"></div>
<div class="hair-left"></div>
<div class="hair-right"></div>
<div class="hair-top-left"></div>
<div class="hair-top-right"></div>
<div class="mouth-top"></div>
<div class="mouth"></div>
<div class="ear-bar-1"></div>
<div class="ear-bar-2"></div>
<div class="ear-bar-3"></div>
<div class="ear-left-circle"></div>
<div class="ear-right-circle"></div>
<div class="neck"></div>
<div class="upper-body">
<div class="bullet-1"></div>
<div class="bullet-2"></div>
<div class="bullet-3"></div>
<div class="bullet-4"></div>
<div class="heart-left"></div>
<div class="heart-right"></div>
<div class="bullet-center"></div>
</div>
<div class="hand-left">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-left"></div>
</div>
<div class="hand-right">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-right"></div>
</div>
<div class="left-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-left"></div>
</div>
<div class="right-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-right"></div>
</div>
</div>
<!--end of head-->
</div>
</body>
</html>
it is possible playing with css animations, adding css classes and removing them.
function fadeOut() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeIn');
myElement.classList.add('fadeOut');
}
function fadeIn() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeOut');
myElement.classList.add('fadeIn');
}
#myElement{
width: 100px;
height: 100px;
background: red;
}
.fadeOut{
-webkit-animation: fadeOut 1.0s forwards;
}
.fadeIn{
-webkit-animation: fadeIn 1.0s forwards;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="myElement">
</div>
<button onclick="fadeOut()">
Hide
</button>
<button onclick="fadeIn()">
Show
</button>

How to limit JS animation to the input field you clicked into, not all of them?

Messing with the jawbreaker-esque input animation found in this code pen
The code pen only has ONE field, but if you add a second, like this...
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>
And then add this CSS so the 2nd field moves down below the 1st...
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
You'll see that when you click into either input field, the desired animation happens to both.
So how could I change the JS so that it only happens to the input field you click into?
You can use $.parent() to get the parent, then target .placeholder, .border and .lb relative to the parent of the input that was clicked.
$('input[type=text]').blur(function(){
$parent = $(this).parent();
$parent.find('.placeholder').removeClass("placeholder--animate");
$parent.find('.border').removeClass("border--animate");
$parent.find('.lb').removeClass("lb--animate");
checkInput($(this));
})
.focus(function() {
$parent = $(this).parent();
$parent.find('.placeholder').addClass("placeholder--animate");
$parent.find('.border').addClass("border--animate");
$parent.find('.lb').addClass("lb--animate");
checkInput($(this));
});
function checkInput($input) {
if ( $input.val()) {
$input.prev('.placeholder').css('display', 'none');
} else {
$input.prev('.placeholder').css('display', 'visible');
}
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
body {
font-family: 'Open Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
input[type=text] {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: transparent;
color: #7f8c8d;
font-weight: 600;
outline: none;
border: none;
border-bottom: 1px solid #bdc3c7;
}
.placeholder {
position: absolute;
bottom: 5px;
left: 0;
margin: 0;
font-size: 13px;
color: #95a5a6;
transition: .2s all ease-out;
}
.lb {
position: absolute;
top: 10px;
left: -30px;
z-index: 40;
margin: 0;
font-size: 10px;
color: #3498db;
opacity: 0;
transition: .2s all ease-out;
}
.lb--animate {
opacity: 1;
left: 0;
}
.placeholder--animate {
left: 20px;
opacity: 0;
}
.border {
position: absolute;
bottom: 0px;
display: inline-block;
width: 0;
height: 2px;
padding: 0;
margin: 0;
background-color: #3498db;
transition: .2s width ease-out;
}
.border--animate {
width: 100%;
}
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>

How to create arrows (with 3 lines) in CSS?

Above Image shows how i wish them to look like:
I have created some arrows which currently look like this:
here is the fiddle demo:
https://jsfiddle.net/yokeshsharma/a94a1grk/
.arrow {
display: inline-block;
font-style: normal;
position: relative;
width: 0.8em;
height: 0.8em;
border-right: 0.4em solid black;
border-top: 0.4em solid black;
transform: rotate(-45deg);
left: 16px;
top: 18px;
}
.up{
transform: rotate(-45deg);
}
.down{
transform: rotate(135deg);
}
.left{
transform: rotate(-135deg);
}
.right{
transform: rotate(45deg);
}
<div class="up arrow">
</div>
<div class="down arrow">
</div>
<div class="left arrow">
</div>
<div class="right arrow">
</div>
I have searched other questions most of them are specifically about creating triangles and arrows without the central line which i already created.
But I am not able to create the line in between, please help !
Try something like this
.icon {
height: 100px;
width: 100px;
border-radius: 10px;
background: #323335;
text-align: center;
display: inline-block;
margin: 5px;
}
.arrow {
height: 35px;
position: relative;
width: 10px;
background: white;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
.arrow:before {
content: " ";
width: 10px;
background: white;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(50deg);
left: -10px;
}
.arrow:after {
content: " ";
width: 10px;
background: white;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(-50deg);
right: -10px;
}
.arrow-down {
transform: rotate(-180deg) translateY(50%);
bottom: 50%;
}
<div class="icon">
<div class="arrow"> </div>
</div>
<div class="icon">
<div class="arrow arrow-down"> </div>
</div>
Look at this one
.container {
width:100px;
height:100px;
margin: 20px auto;
}
.rect {
width: 50px;
height: 50px;
top:35px;
position: relative;
background-color: #777;
transform: rotate(45deg);
}
.rect1 {
width: 50px;
height: 50px;
position: relative;
background-color: #fff;
transform: rotate(45deg);
}
.v-rule {
width: 10px;
height: 50px;
position: relative;
background-color: #777;
top:-60px;
margin-left:20px
}
<div class="container">
<div class="rect"></div>
<div class="rect1"></div>
<div class="v-rule"></div>
</div>

Categories