Develop Reference

How to wrap an instance of a div inside a box

I'm new to JavaScript, so bear with me if I'm not explaining what I want that well. So basically I have a form for creating activities, so whenever the user fills the fields and hit save it will create an instance of the div containing the information. Now those information are basically just in lines, and I would like to organize them inside a box (div), but I'm not sure how to create it, is it using JS or HTMl?
Here is a picture of what I have working right now.
And here is a view of the code.
window.onload = function() {
function addAct(nameact, when, where,desc) {
var buses = document.querySelectorAll(".bus");
var curr = document.createElement("div");
curr.setAttribute("class", "name");
var p0 = document.createElement("p");
p0.setAttribute("class", "nameact");
p0.innerHTML = nameact;
var p1 = document.createElement("p");
p1.setAttribute("class", "whereisit");
p1.innerHTML = when;
var p2 = document.createElement("p");
p2.setAttribute("class", "when");
p2.innerHTML = where;
var p3 = document.createElement("p");
p3.setAttribute("class", "describtion");
p3.innerHTML = desc;
curr.appendChild(p0);
curr.appendChild(p1);
curr.appendChild(p2);
curr.appendChild(p3);
if (buses.length) {
buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML)
} else {
document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML)
}
}
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
}
<section id="cd-placeholder-2" class="cd-section cd-container">
<h2>Activities</h2>
<div id="Slider" class="slide-up">
<div>
<div class="contents" >
<form class="form2">
<div class="col-3">
<label>
Activity Name
<input placeholder="What is your activity?" tabindex="3" name="nameact" />
</label>
</div>
<div class="col-3">
<label>
Where?
<input placeholder="Where is it going to be?" tabindex="4" name="when" />
</label>
</div>
<div class="col-3">
<label>
When?
<input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/>
</label>
</div>
<div>
<label>
Care to share more?
<textarea placeholder="describtion of your activity" class="text" name="desc"></textarea>
</label>
</div>
<button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button>
</form>
<div id="name"></div>
</div>
</div>
</div>
</section>
Any feedback is highly appreciated.

You need HTML+CSS+JS
HTML :
<div id="name"></div>
CSS
.row{
background-color: red;
border: 5px solid #333;
display: block;
position: relative;
overflow: hidden;
}
.nameact{
background-color:red;
height: 40px;
display: inline-block;
}
.whereisit{
background-color:green;
height: 40px;
display: inline-block;
}
.when{
background-color:blue;
height: 40px;
display: inline-block;
}
.describtion{
background-color:brown;
height: 40px;
display: inline-block;
}
JS
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
function addAct(nameact, when, where,desc) {
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>';
document.getElementById('name').innerHTML += myhtml;
}
You will need to update CSS code, based on your needs

If you need any help understanding this, please let me know. I've written a few css styles, and the html markup that they will be applied to. Make your javascript produce this markup, and do some reading about CSS to extrapolate this into a complete module.
<style>
.activity {
width: 645px;
height: 160px;
border: 2px solid #0000ff;
}
.activity > div {
padding: 20px;
}
.activity .top {
display: inline-block;
float: left;
width: 174px;
height: 30;
border-right: 1px solid #0000ff;
}
.activity .top.end {
width: 175px;
border-right: none;
}
.activity .bottom {
display: inline-block;
float: left;
width: 605px;
height: 50;
border-top: 1px solid #0000ff;
}
.activity .title {
display: block;
}
</style>
<div class="activity">
<div class="top">
<span class="title">ACTIVITY NAME</span>
<span>Skydiving</span>
</div>
<div class="top">
<span class="title">WHERE?</span>
<span>Dubai Palm Island</span>
</div>
<div class="top end">
<span class="title">2017-06-22</span>
</div>
<div class="bottom">
<span>CARE TO SHARE MORE?</span>
<span class="title">It will be a fun trip!</span>
</div>
</div>
I hope this gets you headed in the right direction!

SlideUp goes up although selected class has not been left

