I have a sample code that is displaying a search query with css animation.
I would like to know, how can I hide the 'title' class when the search query is expanded, and show it again when the search query is minimized?
Here is a sample image of the two states (as you can see 'title' is viewable behind the search text, which I dont want):
I know that within the jquery I can hide it like so (showing it again I don't know how the logic would go):
$("p").hide();
but how can I do it with just CSS?
The snippet is working, but its not displaying correctly, though I dont know why.
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>
You can use siblings to select the div.title.
Add another class for with display:none property and toggle that class
$("p").hide();
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
$(this).parent('.search').siblings('div.title').toggleClass('hideTitle')
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
.hideTitle{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title titleDiv">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>
Wrap label and input in one div with position relative and used siblings jquery to hide the title
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
$(this).parent('.search').siblings('label').toggleClass('hide');
});
.row {
border: 1px solid red;
}
.search-form {
position:relative;
}
.search-form .title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="search-form">
<label class="title">Title</label>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>
</div>
Related
This would be my Registration page. When the script html tag testscript.js code is remove or commented out, the register button works perfectly fine but when I input the testscript.js, the register button is kind of disabled. So, I think the problem is the javascript code because that's the only part of the code that blocks the function of the register button.
Here's my source code:
views.py:
def registration(request):
form = CustomUserCreationForm()
print("Working Form")
if request.method == 'POST':
form = CustomUserCreationForm(request.POST)
print("Form Submitted")
if form.is_valid():
form.save()
context = {'form' : form}
return render(request, 'activities/index.html', context)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../static/CSS/styles.css">
<link rel="stylesheet" href="../static/CSS/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../static/CSS/css/bootstrap.min.css">
<script src="../static/Javascript/js/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- Header -->
<div class="site-header" >
<nav class="navbar fixed-top navbar-expand-lg navbar-dark index__navbar scrolled">
<div class="container-fluid">
<div>
<img class="navbar-icon" style="margin-left:15px;" src="../static/Media/avatar.png" alt="dasma-logo">
<span id="hideHomeTitle" class="brand__name" style="color:#2c5f2dff;">Preschooler Profiling and Monitoring</span>
</a>
</div>
</div>
</nav>
</div>
<!-- Form -->
<div class="container-fluid" id="homeBody">
<br>
<div class="form">
<div class="form-toggle"></div>
<div class="form-panel one">
<div class="form-header">
<h1>Login</h1>
</div>
<div class="form-content">
<form action="">
<div class="form-group">
<label for="">Username</label>
<input type="text" id="username" name="username">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" id="password" name="password">
</div>
<div class="form-group">
<label class="form-remember">
<input type="checkbox">Remember Me
</label><a class="form-recovery" href="">Forgot Password?</a>
</div>
<div class="form-group">
<button type="submit">Log In</button>
</div>
</form>
</div>
</div>
<div class="form-panel two">
<div class="form-header">
<h1>Register Account</h1>
</div>
<div class="form-content">
<form method="POST" action="">
{% csrf_token %}
<div class="input-group mb-3">
<label for="">User Type</label>
{{ form.user_type }}
<br>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<label for="">First Name</label>
{{ form.first_name }}
</div>
<div class="col">
<label for="">Last Name</label>
{{ form.last_name }}
</div>
</div>
</div>
<div class="form-group">
<label for="">Email Address</label>
{{ form.email }}
</div>
<div class="form-group">
<label for="">Password</label>
{{ form.password1 }}
</div>
<div class="form-group">
<label for="">Confirm Password</label>
{{ form.password2 }}
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../static/Javascript/testscript.js"></script>
</html>
testscript.js:
$(function () {
$(document).scroll(function () {
var $nav = $(".fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
$(document).ready(function() {
var panelOne = $('.form-panel.two').height(),
panelTwo = $('.form-panel.two')[0].scrollHeight;
$('.form-panel.two').not('.form-panel.two.active').on('click', function(e) {
e.preventDefault();
$('.form-toggle').addClass('visible');
$('.form-panel.one').addClass('hidden');
$('.form-panel.two').addClass('active');
$('.form').animate({
'height': panelTwo
}, 200);
});
$('.form-toggle').on('click', function(e) {
e.preventDefault();
$(this).removeClass('visible');
$('.form-panel.one').removeClass('hidden');
$('.form-panel.two').removeClass('active');
$('.form').animate({
'height': panelOne
}, 200);
});
});
styles.css:
/* Login Form */
.overlay, .form-panel.one:before {
position: absolute;
top: 0;
left: 0;
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
}
.form {
z-index: 15;
position: relative;
background: #FFFFFF;
width: 600px;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
margin: 100px auto 10px;
overflow: hidden;
}
.form-toggle {
z-index: 10;
position: absolute;
top: 60px;
right: 60px;
background: #FFFFFF;
width: 60px;
height: 60px;
border-radius: 100%;
transform-origin: center;
transform: translate(0, -25%) scale(0);
opacity: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.form-toggle:before, .form-toggle:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 4px;
background: rgb(33, 146, 71);
transform: translate(-50%, -50%);
}
.form-toggle:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.form-toggle:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.form-toggle.visible {
transform: translate(0, -25%) scale(1);
opacity: 1;
}
.form-group{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 20px;
}
.form-group:last-child {
margin: 0;
}
.form-group label ,.input-group label{
display: block;
margin: 0 0 10px;
color: rgba(0, 0, 0, 0.6);
font-size: 12px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.two .form-group label ,.input-group label{
color: #FFFFFF;
}
.form-group input {
outline: none;
display: block;
background: rgba(0, 0, 0, 0.1);
width: 100%;
border: 0;
border-radius: 6px;
box-sizing: border-box;
padding: 12px 20px;
color: rgba(0, 0, 0, 0.6);
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: inherit;
transition: 0.3s ease;
}
.form-group input:focus {
color: rgba(0, 0, 0, 0.8);
}
.two .form-group input {
color: #FFFFFF;
}
.two .form-group input:focus {
color: #FFFFFF;
}
.form-group button {
outline: none;
background: rgb(33, 146, 71);
width: 100%;
border: 0;
border-radius: 4px;
padding: 12px 20px;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: inherit;
text-transform: uppercase;
cursor: pointer;
}
.two .form-group button{
background: #FFFFFF;
color: rgb(33, 146, 71);
}
.form-group .form-remember {
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.form-group .form-remember input[type=checkbox] {
display: inline-block;
width: auto;
margin: 0 10px 0 0;
}
.form-group .form-recovery {
color: rgb(33, 146, 71);
font-size: 12px;
text-decoration: none;
}
.form-panel {
padding: 60px calc(5% + 60px) 60px 60px;
box-sizing: border-box;
}
.form-panel.one:before {
content: "";
display: block;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.form-panel.one.hidden:before {
display: block;
opacity: 1;
visibility: visible;
}
.form-panel.two {
z-index: 5;
position: absolute;
top: 0;
left: 95%;
background: rgb(33, 146, 71);
width: 100%;
min-height: 100%;
padding: 60px calc(10% + 60px) 60px 60px;
transition: 0.3s ease;
cursor: pointer;
}
.form-panel.two:before, .form-panel.two:after {
content: "";
display: block;
position: absolute;
top: 60px;
left: 1.5%;
background: rgba(255, 255, 255, 0.2);
height: 30px;
width: 2px;
transition: 0.3s ease;
}
.form-panel.two:after {
left: 3%;
}
.form-panel.two:hover {
left: 93%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.form-panel.two:hover:before, .form-panel.two:hover:after {
opacity: 0;
}
.form-panel.two.active {
left: 10%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
cursor: default;
}
.form-panel.two.active:before, .form-panel.two.active:after {
opacity: 0;
}
.form-header {
margin: 0 0 40px;
}
.form-header h1 {
padding: 4px 0;
color: rgb(33, 146, 71);
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
}
.two .form-header h1 {
position: relative;
z-index: 40;
color: #FFFFFF;
}
I know it's too long but I hope someone would have a solution for this. Thanks!
The Django button which is not working after using javascript code is because , I feel like the div with form-panel is been used in the Js code whereas If you see the button is also under the same tag(form-panel). Try by removing the button div and place it outside the main div.
I hope it help. Best of luck
I currently have a gallery of my portfolio set-up. Once you click on the image, it makes a pop-up. Inside of the pop-up is the image and text describing the design, copywriting ect. Once you hover over the image, it zooms. My problem is that one or two of the images, on css hover transform scale, scales to such a size that it is outside of the viewing port of the browser. It is in rectangular form, where other designs are only square. I would like the user of the website to move their cursor up and have the image move with the cursor, so the user can see the top of the image, and then have the user move their cursor down to the bottom of the image and have the image move with the cursor so that the user can see the bottom of the image. I have no idea how to do this, and I've searched everywhere but I can not find anything useful. I think it might use background-image and java-script but I really need help since I don't have knowledge of this.
html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/mainwebsite.css">
<link rel="stylesheet" href="CSS/fonts/futura_bold_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_book_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_bt-stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_italic_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_medium_stylesheet.css">
<script defer src="javascript/POPUP.js"></script>
<script src="javascript/Filters.js" defer></script>
<script defer src="javascript/tothetop.js"></script>
<script defer src="javascript/moveimage.js"></script>
<meta charset="utf-8">
<title>Ilana's creations</title>
</head>
<body class="helpme">
<div class="container">
<div class="mainnavbar">
<div class="navbar_left">
<p class="nav">
<a class="current" href="index.html">
CREATIONS
</a>
</p>
<p class="nav">
<a href="aboutme.html">
ABOUT ME
</a>
</p>
<p class="nav">
<a href="sayhi.html">
SAY HI!
</a>
</p>
</div>
<div class="navbar_right">
<p class="nav1">
<a href= target="_blank">
<img src="images/LI-In-Bug.png" alt="LinkedIn" class="icon" style="width:20px;height:20px">
</a>
</p>
<p class="nav1">
Ilana van Rooyen
</p>
</div>
</div>
<div class="searchbar" id="filtering">
<button class="searchbarbuttons active" onclick="filterSelection('all')">
ALL
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('design')">
DESIGN
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('copy')">
COPYWRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('creativewriting')">
CREATIVE WRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('videos')">
VIDEOS
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('socialmedia')">
SOCIAL MEDIA MANAGEMENT
</button>
</div>
<div class="case">
<!-- MODAL 22 BIGGER IMAGES -->
<div class="nobutton design" data-modal-target="#modal22">
<img src="Images/ZoetisMap_Pres.png" alt="ZoetisMap" width="250px" height="250px" class="gallerypics">
</div>
<div class="modal2" id="modal22" style="width: 50%; height: auto">
<div id="scroll">
<img src="Images/ZoetisMap_Design.png" alt="ZoetisMap" class="IMG3" style="width: 40%; height: 40%">
</div>
<div class="containerDB">
<div class="DESC">
<p class="DESC_text">
<strong class="title">
Layout design:
</strong>
Ilana van Rooyen
</p>
<p class="DESC_text">
<strong class="title">
Company:
</strong>
Agribonus
</p>
<p class="DESC_text">
<strong class="title">
Brief:
</strong>
Design a layout for an article provided by Zoetis for the Bonus magazine.
</p>
</div>
<div class="buttonclose">
<button data-close-button class="closebutton">
CLOSE
</button>
</div>
</div>
</div>
<!-- OVERLAY JAVA -->
<div id="overlay">
</div>
<!-- CLOSE DIV CASE -->
</div>
<div onclick="topFunction()" id="myBtn"><img src="images/outline_expand_circle_down_black_24dp.png" alt="tothetop" height="80%" width="80%"></div>
<div class="madewithlove" id="footer">
<p class="love"><i> This website was made by me, with a lot of <b>love</b>, a lot of <b>googling</b>, and a lot of <b>banging my head on the table</b> (I'm fine, thanks).</i></p>
</div>
<!-- CLOSE DIV CONTAINER -->
</div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
a {
color: inherit;
text-decoration: none;
position: inherit;
}
strong {
color: inherit;
text-decoration: none;
position: inherit;
}
p {
color: inherit;
text-decoration: none;
position: inherit;
margin: inherit;
line-spacing: inherit;
}
.helpme {
margin: 0;
}
.container {
Display: flex;
flex-direction: column;
min-height: 100vh;
}
.mainnavbar {
color: white;
background-color: white;
box-shadow: 0px 0px 5px 0.1px #707070;
border-bottom: 1px solid #D9D9D9;
overflow: hidden;
margin: 0px 0px 40px 0px;
padding: 10px;
position: sticky;
z-index: 100;
top: 0;
bottom: 0;
height: 50px;
}
.navbar_left {
margin-left: 20%;
float: left;
display: inline-flex;
font-family: 'futuralight';
color: #707070;
background-color: white;
}
.navbar_right {
margin-right: 20%;
float: right;
display: inline-flex;
font-family: 'futuralight';
font-weight: normal;
color: #707070;
background-color: white;
}
.nav {
margin: 20px 20px 20px 20px;
background-color: white;
transition-property: transform;
transition: 0.25s ease;
}
.nav .current {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav1 {
margin: 20px 0px 20px 0px;
padding: 0px 20px 0px 20px;
background-color: white;
}
.nav::after {
content: '';
border-top: 1px solid #707070;
width: 100%;
position: absolute;
display: block;
transform: rotateY(90deg);
transition:transform 0.25s linear;
}
.nav:hover {
transform: scale(1.05);
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav:hover::after {
transform: rotate(0deg);
}
.icon:hover {
transform: scale(1.1)
}
.searchbar {
display: block;
color: #707070;
text-align: center;
margin: 0px 20%;
}
.search {
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
margin: 0% 0% 8% 0%;
}
.searchbarbuttons {
background: none;
border: none;
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
padding: 5px;
cursor: pointer;
}
.searchbarbuttons:hover {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.searchbarbuttons.active {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.case {
margin: 0px 20% 70px 20%;
text-align: center;
position: relative;
}
.gallerypics {
padding: 5px 5px 5px 5px;
cursor: pointer;
transition: 0.3s;
border-radius: 15px;
}
.gallerypics:hover {
transform: scale(1.5)
}
.nobutton {
display: none;
}
.show {
display: inline-block;
transition: 0.3s;
border-radius: 15px;
}
/* MODAL BIG IMAGES */
.modal2 {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(0);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
}
.modal2.active {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(1);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
vertical-align: middle;
}
.modal2 .IMG3 {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
border-radius: 15px;
display: inline-block;
float: left;
}
.modal2 .IMG3:hover {
cursor: zoom-in;
transform: scale(170%);
transition: 200ms ease-in;
transition-delay: 0.5s;
border-radius: 0px;
}
.modal2 .containerDB {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
float: right;
}
.modal2 .DESC {
border-radius: 15px;
background-color: white;
padding: 20px;
overflow: scroll;
overflow-x: hidden;
}
.modal2 .DESC_text {
font-family: 'futuralight';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .DESC_text a:hover {
font-family: 'futuramedium';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .title {
font-family: 'futuramedium';
font-weight: normal;
font-size: 15px;
color: #707070;
line-spacing: 20pt;
}
.modal2 .buttonclose {
margin: 20px 0px;
}
.modal2 .closebutton {
position: fixed;
bottom: 20px;
right: 20px;
border: #707070;
border-width: 1px;
cursor: pointer;
outline: solid 1px #707070;
background: white;
font-family: 'futurabold';
letter-spacing: 0.5px;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.5vh;
color: #707070;
font-weight: normal;
float: right;
}
.modal2 .closebutton:hover {
transition:transform 0.25s linear;
box-shadow: 1px 1px 1px 1px #707070;
}
/* MODAL BIG IMAGES END */
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #707070;
pointer-events: none;
transition: 200ms ease-in-out;
}
#overlay.active {
opacity:70%;
pointer-events: all;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
border: none;
outline: none;
cursor: pointer;
}
#myBtn:hover {
transform: scale(1.1);
}
.madewithlove {
background-color: white;
padding: 10px 10px;
box-shadow: -2px -2px 5px 0.1px #707070;
height: 60px;
left: 0;
bottom: 0;
right: 0;
margin-top: auto;
}
.love {
font-family: 'futuralight';
color: #707070;
padding: 20px;
text-align: center;
font-size: 13px;
}
javascript on pop-up only:
/* eslint-env es6 */
/* eslint-disable */
/* popup javascript */
const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
/* modal */
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
/* close button modal */
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal2')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
/* overlay open all */
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal2.active')
modals.forEach(modal => {
closeModal(modal)
})
})
Images for download: https://drive.google.com/drive/folders/1OGD5iuyxcVekdr-pTjfkDi5o6uF4LVH5
I'm new to coding and I decided to try and learn HTML and CSS last night. I'm working on a chat UI. But I'm having a problem with my header and footer div overlapping the chat div.
I'm also having a problem with the message input I'm trying to fix the
input to the bottom of chat div but everything I tried didn't work.
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
position: fixed;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
position: fixed;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>
I would appreciate any advice or help I could get.
Just remove position: fixed from both the classes for header and footer!
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>
I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!
body {
padding: 0;
margin: 0;
}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left.
If you remove the top left and transform from the mainDiv you will see following:
This is where this whitespace come from.
You should add an element to clear:both under the toolbar (see snipped below)
body {
padding: 0;
margin: 0;
}
/* ADDED THIS*/
.clear{clear:both}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
box-sizing:border-box;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
<div class="clear"></div><!-- ADDED THIS -->
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
You can use flex to align items which makes it easier:
body {
padding: 0;
margin: 0;
display: flex;
align-items: 'center';
justify-content: 'center';
}
.totalCenter {
display: flex;
justify-content: 'center';
}
When you set the display property to flex of a class you can use these properties:
align-items : aligns items vertically.
justify-content : alings items horizontally.
Flex is really cool if you cant to know more you can check out these two articles:
Aligning Items in a Flex Container
A Complete Guide to Flexbox
I have a multi-step form (created in HubSpot): Demo
The form in the demo is Step 1. Once a user completes, step 1, they hit the button and it'll move to step 2 (as you would expect!).
However, I can't seem to get this action working. I have two issues:
If a user is on step 1, I want the step 1 anchor link to remain underlined. Unsure on how I can check what form the user is on using JavaScript.
I need the form to submit and then change to step 2. Issue is they're HubSpot embedded forms, which means I can't really (and don't want to) alter the HTML. I've seen many Bootstrap approaches, but again, don't want to alter the HTML too much and would therefore, like to avoid it.
Step 1 form embed code (in code below):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
</script>
Step 2 form embed code (What I want to appear after form 1 is submitted):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844"
});
</script>
What I've tried:
$(document).ready(function() {
$(".modal-content .hs-button").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content .form-columns-2 .form-columns-1").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
Any help/advice would be appreciated!
Full demo code:
$(document).ready(function() {
$(".modal-content .hs-button").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".modal-content").submit(function(e) {
e.preventDefault();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
a {
cursor: pointer;
}
p {
margin: 0 0 1rem;
font-weight: 400;
}
a {
color: inherit;
cursor: pointer;
}
ul {
padding-left: 0;
margin: 0;
}
.input textarea {
padding-left: 10px !important;
}
.modal-content {
background-color: #097afb;
margin: 4% auto 15% auto;
padding-bottom: 30px;
border-radius: 3px;
}
.steps {
text-align: center;
}
.steps li {
display: inline-block;
margin: 20px;
color: #fff;
font-size: 0.875rem;
padding-bottom: 5px;
text-transform: uppercase;
}
.imgcontainer {
text-align: center;
position: relative;
display: block;
}
.imgcontainer h2 {
font-size: 29px;
padding-top: 50px;
color: #fff;
margin: 0;
text-transform: uppercase;
}
.imgcontainer p {
font-size: 18px !important;
padding-top: 10px;
color: #fff;
}
input[type=text],
input[type=email] {
width: 90%;
padding: 12px 12px;
margin: 10px 50%;
display: inline-block;
border-bottom: 1px solid #414141;
box-sizing: border-box;
font-size: 16px;
background: transparent;
text-transform: uppercase;
border-top: none;
border-left: none;
box-shadow: none;
border-right: none;
}
textarea {
width: 98% !important;
padding: 12px 20px;
margin: 8px 25%;
display: inline-block;
border-bottom: 1px solid #414141 !important;
box-sizing: border-box;
font-size: 16px !important;
background: transparent;
text-transform: uppercase;
border-top: none !important;
border-left: none !important;
box-shadow: none !important;
border-right: none !important;
resize: none;
}
form span:not(.close) {
display: none !important;
}
form .actions {
padding: 0px 20px 0px 0px;
width: 87%;
display: inline-block;
}
form .actions input[type=submit]:hover {
background-color: #000;
color: #fff;
border: 2px solid #000;
}
form .actions input[type=submit] {
border: 2px solid #fff !important;
background-color: #097afb;
padding: 12px 25px !important;
color: #fff !important;
text-decoration: none;
font-size: 0.8125rem;
font-family: "Lato";
font-weight: 700;
float: right;
background-image: none;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="visible" class="button-outline hero-button button-arrow" onclick="document.getElementById('modal-wrapper').style.display='block'">Click here</a>
<div id="modal-wrapper" class="modal" style="display: none;">
<div>
<div>
<div>
<div>
<span>
<form class="modal-content animate">
<div class="imgcontainer">
<h2 style="text-align: center;">Title</h2>
<p>Lorum Ipsum</p>
</div>
<div class="container">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
// <![CDATA[
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
// ]]>
</script>
<div></div>
<ul class="steps">
<li class="is-active"><a>Step 1</a></li>
<li>/</li>
<li><a>Step 2</a></li>
<li>/</li>
<li><a>Step 3</a></li>
</ul>
</div>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
i hope this is what you looking for .
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if(currentSectionIndex === 3){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
}
h1, h2, h3, h4, h5 ,h6{
font-weight: 200;
}
a{
text-decoration: none;
}
p, li, a{
font-size: 14px;
}
fieldset{
margin: 0;
padding: 0;
border: none;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
display: block;
float:left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.container{
width: 100%;
max-width: 700px;
margin: 0 auto;
position: relative;
}
.row{
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper{
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps{
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
text-align: center;
}
.steps li{
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active{
border-bottom: 1px solid #3498db;
color: #3498db;
}
/* FORM */
.form-wrapper .section{
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
position: absolute;
width: 100%;
min-height: 300px
}
.form-wrapper .section h3{
margin-bottom: 30px;
}
.form-wrapper .section.is-active{
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
background-color: #3498db;
display: inline-block;
padding: 8px 30px;
color: #fff;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .submit{
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"]{
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
display: none;
}
.form-wrapper input[type="radio"] + label{
display: block;
border: 1px solid #ccc;
width: 100%;
max-width: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.form-wrapper input[type="radio"] + label:before{
content: "✔";
position: absolute;
right: -10px;
top: -10px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
background-color: #3498db;
color: #fff;
display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
display: block;
}
.form-wrapper input[type="radio"] + label h4{
margin: 15px;
color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
color: #3498db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Account Type</h3>
<div class="row cf">
<div class="four col">
<input type="radio" name="r1" id="r1" checked>
<label for="r1">
<h4>Designer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r2"><label for="r2">
<h4>Developer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r3"><label for="r3">
<h4>Project Manager</h4>
</label>
</div>
</div>
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="submit button" type="submit" value="Sign Up">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button">Reset Form</div>
</fieldset>
</form>
</div>
</div>