jquery adds .active class to all elements when page is loaded

jquery adds .active class to all elements when page is loaded - javascript

I'm creating a jquery webplayer.
My problem is when the page loads the song titles in the #playlist have a .active class. And further more the <div id="audio-info"> part displays data for all songs in the playlist.
But when I select a song from the playlist, everything is working as it should, the active song takes the .active class and the #audio-info only displays info for the active song.
I'm not sure why this is not working correctly when the page loads.
Can someone here take a look at the code and guide me?
The bug is probably around this chunk of code in the js $('#playlist li').removeClass('active');
element.addClass('active');
here is a snippet
$(document).ready(function() {
var audio;
//Hide pause
$('#pause').hide();
initAudio($('#playlist li:first-child'));
function initAudio(element) {
var song = element.attr('song');
var title = element.text();
var artist = element.attr('artist');
// Audio Object
audio = new Audio('media/' + song);
//insert audio info
$('.artist').text(artist);
$('.title').text(title);
console.log(audio);
$('#playlist li').removeClass('active');
element.addClass('active');
}
// play button
$('#play').click(function() {
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
//Pause button
$('#pause').click(function() {
audio.pause();
$('#play').show();
$('#pause').hide();
});
//Next button
$('#next').click(function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});
$('#playlist li').click(function() {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
audio.play();
showDuration();
});
//volume control
$('#volume').change(function() {
audio.volume = parseFloat(this.value / 100);
console.log(audio.volume);
});
//Time/showDuration
function showDuration() {
$(audio).bind('timeupdate', function() {
//Get Hours and minutes
var s = parseInt(audio.currentTime % 60);
var m = parseInt(audio.currentTime / 60) % 60;
if (s < 10) {
s = '0' + s;
}
$('#duration').html(m + ':' + s);
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100 / audio.duration) * audio.currentTime);
}
$('#progress').css('width', value + '%');
});
};
var promise = audio.play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
});
/*************Player ******/
.clearfix {
clear: both;
}
.audio-player {
margin-top: 20px;
margin-bottom: 20px;
}
.progressbar-container {
display: inline-flex;
width: 100px;
margin: 0;
position: relative;
top: 7px;
}
.progress-bar {
background-color: #c2002d !important;
}
#audio-info {
text-align: center;
background-color: lightgrey;
color: #c2002d;
}
input#volume {
width: 95%;
margin-left: 2%;
-webkit-appearance: none !important;
background: #ccc;
height: 1px;
margin-bottom: 20px;
}
input#volume::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: url(/uploads/images/player//knobred.png) no-repeat center center;
background-size: 10px 10px;
width: 10px;
height: 10px;
cursor: pointer;
}
#buttons {
width: 15%;
display: block;
/*margin: 15px auto;*/
/*margin-left: 23px;*/
/* overflow: auto;*/
}
button#play {
width: 20px;
height: 20px;
background: url(/uploads/images/player/play.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
button#pause {
width: 20px;
height: 20px;
background: url(/uploads/images/player/pause.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
/*button#prev{
width: 20px;
height: 20px;
background: url(../images/rev.svg) no-repeat center center;
background-size: 15px 15px;
}*/
#tracker {
position: relative;
width: 5%;
}
#playlist {
padding-inline-start: 0px !important;
}
#playlist li {
list-style: none;
cursor: pointer;
}
.active {
color: #c2002d;
}
#playlist>li>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
}
a>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
display: inline-block;
}
/*.info-dot{
height: 15px;
background: url(../images/player/info.svg) no-repeat center center;
cursor: pointer;
display: inline-block;
}*/
/************Player ends *********/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-9">
sfs
</div>
<div class="col-md-3">
<div class="audio-player">
<div id="audio-info">
<span class="artist"></span> - <span class="title"></span>
</div>
<input id="volume" type="range" min="0" max="100" value="50">
<br>
<div id="buttons">
<span>
<!-- <button id="prev"> </button> -->
<button id="play"></button>
<button id="pause"></button>
<!-- <button id="stop"></button>-->
<!-- <button id="next"> >> </button>-->
</span>
</div>
<div class="clearfix"></div>
<div id="tracker">
<div id="progress-bar" class="progress">
<span id="progress" class="progress-bar" role="progressbar"></span>
</div>
<span id="duration"></span>
</div>
<div class="clearfix"></div>
<ul id="playlist" class="hidden">
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="somesong.mp3" cover="cover1.jpg" artist="someartist">somesong.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song2.mp3" cover="cover1.jpg" artist="someartist">song2.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song3.mp3" cover="cover1.jpg" artist="someartist">song3.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- row -->
</div>
<!--Container -->

