We Keep Coding

JavaScript Not Manipulating Images

I'm new to Javascript and I have an assignment where I essentially just copied code from the instructions but when I go to run the whole website the JS doesn't do anything.
The objective is to add a click event handler to each of the thumbnail images so that when the smaller image is clicked, your code will show the larger version of the image in the <img> element within the <figure> element.
This same event handler will also set the <figcaption> text of the <figure> to the clicked thumbnail image's title attribute. The click event handler will be attached to the <div id="thumbnails"> element and not to the individual <img> elements.
This is what the JS should do:
When you click on one of the thumbnail images, the corresponding larger image is displayed as the main figure.
When you mouse over the main figure, the title should display against a slightly opaque white background and then fades once the mouse pointer is moved off
window.addEventListener("load", function() {
/*Noah Ratcliff*/
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
var clickedImageSource = e.target.src;
var newSrc = clickedImageSource.replace("small", "medium");
var featuredImage = document.querySelector("#featured img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
}
});
var featured = document.getElementById("featured");
thumbs.addEventListener("mouseover", function(e) {
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0.80;
caption.innerHTML = document.querySelector("#featured img").title;
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0;
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
#featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
#featured figcaption {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
background-color: floralwhite;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
opacity: 0;
padding: 22px 2px 2px 2px;
text-align: center;
display: block;
}
#thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
#thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" alt="big version">
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>

There are several things that are not right in the code: put the event listener on the thumbs instead of figure, abusing id's for css, using the style javascript instead of adding and removing classes (which makes it harder and is a bad practice in general), using querySelector when there is no need (witch also makes your code harder to read and querySelector is slower than getElementById).
Here is an example which should do what I understand you want. I'm not sure tough if I got the opacity thing right. There you will have to work.
window.addEventListener("load", function() {
/*Noah Ratcliff*/
const thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
const clickedImageSource = e.target.src;
const newSrc = clickedImageSource.replace("small", "medium");
const featuredImage = document.getElementById("featured-img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
featuredImage.alt = e.target.alt
}
});
const featured = document.getElementById("featured");
featured.addEventListener("mouseover", function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.add("captition-hovered");
});
featured.addEventListener("mouseout",function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.remove("captition-hovered");
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
.featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
.captition-hovered {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
padding: 22px 2px 2px 2px;
text-align: center;
position: absolute;
z-index:1;
top: 50%;
opacity: 1;
background: rgba(255,250,240, 0.51);
}
.thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
.thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
.featured {
position: relative;
}
.featured-img:hover {
transition:opacity 1.5s;
opacity: 0.5;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure class="featured" id="featured">
<img class="featured-img" id="featured-img" src="https://www.w3schools.com/css/img_lights.jpg" title="Battle" alt="big version">
<figcaption id="fig-captition">Battle</figcaption>
</figure>
<div class="thumbnails" id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>
I also replaced var keyword since now is really indicated to use const and let for your variables.
inline style css link
Also notice how I just added and removed a class instead of manipulating the style one by one. Is way easier to maintain and read. Not to mention that inline styling is overwriting any other type of css. So if you want to change it later the only way is inline styling which can be annoying in certain circumstances.
query selector vs getDocumentById

event namespace not working in "mouseup" event

I'm trying to achieve event.namespace on a mouseup event but it doesn't seem to work, it always logs undefined
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
$(document).on("mouseup", function(event) {
console.log(event)
banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
})
$(document).on("mouseup.namespace", function(event) {
console.log(event.namespace)
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Here's a fiddle of what I tried: http://jsfiddle.net/xpvt214o/221833/ Any idea?

You are doing it in a wrong way. Try this.
var banner = $("#banner-message")
var button = $("button")
$(document).on("namespace.someNamespace", function(event) {
console.log(event);
console.log(event.namespace);
banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
});
$(document).on("mouseup", function(event) {
$(document).trigger('namespace.someNamespace');
});
You need a normal event (e.g. mouseup) to trigger the namespace event.

event.namespace is used by jQuery plugins to organize custom events
event.namespace | jQuery API Documentation
This will likely be used primarily by plugin authors who wish to handle tasks differently depending on the event namespace used.
Whatever you are trying to do, it seems like a namespace isn't the tool you're looking for.

you need to trigger mouseup.namespace
example here https://api.jquery.com/event.namespace/
also, change your namespace name from mouseup.namespace as it will trigger the event twice
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
$(document).on("mouseup", function(event) {
console.log(event);
banner.toggleClass("alt");
$(this).trigger("mouseup.namespace");
})
$(document).on("mouseup.namespace", function(event) {
console.log(event.namespace);
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>

jQuery slideToggle function not having the desired effect on my input box

I have an input box that I'd like to slide up/down so that it looks like it is coming from behind the element above.
My input HTML looks like this:
<input type="text" placeholder="Add New Todo">
The CSS for the input looks like this:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
And my JS looks like this:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
Currently, the slide gets stuck at the start/finish, as it seems the height cannot be reduced to 0.
Here is a full example of what happens.
How can I make my input box animate smoothly?

I'd wrap the input in a containing element with hidden overflow and animate that one.
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})
#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>

You can add condition
http://jsfiddle.net/pr2szjhu/1/
<input type="text" placeholder="Add New Todo" id="test">
JS
$("#dropdown").click(function(){
if ($('#test').is(':visible')){
$("#test").removeAttr('placeholder');
$("input[type='text']").slideToggle(1800);
}else{
$("input[type='text']").slideToggle(1800,function() {
$("#test").attr('placeholder','Add New Todo');
});
}
})

fadeTo with Jquery not working in Chrome on Retina Macbook Pro

I'm trying to use jQuery to fade out elements in a scrolling div (not the main window) as they scroll out of view. I'm using the fadeTo function and checking for the position of the element as the user scrolls.
See this stackoverflow thread for what I'm basing my code on.
Everything seems to work fine on my non-retina monitor (using Chrome). The top element is fading out right at the top of the scrolling div like its supposed to.
However, when I perform the same actions using my macbook pro w/ retina display, I get weird behavior. For some of the elements (not all) in the scrolling div, The fadeTo animation only fades a part of the div (the bottom part). The top half (or more sometimes) is unchanged.
EDIT: WAS ABLE TO MAKE A DEMO (Try viewing demo on monitor vs. retina screen).
Any idea why this would happen? Why would this behave differently on my retina screen than on my monitor (both using same version of Chrome)?
I should also mention that all of this html is being injected into existing web pages, so that the scroll div sits on top of the page in the top right corner (fixed position). I'm building a chrome extension... My code:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});
#volleyDiv {
position:fixed;
top: 20px;
right: 30px;
padding: 10px;
z-index: 999999999999999999999999999;
box-sizing: initial;
background: none;
border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
position: static;
display: none;
max-height: 300px;
overflow-y: scroll;
background: none;
border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
margin: 5px 5px 5px 5px;
padding: 5px;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
width: 155px;
background: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #262626;
line-height: 1.5;
word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: #63c5e2 !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: gray !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
font-weight: normal;
color: gray;
margin: 0px 5px 0px 0px;
line-height: 1.5;
}
.volleyReplyAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
float: right;
margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
float: right;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
background: #63c5e2;
padding: 2px 10px 2px 10px;
margin: 0px 0px 100px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>

The solution I found was to add position: relative in the css for .volleyCommentStatus, .volleyReplyStatus.
It seems it was inheriting position: static which I assume was causing the retina screen problem.

Call additional option methods in JavaScript

I'm using stickjs script and can't seem to call "options" method in code. I've pasted it below.
I'm not sure if I need first initialize "options" ie. .sticky(options ({options_here, option_2});
I've tried both ways, but it is till not calling another css class when the div sticks to top:
You can see I've done for 2 options: { topSpacing: 0, className: "#newheader" } - #newheader should be showing a different color per CSS.
What am I missing? Thanks!
<html>
<head>
<title>Sticky Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(window).load(function(){
$("#header").sticky({ topSpacing: 0, className: "#newheader" })
});
</script>
<style>
body {
height: 10000px;
padding: 0;
margin: 0;
}
#header {
background: #bada55;
color: white;
font-family: Droid Sans;
font-size: 18px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
#newheader {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
</style>
</head>
<body>
<p>This is test this is text this is text at the top.</p>
<div id="header">
<p>This is the sticky thingy that is really cool.</p>
</div>
<p>This is test this is text this is text at the bottom.</p>
</body>
</html>

The ClassName property adds a CLASS-name to the element. So its no ID!! Try:
$("#header").sticky({ topSpacing: 0, className: "newheader" });
And alter your css like:
.newheader {
background: #FF0004;
.....
}
UPDATE:
After reading the Sticky documentation it was clear... The new class will be added to the parent element. So you must change you css cascading to:
.newheader #header {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
width:100%;
box-sizing:border-box;
}
That will save your day!