Develop Reference

Rewind and Fast Forward audio function not working

I wonder why my audio button for rewind and fast forward are not working. Instead of fast forward or vice versa the audio to 15 seconds, the song will start playing from the beginning. Here is my HTML code:
<div class="row clearfix">
#foreach($musics as $music)
<div class="col-lg-12 col-md-12">
<div class="card">
<a href="{{url('music/view/info/'.$music->id)}}">
<img class="card-img-left" src="{{$music->photo}}"/>
</a>
<div class="card-body">
<h4 class="card-title h5 h4-sm">{{$music->title}}</h4>
<p class="card-text">Artist: {{$music->artist}}</p>
<br><br>
<div style="text-align:right">
<audio id="audio">
<source src="{{asset('/storage/audios/After Like.mp3')}}">
</audio>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="rewindBTN" onclick="rewind()"><i class="fa fa-fast-backward"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="playPauseBTN" onclick="playPause()"><i class="fa fa-play"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="fastforwardBTN" onclick="fastforward()"><i class="fa fa-fast-forward"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" onclick="stop()"><i class="fa fa-stop" ></i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>
As for JavaScript
<script>
var audio = document.getElementById('audio');
var playPauseBTN = document.getElementById('playPauseBTN');
var rewindBTN = document.getElementById('rewindBTN');
var fastforwardBTN = document.getElementById('fastforwardBTN');
var count = 0;
function playPause(){
if(count == 0){
count = 1;
audio.play();
playPauseBTN.innerHTML = "<i class='fa fa-pause'></i>";
}else{
count = 0;
audio.pause();
playPauseBTN.innerHTML = "<i class='fa fa-play'></i>";
}
}
function rewind(){
audio.currentTime-=15;
}
function fastforward(){
audio.currentTime+=15;
}
function stop(){
playPause();
audio.pause();
audio.currentTime = 0;
playPauseBTN.innerHTML = "<i class='fa fa-play'></i>";
}
</script>
Seek solution to solve this issue

Load More Button with jQuery

