In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.
The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?
Check the codepen since the snippet is not working
The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?
https://codepen.io/Fropis/pen/XwJWjg
/**************************************** Contactos **********************************************************/
function openAB(){
document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
}
function fechar(){
document.getElementById("janela2").innerHTML = "";
}
/*****************************THE ONE THAT MATTERS IS ABOVE****************/
html, body {
width: 3779.527559055px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("https://images4.alphacoders.com/111/111298.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 350% 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #Home, #contact{
width: 400px;
height: 400px;
padding:20px;
background: none;
}
.panel {
background: #fafafa;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin-top: 0.5em;
padding: 0.5em;
}
input:focus {
outline: none;
}
input::after {
width: 100%;
height: 10px;
background: red;
}
.nav-list {
width: 92.5%;
max-width: 30em;
text-align: center;
margin: auto;
}
.nav-list li {
list-style: none;
display: inline-block;
background: white;
padding: 0.7em;
margin: 0 0.1em;
}
.nav-list .active {
background-color: black;
}
#janela2{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:20px black solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>
<div id="mydiv" style="display:none;">
<div id="navigation">
<ul class="nav-list">
<li id="js-show-all">Mostrar Todos</li>
<li id="js-search">Procurar</li>
<li id="js-add-new">Adicionar Contacto</li>
</ul>
</div>
<div id="search-panel" class="panel">
<h1>Procurar Contacto</h1>
<form id="search" action="#">
<div id="results"></div>
<div>
<label>
<input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
</label>
</div>
<input type="submit" value="Procurar"/>
</form>
</div>
<div id="contact-panel" class="panel">
<form id="contact" action="#">
<h1>Adicionar Novo Contacto</h1>
<div>
<label>
<input type="text" name="person" id="name" placeholder="José Bigodes" required/>
</label>
<label>
<input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}" required title="Insira 9 caracteres"/>
</label>
<label>
<input type="email" name="email" id="name" placeholder="nome#desk.com" pattern="+#desk.com" required/>
</label>
</div>
<div>
<input type="submit" value="Adicionar" />
</div>
</form>
</div>
<div id = "show-panel" class="panel">
</div>
</div>
<div class="navbar">
<a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
</div>
</body>
<script src=cale.js></script>
</html>
openAb has a typo in html vs openAB function in js . Replace with
<img onclick="openAB()" ....
Your function name is openAB but you are calling openAb
<img onclick="openAB()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact">
Related
I'm fairly new to coding less than 6 months and am working on my first paid website and I've run into an issue i'm really not sure how to fix. thanks for the help. I've already tried setting margins but CSS is tricky so maybe i'm not doing enough i'm really not sure how to fix
This is what the page looks like when down sized
This is what the page looks like at regular size
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
<body>
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>
You can make it clear:both for login div in mobile mode. It is due to div .login-page where you gave margin:auto to make it centralized.
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
#media(max-width:767px){
.login-page{
clear: both;
}
}
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>
I'm currently experiencing something rather strange. I'm building a website for a client which includes a horizontal nav bar that dynamically changes the page content without reloading via javascript. Three of the four tabs function correctly, however when I select the last tab, the side bar dramatically increases in width, pushing my service form out of it's background and off the page - even though the javascript shouldn't be affecting that element at all. I've been playing with it all day and cannot figure out what's causing this.
My JavaScript is:
var jsOverview = document.getElementById('overview');
var jsQuote = document.getElementById('quote');
function changeTextQuote() {
if (jsOverview.style.display === 'none') {
jsOverview.style.display = 'block';
jsQuote.style.display = 'none';
} else {
jsOverview.style.display = 'none';
jsQuote.style.display = 'block';
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
/*Service Pages CSS*/
.services {
display: grid;
width: 100%;
margin: 0 600px;
margin-bottom: 10px;
}
.side-bar {
grid-column: 1;
grid-row: 1;
background: black;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 100%;
height: 258px;
margin: 30px 0;
margin-right: 25px;
}
ul.side-bar-list {
text-align: left;
padding: 0;
width: 100%;
}
.side-bar-list li {
margin-bottom: 10px;
margin-top: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width: 100%;
}
.side-bar-list li:hover {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar-list li:focus {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar ul {
list-style-type: none;
}
.side-bar-item {
color: white;
text-align: left;
text-decoration: none;
}
.side-bar-item:hover {
color: white;
text-decoration: none;
}
.side-bar-item:focus {
color: white;
text-decoration: none;
}
.services-content {
grid-column: 2;
grid-row: 1;
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
padding-left: 10px;
width: 30%;
margin-bottom: 5px;
}
.serviceForm {
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
grid-column: 2;
grid-row: 1;
display: grid;
grid-column-gap: 20px;
width: 30%;
margin: 20px auto;
padding: 10px;
padding-left: 20px;
}
.col-left {
grid-column: 1;
grid-row: 1;
}
.col-right {
grid-column: 3;
grid-row: 1;
}
.commentText {
grid-column-start: 1;
grid-column-end: 4;
}
label {
color: black;
}
span {
color: white;
}
textarea[name=comments] {
resize: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 520px;
height: 150px;
}
HTML:
<body>
<div class="services">
<div class="side-bar">
<ul class="side-bar-list">
<li><a class="side-bar-item" href="#" onclick="changeTextOverview(); return false;">Overview</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextInterior(); return false;">Interior Lighting</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextExterior(); return false;">Exterior Lighitng</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextQuote(); return false;">Request a Quote</a></li>
</ul>
</div>
<div class="services-content">
<div id="overview">
<h1>Lighting Service:</h1><br />
<p>Text removed for sake of business entity.</p>
</div>
<div id="quote" style="display: none;" <h1>Request a Quote</h1>
<form class="serviceForm" action="mailto:companyemail" method="post" enctype="text/plain">
<div class="col-left">
<label>
<span>* Name:</span><br />
<input type="text" name="LightingRequestName" required />
</label><br />
<label>
<span>* Email:</span><br />
<input type="text" name="LightingRequestEmail" required />
</label><br />
<label>
<span>Company:</span><br />
<input type="text" name="LightingRequestCompany" />
</label><br />
<label>
<span>Address:</span><br />
<input type="text" name="LightingRequestAddress" />
</label><br />
</div>
<div class="col-right">
<label>
<span>City:</span><br />
<input type="text" name="LightingRequestCity" />
</label><br />
<label>
<span>State:</span><br />
<input type="text" name="LightingRequestState" />
</label><br />
<label>
<span>Zip Code:</span><br />
<input type="text" name="LightingRequestZip" />
</label><br />
<label>
<span>Phone Number:</span><br />
<input type="text" name="LightingRequestNumber" />
</label><br />
</div>
<label class="commentText">
<span>Comments:</span><br />
<textarea name="comments"></textarea><br />
</label>
<div class="formSubmitButton">
<input type="submit" value="Submit" /><br />
<br />
</div>
</form>
</div>
</div>
</div>
<script src="~/Content/LightingPageText.js"></script>
<script src="~/Content/ServicesQuote.js"></script>
</body>
I'm sure it's probably something really stupid I overlooked, but any help is appreciated!
EDIT: I was looking around in the inspect window on chrome, whenever I click the button to display the form, the actual grid column the side bar is in expands, pushing the rest of the content off of the screen. Not sure why this is happening. I'm still playing with it, but hopefully this revelation will help lead to some answers.
If this is a direct copy-paste from your source, you forgot the closing angle bracket on #quote.
Yours: <div id="quote" style="display: none;" <h1>Request a Quote</h1>
Updated: <div id="quote" style="display: none;"> <h1>Request a Quote</h1>
Note the > before opening <h1>.
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
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.
I am following the tutorial from http://www.sitepoint.com/building-list-jquery-local-storage/
to build a todo list and I want to display for elements in the same line. At the moment form elements are stacked over each other and displayed vertically but I want them to be displayed vertically. I ultimately want to achieve a result that looks like this:
Here is the CSS Code
.task-list{
width: 250px;
float: left;
margin: 0 5px;
background-color: #e3e3e3;
min-height: 240px;
border-radius: 10px;
padding-bottom: 15px;
}
.task-list input, .task-list textarea{
width: 240px;
margin: 1px 5px;
}
.task-list input{
height: 30px;
}
.todo-task{
border-radius: 5px;
background-color: #fff;
width: 230px;
margin: 5px;
padding: 5px;
}
.task-list input[type="button"]{
width: 100px;
margin: 5px;
}
.todo-task > .task-header{
font-weight: bold;
}
.todo-task > .task-date{
font-size: small;
font-style: italic;
}
.todo-task > .task-description{
font-size: smaller;
}
Here is the html code
<div class="task-list">
<h3>Add a task</h3>
<form id="todo-form">
<input type="text" placeholder="Task Name" />
<textarea placeholder="Description"></textarea>
<input type="text" id="datepicker" placeholder="Due (dd/mm/yyyy)" />
<input type="button" class="btn btn-primary" value="Add Task" onclick="todo.add();" />
</form>
<input type="button" class="btn btn-primary" value="Clear Data" onclick="todo.clear();" />
<div id="delete-div">
Drag Here to Delete
</div>
</div>
<div class="task-list task-container" id="pending">
<h3>Pending</h3>
<!--<div class="todo-task">
<div class="task-header">Sample Header</div>
<div class="task-date">25/06/1992</div>
<div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
</div>-->
</div>
You just need to change
.task-list {
width: 250px;
(found at the very top of your css)
to something like
.task-list {
width: 850px;
this would then give all the elements within the space room to stand side by side...