Open and Close menu jQuery

Open and Close menu jQuery - javascript

I'm trying to make a simple menu that opens when you click the button once, then closes the second time, I did this before but now I can't remember how to do it, I thought this here is the code:
var main = function(){
$('#menuopen').click(function(){
$('.leftbox').show();
$('.leftbox').animate({left: "0"});
$('.topbox').animate({left: "15%", width: "85%"});
},
function(){
$('.leftbox').animate({left: "-15%"});
$('.leftbox').hide();
$('.topbox').animate({left: "0", width: "100%"});
}
);
}
$(document).ready(main);
body {
background-color: #CCCCCC;
}
h2{
text-align: center;
font-family: 'Lato', sans-serif;
}
.topbox{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
background-color: #006699;
}
.leftbox{
display: none;
position: absolute;
background-color: #FFFFFF;
top: 0px;
left: -15%;
width: 15%;
height: 100%;
box-shadow: 10px 67px 5px #888888;
}
#commentbox{
position: absolute;
top: 87%;
left: 30%;
width: 50%;
resize: none;
border-radius: 5px;
outline: none;
box-shadow: 10px 10px 10px #888888;
}
#submitbox{
position: absolute;
background-color: #006699;
left: 82%;
top: 87%;
height: 66px;
width: 132px;
border-radius: 5px;
border: 0px;
outline: none;
box-shadow: 10px 10px 10px #888888;
font-family: 'Lato', sans-serif;
font-weight:;
}
#menuopen{
position: absolute;
top: 25%;
left: 15px;
height: 32px;
width: 32px;
}
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topbox">
<h2> Name's Lobby </h2>
<img id="menuopen" src="menu_icon.png"/>
</div>
<div class="leftbox">
</div>
<div class="inputbox">
<textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea>
<input id="submitbox" type="submit" value="Submit">
</div>
</body>
</html>
What here is wrong with this code, isn't the jQuery correct? :O

Your code is mostly correct but create a variable e.g var open = false; then do a check when the user clicks the button do something like this if(open == false){ execute opening }) then else { execute closing } because jquery doesn't know whether it's open or not so you've got to do checks on it.

#George beat me to it but you can add an opened state variable, which gets toggled after each click:
var main = function(){
var opened = false;
$('#menuopen').click(function(){
if (opened) {
$('.leftbox').animate({left: "-15%"});
$('.leftbox').hide();
$('.topbox').animate({left: "0", width: "100%"});
} else {
$('.leftbox').show();
$('.leftbox').animate({left: "0"});
$('.topbox').animate({left: "15%", width: "85%"});
}
opened = !opened;
});
}
$(document).ready(main);
body {
background-color: #CCCCCC;
}
h2{
text-align: center;
font-family: 'Lato', sans-serif;
}
.topbox{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
background-color: #006699;
}
.leftbox{
display: none;
position: absolute;
background-color: #FFFFFF;
top: 0px;
left: -15%;
width: 15%;
height: 100%;
box-shadow: 10px 67px 5px #888888;
}
#commentbox{
position: absolute;
top: 87%;
left: 30%;
width: 50%;
resize: none;
border-radius: 5px;
outline: none;
box-shadow: 10px 10px 10px #888888;
}
#submitbox{
position: absolute;
background-color: #006699;
left: 82%;
top: 87%;
height: 66px;
width: 132px;
border-radius: 5px;
border: 0px;
outline: none;
box-shadow: 10px 10px 10px #888888;
font-family: 'Lato', sans-serif;
font-weight:;
}
#menuopen{
position: absolute;
top: 25%;
left: 15px;
height: 32px;
width: 32px;
}
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topbox">
<h2> Name's Lobby </h2>
<img id="menuopen" src="menu_icon.png"/>
</div>
<div class="leftbox">
</div>
<div class="inputbox">
<textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea>
<input id="submitbox" type="submit" value="Submit">
</div>
</body>
</html>

Related

Custom code editor not working and breaks when adding CSS