function hoverimgon(elem){
$(elem).find('.credentials-popup').slideDown(800);
}
function hoverimgoff(elem){
$(elem).find('.credentials-popup').slideUp(800);
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
SlideUp goes up although selected class has not been left. Although several elements have the same class, the second div should only appear with the mouseover element and not with all. If the second is selected with the mouse, this should not disappear, just as it is the case, you should have the possibility to select something in the credentials-popup. What is the mistake?

Use jQuery :visible Selector and have it hide when the mouse leaves the hidden message area.
function hoverimgon(elem) {
var $slide = $(elem).find('.credentials-popup');
if (!$slide.is(":visible")) { // only slide down if hidden
$slide.slideDown(800)
}
}
function hoverimgoff(elem) {
if ($(elem).is(":visible")) { // only slide up if visible
$(elem).slideUp(800);
}
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup {
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>

you are should use a proper jQuery call, and since you are using jQuery, there is no need to write JavaScript functions for such a simple job. I have made the solution for you in a JSFiddle: https://jsfiddle.net/c8dh5qbk/2/
HTML:
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something</div>
</div>
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something else</div>
</div>
JavaScript:
$(document).ready(function(){
$('.credentials-element').mouseover(function() {
if (!$(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideDown(800);
}
}).mouseout(function() {
if ($(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideUp(800);
}
});
});
CSS:
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 50px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 50px;
padding:10px 0;
text-align: center;
}

Trying to change colour of a button to show which images is displayed with javascript

I'm trying to change colour of a button to show which images is displayed with JavaScript. Something similar to :Active in CSS. I've been looking for hours, I've managed to change just about every other element on the page except for the one I actually want to change, all I need is to change the background color of the clicked button and then revert back to original color a different button is clicked. Any help would be much appreciated.
<! doctype html>
<html>
<head>
<title>Task 2</title>
<!--styles-->
<style>
body {
margin: 0;
background-color: mediumpurple;
}
header {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
}
#content {
width: 80%;
background-color: green;
margin: auto;
}
nav {
float: left;
background-color: greenyellow;
width: 30%;
height: 750px;
text-align: center;
}
#pictureFrame {
float: left;
width: 70%;
height: 750px;
background-color: deeppink;
}
footer {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
clear: both;
}
.button {
margin-top: 100px;
background-color: white;
border-radius: 20px;
width: 70%;
height: 75px;
}
#img {
margin-top: 19%;
margin-left: 35%;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
}
</script>
</head>
<body>
<header>
<h1>Coffee</h1>
</header>
<section id="content">
<div id="pictureFrame">
<img src="" id="img" />
</div>
<nav>
<button id="button1" class="button" onclick="pic1()">Starbucks</button>
<br/>
<br/>
<button id="button2" class="button" onclick="pic2()">Muffin Break</button>
<br/>
<br/>
<button id="button3" class="button" onclick="pic3()">Costa</button>
</nav>
</section>
<footer>
<h1>This is a footer</h1>
</footer>
</body>
</html>

By clicking on each button simply change the background of that button with style.background='color'. Also reset the color of other two buttons. Simply create a function to reset the background color.
<script type="text/javascript">
function reset(){
document.getElementById("button1").style.background='white';
document.getElementById("button2").style.background='white';
document.getElementById("button3").style.background='white';
}
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
reset();
document.getElementById("button1").style.background='red';
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
reset();
document.getElementById("button2").style.background='red';
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
reset();
document.getElementById("button3").style.background='red';
}
</script>
Fiddle : https://jsfiddle.net/tintucraju/6dkt0bs2/

Selecting and Adding Functions to Div's via For Loop

