Problem with a relative positioned input element in a flexbox

Problem with a relative positioned input element in a flexbox - javascript

Goal: The middle DIV (MIDDLE) within a flexbox row should be centred.
Problem: Right element contains a relative positioned input element. As a result, the middle DIV element (MIDDLE) is no longer centred but shifted to the left.
I had tried to change the positioning to absolute. Then it would be correctly centred but the input field can no longer be moved out.
const btnS = document.querySelector('.bg-search');
let isOpen = false;
btnS.addEventListener('click', (e) => {
const searchBox = document.querySelector('.searchbox');
const inputBox = document.querySelector('.searchbox-input');
console.log(e.target, isOpen)
if (isOpen === false) {
searchBox.classList.add('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
console.log('close input')
searchBox.classList.remove('searchbox-open');
inputBox.dispatchEvent(new Event('focusout'));
isOpen = false;
}
});
* {
margin:0;
padding:0;
box-sizing: border-box;
}
:root {
--nav-height: 50px;
}
nav {
height: var(--nav-height);
z-index:13;
background: green;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap:10px;
z-index: 20;
position: relative;
}
.body {
background: gray;
position: relative;
dispyay: flex;
flex-direction: column;
height:100vh;
}
.searchbox {
position:relative;
min-width:50px;
width:0%;
height:50px;
float:right;
overflow:hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-ms-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
}
.searchbox-input {
position: relative;
top:0;
right:0;
border:0;
outline:0;
background:#dcddd8;
width:100%;
height:50px;
margin:0;
padding:0px 55px 0px 20px;
font-size:20px;
color: #000;
}
.searchbox-input::-webkit-input-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input:-moz-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input::-moz-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input:-ms-input-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-open{
width:100%;
}
.searchbox-icon,
.searchbox-submit {
width: var(--nav-height);
height: var(--nav-height);
display:block;
position:absolute;
top:0;
font-family:verdana;
font-size:22px;
right:0;
padding:0;
margin:0;
border:0;
outline:0;
line-height:50px;
text-align:center;
cursor:pointer;
color:#dcddd8;
background:#172b3c;
}
<div class="body">
<nav>
<div class="container bm-btn">
LEFT
</div>
<div>MIDDLE!!</div>
<div>
<form class="searchbox bg-search">
<input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp(this);" required>
<input type="submit" class="searchbox-submit" value="GO">
<!--button-- class="searchbox-icon">S</button-->
<span class="searchbox-icon">S</span>
</form>
</div>
</nav>
</div>

A lot of the attributes on the parent .searchbox needed to be on the .searchbox-input child instead. Rather than changing the width of the parent, I moved the animation over to the child. I made the .searchbox-input positioned absolutely, so that when it changes width, it will not affect the flow of the elements in the flexbox. Please take a look and let me know if this is what you're looking for.
const btnS = document.querySelector('.bg-search');
let isOpen = false;
btnS.addEventListener('click', (e) => {
const searchBox = document.querySelector('.searchbox');
const inputBox = document.querySelector('.searchbox-input');
console.log(e.target, isOpen)
if (isOpen === false) {
searchBox.classList.add('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
console.log('close input')
searchBox.classList.remove('searchbox-open');
inputBox.dispatchEvent(new Event('focusout'));
isOpen = false;
}
});
* {
margin:0;
padding:0;
box-sizing: border-box;
}
:root {
--nav-height: 50px;
}
nav {
height: var(--nav-height);
z-index:13;
background: green;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap:10px;
z-index: 20;
position: relative;
}
.body {
background: gray;
position: relative;
dispyay: flex;
flex-direction: column;
height:100vh;
}
.searchbox {
position:relative;
min-width:50px;
height:50px;
}
.searchbox-input {
position: absolute;
top:0;
right:0;
border:0;
outline:0;
background:#dcddd8;
width:0%;
height:50px;
margin:0;
padding:0px 20px 0px 20px;
font-size:20px;
color: #000;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-ms-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
}
.searchbox-input::-webkit-input-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input:-moz-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input::-moz-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input:-ms-input-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-open .searchbox-input {
width:15em;
}
.searchbox-icon,
.searchbox-submit {
width: var(--nav-height);
height: var(--nav-height);
display:block;
position:absolute;
top:0;
font-family:verdana;
font-size:22px;
right:0;
padding:0;
margin:0;
border:0;
outline:0;
line-height:50px;
text-align:center;
cursor:pointer;
color:#dcddd8;
background:#172b3c;
}
<div class="body">
<nav>
<div class="container bm-btn">
LEFT
</div>
<div>MIDDLE!!</div>
<div>
<form class="searchbox bg-search">
<input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp(this);" required>
<input type="submit" class="searchbox-submit" value="GO">
<!--button-- class="searchbox-icon">S</button-->
<span class="searchbox-icon">S</span>
</form>
</div>
</nav>
</div>

Related

disabling form submit in html and css only

I am adding a code block to a page where all js is disabled and stripped out. I want to add a recaptcha to a form to cut down on spam. I've nearly got it, but can't get it to work.
My questions are:
The js code I am using to validate the required fields gets stripped. Is there any way to put the validation back in without using js?
I can't figure out how to connect the enable submit to the recapthca checkbox.
Here's the code as far as I've got it to work...
<!-- Note :
- You can modify the font style and form style to suit your website.
- Code lines with comments Do not remove this code are required for the form to work properly, make sure that you do not remove these lines of code.
- The Mandatory check script can modified as to suit your business needs.
- It is important that you test the modified form before going live.-->
<div id='crmWebToEntityForm' class='zcwf_lblLeft crmWebToEntityForm' style='background-color: white;color: black;max-width: 600px;'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<META HTTP-EQUIV ='content-type' CONTENT='text/html;charset=UTF-8'>
<form action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads2983403000000507130 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory2983403000000507130()' accept-charset='UTF-8'>
<input type='text' style='display:none;' name='xnQsjsdp' value='d8a8809b8fe787eb5f1520e8345aa1f4461cf539b2b1505c31cd3765336f8089'></input>
<input type='hidden' name='zc_gad' id='zc_gad' value=''></input>
<input type='text' style='display:none;' name='xmIwtLD' value='da656ccd402f059702a554831941786995278d8da723e570a30ed6c9d5d4a5b5'></input>
<input type='text' style='display:none;' name='actionType' value='TGVhZHM='></input>
<input type='text' style='display:none;' name='returnURL' value='https://www.monkeytronics.co.nz/' > </input>
<!-- Do not remove this code. -->
<style>
/* <!-- Stick in a recaptcha --> */
body {
margin:0;
background-image:url(https://cdn.theculturetrip.com/wp-content/uploads/2020/08/gettyimages-904801296.jpg);
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
font-family: 'Roboto', sans-serif;
}
.captcha {
background-color:#f9f9f9;
border:2px solid #d3d3d3;
border-radius:10px;
color:#4c4a4b;
display:flex;
justify-content:center;
align-items:center;
}
#media screen and (max-width: 500px) {
.captcha {
flex-direction:column;
}
.text {
margin:.5em!important;
text-align:center;
}
.logo {
align-self: center!important;
}
.spinner {
margin:2em .5em .5em .5em!important;
}
}
.text {
font-size:1em;
font-weight:500;
margin-right:1em;
}
.spinner {
position:relative;
width:2em;
height:2em;
display:flex;
margin:2em 1em;
align-items:center;
justify-content:center;
}
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"]+.checkmark {
display:inline-block;
width:2em;
height:2em;
background-color:#fcfcfc;
border:2.5px solid #c3c3c3;
border-radius:3px;
display:flex;
justify-content:center;
align-items:center;
cursor: pointer;
}
input[type="checkbox"]+.checkmark span {
content:'';
position:relative;/*
position:absolute;
border-bottom:3px solid;
border-right:3px solid;
border-color:#029f56;*/
margin-top:-3px;
transform:rotate(45deg);
width:.75em;
height:1.2em;
opacity:0;
}
input[type="checkbox"]+.checkmark>span:after {
content:'';
position:absolute;
display:block;
height:3px;
bottom:0;left:0;
background-color:#029f56;
}
input[type="checkbox"]+.checkmark>span:before {
content:'';
position:absolute;
display:block;
width:3px;
bottom:0;right:0;
background-color:#029f56;
}
input[type="checkbox"]:checked+.checkmark {
animation:2s spin forwards;
}
input[type="checkbox"]:checked+.checkmark>span {
animation:1s fadein 1.9s forwards;
}
input[type="checkbox"]:checked+.checkmark>span:after {animation:.3s bottomslide 2s forwards;}
input[type="checkbox"]:checked+.checkmark>span:before {animation:.5s rightslide 2.2s forwards;}
#keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}
}
#keyframes bottomslide {
0% {width:0;}
100% {width:100%;}
}
#keyframes rightslide {
0% {height:0;}
100% {height:100%;}
}
.logo {
display:flex;
flex-direction:column;
align-items:center;
height:100%;
align-self:flex-end;
margin:0.5em 1em;
}
.logo img {
height:2em;
width:2em;
}
.logo p {
color:#9d9ba7;
margin:0;
font-size:1em;
font-weight:700;
margin:.4em 0 .2em 0;
}
.logo small {
color:#9d9ba7;
margin:0;
font-size:.8em;
}
#keyframes spin {
10% {
width:0;
height:0;
border-width:6px;
}
30% {
width:0;
height:0;
border-radius:50%;
border-width:1em;
transform: rotate(0deg);
border-color:rgb(199,218,245);
}
50% {
width:2em;
height:2em;
border-radius:50%;
border-width:4px;
border-color:rgb(199,218,245);
border-right-color:rgb(89,152,239);
}
70% {
border-width:4px;
border-color:rgb(199,218,245);
border-right-color:rgb(89,152,239);
}
90% {
border-width:4px;
}
100% {
width:2em;
height:2em;
border-radius:50%;
transform: rotate(720deg);
border-color:transparent;
}
}
::selection {
background-color:transparent;
color:teal;
}
::-moz-selection {
background-color:transparent;
color:teal;
}
html,body{
margin: 0px;
}
#crmWebToEntityForm.zcwf_lblLeft {
width:100%;
padding: 25px;
margin: 0 auto;
box-sizing: border-box;
}
#crmWebToEntityForm.zcwf_lblLeft * {
box-sizing: border-box;
}
#crmWebToEntityForm{text-align: left;}
#crmWebToEntityForm * {
direction: ltr;
}
.zcwf_lblLeft .zcwf_title {
word-wrap: break-word;
padding: 0px 6px 10px;
font-weight: bold;
}
.zcwf_lblLeft .zcwf_col_fld input[type=text], .zcwf_lblLeft .zcwf_col_fld textarea {
width: 60%;
border: 1px solid #ccc;
resize: vertical;
border-radius: 2px;
float: left;
}
.zcwf_lblLeft .zcwf_col_lab {
width: 30%;
word-break: break-word;
padding: 0px 6px 0px;
margin-right: 10px;
margin-top: 5px;
float: left;
min-height: 1px;
}
.zcwf_lblLeft .zcwf_col_fld {
float: left;
width: 68%;
padding: 0px 6px 0px;
position: relative;
margin-top: 5px;
}
.zcwf_lblLeft .zcwf_privacy{padding: 6px;}
.zcwf_lblLeft .wfrm_fld_dpNn{display: none;}
.dIB{display: inline-block;}
.zcwf_lblLeft .zcwf_col_fld_slt {
width: 60%;
border: 1px solid #ccc;
background: #fff;
border-radius: 4px;
font-size: 16px;
float: left;
resize: vertical;
}
.zcwf_lblLeft .zcwf_row:after, .zcwf_lblLeft .zcwf_col_fld:after {
content: '';
display: table;
clear: both;
}
.zcwf_lblLeft .zcwf_col_help {
float: left;
margin-left: 7px;
font-size: 16px;
max-width: 35%;
word-break: break-word;
}
.zcwf_lblLeft .zcwf_help_icon {
cursor: pointer;
width: 16px;
height: 16px;
display: inline-block;
background: #fff;
border: 1px solid #ccc;
color: #ccc;
text-align: center;
font-size: 14px;
line-height: 16px;
font-weight: bold;
border-radius: 50%;
}
.zcwf_lblLeft .zcwf_row {margin: 15px 0px;}
.zcwf_lblLeft .formsubmit {
margin-right: 5px;
cursor: pointer;
color: #333;
font-size: 16px;
}
.zcwf_lblLeft .zcwf_privacy_txt {
color: rgb(0, 0, 0);
font-size: 16px;
font-family: Arial;
display: inline-block;
vertical-align: top;
color: #333;
padding-top: 2px;
margin-left: 6px;
}
.zcwf_lblLeft .zcwf_button_submit {
font-size: 16px;
color: #00C3E8;
border: 2px solid #00C3E8;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zcwf_lblLeft .zcwf_button {
font-size: 16px;
color: #333;
border: 2px solid #ccc;
padding: 10px 23px;
border-radius: 10px;
cursor: pointer;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zcwf_lblLeft .zcwf_tooltip_over{
position: relative;
}
.zcwf_lblLeft .zcwf_tooltip_ctn{
position: absolute;
background: #dedede;
padding: 3px 6px;
top: 3px;
border-radius: 4px;word-break: break-all;
min-width: 50px;
max-width: 150px;
color: #333;
}
.zcwf_lblLeft .zcwf_ckbox{
float: left;
}
.zcwf_lblLeft .zcwf_file{
width: 55%;
box-sizing: border-box;
float: left;
}
.clearB:after{
content:'';
display: block;
clear: both;
}
#media all and (max-width: 600px) {
.zcwf_lblLeft .zcwf_col_lab, .zcwf_lblLeft .zcwf_col_fld {
width: auto;
float: none !important;
}
.zcwf_lblLeft .zcwf_col_help {width: 40%;}
}
</style>
<div class='zcwf_title' style='font-size:20px; max-width: 600px;color: #00C3E8;'>Contact Monkeytronics</div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='First_Name'>First Name</label></div><div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Last_Name'>Last Name<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Last_Name' name='Last Name' maxlength='80'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Email'>Email<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' ftype='email' id='Email' name='Email' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Company'>Company<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Company' name='Company' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Description'>How can we help?<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><textarea id='Description' name='Description'></textarea><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab'></div><div class='zcwf_col_fld'><input type='submit' id='formsubmit' class='formsubmit zcwf_button_submit' value='Submit' title='Submit'><input type='reset' class='zcwf_button' name='reset' value='Reset' title='Reset'></div></div>
<div class="captcha">
<div class="spinner">
<label>
<input type="checkbox" onclick="$(this).attr('disabled','disabled');">
<span class="checkmark"><span> </span></span>
</label>
</div>
<div class="text">
I'm not a robot
</div>
<div class="logo">
<img src="https://forum.nox.tv/core/index.php?media/9-recaptcha-png/"/>
<p>reCAPTCHA</p>
<small>Privacy - Terms</small>
</div>
</div>
<script>
function validateEmail2983403000000507130()
{
var form = document.forms['WebToLeads2983403000000507130'];
var emailFld = form.querySelectorAll('[ftype=email]');
var i;
for (i = 0; i < emailFld.length; i++)
{
var emailVal = emailFld[i].value;
if((emailVal.replace(/^\s+|\s+$/g, '')).length!=0 )
{
var atpos=emailVal.indexOf('#');
var dotpos=emailVal.lastIndexOf('.');
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=emailVal.length)
{
alert('Please enter a valid email address. ');
emailFld[i].focus();
return false;
}
}
}
return true;
}
function checkMandatory2983403000000507130() {
var mndFileds = new Array('Company','Last Name','Email','Description');
var fldLangVal = new Array('Company','Last Name','Email','How can we help?');
for(i=0;i<mndFileds.length;i++) {
var fieldObj=document.forms['WebToLeads2983403000000507130'][mndFileds[i]];
if(fieldObj) {
if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0) {
if(fieldObj.type =='file')
{
alert('Please select a file to upload.');
fieldObj.focus();
return false;
}
alert(fldLangVal[i] +' cannot be empty');
fieldObj.focus();
return false;
} else if(fieldObj.nodeName=='SELECT') {
if(fieldObj.options[fieldObj.selectedIndex].value=='-None-') {
alert(fldLangVal[i] +' cannot be none');
fieldObj.focus();
return false;
}
} else if(fieldObj.type =='checkbox'){
if(fieldObj.checked == false){
alert('Please accept '+fldLangVal[i]);
fieldObj.focus();
return false;
}
}
try {
if(fieldObj.name == 'Last Name') {
name = fieldObj.value;
}
} catch (e) {}
}
}
if(!validateEmail2983403000000507130()){return false;}
document.querySelector('.crmWebToEntityForm .formsubmit').setAttribute('disabled', true);
}
function tooltipShow2983403000000507130(el){
var tooltip = el.nextElementSibling;
var tooltipDisplay = tooltip.style.display;
if(tooltipDisplay == 'none'){
var allTooltip = document.getElementsByClassName('zcwf_tooltip_over');
for(i=0; i<allTooltip.length; i++){
allTooltip[i].style.display='none';
}
tooltip.style.display = 'block';
}else{
tooltip.style.display='none';
}
}
</script>
</form>
</div>