I am making my own custom code editor. I started by modeling it off of this one by TutorialRepulblic:
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-inject-html-into-an-iframe-from-the-textarea
I didn't change the JS that takes the text from the text area and inserts it into an Iframe, I just added CSS and it broke. I have removed the CSS and it workes, but when I add it back it breaks. Can anyone help? I will include a code snippet below so you can see:
function updateIframe() {
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
body {
overflow: hidden;
}
.editor {
resize: none;
position: absolute;
top: 50px;
left: 0px;
width: 44%;
border: none;
background-color: #282c34;
height: 100%;
color: #fff;
font-size: 15px;
padding-left: 10px;
padding-right: 15px;
padding-top: 10px;
}
.run {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 150px;
background-color: #04aa6d;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.run:hover {
background-color: #fff;
color: #616161;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: #616161;
}
.result {
position: absolute;
right: 0px;
top: 0px;
width: 55%;
height: 100%;
border: none;
border-left: 15px solid #282c34;
}
<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<iframe class="result" id="myframe"> RESULT HERE </iframe>
<textarea id="textarea" class="editor">
</textarea>
<div class="header">
<button class="run" onclick="updateIframe()">Run ⇛</button>
</div>
</body>
</html>
I am not great with jQuery, but I think I can understand how that code that inserts the text into the Iframe works, but I just don't understand how me adding CSS breaks it. Thanks!

the content is adding to the iframe body but the is hidden beneath header div
update the result css
.result {
position: absolute;
right: 0px;
top: 500px;
width: 55%;
height: 100%;
border: none;
color: black;
border-left: 15px solid #282c34;
}

why is My jquery code not working though i have the scripts intact?

let playing = false
let score
$(function() {
// start smash
$('startgame').click(function() {
if (playing == true) {
location.reload()
} else {
playing = true
score = 0
$('#scorevalue').html(score)
$('life').show()
}
})
})
html {
height: 100%;
background: skyblue;
}
#container {
height: 640px;
width: 700px;
background-color: white;
margin: 70px auto;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 3px 0px;
position: relative;
}
#scorebox {
height: 30px;
width: 90px;
background-color: powderblue;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
padding: 4px;
position: absolute;
left: 600px;
top: 10px;
}
#fruitsdisp {
height: 460px;
width: 560px;
background-color: ghostwhite;
padding: 10px;
border-radius: 15px;
position: relative;
left: 60px;
top: 60px;
box-shadow: 0px 1px 2px 0px;
}
#startgame {
height: 35px;
width: 200px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: fantasy;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
left: 280px;
top: 610px;
}
#gameover {
height: 260px;
width: 480px;
background-color: gainsboro;
padding: 10px;
border-radius: 15px;
position: absolute;
left: 120px;
top: 170px;
box-shadow: 0px 1px 2px 0px;
text-align: center;
font-size: 5em;
z-index: 2;
font-family: monospace;
display: none;
}
#life {
height: 35px;
width: 130px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: serif;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
top: 10px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Smash</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1,user-scalable=yes"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"
/>
</head>
<body>
<div id="container">
<div id="scorebox">score: <span id="scorevalue">0</span></div>
<div id="fruitsdisp"></div>
<div id="startgame">SMASH</div>
<div id="gameover">GAME OVER! YOUR SCORE IS <span>0</span></div>
<div id="life">life</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery.js"></script>
</body>
</html>
I'm stuck here as my jquery code is not running.
Here is my html, css and jquery code.
As soon as I click the smash button, it should show the <div id="life">life</div> element But this is not happening and I don't know why.
I have been using brackets to run my code. Html and css are running ok but jquery isn't. I would like to know where I went wrong in this.

