Develop Reference

How to change the border color of a div when clicking a radio button inside the same div?

So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}

function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.

This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>

Mouseover event with mousedown

I need your help. There is an APP Virtual-piano. When I click the key, the relevent note is reproduced.If the click is single, everything is fine. But when I hold down the mouse button and lead the cursor over the keys, the sound is not produced. What could be the problem? I suppose that the problem is in function on the line 15. But i don`t know how to fix it. Help me please. Thanks in advance.
This is JS code
const piano = document.querySelector(".piano");
const collectionPiano = document.querySelectorAll(".piano-key");
function setActiveKey(event) { //active status keys mouse event
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
}
function removeActiveKey(event) { //remove active status keys mouse event
event.target.classList.remove("piano-key-active", "piano-key-active-pseudo");
}
function playAudio (note) { //start function playAudio
const audio = document.querySelector(`audio[data-note="${note}"]`);
audio.currentTime = 0;
audio.play();
}
function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio
if (event.target.classList.contains("piano-key")) {
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
const note = event.target.dataset.note;
playAudio(note);
}
collectionPiano.forEach((el) => {
// el.addEventListener("mouseover", playAudio);
el.addEventListener("mouseover", setActiveKey);
el.addEventListener("mouseout", removeActiveKey);
});
};
function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio
collectionPiano.forEach((el) => {
el.classList.remove("piano-key-active", "piano-key-active-pseudo");
// el.removeEventListener("mouseover", playAudio);
el.removeEventListener("mouseover", setActiveKey);
el.removeEventListener("mouseout", removeActiveKey);
});
};
piano.addEventListener("mousedown", startKeyActive);
piano.addEventListener("mousedown", playAudio);
document.addEventListener("mouseup", stopKeyIActive);
window.addEventListener("keydown", (event) => { // Event keyboard - play audio
if (event.repeat) {
return;
}
const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`);
const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`);
audioKeys.currentTime = 0;
audioKeys.play();
pianoKey.classList.add('piano-key-active');
window.addEventListener("keyup", () => {
pianoKey.classList.remove('piano-key-active');
})
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
user-select: none;
}
a:focus {
outline: 0;
}
html {
background: #313940;
}
body {
min-height: 100vh;
background-color: #313940;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: #313940;
overflow-x: hidden;
}
.header {
text-align: center;
width: 100%;
border-bottom: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a);
}
.header-title {
line-height: 60px;
font-weight: 300;
color: #fff;
}
.main {
min-height: calc(100vh - 110px);
padding: 60px 10px 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: space-between;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.btn-container {
display: flex;
justify-content: space-between;
width: 306px;
height: 40px;
margin: 0 auto;
margin-bottom: 80px;
}
.btn {
width: 150px;
height: 40px;
padding: 0 10px;
background-color: #454c53;
border: 0;
border-radius: 2px;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 300;
color: #fff;
outline: 0;
cursor: pointer;
transition: 0.3s;
}
.btn:not(.btn-active):hover {
background-color: #515961;
}
.btn:active {
background-color: #00c9b7;
}
.btn-active {
background-color: #00b4a4;
}
.btn-active:hover {
background-color: #00c9b7;
}
.piano {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
height: 270px;
max-width: 560px;
margin: 0 auto 60px;
}
.piano-key {
position: relative;
width: 80px;
height: 270px;
background-color: rgba(255, 255, 255, 0.85);
border: 4px solid #313940;
border-radius: 0px 0px 12px 12px;
transition: 0.3s;
cursor: pointer;
}
.piano-key:hover {
background-color: #fff;
}
.keys-sharp {
position: absolute;
top: 0;
bottom: 0;
left: 53px;
right: 53px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.piano-key.sharp {
width: 54px;
height: 170px;
background-color: #313940;
border: 0;
border-radius: 0px 0px 9px 9px;
top: 0;
z-index: 3;
pointer-events: auto;
transform-origin: center top;
}
.piano-key.piano-key-active,
.piano-key.sharp.piano-key-active {
transform: scale(0.96);
}
.piano-key.none {
background-color: transparent;
border: 0;
border-radius: 0;
pointer-events: none;
}
.piano-key::before,
.piano-key::after {
content: attr(data-note);
position: absolute;
width: 40px;
height: 40px;
font-size: 26px;
line-height: 40px;
text-align: center;
color: #a2abb3;
bottom: -45px;
left: 20px;
transition: 0.3s;
pointer-events: none;
}
.piano-key::after {
display: none;
content: attr(data-letter);
}
.piano-key:hover::before,
.piano-key:hover::after {
color: #d7dfe6;
}
.sharp:active {
border-top: 0;
}
.piano-key.sharp::before,
.piano-key.sharp::after {
bottom: 175px;
left: 7px;
}
.piano-key.letter::before {
display: none;
}
.piano-key.letter::after {
display: block;
}
.piano-key-letter::before {
content: attr(data-letter);
}
.piano-key-remove-mouse:active::before {
color: #a2abb3;
}
.piano-key-active-pseudo:hover::after,
.piano-key-active-pseudo:hover::before,
.piano-key-active::after,
.piano-key-active::before {
color: #00b4a4;
}
.fullscreen {
position: fixed;
top: 120px;
right: 40px;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.3);
border: 0;
outline: 0;
background-size: contain;
transition: 0.3s;
cursor: pointer;
background-image: url("assets/svg/fullscreen-open.svg");
}
.fullscreen:hover {
background-color: rgba(255, 255, 255, 0.5);
}
:-webkit-full-screen .fullscreen {
background-image: url("assets/svg/fullscreen-exit.svg");
}
.footer {
border-top: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a);
}
.footer-container {
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.github {
display: block;
width: 120px;
height: 45px;
padding-left: 45px;
background-image: url("assets/svg/github.svg");
background-size: 35px;
background-repeat: no-repeat;
background-position: left center;
line-height: 45px;
color: #cbd5de;
font-size: 16px;
font-family: "Open Sans", sans-serif;
transition: 0.3s;
}
.github:hover {
color: #fff;
}
.rss {
display: block;
position: relative;
font-family: "Open Sans", sans-serif;
width: 86px;
height: 32px;
background-image: url("assets/svg/rss.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
padding-right: 111px;
}
.rss-year {
position: absolute;
bottom: 0;
right: 0;
font-size: 21px;
letter-spacing: -2px;
color: #cbd5de;
line-height: 0.9;
font-weight: bold;
transition: 0.3s;
}
.rss:hover .rss-year {
right: -5px;
letter-spacing: 0;
}
#media (max-width: 768px) {
.fullscreen {
top: 10px;
right: 20px;
width: 40px;
height: 40px;
}
}
#media (max-width: 600px) {
.main {
padding-top: 40px;
}
.piano {
width: 310px;
height: 160px;
}
.piano-key {
width: 44px;
height: 160px;
border-radius: 0px 0px 8px 8px;
border: 2px solid #313940;
}
.keys-sharp {
left: 26px;
right: 26px;
}
.piano-key.sharp {
width: 36px;
height: 100px;
border-radius: 0px 0px 6px 6px;
}
.piano-key::before,
.piano-key::after {
width: 30px;
height: 30px;
font-size: 22px;
bottom: -35px;
left: 7px;
font-size: 22px;
}
.piano-key.sharp::before,
.piano-key.sharp::after {
bottom: 115px;
left: 3px;
}
.btn-container {
width: 244px;
height: 40px;
margin-bottom: 80px;
}
.btn {
width: 120px;
height: 40px;
}
}
<!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">
<link href="assets/piano.ico" rel="shortcut icon">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Open+Sans:wght#300;400;800&display=swap"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>virtual-piano</title>
</head>
<body>
<header class="header">
<h1 class="header-title">Virtual Piano</h1>
</header>
<main class="main">
<div class="btn-container">
<button class="btn btn-notes btn-active">Notes</button>
<button class="btn btn-letters">Letters</button>
</div>
<div class="piano">
<div class="piano-key" data-key="68" data-letter="D" data-note="c"></div>
<div class="piano-key" data-key="70" data-letter="F" data-note="d"></div>
<div class="piano-key" data-key="71" data-letter="G" data-note="e"></div>
<div class="piano-key" data-key="72" data-letter="H" data-note="f"></div>
<div class="piano-key" data-key="74" data-letter="J" data-note="g"></div>
<div class="piano-key" data-key="75" data-letter="K" data-note="a"></div>
<div class="piano-key" data-key="76" data-letter="L" data-note="b"></div>
<div class="keys-sharp">
<div class="piano-key sharp" data-key="82" data-letter="R" data-note="c♯"></div>
<div class="piano-key sharp" data-key="84" data-letter="T" data-note="d♯"></div>
<div class="piano-key sharp none"></div>
<div class="piano-key sharp" data-key="85" data-letter="U" data-note="f♯"></div>
<div class="piano-key sharp" data-key="73" data-letter="I" data-note="g♯"></div>
<div class="piano-key sharp" data-key="79" data-letter="O" data-note="a♯"></div>
</div>
</div>
<audio data-key="75" data-note="a" src="assets/audio/a.mp3"></audio>
<audio data-key="79" data-note="a♯" src="assets/audio/a♯.mp3"></audio>
<audio data-key="76" data-note="b" src="assets/audio/b.mp3"></audio>
<audio data-key="68" data-note="c" src="assets/audio/c.mp3"></audio>
<audio data-key="82" data-note="c♯" src="assets/audio/c♯.mp3"></audio>
<audio data-key="70" data-note="d" src="assets/audio/d.mp3"></audio>
<audio data-key="84" data-note="d♯" src="assets/audio/d♯.mp3"></audio>
<audio data-key="71" data-note="e" src="assets/audio/e.mp3"></audio>
<audio data-key="72" data-note="f" src="assets/audio/f.mp3"></audio>
<audio data-key="85" data-note="f♯" src="assets/audio/f♯.mp3"></audio>
<audio data-key="74" data-note="g" src="assets/audio/g.mp3"></audio>
<audio data-key="73" data-note="g♯" src="assets/audio/g♯.mp3"></audio>
<button class="fullscreen openfullscreen"></button>
</main>
<footer class="footer">
<div class="footer-container">
<a class="github" href="#" target="_blank" rel="noopener noreferrer">github</a>
<a class="rss" href="https://rs.school/js/" target="_blank" rel="noopener noreferrer">
<span class="rss-year">'21</span>
</a>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

I did it, here is the final code JS
const piano = document.querySelector(".piano");
const collectionPiano = document.querySelectorAll(".piano-key");
function playAudio (event) { //active status keys mouse event
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
const note = event.target.dataset.note;
const audio = document.querySelector(`audio[data-note="${note}"]`);
audio.currentTime = 0;
audio.play();
}
function removeActiveKey(event) { //remove active status keys mouse event
event.target.classList.remove("piano-key-active", "piano-key-active-pseudo");
}
function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio
if (event.target.classList.contains("piano-key")) {
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
}
collectionPiano.forEach((el) => {
el.addEventListener("mouseover", playAudio);
el.addEventListener("mouseout", removeActiveKey);
});
};
function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio
collectionPiano.forEach((el) => {
el.classList.remove("piano-key-active", "piano-key-active-pseudo");
el.removeEventListener("mouseover", playAudio);
el.removeEventListener("mouseout", removeActiveKey);
});
};
piano.addEventListener("mousedown", startKeyActive);
piano.addEventListener("mousedown", playAudio);
document.addEventListener("mouseup", stopKeyIActive);
window.addEventListener("keydown", (event) => { // Event keyboard - play audio
if (event.repeat) {
return;
}
const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`);
const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`);
audioKeys.currentTime = 0;
audioKeys.play();
pianoKey.classList.add('piano-key-active');
window.addEventListener("keyup", () => {
pianoKey.classList.remove('piano-key-active');
})
});

How to add inline CSS to dynamically created elements with Javascript?

I would like to add inline CSS to the left and right messages that are generated, for example the left text is red and the right text is blue. (I know it's best to style in the CSS, but I'm testing something else). So I will have this HTML:
<ul class="messages">
<li class="message left appeared">
<div class="text_wrapper">
<p class="text" style="color:red;">blabla</p>
</div>
</li>
<li class="message right appeared">
<div class="text_wrapper">
<p class="text" style="color:blue;">blabla</p>
</div>
</li>
</ul>
Please see the code as reference for the functionality. Many thanks for your help.
(function() {
var Message;
Message = function({
text: text1,
message_side: message_side1
}) {
this.text = text1;
this.message_side = message_side1;
this.draw = () => {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(this.message_side).find('.text').html(this.text);
$('.messages').append($message);
return setTimeout(function() {
return $message.addClass('appeared');
}, 0);
};
return this;
};
$(function() {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function() {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function(text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({text, message_side});
message.draw();
return $messages.animate({
scrollTop: $messages.prop('scrollHeight')
}, 300);
};
$('.send_message').click(function(e) {
return sendMessage(getMessageText());
});
$('.message_input').keyup(function(e) {
if (e.which === 13) { // enter key
return sendMessage(getMessageText());
}
});
});
}).call(this);
* {
box-sizing: border-box;
}
.chat_window {
position: absolute;
width: calc(100% - 20px);
max-width: 600px;
height: 440px;
background-color: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid #ddd;
overflow: hidden;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .text_wrapper {
background-color: #ddd;
margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
color: #000;
margin: 0;
}
.messages .message.right .text_wrapper {
background-color: #ddd;
margin-right: 20px;
float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #ddd;
}
.messages .message.appeared {
opacity: 1;
}
.messages .message .text_wrapper {
display: inline-block;
padding: 20px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
.messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
.messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 20px 20px;
position: absolute;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
background-color: #ddd;
border: 2px solid #ddd;
color: #000;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #000;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}
.message_template {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<input class="message_input" placeholder="Type here..." />
</div>
<div class="send_message">
<div class="icon"></div>
<div class="text">
Send
</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="text_wrapper">
<p class="text"></p>
</div>
</li>
</div>

You can also add:
$(".left").css("color", "yellow");
$(".right").css("color", "blue");

$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');

Using jQuery you can add inline style to an element
$(".left").attr("style","whatever");
$(".right").attr("style","whatever");

You can use the classList of every HTML component. Simply, select the DOM element with class left (or right) and use the add method to assign whatever class:
var elementLeft = $('.left')
elementLeft.classList.add('yourClass')
You can also use the methods remove to remove any class, or toggle to toggle some class..
elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')
The Element.classList contains more examples. This solution works without jQuery or others javascript library, but use the standard API.

Two divs to simultaneously animate

I am attempting to create a simple slide show type feature on a web page. I have created the slide show, but run into issues smoothly transitioning the next slide into frame when the user presses the 'next slide' button. Here is my code
var $slideshow = $('#slideshow');
var sswidth = $slideshow.width();
var ssheight = $slideshow.height();
var currentslide = 0;
$('.slide').eq(currentslide).addClass('show');
$('.btnslideshow.right').click(function(){
var left = $('.slide.show').offset().left;
$('.slide.show').animate({'left': '+=' + sswidth + 'px'}, 'slow', function(){
$('.slide').eq(currentslide).removeClass('show');
$('.slide').eq(currentslide).css({left: '0px'});
currentslide+=1;
if (currentslide > $('.slide').length-1) currentslide = 0;
$('.slide').eq(currentslide).addClass('show', 'slow');
});
});
.background {
background-color: lightgray;
border-color: gray;
border-style: solid;
border-width: 1px 0 1px 0;
width: 100%;
}
.btnslideshow {
background: lightgray;
height: 25px;
position: relative;
top: 77.5px;
width: 25px;
box-sizing: border-box;
border-style:inset;
z-index: 1;
}
.btnslideshow:hover {
background: lightblue;
border-style:outset;
}
.btnslideshow.left {
float: left;
left: 7%;
transform: rotate(180deg);
}
.btnslideshow.right {
float:right;
right: 7%;
}
#nav {
height: 25px;
text-align: right;
}
.navHeader {
border: none;
background-color: transparent;
display: inline;
font-size: 13px;
font-variant: small-caps;
font-weight: 600;
padding-right: 20px;
}
.navHeader:nth-child(1) {
margin-right:10px;
}
.navHeader:hover {
font-size: 16px;
}
.show {
display:inline-block !important;
}
#slideshow {
background-color: white;
border: 1px solid black;
height:200px;
margin-left: 12.5%;
overflow:hidden;
width:75%;
}
.slide {
border:1px solid black;
display: none;
height:100%;
position:relative;
width:0px;
z-index: 0;
}
.slide.show {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<div class="navone">
<button class="navHeader">
About
</button>
<button class="navHeader">
Contact
</button>
</div>
</div>
<div id="container">
<div class="background">
<img class="btnslideshow left" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<img class="btnslideshow right" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<div id="slideshow">
<div class="slide">
Test slide
</div>
<div class="slide">
Test slide 22222
</div>
</div>
</div>
</div>
As you can see, my slide show is essentially working, but the transition is pretty rough. What I am wanting is for the second slide to move into frame while the first slide is moving out, with no space in between them. I have tried animating the width on the second slide inside the callback function of the first animation, outside the first animation, and other things but I can't seem to get it.

I made quite a few changes in your code.
I made the #slideshow div position:relative and the slides position:abosulte. Then made some over all changes in the js structure, Introduced the queue:false in the animate function, etc.
var $slideshow = $('#slideshow');
var sswidth = $slideshow.width();
var ssheight = $slideshow.height();
var currentslide = 0;
var duration = 1000;
$('.slide').eq(currentslide).addClass('show');
$('.slide').not('.show').css('left', -(sswidth+3) + 'px');
$('.btnslideshow.right').click(function() {
var left = $('.slide.show').offset().left;
$('.slide.show').animate({
'left': sswidth + 'px'
}, {
duration: duration,
queue: false,
complete:function(){
$(this).delay(20).css('left', -(sswidth+3) + 'px').removeClass('show');
}
});
currentslide++;
if (currentslide > $('.slide').length - 1) currentslide = 0;
$('.slide').eq(currentslide).animate({
left: '0px'
}, {
duration: duration,
queue: false
}).delay(duration).addClass('show');
});
.background {
background-color: lightgray;
border-color: gray;
border-style: solid;
border-width: 1px 0 1px 0;
width: 100%;
}
.btnslideshow {
background: lightgray;
height: 25px;
position: relative;
top: 77.5px;
width: 25px;
box-sizing: border-box;
border-style: inset;
z-index: 1;
}
.btnslideshow:hover {
background: lightblue;
border-style: outset;
}
.btnslideshow.left {
float: left;
left: 7%;
transform: rotate(180deg);
}
.btnslideshow.right {
float: right;
right: 7%;
}
#nav {
height: 25px;
text-align: right;
}
.navHeader {
border: none;
background-color: transparent;
display: inline;
font-size: 13px;
font-variant: small-caps;
font-weight: 600;
padding-right: 20px;
}
.navHeader:nth-child(1) {
margin-right: 10px;
}
.navHeader:hover {
font-size: 16px;
}
.show {
display: inline-block !important;
}
#slideshow {
background-color: white;
border: 1px solid black;
height: 200px;
margin-left: 12.5%;
overflow: hidden;
width: 75%;
position:relative;
}
.slide {
border: 1px solid black;
height: 100%;
position: absolute;
width: 100%;
z-index: 0;
display:none;
}
.slide.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<div class="navone">
<button class="navHeader">
About
</button>
<button class="navHeader">
Contact
</button>
</div>
</div>
<div id="container">
<div class="background">
<img class="btnslideshow left" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<img class="btnslideshow right" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<div id="slideshow">
<div class="slide">Test slide</div>
<div class="slide">Test slide 22222</div>
</div>
</div>
</div>

Placing <a> links on top of onclick div

I made a content tile that when clicked, activates another part of the screen. On the tile, I have a couple links that, when clicked, go to new pages. I made a non-javascript version that works fine.
No javascript:
https://jsfiddle.net/raazqqks/2/
HTML:
<div class="tile activeTile" id="response0">
<div class="responseContainer">
<div class="left">
<h4 class="title">
<a class="topLink" href="javascript:alert('Link clicked')">Title</a>
</h4>
<p>Foo bar</p>
<p>Foo bar?</p>
<p class="extra">
<a class="topLink" href="javascript:alert('Link clicked')">Extra foo bar!</a>
</p>
</div>
<div class="bonus">
<p>Bonus</p>
</div>
<a class="noJavaLink" id="0" href="javascript:alert('Tile clicked');"></a>
</div>
</div>
CSS:
.responseContainer {
position: relative;
overflow: hidden;
z-index: 0;
transition: all linear .2s;
border: 1px solid grey;
border-radius: 4px;
background-color: white;
}
.responseContainer p {
margin: 0;
}
.tile {
width: 80%;
text-align: left;
margin: 16px 48px 16px 32px;
margin-top: 0;
transition: all linear .2s;
z-index: 0;
border-radius: 4px;
background-repeat: no-repeat;
}
.activeTile {
width: 90%;
border-radius: 4px;
color: white;
}
.activeTile > div {
background-color: rgba(33, 33, 33, .5);
}
.left {
float: left;
margin: 10px;
margin-top: -10px;
max-width: 50%;
}
.title {
font-size: 1.2em;
}
.title h4 {
margin: 20px 0 20px;
}
.bonus {
float: right;
margin-top: 10px;
margin: 10px;
font-size: 1.5em;
max-width: 50%;
}
.topLink {
position: relative;
z-index: 100;
}
.noJavaLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
background-color: white;
border-radius: 4px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.active .noJavaLink {
pointer-events: none;
cursor: default;
}
I want to add simple animations to it, so if javascript is available, this version loads.
Javascript:
https://jsfiddle.net/n4svaLut/
Javascript:
document.addEventListener("DOMContentLoaded", setJavascriptTileAnimation(), false );
/* Set onclick events for tile animation
|
*/
function setJavascriptTileAnimation() {
var tiles = document.getElementsByClassName('tile')
var links = document.getElementsByClassName('noJavaLink');
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
var id = tile['id'];
tile.onclick = function() {
changeActiveTile(this.id);
//return false;
};
links[i].removeAttribute('href');
};
}
/* Toggle active tile
|
*/
function changeActiveTile(id) {
id_number = getIdNumber(id);
active_tile = document.getElementsByClassName('tile activeTile')[0];
active_tile.classList.remove('activeTile');
setTimeout(function() {
tile = document.getElementById(id);
tile.classList.add('activeTile');
}, 300);
}
function getIdNumber(id) {
return id.replace( /^\D+/g, '');
}
Notice how the links only work on a double click. Ive been playing around with this for two days and havent made any progress at all. Any ideas?
SOLUTION: Remove 'return false' from the onclick setter.