I am creating a list of elements from user inputs. Each element in this list comes with a dynamically created button within my JavaScript.
I am trying to have it so that when I click on this dynamically created button ("started"), it will automatically remove the entire list element from the original li and move it to the top of another li.
My code: [EDIT: For some reason, my code snippet doesn't show the second list "doing" but it shows in my local console, not sure if it's problem with my code?]
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$(".addedTask").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').append($('#todo-list'( completedItem)).removeClass(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Here is an image of what it looks like on my end:
You're using the wrong selector .addedTask for the Event delegation.
Use prepend function to add the element at the top.
To test this snippet, click on Full Page after you click 'Run code snippet'
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').prepend($(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Since you are adding HTML to the DOM later, the code $(".addedTask").on('click', "button", function() { will not work because at the time of execution this code there was no .addedTask elements.
You may instead want to delegate this to a higher node in the DOM. One easy way to accomplish this would be to rewrite this as
$("document").on('click', ".addedTask button", function() {
Related
function showInsertQuest(){
var x = document.getElementById("one");
if (x.style.display === "none"){
x.style.display = "block";
} else {
x.style.display = "block";
}
}
const target = document.querySelector("#second");
const displayWhenSelected = (source, value, target) => {
const selectedIndex = source.selectedIndex;
const isSelected = source[selectedIndex].value === value;
target.classList[isSelected
? "add"
: "remove"
]("show");
};
if(source= document.querySelector("#location"))
source.addEventListener("change", (evt) =>
displayWhenSelected(source, "loc5", target)
);
body {
align-items: center;
}
#container {
border: 4px solid;
position: auto;
height: 650;
width: 700px;
}
.main {
border-bottom: solid;
margin-bottom: 0px;
}
h2 {
margin-left: 10px;
margin-bottom: 1%;
color: darkcyan;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
#bottom {
border-top: 0.7solid;
margin-top: 0px;
}
button {
margin-left: 10px;
margin-right: 10px;
border-radius: 4px;
background-color: darkcyan;
color: white;
height: 35px;
width: 80px;
margin-top: -25px;
}
/* Insert Button */
.insert-btn {
margin-left: 0px;
margin-top: 480px;
color: grey;
margin-bottom: 0px;
padding-left: 510.53px;
border-top: none;
height: 40px;
font-weight: 200;
font-size: 1.05rem;
}
.insert-btn:hover {
background: grey;
box-shadow: var(--shadow);
color: white;
}
.insert-btn:active {
background: grey;
color: black;
border: transparent;
}
#one {
width: 700px;
position: fixed;
margin-top: 10px;
display: none;
}
#one input {
width: 0px;
border: 1px solid;
border-radius: 5px;
display: inline;
padding-right: 500px;
padding-left: 7px;
padding-top: 5px;
padding-bottom: 5px;
color: grey;
}
#one #Multiplechoice {
margin-right: 0px;
display: inline;
border: none;
position: fixed;
height: 19px;
}
i {
padding-left: 12px;
padding-right: 5px;
padding-top: 1px;
color: grey;
}
#one .on {
padding-left: 9px;
}
#one #second {
margin-left: 22px;
margin-top: 5px;
display: none;
}
#one #second .show {
display: block;
}
<div id="container">
<div class="main">
<h2>ADD NEW CALL</h2>
</div>
<section class="insert-quest" id="insertquestone">
<div id="one" >
<div class="on">
1 <input type="text"/><i class="fa fa-adn" aria-hidden="true"></i>
<!-- DROPDOWN -->
<select id="location" name="drop">
<option value="Select">Select</option>
<option value="loc5" >Multi-line text</option>
<option value="loc6" >Single choice</option>
<option value="loc7">Multi choice</option>
</select>
</div>
<!-- TEXTAREA -->
<textarea name="term" id="second" cols="50" rows="3"></textarea>
</div>
</section>
<div id="content">
<!-- Insert Quest Button -->
<input type="button" value="+ADD NEW QUESTION" class="insert-btn" id="insertbtn" onclick="showInsertQuest()"/>
</div>
<div id="bottom">
<h3><button>SAVE</button> cancel </h3>
</div>
</div>
UPDATE: I modified codes in your question for better readability #Adam P.
trying to get a text area on selecting multi line text from drop down list
SIMAILARLY on selecting single choice add 1 text box below the question
and on selecting single choice add 5 text box below the question...
getting error of Cannot read property 'addEventListener' of null
To make textarea visible, you'll have to do several things:
in JS part, change
if(source= document.querySelector("#location"))
to
const source = document.querySelector("#location");
This change is pretty self-explanatory, you need to define node when you attach eventListener.
In CSS change:
#one #second {
margin-left: 22px;
margin-top: 5px;
display: none;
}
#one #second .show {
display: block;
}
to
#second {
margin-left: 22px;
margin-top: 5px;
display: none;
}
#second.show {
display: block;
}
You don't need #one selector, one id selector is enough. Also, when you add a class (.show) to an element that already has id defined, you need to write that class without a space between id name and class name in CSS.
EDIT: You are probably loading your script in <head> tag. This way, script cannot attach eventListener, because DOM element is not available yet. To fix this and remove Cannot read property 'addEventListener' of null error, you need to load your script right before ending of </body>, like this:
<html>
<head>
<style></style>
</head>
<body>
...content of your web page
<script></script>
</body>
</html>
I have a red button that is dynamically created and put into a li along with some user input. Looks like this
If the user clicks on the red button, the li element is prepended to another li like this
I want to be able to change the button from red to green and change the text from 'started' to 'unmark' when it moves to the second li and then back to red with the right text if that button is clicked again to move it back.
I'm not quite sure where to write the function to do this? Should I do this outside of my previous written functions or within each relevant ones? And if so, what would it look like because my button only has an id and no value, which is the method I've seen all over stackoverflow.
Thank you!
Edit: Code Snippet It looks like it's not showing the second column (configurations are all off)... does it work on other's people laptops?
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started' value='on'>Started</button>" + text + '</li>');
}
})
);
// Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list'
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').prepend($(completedItem));
});
// Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list'
$("#doing-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#todo-list').prepend($(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
/*Add a card button*/
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
/*User input*/
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
.column {
background-color: #E3E3E3;
min-height: 75px;
width: 25%;
display: inline-block;
position: relative;
margin: 5px;
vertical-align: top;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
color: #393939;
margin: 5px;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
margin-bottom: 15px;
}
/*Cards in the todo list*/
#started {
float: left;
background-color: #E65C5C;
border-radius: 6px;
border: none;
}
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js"> </script>
</body>
you can do something like this:
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask unmark'> <button id='started' value='on'>Started</button>" + text + '</li>');
}
})
);
// Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list'
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
change(completedItem, true);
$('#doing-list').prepend($(completedItem));
});
// Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list'
$("#doing-list").on('click', "button", function() {
var completedItem = $(this).parent();
change(completedItem, false);
$('#todo-list').prepend($(completedItem));
});
function change(selector, isMarked) {
if(isMarked) {
$(selector).removeClass('unmark');
$(selector).addClass('mark');
} else {
$(selector).removeClass('mark');
$(selector).addClass('unmark');
}
}
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
/*Add a card button*/
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
/*User input*/
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
.column {
background-color: #E3E3E3;
min-height: 75px;
width: 25%;
display: inline-block;
position: relative;
margin: 5px;
vertical-align: top;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
color: #393939;
margin: 5px;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
margin-bottom: 15px;
}
/*Cards in the todo list*/
#started {
float: left;
border-radius: 6px;
border: none;
}
.mark button {
background-color: green;
}
.unmark button {
background-color: #E65C5C;
}
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js"> </script>
</body>
I have some images, I need to have a clickevent on them bringing up an infobox on each image.
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
#charset "utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header
{
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox
{
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav
{
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family: 'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul{
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack
{
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2rem;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.js"></script>
<script>
$( document ).ready(function() {
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
});
</script>
<div id="wrapper">
<center><header><img src="Bilder/spegel.jpg"/></header></center>
</head>
<!--Bakgrundsbild-->
<center><body bgcolor="#FFFFFF ">
<!--Javascript-->
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center><img src="Bilder/title.png"></center>
<p>
<div class="infobox-container hide-infobox hidden">
<div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
<span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
<span id="show-infobox-2" class="show-infobox">Show infobox 2</span>
</div>
</body></center>
</div>
</html>
At the moment Im just trying to bring up the infobox on a simple text just to see if it works. But it doesn't. Only the container comes up without the actual infobox.
I am just showing how this can be done. Still you need to change your code a lot.
I suggest you to go through w3schools for better understanding.
This is DEMO
$(".infobox-container, .infobox").hide();
$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
{
$(".infobox-container, #infobox-1").fadeIn(100);
}
if(curId == "show2")
{
$(".infobox-container, #infobox-2").fadeIn(100);
}
});
$(".hide-infobox").click(function()
{
$(".infobox-container, .infobox").fadeOut();
});
#charset"utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header {
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox {
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav {
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family:'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul {
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack {
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2em;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<center>
<header>
<img src="Bilder/spegel.jpg" />
</header>
</center>
<center>
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center>
<img src="Bilder/title.png" />
</center>
<p>
<div class="infobox-container">
<div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
</p>
<span class="show-infobox" id="show1">Show infobox 1</span>
<span class="show-infobox" id="show2">Show infobox 2</span>
</div>
</div>
</center>
</div>
I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with
Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;
<center>
<div class="trivlimp">
<center><div class="lyrics"><!-- |field_1| --></div></center>
</div>
<div class="imp">
<div class="trgls"><!-- |points| --> Gallons</div><br>
<div class="trals"><!== |field_2| --></div><br>
<div class="trpc"><!-- |posts| --> posts</div><br>
<div class="trttr"><!-- |field_3| --></div><br>
</div>
</center>
I'd like to be able to hover over the div "trivlimp" to show the div "imp" right on top of "trivlimp"; hiding the first div underneath the div "imp". I tried doing this by :hover but completely failed and only ended up making it more frustrating for myself. I'm not against using Jquery, but I'd like to do this completely by css; but if it is easier using jquery I'll use it.
http://jsfiddle.net/Thrw2/3/
html code
<center>
<div class="trivlimp">
<center><div class="lyrics"> |field_1| </div></center>
</div>
<div class="imp">
<div class="trgls"> |points| Gallons</div><br>
<div class="trals">|field_2| </div><br>
<div class="trpc"> |posts| posts</div><br>
<div class="trttr">|field_3|</div><br>
</div>
css code
.trivlimp { background-color:#FF0000;
width: 260px;
height: 400px;
text-align: center;
position: absolute; }
.imp { width: 260px;
height: 400px;
background-color:#676767;
display: none;
position: absolute;
top: 0; }
.lyrics {
margin-top: 50%;
background-color: #CC0066;
width: 180px;
padding: 5px;
height: 130px
overflow: auto;
text-align: justify;
text-transform: uppercase;
font-family: Georgia;
font-style: italic;
font-size: 10px;
line-height: 10px;
}
.trgls {
width: 190px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color:#6666FF;
text-transform: uppercase;
}
.trals {
width: 170px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #00FF00;
text-transform: uppercase;
}
.trpc {
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #FFCC00;
text-transform: uppercase;
}
.trttr {
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #009900;
text-transform: uppercase;
}
jquery
$(function(){
$('.trivlimp').hover(function() {
$('.imp').show();
},
function() {
$('.imp').hide();
});
});
I don't quite understand your question, but you could use the following:
.imp {
display: none;
}
.trivlimp:hover + .imp {
display: block;
}
I would use jQuery to work with the hover states. I'm somewhat not following the question as well. So I popped your code into JSFiddle and brewed up what I thought was along the lines of what you're looking for. I used jQuery's mouseover/mouseout:
$('.trivlimp').mouseover(function() {
$('.imp').show();
});
$('.trivlimp').mouseout(function() {
$('.imp').hide();
});
http://jsfiddle.net/arsCr/
Do something like this: http://jsfiddle.net/chanckjh/PWtTw/
html:
<div class="trivlimp">
</div>
<div class="imp">
</div>
css:
.trivlimp{
border: 1px solid red;
width: 500px;
height: 300px;
}
.imp{
border: 1px solid blue;
width: 500px;
height: 300px;
background: blue;
display: none;
}
jquery:
$(function() {
$('.trivlimp').hover(function() {
$('.imp').show();
}, function() {
$('.imp').hide();
});
});