you are using the wrong selectors,
id selectors should be prefixed with "#"
var playing = false;
var score;
$(function() {
//start smash
$("#startgame").click(function(){
if(playing == true){
location.reload();
}else{
playing=true;
score=0;
$("#scorevalue").html(score);
$("#life").show();
}
});
});
html{
height: 100%;
background: skyblue;
}
#container{
height: 640px;
width: 700px;
background-color: white;
margin: 70px auto ;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 3px 0px;
position: relative;
}
#scorebox{
height: 30px;
width: 90px;
background-color: powderblue;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
padding: 4px;
position: absolute;
left: 600px;
top: 10px;
}
#fruitsdisp{
height:460px;
width: 560px;
background-color: ghostwhite;
padding: 10px;
border-radius: 15px;
position: relative;
left: 60px;
top: 60px;
box-shadow: 0px 1px 2px 0px;
}
#startgame{
height: 35px;
width: 200px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: fantasy;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
left: 280px;
top: 610px;
}
#gameover{
height:260px;
width: 480px;
background-color: gainsboro;
padding: 10px;
border-radius: 15px;
position: absolute;
left: 120px;
top: 170px;
box-shadow: 0px 1px 2px 0px;
text-align: center;
font-size: 5em;
z-index:2;
font-family: monospace;
display: none;
}
#life{
height: 35px;
width: 130px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family:serif;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
top: 10px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Smash</title>
<meta charset="utf-8">
<meta name = "viewport"
content = "width=device-width, initial-scale=1,user-scalable=yes">
<link rel="stylesheet"
href = "style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id ="container">
<div id = "scorebox">
score: <span id="scorevalue">0</span>
</div>
<div id="fruitsdisp">
</div>
<div id="startgame">SMASH
</div>
<div id="gameover">GAME OVER!
YOUR SCORE IS <span>0</span></div>
<div id="life">life
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<script src="jquery.js">
</script>
</body>
</html>

Moving remove glyphicon inside input text box

