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>
Related
I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>
I am trying to learn coding in my freetime and have run into an issue. I am trying to have 'contact info' to be a on hover on profile picture so that it shows a way to contact me via phone, email, and shows my name. I'm hoping someone can help with this please.
Cut most of the HTML code in the process to allow post
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='Profile.jpg' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
You've missed ; after top: 30%; in CSS #contactInfo class
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%; /* missed ; */
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h50-n-l50-sg-rj' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
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() {
I'm trying to make a menu with jquery but when i hover over "Menu" and try clicking one of the buttons it slides back up. anyone who knows how to fix this?
Here is my Jquery:
$(document).ready(function() {
$(".slide").hide();
$("#menu").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
Here is the full code:
https://jsfiddle.net/lollz4/dh1kLh8L/
P.S. I'm new here so sorry if I'm doing anything wrong.
Add an additional wrapper around your menu and check for the hover state on that element instead:
$(document).ready(function() {
$(".slide").hide();
$("#menu-wrapper").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
* {
margin-top: 0px;
margin-left: 0px;
}
body {
background-color: #EBEDEF;
}
.page {
background: white;
width: 100%;
height: 52em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
position: absolute;
margin: 0;
padding: 0;
}
#menu {
display: block;
position: absolute;
left: 0em;
top: 0em;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.slide {
display: block;
left: 0em;
top: 0em;
position: relative;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.logo {
height: 3em;
width: 100%;
background-color: #ABB2B9;
padding: 0px;
margin: 0px;
position: fixed;
}
div img {
margin: auto;
width: 8em;
height: 3em;
background-color: #607D8B;
border-radius: 2px;
display: block;
padding-top: 0;
}
div img:hover {
opacity: 0.80;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>Stefan's Website</title>
</head>
<body>
<div class="logo">
<img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
<div id="menu-wrapper">
<button id="menu">
Menu
</button>
<button class="slide">
Pagina1
</button>
<button class="slide">
Pagina2
</button>
<button class="slide">
Pagina3
</button>
</div>
</div>
<!--<div class="page">
</div>-->
</body>
</html>
So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>
Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}
try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel