JS modal dosent work with "getElementById" - javascript

I made admin panel with HTML CSS and JavaScript and I made buttons to move about menus, but when I test console and player menu that doesn't work like that not changed menu section.
How it looks in full-screen
And for test I put console log 123, but that still doesn't work. May CSS be the problem? Or may it's HTML the problem? Because in console it doesn't give me any error. Just clear Google Chrome console.
const playerMenuButton = document.getElementById('playerMenuButton')
const playerMenu = document.getElementById('playerMenu')
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>

The problem was in the css, I added position:relative; and z-index:1; to class .button so now you can add event to them and click without problem
const playerMenuButton = document.getElementById('playerMenuButton');
const playerMenu = document.getElementById('playerMenu');
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
position:relative;
z-index:1;
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>

Related

Web development implementing the form onclick event

I made this log-in and register form in which an onclick submit button of the form its display which form is submitted, left or right to implement it. I have used onclick property and passed a function to it fun() which has one parameter of the type no. So I used two functions fun(0) and fun(1) used to display a message which forms submitted by the user but it does not display the message.
And also I have a problem with the CSS it's not scaling according to the screen size as I used bootstrap for CSS and try the width, position property scale in % but then also it's not working.
function fun(Number n) {
if (n === 1) {
document.getElementsByClassName('m1').style.display = 'none';
} else {
document.getElementsByClassName('m2').style.display = 'none';
}
document.getElementsByClassName('modal').style.display = 'flex';
}
body {
background: linear-gradient(45deg, #fff722, #ff26f9);
font-weight: bold;
letter-spacing: 2px;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
text-align: center;
}
input[type=radio] {
width: 9%;
}
input, #e {
width: 100%;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.row {
position: relative;
}
form {
font-size: 20px;
border-bottom: solid 5px #dedfe0;
border-right: solid 5px #dedfe0;
padding: 5px;
width: 500px;
margin: 80px;
}
label {
font-family: arial;
color: #0000ff;
}
#log {
position: absolute;
top: 20px;
right: 20px;
transform: translate(50, 50);
}
button:hover {
opacity: 0.8;
}
.modal, .modal1 {
display: none;
justify-content: center;
align-items: center;
border-radius: 6px;
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
width: 500px;
height: 300px;
background: linear-gradient(45deg, #fff722, #ff26f9);
position: absolute;
text-align: center;
padding: 2%;
justify-content: center;
align-items: center;
border: solid 5px rgba(100, 0, 50, 0.5);
left: 500px;
top: 180px;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: black;
font-size: 50px;
font-weight: bold;
}
.close:hover, .close:focus {
color: red;
cursor: pointer;
}
.animate {
animation: zoom 10000;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(2)
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<form class="jumbotron" class="column" id="register">
<h1 class="container " style="border: solid 3px grey; color:magenta;
"><b>REGISTER<b></b></h1><br>
<label>First Name:</label><input type="text"><br>
<label>Last Name:</label> <input type="text"><br>
<label>D.O.B:</label> <input type="date"><br>
<label>City:</label> <input type="text"><br>
<label>Mobile No.: </label>
<select style=" width: 20%;">
<option>+91</option>
<option>+92</option>
<option>+93</option>
<option>+94</option>
<option>+95</option>
</select> <input type="text"><br>
<label>Gender:</label>
<div style=" "> <input type="radio" value="Male" name="Gender">Male
<input type="radio" value="Female" name="Gender">Female
<input type="radio" value="Other" name="Gender">Other<br></div>
<label>Employment Status:</label>
<select id="e">
<option>Employed</option>
<option>Unemployed</option>
</select><br><br><br>
<input type="submit" onclick="fun(0)" class="btn-info btn-lg" value=Register>
<input type="reset" class="btn-info btn-lg" value=Reset>
</form>
<div class="column" id="log">
<form class="jumbotron">
<h1 style="border: solid 3px grey; color:magenta;"><b>LOG-IN</b></h1><br>
<label>Email-Id:</label><input type="email"><br>
<label>Username:</label><input type="text"><br>
<label>Password:</label><input type="Password" min,="5"></br><br><br>
<input type="submit" class="btn btn-info btn-lg " onclick="fun(1)" value="LOG-IN">
</form>
</div>
</div>
<nav class="modal">
<div class="modal-content">
<span onclick="document.querySelector('.modal').style.display='none'" class="close">×</span>
<div style="border:solid 5px #dedfe0" class="container">
<h3 class='m1'>Left form submited</h3>
<h3 class='m2'>Right form submited</h3>
</div>
</div>
</nav>
</body>
<script type="text/javascript">
</script>
</html>

How to refresh/revisit the page after clicking submit on a form?

I am making a contact form(which doesn't need to actually contact someone). I want to make it so that when you press the send/submit button, it refreshes the page so that it appears that message has been sent. I am not using Javascript but any ways to do this through Javascript would be appreciated. This is my contact form. This isn't a duplicate because I would prefer if there was a way to do this through Html BUT js answers would be accepted
http://jsfiddle.net/egndc24s/1/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(-37.898677,144.640630),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-37.898677,144.640630)});infowindow = new google.maps.InfoWindow({content:'<strong>My Location<\/strong><br>Eagle Stadium<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
</section>
</div>
</body>
</html>
\\\\\\
* {
margin:0px;
padding:0px;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
body {
background: #1c1c1c;
color: #333;
font-weight: normal;
font-size: 1em;
font-family: 'Roboto', Arial, sans-serif;
}
input:focus, textarea:focus, keygen:focus, select:focus {
outline: none;
}
::-moz-placeholder {
color: #666;
font-weight: 300;
opacity: 1;
}
::-webkit-input-placeholder {
color: #666;
font-weight: 300;
}
/* contact from design */
.container {
padding: 20px 50px 70px;
}
.sec1title {
text-align: center;
}
.sec1title h1 {
font-size: 40px;
margin: 25px;
text-transform: uppercase;
color: red;
font-weight: 400;
}
.section2 {
position: relative;
overflow: hidden;
}
.section2 .contactform {
position: absolute;
top: 0;
right: 10%;
z-index: 99;
background: #393939;
padding: 30px 40px 70px;
box-sizing: border-box;
}
.section2 .contactform input.form-fields,
.section2 .contactform button.form-fields,
.section2 .contactform textarea.form-fields {
padding: 0 0 0 40px;
display: block;
box-sizing: border-box;
width: 350px;
font-size: 16px;
background: #323232;
margin: 7px 0;
border: 1px solid #00C1A8;
color: #6BECDB;
opacity: 0.5;
min-height: 45px;
text-shadow: none;
position: relative;
}
.section2 .contactform textarea.form-fields {
padding: 8px 40px;
resize: none;
}
.section2 .contactform button.form-fields.button {
color: #16F1D4;
font-size: 14px;
padding: 0;
text-transform: uppercase;
}
.section2 .contactform button.form-fields.button:hover {
background: #00C1A8;
color: #fff;
cursor: pointer;
opacity: 1;
}
.section2 .contactform button.form-fields.button i {
margin-left:10px;
}
.section2 .contactform h5 {
color: #16F1D4;
font-size: 16px;
margin-bottom: 15px;
}
.section2 .contactform label .cntfrmicn {
color: #00C1A8;
padding: 14px;
position: absolute;
z-index: 99;
}
#media only screen and (max-width: 660px) {
.container {
padding: 10px 20px 30px;
}
.contmap {
height: 475px !important;
}
.sec1title h1 {
font-size: 28px;
}
.section2 .contactform { padding: 10px; right: 0; width: 100%; }
.section2 .contactform input.form-fields, .section2 .contactform button.form-fields, .section2 .contactform textarea.form-fields {
width: 100%;
}
}
You can set the form's submit button's onClick event handler to reload the page with location.reload() or location = location (fallback for older browsers).
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send" onClick="refreshPage()">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function refreshPage(){
console.log("Refreshing page");
location.reload ? location.reload() : location = location;
}
</script>
</section>
</div>
</body>
</html>
Calling location.reload() from javascript will reload the page.
Which url in your backend is handling the form?
If it is the same url as this page, the browser will refresh it for you.
<form action="">
If it is another one, redirect to this page. You can do it server-side or client side.
Another solution using javascript would be to send an ajax request and add on the form onsubmit="location.reload(true)".
https://www.w3schools.com/jsref/event_onsubmit.asp
https://www.w3schools.com/jsref/met_loc_reload.asp

Codepen working on HTML not working on ASP.NET

I'm facing a problem while integrating a project from codepen into ASP.NET. While I download the project and test it on atom it works perfectly, but when I try to transfer it to ASP.NET (copy paste) it stops working, it just switch between log in / register without moving. I'm new to ASP.NET so maybe I'm missing something... It gives a green warning on the double <html> and <body> tags maybe the problem is there, I just don't know how to fix it. Any help is welcome thanks on advance.
The original codepen: Codepen Link
Note: only edit I made was adding / on non closing <> elements because ASP.NET told me to.
var $loginMsg = $('.loginMsg'),
$login = $('.login'),
$signupMsg = $('.signupMsg'),
$signup = $('.signup'),
$frontbox = $('.frontbox');
$('#switch1').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
setTimeout(function () {
$('#switch1').click()
}, 1000)
setTimeout(function () {
$('#switch2').click()
}, 3000)
body{
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
font-family: 'Roboto', sans-serif;
}
.container{
/*border:1px solid white;*/
width: 600px;
height: 350px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
.backbox{
background-color: #404040;
width: 100%;
height: 80%;
position: absolute;
transform: translate(0,-50%);
top:50%;
display: inline-flex;
border-radius: 15px;
}
.frontbox{
background-color: white;
border-radius: 20px;
height: 100%;
width: 50%;
z-index: 10;
position: absolute;
right:0;
margin-right: 3%;
margin-left: 3%;
transition: right .8s ease-in-out;
}
.moving{
right:45%;
}
.loginMsg, .signupMsg{
width: 50%;
height: 100%;
font-size: 15px;
box-sizing: border-box;
}
.loginMsg .title,
.signupMsg .title{
font-weight: 300;
font-size: 23px;
}
.loginMsg p,
.signupMsg p {
font-weight: 100;
}
.textcontent{
color:white;
margin-top:65px;
margin-left: 12%;
}
.loginMsg button,
.signupMsg button {
background-color: #404040;
border: 2px solid white;
border-radius: 10px;
color:white;
font-size: 12px;
box-sizing: content-box;
font-weight: 300;
padding:10px;
margin-top: 20px;
}
/* front box content*/
.login, .signup{
padding: 20px;
text-align: center;
}
.login h2,
.signup h2 {
color: #35B729;
font-size:22px;
}
.inputbox{
margin-top:30px;
}
.login input,
.signup input {
display: block;
width: 100%;
height: 40px;
background-color: #f2f2f2;
border: none;
margin-bottom:20px;
font-size: 12px;
}
.login button,
.signup button{
background-color: #35B729;
border: none;
color:white;
font-size: 12px;
font-weight: 300;
box-sizing: content-box;
padding:10px;
border-radius: 10px;
width: 60px;
position: absolute;
right:30px;
bottom: 30px;
cursor: pointer;
}
/* Fade In & Out*/
.login p {
cursor: pointer;
color:#404040;
font-size:15px;
}
.loginMsg, .signupMsg{
/*opacity: 1;*/
transition: opacity .8s ease-in-out;
}
.visibility{
opacity: 0;
}
.hide{
display: none;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'/>
<link href="stylelogin.css" rel="stylesheet" />
</head>
<body>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="backbox">
<div class="loginMsg">
<div class="textcontent">
<p class="title">Don't have an account?</p>
<p>Sign up to save all your graph.</p>
<button id="switch1">Sign Up</button>
</div>
</div>
<div class="signupMsg visibility">
<div class="textcontent">
<p class="title">Have an account?</p>
<p>Log in to see all your collection.</p>
<button id="switch2">LOG IN</button>
</div>
</div>
</div>
<!-- backbox -->
<div class="frontbox">
<div class="login">
<h2>LOG IN</h2>
<div class="inputbox">
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<p>FORGET PASSWORD?</p>
<button>LOG IN</button>
</div>
<div class="signup hide">
<h2>SIGN UP</h2>
<div class="inputbox">
<input type="text" name="fullname" placeholder=" FULLNAME"/>
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<button>SIGN UP</button>
</div>
</div>
<!-- frontbox -->
</div>
</form>
</body>
</html>
<script src="jslogin.js"></script>
</body>
</html>
Try adding e.preventDefault to your functions to avoid jQuery triggering things it doesn't have to do.
$('#switch1').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
I got this working in this jsFiddle, so please check it out, try it on your code and let us know if it works or not.
Hope it helps you.

My buttons go down when I press them

I have 9 buttons in a board and I want to show an 'X' or an 'O' whenever I press them. However when I press a button it goes down.
$(document).ready(function(){
var against = 'human';
var board = ['-','-','-',
'-','-','-',
'-','-','-'];
var turn = 'X';
$('.xo-btns').click(function(){
$(this).text(turn);
});
});
body{
padding: 0px;
margin: 0px;
width: auto;
height: auto;
background: black;
font-family: 'Raleway', sans-serif;
}
.container{
text-align: center;
}
.board{
display: inline-block;
text-align: center;
background: red;
padding-top: 15px;
padding-left: 10px;
height: 250px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.xo-btns{
width: 70px;
height: 70px;
padding: 0px;
border-radius: 4px;
background: transparent;
outline: none;
color: white;
/* display: inline-block; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="board">
<button class="xo-btns" id="one" value="1"></button>
<button class="xo-btns" id="two" value="2"></button>
<button class="xo-btns" id="three" value="3"></button>
<br>
<button class="xo-btns" id="four" value="4"></button>
<button class="xo-btns" id="five" value="5"></button>
<button class="xo-btns" id="six" value="6"></button>
<br>
<button class="xo-btns" id="seven" value="7"></button>
<button class="xo-btns" id="eight" value="8"></button>
<button class="xo-btns" id="nine" value="9"></button>
<br>
</div>
</div>
How can I fix it so every time I press one of them, they stay where they started.
Thank you!
This happens because of the vertical-align attribute, which sometimes has a buggy behaviour in my opinion.
Add
vertical-align: middle; to your "xo-btns" class and you should be fine.

View divs when click buttons

As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>
JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>

Categories

Resources