Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm ready to throw my pc through the window, somehow I can't seem to find my mistake. I feel like I am going insane. I have a simple login page in which you enter a name and a room code then you press submit. After you press submit I want to hide the form and show an element that says you are connected to the server. I'm using the following ejs/HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<link href="/assets/styles.css" rel="stylesheet" type="text/css" />
<script src="/assets/zoomFriendsAjax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
</head>
<body>
<script src="/assets/sockets.js"></script>
<h2>Welcome To ZoomFriends</h2>
<div id="pagecontent">
<div id="serverform">
<form>
<label for="servercode"><strong>Server Code:</strong></label>
<input type="text" id="servercode" name="servercode" placeholder="Insert your server code here..." required>
<label for="nickname"><strong>Your Nickname</strong></label>
<input type="text" id="nickname" name="nickname" placeholder="Insert your nickname here..." required>
<button type=submit>join room</button>
</form>
<div>
<div id="connpage">
<h2>Connected to server</h2>
</div>
</div>
</body>
</html>
and then there is this ajax js file, which activates on submit and contains a function to show connected which should show the "connpage" and hide the "form" it only does the latter:
$(document).ready(function(){
$('#serverform').on('submit', function(){
var player = $('input[type="text"]#nickname');
var room = $('input[type="text"]#servercode');
var joindata = {player: player.val(), room: room.val()};
$.ajax({
type: 'POST',
url: '/button',
data: joindata,
success: function(data){
serverconnected();
}
});
return false;
});
function serverconnected(){
$('#connpage').show();
$('#serverform').hide();
}
});
Then there is this css in which connpage is set to display: none;
body{
background: #0d1521;
font-family: tahoma;
color: #989898;
text-align: center;
}
#todo-table{
position: relative;
width: 95%;
background: #090d13;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
#todo-table form:after{
margin: 0;
content: '';
display: block;
clear: both;
}
#connpage{
display: none;
}
input::placeholder {
font-style: italic;
}
input[type="text"]{
width: 100%;
padding: 20px;
background:#181c22;
border: 0;
float: left;
font-size: 20px;
color: #989898;
text-align: center;
}
label{
width: 100%;
padding: 20px;
background:#23282e;
border: 0;
float: left;
font-size: 20px;
color: #989898;
text-align: center;
}
button{
padding: 20px;
width: 100%;
float: left;
background: #23282e;
border: 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 80px;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
width: 100%;
padding: 20px;
box-sizing: border-box;
font-family: arial;
font-size: 20px;
cursor: pointer;
letter-spacing: 1px;
}
li:hover{
text-decoration: line-through;
background: rgba(0,0,0,0.2);
}
h1{
background: url(/assets/logo.png) no-repeat center;
margin-bottom: 0;
text-indent: -10000px;
text-align: center;
}
And this is the part of the server script that deals with the clicking of the submit button:
//if submit button is pressed
app.post('/button', urlencodedParser, function(req, res){
//console.log("pushed the button")
var message = req.body.player;
var found = rooms.some(el => el.roomcode === req.body.room);
if (found){
var targetindex = rooms.findIndex(element => element.roomcode === req.body.room);
io.to(rooms[targetindex].gamesocketid).emit('joinroom', {player: req.body.player, room: req.body.room, socket: socket.id});
//var currentroom = rooms.find(element => element.roomcode === req.body.room);
rooms[targetindex].players.push({nickname: req.body.player, id: socket.id});
//currentroom.players.push({nickname: req.body.player, id: socket.id});
console.log('player ' + req.body.player + ' joined room ' + req.body.room + ' with socket ID ' + socket.id);
//console.log(currentroom);
console.log(rooms[targetindex]);
res.json(rooms[targetindex]);
}
});
as far as I know everything is going as it should, EXCEPT the connpage NEVER SHOWS, i get through every function, all data is logged the way I want, except $('#connpage').show(); does nothing, it doesn't even have the common decency to send me an error or something ;p. Can anyone please help, I'm going nuts.... Eventually I need lots of show and hide to go on, to go through all the states of the page, without refreshing the page. Any help would really be welcome, thank you for even taking a look.
You have a syntax error in your HTML. You never close your serverform TAG.That way your connpage is INSIDE that container and gets hidden too Change
<div id="serverform">
....
<div>
to
<div id="serverform">
...
</div>
normally $("#connpage").show(); should work, maybe in some part of your app you are overriding it, you can use $('#connpage').css('display', '') as an alternatif.
if none of them work , you can remove the display none, and at the beginning you can hide it with .hide() .
i wish it helps
Related
I have a problem with my div when I write in the text area and hit save nothing is show up. I have a problem with my div when I write in the text area and hit save nothing is show up
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with wesam to do list">
<title>wesam list to do</title>
<script>
function input() {
var name = document.getElementById("text").Value
document.getElementById("output").innerHTML = name;
}
</script>
<style>
#b {
background-color: red;
}
#output {
width: 100%;
height: 200px;
background-color: black;
color: black;
}
</style>
</head>
<body>
<form>
<h1> Add your tasks </h1>
<textarea id="text"></textarea>
<button onClick="input()" id=" b " type="button "> save</button>
<div id="output"></div>
</body>
Try this. There were a few issues with this code. I added comments to the changes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with wesam to do list">
<title>wesam list to do</title>
<script>
function input(event) {
//added preventDefault() to keep the page from reloading
event.preventDefault();
//changed Value to value - watch your case
var name = document.getElementById("text").value;
document.getElementById("output").innerHTML = name;
}
</script>
<style>
#b {
background-color: red;
}
#output {
width: 100%;
height: 200px;
background-color: black;
/*changed the text color from black to white so you can see when the output is added*/
color: white;
}
</style>
</head>
<body>
<form>
<h1> Add your tasks </h1>
<textarea id="text"></textarea>
<button onClick="input(event)" id="b" type="button"> save</button>
<div id="output"></div>
</form>
</body>
</html>
Cheers!
Your output element has both a black background, and black text, so you won't see anything change.
You were missing a </form> tag.
It looks like you're trying to create a list of tasks, and each time you add a new task, and click "save" it adds a new task under the proceeding ones.
Here's an updated example that uses more modern JS methods that you might find useful. Links to the relevant documentation are at the bottom of the post.
// First we cache all our elements
const task = document.querySelector('textarea');
const list = document.querySelector('ul');
const button = document.querySelector('button');
// Instead of inline JS we add an event listener to
// the cached button element.
button.addEventListener('click', handleClick, false);
// `focus` the cursor in the textarea
task.focus();
function handleClick() {
// We create a new list item
const item = `<li>${task.value}</li>`;
// We add that to the list
list.insertAdjacentHTML('beforeend', item);
// Reset the textarea value
task.value = '';
// And refocus on it so we don't have to
// manually click in it to write a new task
task.focus();
}
button { background-color: red; color: white; }
<form>
<h3>Add your tasks</h3>
<textarea></textarea>
<button type="button">Save task</button>
</form>
<ul></ul>
Addition documentation
querySelector
Template/string literals
insertAdjacentHTML
addEventListener
There are couple problem:
You didn't close the form tag in HTML
you write the first letter of value as capital in input function
And you may did not look but your button background color is not coming that is because there is spaces inside the id in HTML just remove those and you're good to go.
And make a paragraph inside the output div and give him the id of output and than stor that into a variable and do o.innerText o is you output paragraph = i.value i is your input
I have added some features to to your application if you want to copy it i do not mined -
// ES6 Syntax
const render = () =>{
// Getting the value from HTML DOM to inputEl variable
const inputEl = document.getElementById('text');
// Getting the output paragraph from HTML DOM and storig it into output
const outputEl = document.getElementById('output-text');
// Rendering the inputEL value into outputEl
outputEl.textContent = inputEl.value;
}
// ES5-- Syntax
function renderES(){
// Getting the value from HTML DOM to inputEl variable
const inputEl = document.getElementById('text');
// Getting the output paragraph from HTML DOM and storig it into output
const outputEl = document.getElementById('output-text');
// Rendering the inputEL value into outputEl
outputEl.textContent = inputEl.value;
}
#import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
:root{
--primary-color: rgb(26, 26, 26);
--secondary-color: white;
--font-family: Nunito, sans-serif;
--box-shadow: rgb(0 0 0) 1px 1px 3px 0px inset, rgb(48 48 48 / 50%) -1px -1px 3px 1px inset;;
--all-transition:transform ease-in-out 0.3s 0s;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: var(--font-family);
}
.main-content{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
border-radius: 10px;
box-shadow: var(--box-shadow);
width: 85%;
height: 270px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--primary-color);
flex-direction: column;
}
.container>h1{
margin-top: 15px;
color: var(--secondary-color);
text-transform: uppercase;
}
form{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 5px;
width: 100%;
height: 75%;
}
form>textarea{
width: 95%;
height: 30%;
background-color: var(--primary-color);
border: none;
border-radius: 10px;
box-shadow: var(--box-shadow);
padding: 15px;
color: var(--secondary-color);
}
#output{
width: 95%;
height: 40%;
background-color: var(--primary-color);
box-shadow: var(--box-shadow);
color: var(--secondary-color);
padding: 10px;
}
form>button{
background-color: var(--primary-color);
box-shadow: var(--box-shadow);
width: 95%;
height: 30px;
border-radius: 10px;
border: none;
font-weight: bold;
margin-bottom: 10px;
color:var(--secondary-color);
transition: var(--all-transition);
cursor: pointer;
}
/* NTH CHILD */
form>textarea::placeholder{
color: var(--secondary-color);
}
/* Animations */
form>button:hover{
transform: scale(1.02)
}
form>button:active{
border: 1px solid var(--secondary-color);
}
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="main-content">
<div class="container">
<h1> Add your tasks </h1>
<form>
<textarea id="text" placeholder="Enter you task here.."></textarea>
<div id="output">
<p id="output-text"></p>
</div>
<button
type="button"
id="addtask-btn"
onclick="render()">
Save
</button>
<form>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
It seems that you haven't ended the
<form>
tag
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to make a script, to automate my game.
First look my snippet demo to finding out how my games works.
I know this request is a bit confusing but please help
var randomNumber = randomNumberFromRange();
function randomNumberFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$(".btn").click(function() {
var inp1 = $("#inp1");
var Gem = $("#Gem");
var $getRnd = $("#getRand");
if (Number(inp1.val()) > Number(Gem.val())) {
alert(" you don't have enough Gem");
e.preventDefault()
}
$getRnd.val(randomNumberFromRange(0, 1000));
if (Number($getRnd.val()) >= "500") {
$("#win").css("display", "block");
var sum = Number(inp1.val()) + Number(Gem.val());
Gem.val(Number(sum));
$("#lose").css("display", "none");
} else if (Number($getRnd.val()) <= "499") {
$("#lose").css("display", "block");
var sub = Number(Gem.val()) - Number(inp1.val());
Gem.val(Number(sub));
$("#win").css("display", "none");
}
});
#nav {
background-color: #1b354b;
border: 2pt solid gold;
text-align: center;
padding: 5px;
width: 800px;
height: auto;
margin: 0 auto;
}
#Left_button,
#Right_button {
background-color: gold;
text-align: center;
cursor: pointer;
border-radius: 5pt;
border: none;
width: 100px;
height: 30px;
margin: 5px;
font-size: larger;
}
#left_Box {
width: 300px;
height: 170px;
background-image: linear-gradient(#fff942, yellow);
;
text-align: center;
float: left;
margin-top: 5px;
}
#right_Box {
width: 500px;
height: 170px;
background-image: linear-gradient(#FFB75E, yellow);
text-align: center;
float: right;
margin-top: 5px;
}
#inp1,
#Gem,
#getRand {
text-align: center;
width: 50px;
color: #ff0d2f;
cursor: pointer;
font-size: large;
margin-top: 10px;
}
#lose {
display: none;
background-color: red;
padding: 10px;
margin-top: 15px;
}
#win {
display: none;
background-color: #64f26f;
padding: 10px;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav">
<input id="Left_button" class="btn" type="button" value="Left">
<input id="Right_button" class="btn" type="button" value="Right">
<div id="Body">
<div id="left_Box">
<label><span style="font-size: large">Gem Chance : </span><input id="inp1" type="text" value="1"></label>
</div>
<div id="right_Box">
<label><span style="font-size: large">Gems : </span><input id="Gem" type="text" value="1000"
disabled></label><br>
<label><span style="font-size: large">Number : </span><input id="getRand" type="text" value=""></label>
<br>
<i style="color: #1b354b"> win : higher than 499</i>
<br>
<i style="color: #1b354b"> lose : lower than 500</i>
<div id="Place">
<div id="lose">lose</div>
<div id="win">win</div>
</div>
</div>
</div>
</div>
</body>
</html>
we have important parameters here.
Gem Chance :
Gems :
I want to create a script to do
1 - click buttons by random(left & right) every 2 sec . (click)
2 - after losing 3 times (continuous) , change the Gem chance to X (X=2)
3 - click
4 - if win => reset => change Gem chance to 1
and start from part 1;
5 - if lose => change Gem chance to 1
and click ;
if lose = > change Gem chance to 2X
click ;
if win :
reset => change Gem chance to 1
and start from part 1
if lose :
change Gem chance to 1
click ;
if win : reset
but ( after 3 losing changes the Gem chance to last lose value )
last example:
After we reached 3 consecutive losses
After each loss
The chance of a gem becomes 1. And click.
And again the chance of gem
It doubles and clicks.
This will happen until we win.
But if between losses
When the gem chance.
He gave us the victory over the number 1
All steps are performed from the beginning with the difference that
Since the chance of gem. It's doubling its last loss.
I give you the code to begin to build what you want, its the routine which launch every 2 sec the function automate and click randomly on left or right button.
var randomNumber = randomNumberFromRange();
//begin to automate
var timer = setInterval(automate, 2000);
var buts=[$("#Left_button"), $("#Right_button")];
var win = 0;
var loose = 0;
var loop = 0;
function automate(){
var idx=randomNumberFromRange(0, 1);
buts[idx].trigger("click");
console.log("i click on " + buts[idx].attr("id"));
console.log("i " + $("#Place div[style='display: block;']").attr('id'));
$("#inp1").val("111");//sample to modify the value of Gem chance
if(loop++ == 4) clearInterval(timer);//stop call the function after some loop
}
function randomNumberFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$(".btn").click(function () {
var inp1 = $("#inp1");
var Gem = $("#Gem");
var $getRnd = $("#getRand");
if (Number(inp1.val()) > Number(Gem.val())) {
alert(" you don't have enough Gem");
e.preventDefault()
}
$getRnd.val(randomNumberFromRange(0, 1000));
if (Number($getRnd.val()) >= "500") {
$("#win").css("display", "block");
var sum = Number(inp1.val()) + Number(Gem.val());
Gem.val(Number(sum));
$("#lose").css("display", "none");
} else if (Number($getRnd.val()) <= "499") {
$("#lose").css("display", "block");
var sub = Number(Gem.val()) - Number(inp1.val());
Gem.val(Number(sub));
$("#win").css("display", "none");
}
});
#nav {
background-color: #1b354b;
border: 2pt solid gold;
text-align: center;
padding: 5px;
width: 800px;
height: auto;
margin: 0 auto;
}
#Left_button, #Right_button {
background-color: gold;
text-align: center;
cursor: pointer;
border-radius: 5pt;
border: none;
width: 100px;
height: 30px;
margin: 5px;
font-size: larger;
}
#left_Box {
width: 300px;
height: 170px;
background-image: linear-gradient(#fff942, yellow);;
text-align: center;
float: left;
margin-top: 5px;
}
#right_Box {
width: 500px;
height: 170px;
background-image: linear-gradient(#FFB75E, yellow);
text-align: center;
float: right;
margin-top: 5px;
}
#inp1, #Gem, #getRand {
text-align: center;
width: 50px;
color: #ff0d2f;
cursor: pointer;
font-size: large;
margin-top: 10px;
}
#lose {
display: none;
background-color: red;
padding: 10px;
margin-top: 15px;
}
#win {
display: none;
background-color: #64f26f;
padding: 10px;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav">
<input id="Left_button" class="btn" type="button" value="Left">
<input id="Right_button" class="btn" type="button" value="Right">
<div id="Body">
<div id="left_Box">
<label><span style="font-size: large">Gem Chance : </span><input id="inp1" type="text" value="1"></label>
</div>
<div id="right_Box">
<label><span style="font-size: large">Gems : </span><input id="Gem" type="text" value="1000"
disabled></label><br>
<label><span style="font-size: large">Number : </span><input id="getRand" type="text" value=""></label>
<br>
<i style="color: #1b354b"> win : higher than 499</i>
<br>
<i style="color: #1b354b"> lose : lower than 500</i>
<div id="Place">
<div id="lose">lose</div>
<div id="win">win</div>
</div>
</div>
</div>
</div>
</body>
</html>
I've been trying out socket.io and have obviously started with their chat app. The client-side code on their side looks somthing like this:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0;}
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="" id = "frm">
<input id="m" autocomplete="off" /><button id='b'>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
Now, my problem is that if I try to change the code inside the callback function inside the socket.on block with something like:
document.getElementById('messages').innerHTML += '<li>' + msg + '</li>';
the li element appears, for like half a second, and then the innerHTML resets, the same thing happens if I try editing any other part of the DOM inside the callback ?
I don't use Jquery but common sense made me assume
$('#messages').append($('<li>').text(msg))
; is basically equivalent with modifying the innerHTML in the way I wrote above. What am I doing wrong ? Is socket.io made in such a way that it can only use Jquery inside its call backs ? (I tried this in serveral browser).
The two codes perform equally in JSFiddle, so I can't tell why one works within socket.io and one doesn't, but in looking up related questions, I've seen a few answers suggesting not to use += with document.innerHTML. I haven't found a reason why this poses any problems beyond the minor security concern, but they suggest using appendChild() instead.
I created a button using div tag. It is not actually a button but it is look like a button. Here I want to change the content of h3 tag to '>' this symbol when mouse is hover on it. How to do it?
I write code in javascript to change h3 contents but it will not show any effect? I don't know why?
function change-content() {
document.getElementById('button-name').innerHTML = ">";
}
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
font-size: 14px;
color: white;
padding-left: 22px;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
<html>
<body>
<div id="button-layout">
<h3 id="button-name" onmouseover="change-content()">Submit</h3>
</div>
</body>
</html>
You can actually do this using pure CSS, no JS required, by adding attributes to the button containing the text you want for both the normal and hover states, and then setting the content of the :after pseudo to show this depending on :hover.
This also maintains clear separation of concerns, keeping content within your HTML and outside of your JS, meaning should you wish to change the value being displayed, you can simply reference the source markup directly.
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
text-align: center;
font-size: 14px;
color: white;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
#button-name:after {
content: attr(data-label);
}
#button-name:hover:after {
content: attr(data-label-hover);
}
<div id="button-layout">
<h3 id="button-name" data-label="Submit" data-label-hover=">"></h3>
</div>
Concerning why your code currently isnt working, this has also been answered in this thread, namely, your function name contains the invalid - character.
Issue is in function declaration. define function with (_) like function change_content() it will work
Your function name is invalid. The parser see that as a subtraction.
<html>
<head>
<style>
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
font-size: 14px;
color: white;
padding-left: 22px;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
</style>
<script>
function changeContent() {
document.getElementById('button-name').innerHTML = ">";
}
</script>
</head>
<body>
<div id="button-layout">
<h3 id="button-name" onmouseover="changeContent()">Submit</h3>
</div>
</body>
</html>
change your function name see example
changecontent()
I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}
Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.
You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>
With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>