I want glyphicon-remove to be placed at the right end of input text box, here's my code-
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
background-color: rgba(0,0,0,0.9);
height: 100vh;
}
.content{
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.fill_text{
width: 20%;
height: 42px;
background-color: #DDD;
border-radius: 20px;
font-size: 20px;
padding: 10px;
border: 5px solid #E35F14;
margin: 10px auto;
outline: 0;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<input type="text" class="fill_text">
<span class="glyphicon glyphicon-remove"></span>
</input>
</div>
I am setting the position of input text box as relative and I have tried by giving the position of the remove icon as absolute, but that's not working. Could you tell me why that's not working?

No elements are allowed inside <input> elements.
add this CSS
.glyphicon-remove{
position: absolute;
top: 50%;
right: 30px;
z-index:10;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
background-color: rgba(0,0,0,0.9);
height: 100vh;
}
.content{
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.fill_text{
width: 20%;
height: 42px;
background-color: #DDD;
border-radius: 20px;
font-size: 20px;
padding: 10px;
border: 5px solid #E35F14;
margin: 10px auto;
outline: 0;
position: relative;
}
.glyphicon-remove{
position: absolute;
top: 50%;
right: 30px;
z-index:10;
cursor:pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<input type="text" class="fill_text"/>
<span class="glyphicon glyphicon-remove"></span>
</div>

Change the clicked element and save it in cookies

$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target)
&& (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="write some text bro">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> &#8226 </p>
<p class="formtext"> &#8226 .</p></div>
</div>
</div>
</body>
</html>
Hi everyone.This is my simple window.Already 3 days im struggling to change S.T.E.A.M. lab text to other text from floating class which one is clicked.And if its possible save this result in cookie.more details more details more details more details (sorry this is for stackoverflow they neeed more details )

You have to add a click listener to your floating Elements and save the text to link. For setting cookie I used hier vanilla JS, but you can use this https://github.com/carhartl/jquery-cookie too
$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
$('.floating').click(function(evt){
evt.preventDefault();
$('.link').text(event.target.textContent);
// document.cookie = "cookiename=event.target.textContent";
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target) && (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="Начните вводить название">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> &#8226 </p>
<p class="formtext"> &#8226 .</p></div>
</div>
</div>
</body>
</html>

Step 1 : Add a click event to the a tag under regions.
Step 2 : On this click event handler get the inner text of the clicked element which is the subject - and store in a variable for display and to be stored in a cookie.
Step 3: Write a cookie save function that takes a string parameter and which is called on step 2 , pass in the subject name to be saved in the cookie.
$("body").on("click" "div.regions a", function(e) {
// Your code here that fetches the event.target.innertext or some such
var txt = $(e.target).text(); // sample code not tested
SetCookie(txt);
SetStemLabText(txt)
});
SetCookie(txt) {
$.cookie("Subject", text);
}
SetStemLabText(txt) {
$('.link').text(txt)
}

How to get a soft keyboard to display in a HTML5/CSS3 website?

I'm working on a mobile web application and I have a problem with the Android soft keyboard when an input field is focused.
When I focus the input field, the soft keyboard appears. On Windows Phone (tested on 7.8) the whole page, so the entire DOM goes up to make room for the softkeyboard. With Android (and also on Google Chrome) some elements stay where they are, and others go up when the soft keyboard is openend. How can I get the whole DOM, or actually, the hole body of the page to go up to make room for the soft keyboard on Android (I haven't tested this on iOS yet).
Here are a few screenshots on Android when the keyboard is opened:
Here is what the page looks like when it's normal:
And this is what it looks like when the soft keyboard is opened:
How can I get this effect?:

Here's my source code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="noindex" />
<!-- CSS -->
<style>
#charset "UTF-8";
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
input, textarea, button {
outline: none;
}
#appMain {
position: absolute;
width: 100%;
max-width: 640px;
height: 100%;
background: url(static/img/static/main_bg.fw.png) no-repeat;
background-size: cover;
}
#appHeader {
position: absolute;
margin: 0;
width: 100%;
height: 50px;
background: #007EA8;
}
#headerUnderline {
position: absolute;
margin-top: 50px;
width: 100%;
height: 5px;
background: #CCC;
}
#headerLogo {
position: absolute;
left: -50px;
width: 125px;
height: 72px;
background: url(static/img/static/sprite.fw.png);
background-position: 0 0;
}
#mainLogo {
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 100px;
}
#mainSlogan {
width: 100%;
text-align: center;
font: 20px sans-serif;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
#facebook {
margin: 0;
padding-left: 30px;
float: left;
width: 50%;
height: 100%;
font: 14px sans-serif;
color: #FFF;
background: #003A75;
border: 0;
text-shadow: 1px 1px 1px #000;
}
#signIn {
margin: 0;
float: right;
width: 50%;
height: 100%;
font: 14px sans-serif;
color: #FFF;
background: #007900;
border: 0;
text-shadow: 1px 1px 1px #000;
}
#facebookLogo {
position: absolute;
left: 4%;
top: 10px;
width: 16px;
height: 30px;
background: url(static/img/static/sprite.fw.png);
background-position: -160px -30px;
}
#fieldHolder {
position: absolute;
width: 100%;
bottom: 100px;
}
.accountField {
margin-bottom: -2px;
padding-left: 5px;
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font: 14px sans-serif;
color: #333;
}
.accountField:focus {
background: #FFF;
}
.accountField::-webkit-input-placeholder {
color: #FFF;
}
.accountField2::-moz-placeholder { /* Firefox 19+ */
color: #FFF;
}
.accountField:-ms-input-placeholder {
color: #FFF;
}
#subFooter {
position: absolute;
bottom: 65px;
width: 100%;
}
#signUpButton {
margin-left: 10px;
float: left;
background: none;
border: 0;
font: 14px sans-serif;
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
#forgotButton {
margin-right: 10px;
float: right;
background: none;
border: 0;
font: 14px sans-serif;
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
</style>
<!-- JS -->
<script src="static/js/includes/jquery_m.js"></script>
<script src="static/js/includes/jquery.js"></script>
</head>
<body>
<div id="appMain">
<div id="appHeader">
<div id="headerUnderline"></div>
<div id="headerLogo"></div>
</div>
<img id="mainLogo" src="static/img/static/main_logo.fw.png" alt="Welcome to Scrapll!" />
<h1 id="mainSlogan">The Private Social Network<h1>
<form action="login.php" method="post">
<div id="fieldHolder">
<input type="email" class="accountField" name="email" placeholder="Email Address" />
<input type="password" class="accountField" name="password" placeholder="Password" />
</div>
<div id="subFooter">
Sign Up
Forgot password
</div>
<div id="footer">
<input type="submit" id="signIn" value="Sign In" />
</form>
<button type="button" id="facebook">Login with Facebook</button>
<div id="facebookLogo"></div>
</div>
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Open and Close menu jQuery - javascript

Your code is mostly correct but create a variable e.g var open = false; then do a check when the user clicks the button do something like this if(open == false){ execute opening }) then else { execute closing } because jquery doesn't know whether it's open or not so you've got to do checks on it.

Related

Custom code editor not working and breaks when adding CSS

why is My jquery code not working though i have the scripts intact?

Moving remove glyphicon inside input text box

Change the clicked element and save it in cookies

How to get a soft keyboard to display in a HTML5/CSS3 website?

Categories

Resources