You currently use li:first-child, but since each li has a different parent, they are all first-child of their respective parents. Use #playlist > div:first-child li
$(document).ready(function() {
var audio;
//Hide pause
$('#pause').hide();
initAudio($('#playlist > div:first-child li'));
function initAudio(element) {
var song = element.attr('song');
var title = element.text();
var artist = element.attr('artist');
// Audio Object
audio = new Audio('media/' + song);
//insert audio info
$('.artist').text(artist);
$('.title').text(title);
console.log(audio);
$('#playlist li').removeClass('active');
element.addClass('active');
}
// play button
$('#play').click(function() {
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
//Pause button
$('#pause').click(function() {
audio.pause();
$('#play').show();
$('#pause').hide();
});
//Next button
$('#next').click(function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});
$('#playlist li').click(function() {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
audio.play();
showDuration();
});
//volume control
$('#volume').change(function() {
audio.volume = parseFloat(this.value / 100);
console.log(audio.volume);
});
//Time/showDuration
function showDuration() {
$(audio).bind('timeupdate', function() {
//Get Hours and minutes
var s = parseInt(audio.currentTime % 60);
var m = parseInt(audio.currentTime / 60) % 60;
if (s < 10) {
s = '0' + s;
}
$('#duration').html(m + ':' + s);
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100 / audio.duration) * audio.currentTime);
}
$('#progress').css('width', value + '%');
});
};
var promise = audio.play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
});
/*************Player ******/
.clearfix {
clear: both;
}
.audio-player {
margin-top: 20px;
margin-bottom: 20px;
}
.progressbar-container {
display: inline-flex;
width: 100px;
margin: 0;
position: relative;
top: 7px;
}
.progress-bar {
background-color: #c2002d !important;
}
#audio-info {
text-align: center;
background-color: lightgrey;
color: #c2002d;
}
input#volume {
width: 95%;
margin-left: 2%;
-webkit-appearance: none !important;
background: #ccc;
height: 1px;
margin-bottom: 20px;
}
input#volume::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: url(/uploads/images/player//knobred.png) no-repeat center center;
background-size: 10px 10px;
width: 10px;
height: 10px;
cursor: pointer;
}
#buttons {
width: 15%;
display: block;
/*margin: 15px auto;*/
/*margin-left: 23px;*/
/* overflow: auto;*/
}
button#play {
width: 20px;
height: 20px;
background: url(/uploads/images/player/play.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
button#pause {
width: 20px;
height: 20px;
background: url(/uploads/images/player/pause.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
/*button#prev{
width: 20px;
height: 20px;
background: url(../images/rev.svg) no-repeat center center;
background-size: 15px 15px;
}*/
#tracker {
position: relative;
width: 5%;
}
#playlist {
padding-inline-start: 0px !important;
}
#playlist li {
list-style: none;
cursor: pointer;
}
.active {
color: #c2002d;
}
#playlist>li>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
}
a>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
display: inline-block;
}
/*.info-dot{
height: 15px;
background: url(../images/player/info.svg) no-repeat center center;
cursor: pointer;
display: inline-block;
}*/
/************Player ends *********/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-9">
sfs
</div>
<div class="col-md-3">
<div class="audio-player">
<div id="audio-info">
<span class="artist"></span> - <span class="title"></span>
</div>
<input id="volume" type="range" min="0" max="100" value="50">
<br>
<div id="buttons">
<span>
<!-- <button id="prev"> </button> -->
<button id="play"></button>
<button id="pause"></button>
<!-- <button id="stop"></button>-->
<!-- <button id="next"> >> </button>-->
</span>
</div>
<div class="clearfix"></div>
<div id="tracker">
<div id="progress-bar" class="progress">
<span id="progress" class="progress-bar" role="progressbar"></span>
</div>
<span id="duration"></span>
</div>
<div class="clearfix"></div>
<ul id="playlist" class="hidden">
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="somesong.mp3" cover="cover1.jpg" artist="someartist">somesong.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song2.mp3" cover="cover1.jpg" artist="someartist">song2.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song3.mp3" cover="cover1.jpg" artist="someartist">song3.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- row -->
</div>
<!--Container -->

Related

Countdown before download only working on 1st button