You can try using required on input elements in the form,
for the captcha you should add some functionality when you click on submit you should check if the captcha checkbox was clicked (right now theres some jquery code on it but you dont have jquery on your web)

Use the disabled attribute!
Here is an example:
<form> <input type = "submit" disabled="disabled">Submit</input></form>
Using this will grey-out the button!

How to Remove Overlapping with read-only format and input type using HTML

I have created one form with two fields Name and E-mail with input type text and Read-Only format when I'm trying to run this code My output is overlapped with text value and text fields.
Here is my code:
$(document).ready(function() {
$('input').blur(function() {
// check if the input has any value (if we've typed into it)
if ($(this).val())
$(this).addClass('used');
else
$(this).removeClass('used');
});
});
/* form starting stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
}
/* active state */
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #5264AE;
}
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
input:focus~.highlight {
animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<br/>
<br/>
<div class="group">
<input type="text" readonly value="shruthi">
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" readonly value="shruthi#gmail.com">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
But My expected output is I want form without any overlapped text fields with text values..
I don't know what is wrong with my code. Can any one help?

This is my own creation my mistake was in css i edit that one i got My expected output.
Here is my Code:
<!DOCTYPE html>
<html>
<head>
<title>helllo</title>
<style>
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus { outline:none; }
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
top:-20px;
font-size:14px;
color:#5264AE;
transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
</style>
</head>
<body>
<form>
<br/>
<br/>
<div class="group">
<input type="text" readonly value="shruthi">
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" readonly value="shruthi#gmail.com" id="well">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<script>
$(document).ready(function() {
$('input').blur(function() {
// check if the input has any value (if we've typed into it)
if ($(this).val())
$(this).addClass('used');
else
$(this).removeClass('used');
});
});
</script>
</body>
</html>

Just position your label to top: -20px.That will do.
$(document).ready(function() {
$('input').blur(function() {
// check if the input has any value (if we've typed into it)
if ($(this).val())
$(this).addClass('used');
else
$(this).removeClass('used');
});
});
/* form starting stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: -20px;
transition: 0.2s ease all;
}
/* active state */
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #5264AE;
}
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
input:focus~.highlight {
animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<br/>
<br/>
<div class="group">
<input type="text" readonly value="shruthi">
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" readonly value="shruthi#gmail.com">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>

For, what i have understood about your problem ,
your label is absolute which overlap your label and input field
just change position of your label to static or relative, works if you remove that block too
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute; // remove this block it works
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;

readonly attribute distorts the CSS. So I created a class named disabled-control which will make the input behave as a readonly field.
/* prevent typing */
$('.disabled-control').keypress(function(e) {
e.preventDefault();
});
/* blurring so caret doesn't show; timeout so underline transition
ends before blurring */
$('.disabled-control').click(function(e) {
var me = $(this);
setTimeout(function(){ me.blur(); }, 200);
});
.group {
position:relative;
margin-bottom:45px;
}
input , input:read-only {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
#-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
#keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
.disabled-control{
opacity: 0.4;
cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="margin-top: 50px;">
<div class="group">
<input type="text" required value="shruthi" class="disabled-control">
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required value="shruthi#gmail.com" class="disabled-control">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>

html page goes crazy when resizing the browser

So I want to build a modal that contains 3 pages and a progress bar that changes whenever I click on a button. The problem is when I resize my browser the progress bar goes out from the modal.
Here is my code:
$( document ).ready(function() {
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$('.go').click(function () {
$('.pg2').toggleClass('active') ;
}) ;
$('.gg').click(function () {
$('.pg3').toggleClass('active') ;
}) ;
});
var pageIndex = 1;
showPages(pageIndex);
function nextPage(n) {
showPages(pageIndex += n);
}
function showPages(n) {
var i;
var pages = document.getElementsByClassName("pop");
if (n > pages.length) {pageIndex = 1}
if (n < 1) {pageIndex = pages.length}
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
pages[pageIndex-1].style.display = "block";
}
#import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body{
width:100%;
height:100%;
margin:0;
}
.sent{
font-family: Dancing Script, Georgia, Times, serif;
font-size :35px ;
text-align: center;
color:#01bce5 ;
}
.page-wrapper{
width:100%;
height:100%;
background:url(http://feelgrafix.com/data/background/background-1.jpg) center no-repeat;
background-size:cover;
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
a.btn{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:50%; left:50%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.go{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:60%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.gg{
width:200px;
height: 10px;
display:block;
margin:-25px 0 0 -250px;
padding:1em 0;
position:absolute;
top:70%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:400;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(255,257,153,0.75);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
overflow: hidden;
list-style-position: inside;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
overflow: hidden;
list-style-position: inside;
}
.modal{
width:600px;
height:600px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:40%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
overflow: hidden;
word-break:break-all;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:#01bce5;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
}
.flat-button {
position: relative;
width: 150px; height: 60px;
background: #E74C3C;
margin: 0 auto;
margin-top: 40px;
overflow: hidden;
z-index: 1;
cursor: pointer;
transition: color .3s;
/* Typo */
line-height: 60px;
text-align: center;
color: #fff;
}
.flat-button:after {
position: absolute;
top: 90%; left: 0;
width: 100%; height: 100%;
background: #C0392B;
content: "";
z-index: -2;
transition: transform .3s;
}
.flat-button:hover::after {
transform: translateY(-80%);
transition: transform .3s;
}
.round-image{
border-radius:100%;
height: 280px;
margin: 0 auto;
overflow:hidden;
width: 280px;
}
.descrip{
padding:1em 0;
position:absolute;
top:40%;
left:70%;
font:1.125em 'Arial', sans-serif;
text-align:center;
text-decoration:none;
margin:-25px 0 0 -75px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 5px solid #7d7d7d;
display: block;
text-align: center;
margin: 200px auto 10px auto;
border-radius: 50%;
}
.progressbar li:after {
width: 100%;
height: 7px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 215px;
left: -50%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #01bce5;
}
.progressbar li.active + li:after {
background-color: #01bce5;
}
.titre{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./main.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script">
<title></title>
</head>
<body>
<div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Popup!</a>
</div>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<div class="container">
<div class="pop fade">
<div class="text">
<h1 class='sent'>FIRST PAGE </h1>
</div>
<img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" >
<p class='descrip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
<a class="btn go" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h3 class="titre">Lorem ipsum dolor sit amet</h3>
</div>
<a class="btn gg" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h1 class='sent'>Inscription</h1>
</div>
</div>
</div>
</div>
</div>
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"> </script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="./index.js" type="text/javascript"></script>
</html>

I think your issue is here:
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
The left:350px; property is hardcoding a value that is pushing the progress bar to the right... I would recommend to use a percentage. Also the list that creates the progress bar is outside of the modal view. Maybe would be better that is inside.
Finally if you are testing responsive design add this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your head. It will help your site when it renders on mobile devices

In your HTML code add
<div style="clear:both"></div>
before
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
Then change left:350px to left:x%.
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:20%;
height: 10px;
}
if you want your design work for every size of browser then making different css for different display size must help you.
use following meta tag in head of your code
<meta name="viewport" content="width=device-width, initial-scale=1">
then import two css using media query
<link rel="stylesheet" media="screen and (max-width:768px)" type="text/css" href="./mobile.css">
<link rel="stylesheet" media="screen and (min-width:769px)" type="text/css" href="./desktop.css">
if your browser screen resolution is less than 768px browser will render mobile.css
if resolution is more than 768 browser will render destop.css you can check your browser css here. check resolution for different screen size will clear you more.
Learn more about responsive web design here
Note now most of modern browser support % as input for size elements like width margin height etc use this instead of px will also help you to make html more responsive for more device and screen size.
FYI, you can also use internal media query for css like
body
{
width: 75%;
}
#media only screen and (max-width: 500px) {
body {
width: 91.66%;
}
}

.animate() in jQuery and if condition seems to don't work

I'm not an expert in jQuery and I try to create a kind of button-toggle :
When I click on the switch-button "Home/News", the content should switch too.
But that seems to don't work... Despite the if condition, the condition AND the else are executed... I don't get it. Someone can tell me where do I failed ?
Here is the jsfiddle : https://jsfiddle.net/zgLsbw2h/1/
The jQuery :
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
$('.container_slide_actu').animate({
left : 0}, 700);
$('.onoffswitch').removeClass('nothere');
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
$('.onoffswitch').addClass('nothere');
}
});
}
switchButton();
});
Thanks in advance.
**Edit
More explanation (in hope to simplify):
I have two html container. When I click on the button, I want to switch them. By default, I got the container1 ; when I click odd => container2 ; when I click even => container1...
Some screenshots to explain :
-The banner of my website (default => container1 (1 on the screenshot)) and the slideshow (who comes over the banner => container2 (2 on the screenshot)) : http://prntscr.com/dpwxat

