What I want to do is when I click the task it will have a line through the text means that I'm done with the task. but the add event listener function for this is not working, I'm working with the javascript toggle and that's all I can think of right now to achieve this functionality.
Is there another way to do this? I searched on the internet and it seems complicated when I'm trying to figure it out.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
taskOutput.innerHTML += `<div class="task">
<span id="taskname">${newTasks} </span>
<button class="delete" id="deleteButton"><i class="fa-solid fa-trash"></i> </button>
</div>
`;
//delete
let deleteBtn = document.querySelector("#deleteButton");
deleteBtn.addEventListener("click", function() {
this.parentNode.remove();
});
//line through
let theTask = document.querySelectorAll(".task");
theTask.addEventListener("click", function() {
this.classList.toggle("completed");
});
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kumbh Sans', sans-serif;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 30px 40px;
}
#new-task {
position: relative;
background-color: white;
padding: 30px 20px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 30px 20px;
margin-top: 50px;
border-radius: 10px;
width: 100%;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<body>
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
<script src="/script.js"></script>
</body>
querySelectorAll will return the list of nodes matching the selector tasks. So you have to iterate through each of those nodes and add your listener. See the below code snippet
let theTasks = document.querySelectorAll(".task");
theTasks.forEach((task) => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
});
});
theTask is a list of nodes. Trying to attach event listener on this list is causing issues.
Also, you will be inserting lots of buttons with same id deleteButton and spans with same id taskname which is incorrect and can cause undefined behavior.
For theTask fix, you may want to do something like:
let theTasks = [...document.querySelectorAll(".task")];
theTasks.forEach(task => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
})
});
Using innerHTML to create manipulate the DOM for an application like a todo list is probably not a good idea. The answers to Advantages of createElement over innerHTML? give good explanations why.
It is worth noting that in the innerHTML code, the span and the button are created with an id and so all of these elements will have the same id. It is also probably not a good idea to have duplicate ids on one page. Why are duplicate ID values not allowed in HTML? explains why.
Also, adding event listeners to every new task is also probably not a good idea. What is DOM Event delegation? gives a good explanation why.
Finally, the Difference between HTMLCollection, NodeLists, and arrays of objects and Document.querySelectorAll() explain how to get lists of elements that can be manipulated.
So, I have rewritten the task creation code in the addBtn.addEventListener to show one way how this could be done with document.createElement().
And I have created a separate event listener on the Tasks container div, which handles both task deletion and task completion.
I also added the following CSS so that clicking on a trash can icon is handled by the parent button. Without this CSS, clicking on an icon would not delete the task.
div#tasks i {
pointer-events: none;
}
To make the todo list more visible in the code snippet below, I reduced the heights, margins, and paddings of some of the elements in the CSS.
I also added a link to the font awesome icon library.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
taskOutput.addEventListener("click", function(event) {
if (event.target && event.target.nodeName === "SPAN") {
event.target.classList.toggle("completed");
}
if (event.target && event.target.nodeName === "BUTTON") {
event.target.parentNode.remove();
}
});
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
// Create a task DIV
const newTaskElement = document.createElement("div");
newTaskElement.classList.add("task");
// Create a SPAN with the task name
const newTaskNameElement = document.createElement("span");
const taskTextnode = document.createTextNode(newTasks);
newTaskNameElement.appendChild(taskTextnode);
// Create a BUTTON with a TRASH CAN ICON
const newTaskDeleteButton = document.createElement("button");
const deleteImageElement = document.createElement("i");
deleteImageElement.classList.add("fa-solid", "fa-trash");
newTaskDeleteButton.appendChild(deleteImageElement);
// Append the SPAN and the BUTTON to the task DIV
newTaskElement.appendChild(newTaskNameElement);
newTaskElement.appendChild(newTaskDeleteButton);
// Append the task DIV to the TASK LIST DIV
taskOutput.appendChild(newTaskElement);
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
font-family: 'Kumbh Sans', sans-serif;
}
/* ADDED TO MAKE SURE THAT THE TRASH ICON DOES NOT PROCESS CLICKS */
div#tasks i {
pointer-events: none;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 3px 4px;
}
#new-task {
position: relative;
background-color: white;
padding: 6px 4px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 6px 4px;
margin-top: 5px;
border-radius: 10px;
width: 100%;
min-height: 50px;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
I am brand new to javascript, but I have a little bit of knowledge in using HTML. The problem I am facing with my website is I created an image gallery, everything works as expected, but I cannot seem to get the content to stay inside the webpage. Here is an image of what my problem looks like: https://imgur.com/RkhF0Ka
I have already tried setting the wrapper and body height to 100%, I have tried editing the CSS file with different display settings (e.x. absolute, relative, etc), I have tried creating a wrapper inside the article itself. None of these worked. I just want to get rid of the blocks in the webpage background and have all my content on the same page. Any help would be greatly appreciated.
My HTML Code:
<!-- Title of website and page -->
<title>....:: Gallery</title>
<!-- Added variable width character encoding -->
<meta charset="utf-8">
<!-- Compatiblility for IE and Chrome -->
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content='IE=edge,chrome=1'><![endif]-->
<!-- Link to external CSS style sheet -->
<link href="pps.css" rel="stylesheet">
<!--Added tablet and mobile scaling-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Added older browser compatibility-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!-- Script element to link to modernizer -->
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<!-- Added a wrapper to ensure the whole page shares the same CSS style-- >
<div id="wrapper">
<!-- Document header -->
<header>
<h1>....</h1>
<!-- Added a div class to header for image map -->
<div id="header">
<!--Added image map to HTML document-->
<map name="imgmap" id="imgmap">
<area href="https://..../" shape="rect"
coords="30,25,345,174" alt=".... Logo">
<area href="https://...../" shape="rect"
coords="500,25,845,174" alt="....">
</map>
<img src="...." usemap="#imgmap" alt="...." width="1020" height="200">
</div>
</header>
<nav> <!-- Created navigation bar and an unordered list for website
pages -->
<ul> <!-- Created button class for navigation menu-->
<li><a class="button" href="index.html">Home</a></li>
<li><a class="button" href="...s.html">...s</a></li>
<li><a class="button" href=".....html">...</a></li>
<li><a class="button" href="....html">...</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
</ul>
</nav>
<!-- Added a div class for the hero image of Gallery -->
<div id="galleryhero"></div>
<!-- main body of document -->
<main>
<!-- h2 element for webpage -->
<h2>Gallery</h2>
<!-- Added paragraph to document -->
<p><span class=".....">...</span> ....</p> <br>
<h2>Images</h2>
<!-- Create image gallery layout -->
<article>
<div id="leftarrow"> <!-- create id for left arrow -->
<p><</p>
<figure id="fig2"> <!-- create id for figure 2 -->
<img src="images" alt="fig2" width="360" height="202" />
</figure>
<figure id="fig3">
<img src="images" alt="fig3" width="480" height="270" />
</figure>
<figure id="fig4">
<img src="images" alt="fig4" width="360" height="202" />
</figure>
<div id="rightarrow"> <!-- create id for right arrow -->
<p>></p>
<div id="fiveButton"> <!-- create id for fiveButton -->
<p>Show more images</p>
</div>
</article>
<script src="photos.js"></script> <!-- create script src to load the
file photos.js -->
<br> <!-- Break element -->
<!-- Added a footer to document -->
<footer>
<div id="footer">
<!-- Added an unorderedlist for footer element -->
<ul>
<li>.....</li>
<li>.....</li>
<li>.....<li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
</div>
<!-- Added a copyright mark and fake e-mail address -->
Copyright © 2019 ..... <br>
....com
</footer>
</main>
</div>
</body>
</html>
My CSS Code:
/* Document body configurations */
body { background-color: #fffff0;
background: url("bg.jpg"); /* Configured background url to a root-
absolute url */
height: 100%;
color: #000000;
font-family: Verdana, Ariel, Helvetica; }
/* Document h1 configurations */
h1 { background-color: #FFFFFF;
color: #000000;
font-size: 0.1px;
font-family: Georgia, "Times New Roman", Palatino;
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
/* Document header configurations */
header {height: 205px;
background-color: #FFFFFF;
background: url("ppheader.gif");
margin-bottom: 0;
padding-bottom: 50px;
border-style: solid;
border-color: #000000;
color: #000000;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h2 configurations */
h2 { background-color: #fffff0;
color: #e65c00;
text-align: center;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h3 configurations */
h3 { color: #000033;
float:left; }
/* Document main body configurations */
main { padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #fffff0;
margin-left: 1px;
padding-bottom: 300px;
padding-top: 1px; }
/* Document configurations for buttons */
.button { display: block;
width: 10em;
padding: 1em;
color: #FFFFFF;
background-color: #000000;
font-family: Verdana, Helvetica, Arial;
font-size: 1em;
font-weight: bold;
border: 1px solid white;
margin: 0;
text-decoration: none; }
/* Document image gallery configurations */
figure { display: inline-block;
list-style-type: none;
width: 269px;
height: 448px; }
/* Added a caption for videos */
figure figcaption {width: 269px;
padding-bottom: 10px;
margin: 0;
background-color: #f4f4f0;
text-align: center;
font-weight: bold;
font-style: italic;
font-family: Helvetica, serif; }
/* Document button configurations */
.button:link { color: #FFFFFF; }
.button:visited { color: #ffe066; }
.button:hover { color: #990000; }
/* Document navigation bar configurations */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
/* Document table configurations */
table { margin: auto;
border: 1px solid #982e01;
width: 90%;
border-collapse: collapse; }
td { text-align: center; }
th, td { padding: 5px;
border: 1px solid #982e01; }
/* Document paragraph configurations */
#text { text-align: left; }
tr:first-of-type { background-color: #000000;
color: #FFFFFF; }
tr:nth-of-type(even) { background-color: #fffecc; }
dt { color: #000033;
font-weight: bold; }
.paulpaintservice { color: #982e01;
font-size: 1.2em; }
/* Document logo configurations */
.logo { color: #FFFFFF;
font-size: 3em; }
/* Document footer configurations */
footer { font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
margin-top: 100px;
background-color: #fffff0;
margin-left: 5px; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline;
background-color: #fffff0; }
#footer a { padding: 2px 10px; }
/* Document box style configurations */
* { box-sizing: border-box;}
/* Document wrapper configurations that create a box model for the
website */
#wrapper { background-color: #000000;
margin-left: auto;
margin-right: auto;
height: 100%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #1e1e1e; }
/* Document hero image configurations for the home, services, gallery,
about, and appointment pages */
#homehero { height: 300px;
background-image: url("hsunset3.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#servicehero { height: 300px;
background-image: url("hsunset2.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#galleryhero { height: 300px;
background-image: url("hsunset.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#abouthero { height: 300px;
background-image: url("hevening.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#projecthero { height: 300px;
background-image: url("hocean.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#securityhero { height: 300px;
background-image: url("hfield.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#appointmenthero { height: 300px;
background-image: url("hvalley.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
/* Configure pc.gif to float to the left on "About" page */
#pc { float: left;
margin: 0 16px 16px 0;
border: 2px ridge black;
border-radius: 5px;
background: #FFFFFF;}
/* Document "About" page paragraph configurations */
p { text-align: left;
font-size: 1.2em; }
/* Document "Gallery" configurations */
#gallery { position: relative; }
#gallery ul { width: fill; list-style-type: none; }
#gallery img { border: 1px solid black;
margin: 10px; }
#gallery a { text-decoration: none; color: #e65c00; font-style: italic;
font-family: Helvetica;
font-weight: bold; }
#gallery span { display: none; }
#gallery li { display: inline-block; }
#gallery a:hover span {display: block;
position: absolute;
left: 300px;
top: 0;
text-align: center;
text-shadow: 2px 2px 3px #000000; }
/* Document navigation configurations */
nav a { text-decoration: none; }
nav a:link { color: #FFFFFF; }
nav a:visited { color: #ffe066; }
nav a:hover { color: #FFFFFF; }
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
label { float: left;
width: 8em;
display: block;
padding-right: 1em; }
/* Document contact form configurations */
input, textarea { margin-bottom: 1em;
margin-top: 1.2em;
display: block; }
/* Configure <form> */
#mySubmit { margin-left: 10em; }
#mobile { display: none; }
#desktop { display: inline; }
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:link, a:visited {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: none;
color: inherit;
}
a:active {
text-decoration: none;
color: inherit;
}
/* main content */
article {
background: white;
position: relative;
}
article h2 {
font-size: 1.2em;
font-weight: bold;
text-align: left;
margin: 0 0 10px 51px;
}
#leftarrow, #rightarrow {
background: #696565;
color: white;
position: absolute;
z-index: 30;
text-align: center;
height: 135px;
width: 40px;
top: 67px;
}
article div:hover {
cursor: default;
}
#leftarrow {
left: 0;
}
#rightarrow {
right: 0;
}
#fiveButton {
display: block;
width: 100%;
position: absolute;
top: 290px;
color: white;
text-align: center;
}
#fiveButton p {
width: 20%;
margin: 0 auto;
line-height: 2em;
background: #696565;
}
#leftarrow p, #rightarrow p {
position: relative;
top: 50%;
margin-top: -0.5em;
}
figure {
position: absolute;
-webkit-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
-moz-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
}
#fig2 {
z-index: 10;
left: 13%;
top: 34px;
}
#fig3 {
z-index: 20;
left: 50%;
margin-left: -240px;
top: 0;
}
#fig4 {
z-index: 10;
right: 13%;
top: 34px;
}
/* Document configurations for mobile devices */
#media only screen and (max-width: 1024px)
/* Document body configurations */
{
body { margin: 0;
padding: 0;
background-image: none; }
/* Document wrapper configurations */
#wrapper { min-width: 0;
margin: 0;
box-shadow: none; }
/* Document h1 configurations */
h1 { margin: 0; }
/* Document navigation configurations */
nav { float: none;
width: auto;
padding: 0.5em; }
nav li { display: inline-block; }
nav a { padding: 1em; }
/* Document main body configurations */
main { padding: 1em;
margin-left: 0;
font-size: 90%; }
/* Document footer configurations */
footer { margin: 0; }
/* Document hero image configurations */
#homehero { margin-left: 0; }
#servicehero { margin-left: 0; }
#galleryhero { margin-left: 0; }
#abouthero { margin-left: 0; }
#appointmenthero { margin-left: 0; }
#projecthero { margin-left: 0; }
#securityhero { margin-left: 0; }
/* Document logo configurations */
.logo { margin-left: 0; }
}
/* Document configurations for mobile devices */
#media only screen and (max-width: 768px) {
/* Document h1 configurations */
h1 { height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
background: none; }
/* Document navigation configurations */
nav { padding: 0; }
nav a { display: block;
padding: 0.2em;
font-size: 1.3em;
border-bottom: 1px;
border-color: #330000; }
nav ul { margin : 0;
padding: 0; }
nav li { display: block;
margin: 0;
padding: 0; }
/* Document button configurations */
.button { width: auto; }
/* Document main body configurations */
main { padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em; }
/* Document hero image configurations */
#homehero { display: none; }
#servicehero { display: none; }
#galleryhero { display: none; }
#abouthero { display: none; }
#appointmenthero { display: none; }
#projecthero { display: none; }
#securityhero { display: none; }
/* Document footer configurations */
footer { padding: 0; }
/* Document mobile, desktop, and header display options configurations */
#mobile { display: inline; }
/* Disable desktop mode while on mobile device */
#desktop { display: none; }
/* Disable header image while on mobile device */
#header { display: none; }
}
Here is my image gallery JS code:
"use strict"; // interpret document contents in JavaScript strict mode
/* global variables */
var photoOrder = [1,2,3,4,5];
var figureCount = 3;
/* Add src values to img elements based on order specified in photoOrder
array */
function populateFigures() {
var filename;
var currentFig;
if (figureCount === 3) {
//Add for loop with 3 interations and increments i by 1 after each loop
for (var i = 1; i < 4; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i - 1];
currentFig.src = filename;
}
//Else statement and for loop with 6 iterations
} else {
for (var i = 0; i < 5; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i];
currentFig.src = filename;
}
}
}
/* shift all images one figure to the left, and change values in photoOrder
array to match */
rightArrow() {
for (var i = 0; i < 5; i++) {
after each cycle
if ((photoOrder[i] + 1) === 6) {
photoOrder[i] = 1;
} else {
photoOrder[i] += 1;
}
populateFigures(); //Call populateFigures()
}
}
/* shift all images one figure to the right, and change values in photoOrder
array to match */
function leftArrow() {
for (var i = 0; i < 5; i++) {
if ((photoOrder[i] - 1) === 0) {
with index i minus 1 is equal to the value of 0
photoOrder[i] = 5;
} else {
photoOrder[i] -= 1;
}
populateFigures(); //Call populateFigures()
}
}
/* switch to 3-image layout */
function previewThree() {
var articleEl = document.getElementsByTagName("article")[0];
var numberButton = document.querySelector("#fiveButton p");
/* Remove the 1st and 5th figure elements */
articleEl.removeChild(document.getElementById("fig1"));
articleEl.removeChild(document.getElementById("fig5"));
figureCount = 3;
numberButton.innerHTML = "Show more images";
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewThree,
false);
numberButton.addEventListener("click", previewFive, false);
} else if (numberButton.attachEvent) {
numberButton.detachEvent("onclick", previewThree);
numberButton.attachEvent("onclick", previewFive);
}
}
/* switch to 5-image layout */
function previewFive() {
var articleEl = document.getElementsByTagName("article")[0];
//Create figure and img elements for 5th image
var lastFigure = document.createElement("figure");
//Configure settings for 5th figure
lastFigure.id = "fig5";
lastFigure.style.zIndex = "5";
lastFigure.style.position = "absolute";
lastFigure.style.right = "45px";
lastFigure.style.top = "67px";
var lastImage = document.createElement("img");
lastImage.width = "240";
lastImage.height = "135";
lastFigure.appendChild(lastImage);
articleEl.appendChild(lastFigure);
//clone figure element for fifth image and edit to be first image
var firstFigure = lastFigure.cloneNode(true);
/* Change the id value for the firstFigure node from fig5 and the value
cloned from the lastFigure node to fig1, remove cloned value for the right
CSS style and specify a new value for the left CSS style */
firstFigure.id = "fig1";
firstFigure.style.right = "";
string
firstFigure.style.left = "45px";
//Use the appendChild() method to add the firstFigure node to document tree
//articleEl.appendChild(firstFigure);
articleEl.insertBefore(lastFigure,
document.getElementById("rightarrow"));
/* Insert the firstFigure node before the existing element with the id
value
fig2 */
articleEl.insertBefore(firstFigure,
document.getElementById("fig2"));
//Change from 3 images to 5 when user switches to viewing 5 photos
figureCount = 5; //Assign an image for each img element
//Add appropriate src values to two new img elements
document.getElementsByTagName("img")[0].src = "images/IMG_0" + photoOrder[0]
+ "sm.jpg";
document.getElementsByTagName("img")[4].src = "images/IMG_0" + photoOrder[4]
+ "sm.jpg";
//change button to hide extra images
var numberButton = document.querySelector("#fiveButton p"); //Assign var
numberButton value to the selector element with id #fiveButton p
numberButton.innerHTML = "Show fewer images"; //Assign the innerHTML
numberButton to the attribute show fewer images
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewFive,
false); //Remove 5-image view
numberButton.addEventListener("click", previewThree,
false);
} else if (numberButton.attachEvent) { /* Add else-if statement to switch
between a preview of 5 or 3 images */
numberButton.detachEvent("onclick", previewFive);
numberButton.attachEvent("onclick", previewThree);
}
}
/* create event listeners for left arrow, right arrow, and
center figure element
*/
function createEventListeners() {
var leftarrow = document.getElementById("leftarrow"); //create var named
leftarrow and assign value to the element with the id value leftarrow
//if/else statement to create the event listener for the left navigation
arrow
if (leftarrow.addEventListener) {
leftarrow.addEventListener("click", leftArrow, false);
} else if (leftarrow.attachEvent) {
leftarrow.attachEvent("onclick", leftArrow);
}
/* create a variable and assign an event listener for the right navigation
arrow */
var rightarrow = document.getElementById("rightarrow"); //create var named
rightarrow and assign value to the element with the id value rightarrow
if (rightarrow.addEventListener) {
rightarrow.addEventListener("click", rightArrow, false);
} else if (rightarrow.attachEvent) {
rightarrow.attachEvent("onclick", rightArrow);
}
//Add event listener for the third img element in the document that has index
value 2
var mainFig = document.getElementsByTagName("img")[1]; //Create var variable
mainFig and assign value to the second image element with the index value of
1
//Add if-else statement to create the event listener to call zoomFig() when
user clicks the center image
if (mainFig.addEventListener) { //Add if statement to not zoom into image
if it is not clicked
mainFig.addEventListener("click", zoomFig, false);
} else if (mainFig.attachEvent) { //Add else-if statement to zoom into image
when clicked
mainFig.attachEvent("onclick", zoomFig);
}
var showAllButton = document.querySelector("#fiveButton p"); //Assign var
showAllButton value to the selector element with id #fiveButton p
if (showAllButton.addEventListener) {
showAllButton.addEventListener("click", previewFive, false);
} else if (showAllButton.attachEvent) {
showAllButton.attachEvent("onclick", previewFive);
}
}
/* open center figure in separate window */
function zoomFig() {
var propertyWidth = 960; //Assign var propertyWidth value to 960px
var propertyHeight = 600; //Assign var propertyHeight value to 600px
var winLeft = ((screen.width - propertyWidth) / 2); // Create var named
winLeft and start with the width of the existing browser window minus the
width of the new browser window, divided by two
var winTop = ((screen.height - propertyHeight) / 2); // Create var named
winTop and start with the height of the existing browser window minus the
width of the new browser window, divided by two
var winOptions = "width=960,height=600"; //Create var named winOptions and
assign to the width of 960px and height of 600px
winOptions += ",left=" + winLeft; //Create an option string for the
window.open() method that incorporates the calculated values for the left of
window
winOptions += ",top=" + winTop; //Create an option string for the
window.open() method that incorporates the calculated values for the top of
window
var zoomWindow = window.open("zoom.htm", "zoomwin", "width=960,height=600");
//Create variable named zoomWindow and assign to the window created by
window.open to display contents of zoom html file
zoomWindow.focus(); //Make the external photo gallery window the active
window
}
/* create event listeners and populate image elements */
function setUpPage() { //Call function
createEventListeners(); //Call function
populateFigures(); //Call function
}
/* run setUpPage() function when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}
Another bizarre thing that happened was that the logo/header image loads at first, then it immediately switches to one of the image gallery photos. I could not figure out how to fix that...
$(function() {
$('.forminput input[type="text"]').on('input propertychange', function() {
var $this = $(this);
var visible = Boolean($this.val());
$this.siblings('.glyphicon').toggleClass('hidden', !visible);
}).trigger('propertychange'); //nema potrebe za njim
$('.glyphicon').click(function() {
$(this).siblings('input[type="text"]').val('')
.trigger('propertychange').focus();
$('.results').empty();
});
$('.forminput').on('submit', function(event) {
event.preventDefault();
var typed = $('.nice').val();
$.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
action: 'query',
srsearch: typed,
format: 'json',
list: 'search'
}, function(data) {
$('.results').empty();
console.log(data);
$.each(data.query.search, function(index, item) {
$('.results').append("<a class='append' href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + "<div class='appendsearch'><h1>" + item.title + "</h1><p>" + item.snippet + "</p></div></a>")
})
})
})
})
body {
background: rgb(9, 43, 64);
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
height: 90vh;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.glyphicon {
color: #B2DFDB;
}
.textbox {
text-align: center;
}
.randomArticle {
color: #B2DFDB;
font-size: 1.4em;
}
.randomArticle:hover {
text-decoration: none;
color: pink;
cursor: pointer;
}
.randomArticle:link {
text-decoration: none;
color: #B2DFDB;
}
form {
margin-top: 30px;
margin-bottom: 30px;
}
form .nice {
width: 300px;
border-radius: 10px;
border: 5px solid orange;
background: transparent;
color: white;
padding: 7px 15px;
}
form .nice:focus {
outline: none;
}
.button {
border-radius: 10px;
border: 5px solid orange;
padding: 7px 15px;
margin-left: 20px;
background: transparent;
color: #B2DFDB;
}
.button:hover {
background: #00897B;
}
.button:focus {
outline: none;
}
.append {
color: black;
}
.append:hover {
text-decoration: none;
}
.appendsearch {
background: rgb(230, 230, 231);
margin: 20px 70px 20px 70px;
padding: 10px 20px;
color: black;
border-left: 4px solid rgb(9, 43, 64);
font-weight: 500;
}
.appendsearch h1 {
font-size: 20px;
font-weight: bold;
}
.appendsearch p {
font-size: 15px;
}
.appendsearch:hover {
border-left: 4px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='wrapper'>
<div class='textbox'>
<a class='randomArticle' href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>Click here for a random article</a>
<form class='forminput'>
<input class='nice' type='text'>
<span class='glyphicon glyphicon-remove hidden'></span>
<input class='button' type='submit' value='Search'>
</form>
</div>
<div class='results'></div>
</div>
</div>
</body
I cant get elements to be vertically centered before and after search results are inserted. I tried a lot of options but all I get is situation where search box is inserted on the left side of search result.
Here is the sample > http://codepen.io/Todorovic/pen/PGrqOp
What I did to make this work, is to add some line of code with jQuery.
To to center div horizontally and vertically change css:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : function() {return -$(this).outerWidth()/2},
'margin-top' : function() {return -$(this).outerHeight()/2}
});
For working with dimensions if you are not familiar check:
http://api.jquery.com/outerwidth/
http://api.jquery.com/outerheight/
And down in your code after submit form change again css of div to put it on top of page:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top':'0%',
'margin-top' : '30px',
'margin-left' : function() {return -$(this).outerWidth()/2},
});
After append results add margin-top for div:
$('.results').css({
'margin-top': $('.textbox').height()
})
})
Here is CodePen example:
http://codepen.io/anon/pen/NRZwEJ
Hope the elements are not dynamic, and you have a fixed structure of elements around the search box. After finalizing the element structure and the styling of them you have to identify the height of the textbox element. At the moment it is 47px. We will use this value in the following css.
Next add the following styles into the css.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
Please note that the value of the margin-top is half of the 47px( half of the textbox element. )
Edit
Add the following line into your jquery code.
$('.forminput').on('submit', function(event) {
$('.textbox').addClass('pull-up');
After that, update you css with the following additional styles.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
.textbox.pull-up {
position: relative;
top: auto;
}
Goal:
When you click on the button with icon reading-glass a, a text field should be entering from right to left.
After you have pressed the button, the cursor should be located in the text field and to be ready to retrieve input data and a color frame around the button for instance yellow should appear.
When you use to the curser outside of the text field and suddently you press the left button of your mouse, the text field and the yellow color around the button should disappear.
Problem:
I do not now how to create it.
Info:
*I'm using bootstrap and jQuery.
*Today, I do not have a available sourcecode.
What you need is two actions on your button:
show the input field
fire the form
The code below does that. The input will have a zero width on page load. The jQuery functions binds a click event on the button.
When it's clicked it will look if the input field has a width. When not, it will prevent the default action (submitting the form), and instead animates the input to a width of 200px. After that it focuses on the field.
The second time you click on the button, the input won't have zero width, so the buttons acts normal and will submit the form.
Hope it suits you.
$(function() {
$('#search-form button').on('click', function(e) {
var btn = $(this);
var inp = $(this).parent().find("input");
if( inp.width() == 0 ) {
e.preventDefault();
inp.animate({width: "200px"}, 500).focus();
btn.addClass('active-btn');
}
});
});
* {
box-sizing: border-box;
}
body {
background: black;
}
#search-form input {
color: #fff;
height: 50px;
background: #484848;
border: 0;
float: right;
width: 0;
}
#search-form button {
background: #484848;
color: #fff;
width: 50px;
height: 50px;
border: 1px solid #484848;
float: right;
}
#search-form .active-btn {
border: 1px solid #57ABD9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form">
<button type="submit">🔎</button><input type="text" name="search" />
</form>
I hope something like this:
Note - It is responsive too
DEMO and FULL SCREEN DEMO
HTML
<div id="sb-search" class="sb-search " >
<form>
<input class="sb-search-input " onkeyup="buttonUp();" placeholder="Enter your search term..." type="search" value="" name="search" id="search"/>
<input class="sb-search-submit" type="submit" value=""/>
<span class="sb-icon-search"><i class="glyphicon glyphicon-search"></i></span>
</form>
</div>
CSS [if needed]
body{
margin: 40px 60px;
background:#555;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
color:red;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
JS
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var isOpen = false;
$(document).mouseup(function(e){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
$('.sb-search-input').focus();
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
$('.sb-search-input').blur();
isOpen = false;
}
});
});