I have got this Download button with a few seconds Timer before download but unfortunately, it is working only on 1st button but not on other buttons.
I want it to work on each and every download button properly and I am not able to figure out how to fix this issue. Please help!
I have Attached a CSS, HTML, and JavaScript that I have been using.
document.getElementById("download_button").addEventListener("click", function(event) {
event.preventDefault();
var timeleft = 3;
var downloadTimer = setInterval(function function1() {
document.getElementById('download').style.display = "none";
document.getElementById("timer").innerHTML = "Wait " + timeleft + "";
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("timer").innerHTML = ""
window.open(document.querySelector('#downloadbutton a').href, '_blank');
document.getElementById('download').style.display = "";
}
timeleft -= 1;
}, 1000);
});
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#download_button {
border: none;
margin-top: 0px;
padding: 10px;
width: 200px;
font-family: "montserrat", sans-serif;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
color: #fff;
font-size: 16px;
transition: 0.4s;
line-height: 28px;
outline: none;
}
.button-1 {
background: #f12711;
}
.button-2 {
background: #0575E6;
}
.button-3 {
background: #fe8c00;
}
#download_button:hover {
background: #000000;
}
.title {
font-weight: bold;
}
<div id="downloadbutton" style="text-align: center;">
<a href="http:///www.google.com">
<button id="download_button" class="button-1">
<div class="title">Document Title 1</div>
<div id="download">DOWNLOAD</div>
<div id="timer"></div>
</button>
</a>
</div>
<br>
<div id="downloadbutton" style="text-align: center;">
<a href="http:///www.google.com">
<button id="download_button" class="button-2">
<div class="title">Document Title 2</div>
<div id="download">DOWNLOAD</div>
<div id="timer"></div>
</button>
</a>
</div>
<br>
<div id="downloadbutton" style="text-align: center;">
<a href="http:///www.google.com">
<button id="download_button" class="button-3">
<div class="title">Document Title 3</div>
<div id="download">DOWNLOAD</div>
<div id="timer"></div>
</button>
</a>
</div>

Simple solution using different IDs
function download(btn) {
id = Number(btn.id.slice("downloadbutton".length+1))
var timeleft = 3;
var downloadTimer = setInterval(function function1() {
document.getElementById('download' + id).style.display = "none";
document.getElementById("timer" + id).innerHTML = "Wait " + timeleft + "";
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("timer" + id).innerHTML = ""
//window.open(document.querySelector('#downloadbutton' + id + ' a').href, '_blank');
document.getElementById('download' + id).style.display = "";
}
timeleft -= 1;
}, 1000);
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#download_button {
border: none;
margin-top: 0px;
padding: 10px;
width: 200px;
font-family: "montserrat", sans-serif;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
color: #fff;
font-size: 16px;
transition: 0.4s;
line-height: 28px;
outline: none;
}
.button-1 {
background: #f12711;
}
.button-2 {
background: #0575E6;
}
.button-3 {
background: #fe8c00;
}
#download_button:hover {
background: #000000;
}
.title {
font-weight: bold;
}
<div id="downloadbutton1" style="text-align: center;">
<button id="download_button1" class="button-1" onclick="download(this)">
<div class="title">Document Title 1</div>
<div id="download1">DOWNLOAD</div>
<div id="timer1"></div>
</button>
</div>
<br>
<div id="downloadbutton2" style="text-align: center;">
<button id="download_button2" class="button-2" onclick="download(this)">
<div class="title">Document Title 2</div>
<div id="download2">DOWNLOAD</div>
<div id="timer2"></div>
</button>
</div>
<br>
<div id="downloadbutton3" style="text-align: center;">
<button id="download_button3" class="button-3" onclick="download(this)">
<div class="title">Document Title 3</div>
<div id="download3">DOWNLOAD</div>
<div id="timer3"></div>
</button>
</div>

You are missing the basic rule of html,
The simple difference between the two is that while a class can be
used repeatedly on a page, an ID must only be used once per page.
Therefore, it is appropriate to use an ID on the div element that is
marking up the main content on the page, as there will only be one
main content section. In contrast, you must use a class to set up
alternating row colors on a table, as they are by definition going to
be used more than once...
Source: Whats-the-difference-between-an-id-and-a-class
Either you can use classes or you can use different ids, or both depending on requirements.
I have changed download_button from id to class and added EventListener with loop, the reason of using class is you are adding same EventListener to all buttons.
Then I have used different but identical Ids to download, downloadbutton and timer because your function need to select them individually, I used numbers with Id because it will be easy to select with the index of the item.
document.querySelectorAll(".download_button").forEach(function(item, index) {
item.addEventListener("click", function(event) {
event.preventDefault();
var timeleft = 3;
var downloadTimer = setInterval(function function1() {
document.getElementById('download_' + index).style.display = "none";
document.getElementById("timer_" + index).innerHTML = "Wait " + timeleft + "";
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("timer_" + index).innerHTML = ""
window.open(document.querySelector('#downloadbutton' + index + ' a').href, '_blank');
document.getElementById('download_' + index).style.display = "";
}
timeleft -= 1;
}, 1000);
});
})
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.download_button {
border: none;
margin-top: 0px;
padding: 10px;
width: 200px;
font-family: "montserrat", sans-serif;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
color: #fff;
font-size: 16px;
transition: 0.4s;
line-height: 28px;
outline: none;
}
.button-1 {
background: #f12711;
}
.button-2 {
background: #0575E6;
}
.button-3 {
background: #fe8c00;
}
.download_button:hover {
background: #000000;
}
.title {
font-weight: bold;
}
<div id="downloadbutton0" style="text-align: center;">
<a href="http:///www.google.com">
<button class="download_button button-1">
<div class="title">Document Title 1</div>
<div id="download_0">DOWNLOAD</div>
<div id="timer_0"></div>
</button>
</a>
</div>
<br>
<div id="downloadbutton1" style="text-align: center;">
<a href="http:///www.google.com">
<button class="download_button button-2">
<div class="title">Document Title 2</div>
<div id="download_1">DOWNLOAD</div>
<div id="timer_1"></div>
</button>
</a>
</div>
<br>
<div id="downloadbutton2" style="text-align: center;">
<a href="http:///www.google.com">
<button class="download_button button-3">
<div class="title">Document Title 3</div>
<div id="download_2">DOWNLOAD</div>
<div id="timer_2"></div>
</button>
</a>
</div>