The reason for your animation going in and out is because the onclick is running twice. The reason for that is because you targeted the "onoffswitch" class, which you have more than one of. If you target the"#myonoffswitch" instead, it being an id, only targets one thing and will only fire once. I cleaned up your JS a bit too. Check it out, let me know what you think.
$(document).ready(function(){
$('#myonoffswitch').on("click", function(){
if($("#myonoffswitch").is(':checked') == false) {
$('.container_slide_actu').animate({
left : 0}, 700);
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
}
});
});
body{
margin:0;
}
.banner-site{
width:100%;
background-color:white !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-attachment:fixed;
height:350px;
display:flex;
align-items:center;
margin-top:-15px;
transition:all .7s;
position:relative;
border-bottom:1px solid white;
border-top:1px solid white;
overflow:hidden;
}
.banner-site:hover h1{
color:white;
border:2px solid white;
text-shadow:1px 1px 5px rgba(0,0,0,.9);
}
.banner-site:hover h1 a{
color:white;
}
.banner-site a{
color:black;
text-decoration:none;
transition:all .7s;
}
.banner-site .false-hover{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,0);
z-index:1;
transition:all .7s;
}
.banner-site h1{
text-align:center;
border:2px solid #161416;
color:#161416;
margin:auto;
padding:10px;
border-radius:2px;
font-family:'Cinzel';
font-size:30px;
font-weight:300;
text-transform:uppercase;
position:relative;
z-index:2;
text-shadow:1px 1px 5px rgba(255,255,255,.9);
transition:all .3s;
}
.banner-site .false-hover:hover{
background-color:rgba(0,0,0,.5);
}
/*On/Off switch | ty https://proto.io/freebies/onoff/ */
.onoffswitch {
position: absolute; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
opacity:.5;/*à voir si on keep*/
right:10px; bottom:15px;
z-index:9999;
display:block;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px; text-transform:uppercase;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: 'Oswald', Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Home";
padding-left: 10px;
background-color: #000000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "News";
padding-right: 10px;
background-color: #FFFFFF; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 25px; margin: 2.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
.container_slide_actu{
width:100%;
height:350px;
z-index:999;
position:absolute;
top:0;
left:-100%;
display:block;
}
#mavideo {
top: 0;
left: 0;
width: 100%;
height: 350px;
object-fit:cover;
}
/*look http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
<div class="banner-site" style="background-image:url('https://media.senscritique.com/media/000009498078/1200/Lady_Vengeance.jpg')">
<h1><a class="tdn cgrey" href="#" title="Retour à l'accueil de">Play it's evil?</a></h1>
<div class="false-hover"></div>
<!-- Button on/off à replace-->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked autocomplete="off">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="container_slide_actu">
<video id="mavideo" controls autoplay muted loop="true">
<source src="" type="video/mp4">
</video>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

I added console.log('has nothere'); and console.log('nothere not present'); only to make sure the if was working and noticed at the beginning that both the if and else conditions were being met on a single click.
Not sure what you are trying to accomplish yet but I moved the add/remove class lines inside an anonymous function to be executed once the animation has been completed.
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
console.log('has nothere');
$('.container_slide_actu').animate({
left : 0}, 700, function() {
// Animation complete.
$('.onoffswitch').removeClass('nothere');
});
}else{
console.log('nothere not present');
$('.container_slide_actu').animate({
left : '-100%'}, 700, function() {
// Animation complete.);
$('.onoffswitch').addClass('nothere');
});
}
});
}
switchButton();
});
Please try and let me know.

Issue in joining the image and description in html

I have been created time-line for my web page, by using html,css3 and js.
html:
<div class="cntl-state">
<div class="cntl-content">
<h4>Title 4</h4>
<p>India’s Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain’s Carolina Marin in the final.</p>
</div>
<div class="cntl-image"><img src="img/timelinesn-12.jpg" alt="tm12"></div>
<div class="cntl-icon cntl-center">2014</div>
</div>
</div>
css:
.cntl-center {
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.cntl-bar {
position: absolute;
width: 10px;
top: 0;
bottom: 0;
background-color: #ccc;
box-shadow: inset 0px 0px 7px -2px #000;
}
.cntl-bar-fill {
background-color: #66cc00;
position: absolute;
left:0;
right:0;
top:0;
height:0;
}
.cntl-state {
position: relative;
width:100%;
min-height: 200px;
margin-bottom: 50px;
}
.cntl-state::after {
display:block;
content: ' ';
clear:both;
}
.cntl-icon {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #003300;
border: solid 3px #009900;
box-shadow: 0px 0px 19px -9px #000;
position: absolute;
top: 0;
text-align: center;
line-height: 100px;
font-size: 40px;
color: #fff;
}
.cntl-content {
width: 30%;
padding: 2%;
background-color: rgba(238, 238, 238, 0.25);
border-radius: 8px;
border-bottom: solid 3px #009900;
float:left;
opacity:0;
position:relative;
margin-left:-40%;
}
.cntl-state:nth-child(2n+2) .cntl-content {
float:right;
margin-right:-40%;
}
.cntl-image {
opacity:0;
width: 40%;
padding: 2%;
}
.cntl-state:nth-child(2n+1) .cntl-image {
float:right;
}
.cntl-content h4 {
font-size:20px;
font-weight: normal;
margin-bottom: 10px;
}
/*
animations
*/
.cntl-bar-fill,.cntl-content,.cntl-image {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.cntl-state:nth-child(2n+2).cntl-animate .cntl-content {
margin-right:6%;
}
.cntl-animate .cntl-content {
opacity:1;
margin-left:6%;
}
.cntl-animate .cntl-image {
opacity:1;
}
And i have used js files also, i m trying to create jsfiddle, but can't able to get.
Now my page shows like this http://s30.postimg.org/54dkm4qoh/Untitled_2.png
I need like this dotted line, for joint the image and description.
http://s30.postimg.org/k522y658x/Untitled_1.png
Can anyone help me to give idea for creating dotted line that is join the both image and description?.
Thanks in advance.

If you want to know how to draw dotted line here is the code for it.
<head>
<title></title>
<style id="TempStyle"></style>
</head>
<body>
<hr style="height: 0;margin:50px;width: 200px;border-width: 5px;border-color: black;border-style: dotted;"><!-- horizontal line -->
<hr style="height: 200px;margin:50px;width: 0px;border-width: 5px;border-color: black;border-style: dotted;"><!-- vertical line -->
</body>
<script src="script.js"></script>
</html>

Actually its little messy when we try using CSS to do these sort of things. Still i think this is what you might be looking for Demo. I have just showed you the quick demo, but you will have to add cross browser support.
CSS & HTML
html, body {
height: 100%;
position:relative;
}
body{
color:#fff;
overflow:hidden;
}
.leftcont
{
position:absolute;
margin-left:0%;
display:block;
width:47%;
height:100%;
background:#333;
}
.timeline
{
position:absolute;
margin-left:47%;
display:block;
width:6%;
height:100%;
background:#ddd;
}
.rightcont
{
position:absolute;
margin-left:53%;
display:block;
width:48%;
height:100%;
background:#333;
}
.content1
{
padding:20px;
display:block;
height:150px;
width:200px;
float:right;
margin-right:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.content2
{
padding:20px;
display:block;
height:150px;
width:200px;
float:left;
margin-left:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.circle
{
display:block;
height:60px;
width:60px;
margin-top:100%;
border-radius:50%;
background:#000;
padding:15px 15px;
text-align:center;
font-size:22px;
}
#linel
{
position:relative;
float:right;
right:-44%;
top:17%;
display:block;
width:70px;
height:0.1px;
border:2px dashed green;
}
#liner
{
position:relative;
float:left;
left:-43%;
top:17%;
display:block;
width:65px;
height:0.1px;
border:2px dashed green;
}
<div class="leftcont">
<div class="content1">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="linel"></span>
</div>
<div class="timeline">
<div class="circle">2006</div>
</div/>
<div class="rightcont">
<div class="content2">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="liner"></span>
</div/>

Develop Reference

JavaScript is the programming language of the Web.

Problem with a relative positioned input element in a flexbox - javascript

Related

disabling form submit in html and css only

How to Remove Overlapping with read-only format and input type using HTML

html page goes crazy when resizing the browser

.animate() in jQuery and if condition seems to don't work

Issue in joining the image and description in html

Categories

Resources