I wanted to select divs quickly so i wrote a for loop that select all divs and add functions to them quickly instead of "onClick='blahblah'" method. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Strategy Game Dev Test</title>
<meta charset="utf-8" />
<script type="text/javascript">
function illu_area(){
alert("test");
}
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", illu_area());
}
}
</script>
<style type="text/css">
* { margin: 0px; padding: 0px; font-family: Tahoma}
.container_main {
margin: 10px;
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.territory_type1 {
width: 100px;
height: 100px;
position: absolute;
}
.territory_type2_horizontal {
width: 200px;
height: 100px;
position: absolute;
}
.territory_type2_vertical {
width: 100px;
height: 200px;
position: absolute;
}
#t6 {
background-color: blue;
left: 200px;
}
#t5 {
background-color: lightblue;
left: 100px;
}
#t4 {
background-color: green;
}
#t3 {
background-color: turquoise;
top: 200px;
}
#t2 {
background-color: lightgreen;
top: 200px;
left: 200px;
}
#t1 {
background-color: brown;
top: 100px;
left: 200px;
}
#t0 {
background-color: yellow;
top: 100px;
left: 100px;
}
.grid {
height: 100px;
width: 100px;
position: absolute;
top :0px;
}
#t3_g2 {
left: 100px;
}
#t4_g2 {
top: 100px;
}
</style>
</head>
<body onLoad="everything()">
<div class="container_main">
<div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0">
Origin
</div>
<div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0">
1
</div>
<div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1">
2
</div>
<div id="t3" class="territory_type2_horizontal">
3
<div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div>
<div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div>
</div>
<div id="t4" class="territory_type2_vertical">
4
<div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div>
<div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div>
</div>
<div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1">
5
</div>
<div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1">
6
</div>
</div>
</body>
</html>
My problem is: When i open this html file or refresh the page, alert messages appears (six times) immediately. I want it to alert when i click a grid...
Note:
it works when i do this:
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");});
}
}
But this isnt going to be useful in future i think :P
Help me!

You have to pass your function - omit the ()
.addEventListener("click", illu_area);
Having the () executes the function immediately.

Javascript document.getElementById doesn't seem to work

I have the following code, and the javascript console in chrome says "Can't read innerHTML property of null. Why does document.getElementById('display') turn up empty handed?
<!DOCTYPE html>
<html>
<head>
<title>Chat 3</title>
<script type="text/javascript">
function showmsg(str){
var display = document.getElementById('display');
display.innerHTML += "<p>" + str + "</p>";
}
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
</script>
<style type="text/css">
#username {
padding: 0px;
margin: 0px;
height: 26px;
width: 400px;
}
/* ADDED container div that wraps onlineusers and display */
#container {
margin: 10px 0;
}
/* use float: left to put them side-by-side */
#display {
padding: 0px;
margin: 0px;
border-style: solid;
border-width: 1px;
overflow: auto;
height: 400px;
width: 400px;
float: left;
}
#onlineusers {
padding: 0px;
margin: 0px;
height: 400px;
width: 200px;
border-style: solid;
border-width: 1px;
float: left;
}
/* Added container2 to wrap inputline and sendbutton */
#container2 {
margin: 10px 0;
}
#inputline {
padding: 0px;
margin: 0px;
height: 26px;
width: 350px;
float: left;
}
#sendbutton {
padding: 0px;
margin: 0px;
height: 30px;
width: 50px;
float: left;
}
/* this is a well used "hack". */
.clearfix {
clear: both;
}
</style>
</head>
<body onload="document.getElementById("username").focus()">
<input type="text" id="username" />
<div id="container">
<div id="display"></div>
<div id="onlineusers"></div>
<div class="clearfix"></div>
</div>
<div id="container2">
<input type="text" id="inputline" length="55" />
<input type="button" id="sendbutton" value="Send" />
</div>
</body>
</html>

Move your script-section down to the bottom of the page. Otherwise it is executed before the page has been loaded.
Btw: Putting scripts at the bottom of your page is even a "best practice" and recommended by Google, Yahoo & Co

You're calling showmsg before the whole page (and hence the display div) is loaded. Hence the error. Call it from onload and it'll work.
Add this function to the <head>
function handleLoad()
{
document.getElementById("username").focus()
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
}
and call it from onload
<body onload="handleLoad()">

Put your script tag at the end of the document:.
In your case the page has not been completely parsed into DOM tree, but your script executes anyway:
<body onload="document.getElementById('username').focus()">
<input type="text" id="username" />
<div id="container">
<div id="display"></div>
<div id="onlineusers"></div>
<div class="clearfix"></div>
</div>
<div id="container2">
<input type="text" id="inputline" length="55" />
<input type="button" id="sendbutton" value="Send" />
</div>
<script type="text/javascript">
function showmsg(str){
var display = document.getElementById('display');
display.innerHTML += "<p>" + str + "</p>";
}
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
</script>
</body>
This is also considered a good practice for performance reasons:
http://developer.yahoo.com/performance/rules.html#js_bottom