How can I use parentNode with add/removeClass and an IF argument for <audio>?

I have multiple <audio> containers. When pressing 'Play' I want to target the parent audio container to play instead of all the other containers.
Each time I press the play button, all the audio containers fire and start playing. What I want is to target the parent container of the pressed button and only play that container.
I understand that I can use parentNode for this but whenever I implement it, I get an error, whether I use it for the IF argument or the add/removeClass syntax.
function playAudio(val) {
var aud = $("audio")[val - 1];
if (aud.paused) {
aud.play();
aud.loop = false;
$(".play-pause").removeClass("icon-play");
$(".play-pause").addClass("icon-stop");
} else {
aud.pause();
$(".play-pause").removeClass("icon-stop");
$(".play-pause").addClass("icon-play");
}
aud.ontimeupdate = function () {
$(".progress")
.css("width", (aud.currentTime / aud.duration) * 100 + "%");
var mins = Math.floor(aud.currentTime / 60);
if (mins < 10) {
mins = "0" + String(mins);
}
var secs = Math.floor(aud.currentTime % 60);
if (secs < 10) {
secs = "0" + String(secs);
}
$(".timestamp")
.text(mins + ":" + secs);
};
}
.player {
position: relative;
display: flex;
border-radius: 0px;
padding: 5 16px;
}
.player .info {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 50%;
padding: 0 16px;
}
.player .info .name {
font-size: 15px;
font-weight: 700;
}
.player .info .singer {
font-size: 12px;
}
.player .audioBtns {
width: 50%;
/*align-items: center;*/
padding: 0 16px;
}
.player .audioBtns div:nth-child(1) {
font-size: 30px;
}
.player .audioBtns div:nth-child(2),
.player .audioBtns div:nth-child(3) {
font-size: 18px;
}
.player .progress {
position: absolute;
height: 5px;
left: 0;
bottom: 0;
background-color: #f8f9fa;
border-radius: 0px;
}
.icon-loop {
content: url("loop.svg");
width: 20px;
height: 20px;
display: block;
}
.icon-play:before {
content: url("https://image.flaticon.com/icons/svg/860/860768.svg");
width: 30px;
height: 45px;
display: block;
}
.icon-stop:before {
content: url("https://image.flaticon.com/icons/svg/633/633940.svg");
width: 30px !important;
height: 40px !important;
display: block;
}
.playBtn {
padding: 0 16px;
}
.activeOverlay {
filter: invert(42%) sepia(11%) saturate(1216%) hue-rotate(279deg)
brightness(88%) contrast(85%);
}
.audioContainer {
background-color: #d3d3d3;
padding: 2% 2% !important;
}
.audioContainer:not(:last-child) {
margin-bottom: 3%;
}
.audioContainerActive {
background-color: #855b6f !important;
color: #f8f9fa !important;
}
.IconActive {
filter: invert(92%) sepia(17%) saturate(3434%) hue-rotate(186deg)
brightness(127%) contrast(95%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- First Audio Container. OnClick on Line 5 -->
<div class="row no-gutters d-flex flex-column col-12">
<div class="col d-flex flex-column justify-content-xl-center audioContainer">
<div class="player">
<div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(1)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"></audio>
<div class="info">
<div class="name">
<p id="qwewq">By The Shell</p>
</div>
<div class="singer">
<p>Adam M.</p>
</div>
</div>
<div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
<p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
</div>
<div data-toggle="tooltip" id="progressBar" class="progress"></div>
</div>
</div>
<!-- Second Audio Container. OnClick on Line 25 -->
<div class="col d-flex flex-column justify-content-xl-center audioContainer">
<div class="player">
<div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(2)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg"></audio>
<div class="info">
<div class="name">
<p id="qwewq-1">Turntable</p>
</div>
<div class="singer">
<p>Adam M.</p>
</div>
</div>
<div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
<p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
</div>
<div data-toggle="tooltip" id="progressBar-1" class="progress"></div>
</div>
</div>
</div>

Run the operation only on selected container using jQuery eq() method
Main changes:
if (aud.paused) {
aud.play();
aud.loop = false;
$(".play-pause").eq(val - 1).removeClass("icon-play"); // added .eq(val)
$(".play-pause").eq(val - 1).addClass("icon-stop");
} else {
aud.pause();
$(".play-pause").eq(val - 1).removeClass("icon-stop");
$(".play-pause").eq(val - 1).addClass("icon-play");
}
// -----------
$(".progress").eq(val - 1).css("width", (aud.currentTime / aud.duration) * 100 + "%");
// -----------
$(".timestamp").eq(val - 1).text(mins + ":" + secs);
Working Example Below :
function playAudio(val) {
var aud = $("audio")[val - 1];
if (aud.paused) {
aud.play();
aud.loop = false;
$(".play-pause").eq(val - 1).removeClass("icon-play");
$(".play-pause").eq(val - 1).addClass("icon-stop");
} else {
aud.pause();
$(".play-pause").eq(val - 1).removeClass("icon-stop");
$(".play-pause").eq(val - 1).addClass("icon-play");
}
aud.ontimeupdate = function() {
$(".progress").eq(val - 1)
.css("width", (aud.currentTime / aud.duration) * 100 + "%");
var mins = Math.floor(aud.currentTime / 60);
if (mins < 10) {
mins = "0" + String(mins);
}
var secs = Math.floor(aud.currentTime % 60);
if (secs < 10) {
secs = "0" + String(secs);
}
$(".timestamp").eq(val - 1)
.text(mins + ":" + secs);
};
}
.player {
position: relative;
display: flex;
border-radius: 0px;
padding: 5 16px;
}
.player .info {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 50%;
padding: 0 16px;
}
.player .info .name {
font-size: 15px;
font-weight: 700;
}
.player .info .singer {
font-size: 12px;
}
.player .audioBtns {
width: 50%;
/*align-items: center;*/
padding: 0 16px;
}
.player .audioBtns div:nth-child(1) {
font-size: 30px;
}
.player .audioBtns div:nth-child(2),
.player .audioBtns div:nth-child(3) {
font-size: 18px;
}
.player .progress {
position: absolute;
height: 5px;
left: 0;
bottom: 0;
background-color: #f8f9fa;
border-radius: 0px;
}
.icon-loop {
content: url("loop.svg");
width: 20px;
height: 20px;
display: block;
}
.icon-play:before {
content: url("https://image.flaticon.com/icons/svg/860/860768.svg");
width: 30px;
height: 45px;
display: block;
}
.icon-stop:before {
content: url("https://image.flaticon.com/icons/svg/633/633940.svg");
width: 30px !important;
height: 40px !important;
display: block;
}
.playBtn {
padding: 0 16px;
}
.activeOverlay {
filter: invert(42%) sepia(11%) saturate(1216%) hue-rotate(279deg) brightness(88%) contrast(85%);
}
.audioContainer {
background-color: #d3d3d3;
padding: 2% 2% !important;
}
.audioContainer:not(:last-child) {
margin-bottom: 3%;
}
.audioContainerActive {
background-color: #855b6f !important;
color: #f8f9fa !important;
}
.IconActive {
filter: invert(92%) sepia(17%) saturate(3434%) hue-rotate(186deg) brightness(127%) contrast(95%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- First Audio Container. OnClick on Line 5 -->
<div class="row no-gutters d-flex flex-column col-12">
<div class="col d-flex flex-column justify-content-xl-center audioContainer">
<div class="player">
<div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(1)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"></audio>
<div class="info">
<div class="name">
<p id="qwewq">By The Shell</p>
</div>
<div class="singer">
<p>Adam M.</p>
</div>
</div>
<div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
<p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
</div>
<div data-toggle="tooltip" id="progressBar" class="progress"></div>
</div>
</div>
<!-- Second Audio Container. OnClick on Line 25 -->
<div class="col d-flex flex-column justify-content-xl-center audioContainer">
<div class="player">
<div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(2)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg"></audio>
<div class="info">
<div class="name">
<p id="qwewq-1">Turntable</p>
</div>
<div class="singer">
<p>Adam M.</p>
</div>
</div>
<div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
<p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
</div>
<div data-toggle="tooltip" id="progressBar-1" class="progress"></div>
</div>
</div>
</div>
jQuery eq() method
The jQuery eq() method is used to get an element with a specific index of the selected HTML element. You can give either positive or negative integer value as index. The index of the first element of the matched element is 0. If we use selector.eq(-1), it will return the last element and selector.eq(0) will return the first element in the matched set of elements.
syntax - selector.eq(index)
Reference : click_here

Why can't I use the search features in html and javascript?

I'm trying to create a website about song lyrics using the Musixmatch API and want to apply a custom element, shadow DOM, webpack, etc.
but I have a problem in the search function because it can't search even though I already created the function in src -> script -> data -> data-source.js and songs.js
I beg for your help, thank you :)
and it still undefined result :(
index.html
document.addEventListener("DOMContentLoaded", main);
/* Dasar */
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
:root {
--warna-hitam:#333333;
--warna-ungu: #2c072c;
--warna-pink: #ff536e;
--warna-putih: #FFFAF0;
--gradasi: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
--bayangan: rgba(0, 0, 0, 0.2);
}
h1,h2,h3{
font-family: 'Montserrat', sans-serif;
text-align: center;
}
h4,h5,h6,p {
font-family: 'Poppins', sans-serif;
}
.section {
padding: 4rem 1.5rem;
display: block;
}
body,
button,
input,
select,
textarea{
font-family: 'Montserrat', sans-serif;
}
.container {
text-align: center;
margin: 0;
}
/* ----------------------------------- */
/*Form Pencarian*/
form {
width:1200px;
margin:50px auto;
}
.search {
padding:20px 30px;
border-radius: 15px;
background:rgba(197, 190, 190, 0.2);
border:0px solid #dbdbdb;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
.button {
position:relative;
padding:18px 24px;
border-radius: 12px;
margin-left: 10px;
left:-8px;
background-color:#FF8C00;
color:#fafafa;
font-family: 'Montserrat', sans-serif;
font-weight: bolder;
font-size: 18px;
}
.button:hover {
background-color:#fafafa;
color:#FF8C00;
}
/* ----------------------------------- */
/* Card */
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
margin: 30px auto;
width: 300px;
height: 300px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
cursor: pointer;
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -80px;
height: 40px;
}
.card:hover {
transform: scale(0.9, 0.9);
box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25),
-5px -5px 30px 15px rgba(0,0,0,0.22);
}
.title-white {
color: white;
}
.title-black {
color: black;
}
#media all and (max-width: 500px) {
.card-list {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}
/* ----------------------------------- */
/* Menu Navigasi */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.2);
overflow: hidden;
background-color: var(--warna-ungu);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {
background-color: #111;
}
ul.topnav li.icon {
display: none;
}
/* ----------------------------------- */
/* Text Heading */
.heading {
margin: 20px;
font-size: 2rem ;
color: var(--warna-pink);
}
.subtitle {
margin: 15px;
text-align: center;
font-size: 1.2rem;
color: #3f4957;
}
/* ----------------------------------- */
/* FONT */
#import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
#import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
/* ----------------------------------- */
/* Footer */
footer{
display: flex;
flex-direction: column;
margin: 20px 0px;
padding: 30px 30px;
background-color: var(---warna-putih);
color: #3f4957;
text-align: center;
font-size: 12px;
font-weight: 800;
}
/* ----------------------------------- */
/* RENSPONSIVE */
/* Saat lebar layar kurang dari 680 pixel, sembunyikan semua menu item kecuali item yang pertama yaitu("Home"). Tampilkan juga list item yang berisi link untuk membuka menu yaitu (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* Class dengan nama "responsive" akan ditambahkan oleh JavaScript saat user mengklik icon. Munculnya Class ini akan mendisplay isi list menu
*/
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style/style.css">
<script src="https://kit.fontawesome.com/1cb0b252aa.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="src/img/favicon.png">
<title>DapatLirik</title>
</head>
<header>
<nav id="appBar" class="app-bar">
<ul class="topnav">
<li><i class="fas fa-music"></i>Dapat<strong>Lirik</strong></li>
<li>About Us</li>
<li>Find Lyrics</li>
<li class="icon">
☰
</li>
</ul>
</nav>
</header>
<body>
<main>
<!-- Search Lagu -->
<section>
<h3 class="heading" id="find-lyrics" ><span><i class="fab fa-mixcloud fa-2x"></i></span> Lirik Favorit Anda Disini!</h3>
<p class="subtitle">Temukan Lirik Lagu favorit anda dengan satu klik saja!</p>
<div class="container search-container" id="search-container">
<form id="track.search">
<input class="search" type="search" placeholder="Ketik Judul Lagu/Lirik" id="searchElement" required>
<input class="button" type="button" id="searchButtonElement" value="Cari">
</form>
</div>
</section>
<!-- Top 8 Tracks -->
<section>
<h3 class="heading"><span><i class="fas fa-microphone-alt fa-2x"></i></span>Top 8 Lirik Terfavorit</h3>
<p class="subtitle">8 Lirik Lagu Terfavorit Akhir-Akhir Ini</p>
<div id="songList"></div>
</section>
<!-- Card -->
<div class="cards-list" id="songList">
<div class="card 1" id="artist.albums.get">
<div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 2">
<div class="card_image" id="artist.albums.get">
<img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" />
</div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 3">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" />
</div>
<div class="card_title">
<p>Card Title</p>
</div>
</div>
<div class="card 4">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/LwIyvaNcnzsD6/giphy.gif" />
</div>
<div class="card_title title-black">
<p>Card Title</p>
</div>
</div>
<div class="card 5">
<div class="card_image" id="artist.albums.get"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 6">
<div class="card_image" id="artist.albums.get">
<img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" />
</div>
<div class="card_title title-white">
<p>Card Title</p>
</div>
</div>
<div class="card 7">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" />
</div>
<div class="card_title">
<p>Card Title</p>
</div>
</div>
<div class="card 8">
<div class="card_image" id="artist.albums.get">
<img src="https://media.giphy.com/media/LwIyvaNcnzsD6/giphy.gif" />
</div>
<div class="card_title title-black">
<p>Card Title</p>
</div>
</div>
</div>
</main>
<!-- Javascript Disini -->
<script>
const myMenu = () => {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<script src="src/script/data/songs.js"></script>
<script src="src/script/data/data-source.js"></script>
<script src="src/script/view/main.js"></script>
<script src="app.js"></script>
</body>
<footer>
<h3><i class="fas fa-music"></i>Dapat<strong>Lirik</strong> 2020 - By <span><i class="fab fa-instagram"></i></span>Ihsandroid </h3>
</footer>
</html>
//data-source.js
function DataSource(onSuccess, onFailed) {
this.onSuccess = onSuccess;
this.onFailed = onFailed;
}
DataSource.prototype.searchSongs = function (keyword) {
const filteredSongs = songs.filter(songs => songs.name.toUpperCase().includes(keyword.toUpperCase()));
if (filteredSongs.length) {
this.onSuccess(filteredSongs);
} else {
this.onFailed(`${keyword} is not found`);
}
};
//songs.js
const songs = [
{
"track_id": 15445219,
"track_name": "Alejandro",
"has_lyrics": 1,
"album_name": "The Fame Monster",
"artist_id": 378462,
"artist_name": "Lady Gaga",
"updated_time": "2017-01-08T07:30:05Z"
},
{
"track_id": 15445219,
"track_name": "Alejandro",
"has_lyrics": 1,
"album_name": "The Fame Monster",
"artist_id": 378462,
"artist_name": "Lady Gaga",
"updated_time": "2017-01-08T07:30:05Z"
},
{
"track_id": 15445219,
"track_name": "Alejandro",
"has_lyrics": 1,
"album_name": "The Fame Monster",
"artist_id": 378462,
"artist_name": "Lady Gaga",
"updated_time": "2017-01-08T07:30:05Z"
}
]
main.js
const main = () => {
const searchElement = document.querySelector("#searchElement");
const buttonSearchElement = document.querySelector("#searchButtonElement");
const songsListElement = document.querySelector("#songList");
const onButtonSearchClicked = () => {
const dataSource = new DataSource(renderResult, fallbackResult);
dataSource.searchSongs(searchElement.value);
};
const renderResult = results => {
songsListElement.innerHTML = "";
results.forEach(songs => {
const {name, album, description} = songs
const songsElement = document.createElement("div");
songsElement.setAttribute("class", "songs");
songsElement.innerHTML = `<img class="songs-album" src="' + ${album} + '" alt="Songs Album">
<div class="songs-info">
<h2>${name}</h2>
<p>${description}</p>
</div>`;
songsListElement.appendChild(songsElement);
})
};
const fallbackResult = message => {
songsListElement.innerHTML = "";
songsListElement.innerHTML += `<h2 class="placeholder">${message}</h2>`;
};
buttonSearchElement.addEventListener("click", onButtonSearchClicked);
};
This is My Code on GITHUB :
CLICK HERE

You are calling toUpperCase() on song.name, which is a field that doesn't exist on objects in songs. Did you mean songs.track_name?

I see two issues here. 1) name field is not the part of song object/json in the songs arrays (songs.js) file. Either change the field name to one of the keys on which you want to search(track_name , album_name etc)
if you want to search on name it should be
songs.filter(songs => songs.track_name.toUpperCase().includes(keyword.toUpperCase()));
2) You are using name, album, description fields in renderResult function.
change them to track_name,album_name etc.
const renderResult = (results) => {
songsListElement.innerHTML = '';
results.forEach((songs) => {
const { track_name, album_name, updated_time } = songs;
const songsElement = document.createElement('div');
songsElement.setAttribute('class', 'songs');
songsElement.innerHTML = `<img class="songs-album" src="' + ${album_name} + '" alt="Songs Album">
<div class="songs-info">
<h2>${track_name}</h2>
<p>${updated_time}</p>
</div>`;
songsListElement.appendChild(songsElement);
});
After this I see you are trying to load some images as well. You need to put images with the name of the songs to load it from local

How do I maintain my menu, and footer in the same place while horizontal scrolling?

edit/update
I have updated my code and fixed some errors. Now I am trying to fix my footer to stay at the bottom, my menu will not center, and I am trying to have the gallery between header and footer without being clipped by the header. Everything was working until I added the horizontal scroll gallery.
I am trying to achieve the layout:
header top
menu in a line
content/horizontal scroll gallery middle
footer/social icons bottom
Please help
codepen link
/**********************************
General
**********************************/
body {
font-family: 'Roboto', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
/**********************************
Heading
**********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
height: 150px;
position:fixed;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Passion One', cursive;
margin: 15px 0;
font-size: 5em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Comfortaa', cursive;
font-size: em;
margin: -5px 0 0;
font-weight: normal;
}
/**********************************
Navigatoin
**********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
position: fixed;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**********************************
Body
**********************************/
#content {
height: 100%;
margin: 0 0 0 0;
top: 0;
}
/**********************************
Footer
**********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
position: fixed;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
.fttext {
text-align: center;
}
/**********************************
Colors
**********************************/
/* site body */
body {
background-color: #C9BD7C;
color: #5B0123;
}
/* green header */
header{
background: #5B0123;
border-color: #5B0123;
}
/* nav background on mobile devices */
nav {
background: #B41C42;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #C86347;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #F8D295;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Passion+One|Roboto:400,500" rel="stylesheet">
</head>
<!-- content goes here-->
<body>
<header>
<a href="index.html" id="logo">
<h1>Natalie Davis</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="content">
<div id="img-container">
<div class="picture_holder" style="width: 573px;">
<div class="picture" style="width: 543px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="543" height="600" alt="">
<div class="captioning">
<div class="title">link - Test caption and link</div>
<div class="caption">stuff </div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1124px;">
<div class="picture" style="width: 1094px;">
<img src="https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg" width="1094" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 382px;">
<div class="picture" style="width: 352px;">
<img src="http://www.tonyandsonsnurseries.com.au/images/Plants/Frangipani/FruitSaladLarge.jpg" width="352" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 439px;">
<div class="picture" style="width: 409px;">
<img src="http://www.beautifulflowerpictures.com/blog/wp-content/uploads/2008/10/beauty_berry_issai_31.jpg" width="409" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 752px;">
<div class="picture" style="width: 722px;">
<img src="https://freedfromtime.files.wordpress.com/2016/08/farmopolis-flowers-dsc_6487.jpg?w=722&h=600" width="722" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 1094px;">
<div class="picture" style="width: 1064px;">
<img src="https://www.openfootage.net/Openfootage/Vorschau/00299_GelbeBluete/00299_GelbeBluete_Preview_v01.jpg" width="1064" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1525px;">
<div class="picture" style="width: 1495px;">
<img src="https://static.wixstatic.com/media/09a7b6_b09cf68226774f6d8af396d240573130.jpg/v1/fill/w_1495,h_600,al_c,q_85,usm_0.66_1.00_0.01/09a7b6_b09cf68226774f6d8af396d240573130.webp" width="1495" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 560px;">
<div class="picture" style="width: 530px;">
<img src="http://www.besgroup.org/wp-content/uploads/SunbirdBrTh-Costus-JWee-1.jpg" width="530" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<!-- mousewheel java script -->
<script type="text/javascript">
function handle(delta) {
if (delta < 0)
ScrollSmoothly(10, 10, 'right');
else if (delta > 0)
ScrollSmoothly(10, 10, 'left');
else
;
}
function wheel(event) {
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera)
delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var repeatCount = 0;
function ScrollSmoothly(scrollPos, repeatTimes, direction) {
if (repeatCount < repeatTimes)
if (direction == 'right')
window.scrollBy(20, 0);
else
window.scrollBy(-20, 0);
else {
repeatCount = 0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "','" + direction + "')", 10);
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
#img-container {
width: 6450px;
}
#img-container #text {
float: left;
width: 675px;
}
#img-container #text p {
width: 600px;
}
#img-container .picture_holder {
float: left;
}
#img-container .picture {
/* padding-top: 100px; */
}
#img-container .captioning .title {
margin-top: 12px;
font-weight: bold;
}
#img-container .captioning .caption {}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</section>
</div>
<footer class="fttext">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
<p>© 2018 Natalie Davis.</p>
</footer>
</body>
</html>

Looking at the code you've posted, in your CSS, your menu styles were targeting an ID, whereas, in your HTML, your menu code had a class instead. Changing the CSS for menu to a class instead of an ID, the styles are then applied, and if the position is changed from absolute to fixed, it then behaves as desired.
.menu {
width: 960px;
margin: 0 auto;
position: fixed;
text-align: center;
background-color: darkred;
}

Swapping an image when a toggle has been clicked on

I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example

I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});

We Keep Coding

JavaScript is the programming language of the Web.

jquery adds .active class to all elements when page is loaded - javascript

Related

Countdown before download only working on 1st button

How can I use parentNode with add/removeClass and an IF argument for <audio>?

Why can't I use the search features in html and javascript?

How do I maintain my menu, and footer in the same place while horizontal scrolling?

Swapping an image when a toggle has been clicked on

Categories

Resources