I recently approached to javascript and jQuery; I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made.
The code has been corrected in the following anwers
$(function() {
$(".Box-Hidden").slice(0, 8).show();
$("#loadMoreCont").on('click', function(e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0, 2).slideDown();
if ($(".Box-Hidden:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="GridContent">
<div class="Portfolio">
<!-----image 1 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="#" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="#">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>

Some issues in your code are that the classes and ID's are mixed up in the JS. In particular the loadMore button and how many items you're choosing to show via "slice". It would also help to use a more general or "semantic" friendly name for your containers instead of Box-Hidden because it's not always hidden and it's purpose is more like a card block, so naming it something like "card" might be best. The example below shows the Load More button and then disappears after displaying the rest of the cards.
// slice is choosing the first 2 instances of "Box-hidden" and showing them
$(".Box-Hidden").slice(0, 2).show();
// if there are Box-Hidden set to display:none (hidden) then show the loadMore button
if ($(".Box-Hidden:hidden").length != 0) {
$("#loadMore").show();
}
$("#loadMore").on('click', function(e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0, 2).slideDown();
// if there are no more hidden Box-Hidden's then hide the loadMore button
if ($(".Box-Hidden:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
}
// This is not related to the show more, this just brings you back up the page
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="GridContent">
<div class="Portfolio">
<!-----image A ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=1">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image B ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=2">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 1 ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=3" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=4">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>

When you use
$("#loadMoreCont").on(...)
it is supposed you have a html tag having the id with that name:
<div id="loadMoreCont">
...
</div>
When you use
$(".loadMoreCont").on(...)
it is supposed you have a html tag having the class with that name:
<div class="loadMoreCont">
...
</div>
Update
$(function () {
$(".Box-Hidden").slice (0, 2).show(); // showing 2 initial images
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0,2).slideDown(); // adding 2 images on load more click
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
Your code seems work fine. I commented out some interesting lines.
Hope this helps.

your #loadMoreCont JS file on line 4 is targeted at an ID (#).
but on your html loadMoreCont as a class (.)

The question is: " I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made"
Here the updated code after the kind correction of the users #Kurohige and #WkL
HTML
<div class="GridContent">
<div class="Portfolio">
<!-----image 1 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="#" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="#">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>`
CSS
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
JQUERY
<script>
$(function () {
$(".Box-Hidden").slice (0, 8).show();
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden"). slice(0,2).slideDown();
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
</script>
<script src="jQuery/jquery-3.4.1.js"></script>

animation jumps from one to another

i am trying to add an animation where a logo will slide to the middle then another animation will kick in after that using a delay, but after the first animation it snaps on to the net one after having is as position relative
here is my code:
<h1 class="intro-title">
Hello world
</h1>
<h4 class="scroll-down">Scroll Down</h4>
<div class="arrow">
<i class="fas fa-arrow-down"></i>
</div>
<div id="color1"></div>
<div id="color2"></div>
</div>
<img class="logo" src="logo/logo.png">
<div id="scroll">
<button class="intro-button">Check it out!</button>
</div>
function logoShift() {
$('.logo').css({
transform: 'translateY(-95%)',
right: '90px',
width: '300px',
height: '300px',
position: 'relative'
});
}

Not getting correct text data from link javascript

I have this code that is a couple of links with divs inside them. When i click on one of the links it pops another div up that fills out using the "Case No" and "Type". However it only uses the data from the first link, not any other that i click.
HTML
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>
and the javascript is
$('.plu-view-data a').click(() => {
$("#pedlookup-overlay").css('display','block')
var type = $(this).find('#type').text()
var caseno = $(this).find('#case_no').text()
$('#plu-overlay-headbar').find('p').html(type+" || "+caseno)
})
Any idea as to why when i click the link it only uses the first link information?

The one tradeoff with using arrow functions is that there is no binding of this. To get it's context back you unfortunately have to go back to using the traditional function syntax (as it currently stands).
$('.plu-view-data a').click(function() {
...
});

You have duplicated id 'type' in your html. please change it.

$('.plu-view-data a').click(function() {
$("#pedlookup-overlay").css('display', 'block')
var type = $(this).find('#type').text();
var caseno = $(this).find('#case_no').text();
if (type && caseno) {
console.log(caseno);
$('#plu-overlay-headbar').find('p').html(type + " || " + caseno)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>

click function Jquery Timing

i have a problem that when i'm clicking my thumb-units it reloads the page it had to open but it is opening for 0.5 sec and then the thumb units returns again, what's wrong?
$( document ).ready(function() {
workSlider();
});
function workSlider() {
$('.thumb-unit').click(function() {
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
$('.work-return').click(function() {
$('.work-slider').css('left' , '0%');
$('.work-container').hide(800);
});
}
here's my html, it should show the work container
<section class="alt-section section-work">
<div class="work-slider">
<div class="thumb-wrap">
<div class="thumb-container">
{% for project in site.data.settings.projects %}
<a href="" class="thumb-unit" style="background-image: url(/assets/img/work/{{project.folder}}/thumb.jpg);">
<div class="thumb-overlay">
<strong>{{ project.name }}</strong>
<div class="zoom-icon"></div>
</div>
</a>
{% endfor %}
</div>
</div>
<div class="work-wrap">
<div class="work-container">
<div class="work-return">{% include icons/icon-back.html %}</div>
<h4 color="black">Hey dude</h4>
<div style="width: 600px; height: 500px; background: #ccc;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Y9dhSgnRl0s" frameborder="0" allowfullscreen></iframe>
</div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
</div>
</div>
</div>
</section>

I think your page might be reloading on click because your not preventing the default behavior of your link.
Try this:
$('.thumb-unit').click(function(e) {
e.preventDefault();
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
$('.work-return').click(function(e) {
e.preventDefault();
$('.work-slider').css('left' , '0%');
$('.work-container').hide(800);
});

This may be off base but since the .thumb-unit is an anchor tag, I believe you have to prevent the default event which is navigation, and with an empty href attribute should be to reload the page. Try this:
$('.thumb-unit').click(function(evt) {
evt.preventDefault();
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
Since .work-return is a div, it is not necessary to add the same snippet to it since there is no default event that you need to prevent.