HTML audio player timeline functionality add - javascript

I am trying to add HTML audio player. I applied a code there play pause working. I need to add timeline functionality here. But don't know how to do that. Here another problem also I don't know how can I apply play pause in same button. Please help me. Below is my code. sample
#audioplayer{
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
float:left;
outline:none;
}
.play, .play:hover, .pause:focus{background: url('https://img.pranavc.in/20') ;}
.pause, .pause:hover, .play:focus{background: url('https://img.pranavc.in/30') ;}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="document.getElementById('player').play()"></button>
<button id="pButton" class="pause" onclick="document.getElementById('player').pause()"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>

I use javascript, and change the dom and css.
You need to learn audio event and property.
var audio = document.getElementById("player");
var btn = document.getElementById("pButton");
btn.addEventListener("click", function(){
if (audio.paused) {
audio.play();
btn.classList.remove("pause");
btn.classList.add("play");
} else {
audio.pause();
btn.classList.remove("play");
btn.classList.add("pause");
}
});
var playhead = document.getElementById("playhead"); audio.addEventListener("timeupdate", function(){ var duration = this.duration; var currentTime = this.currentTime; var percentage = (currentTime / duration) * 100; playhead.style.left = percentage * 4 + 'px'; });
#audioplayer{
position: relative;
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
float:left;
outline:none;
}
#pButton.pause {
background: url('https://img.pranavc.in/20') no-repeat;
background-size: 56px;
background-position: center;
}
#pButton.play {
background: url('https://img.pranavc.in/30') no-repeat;
background-size: 56px;
background-position: center;
}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
position: relative;
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
position: absolute;
left: 0px;
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="pause"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>

You need to add Javascript code on page to have this functionality. You can extract the code you want from this code (Nicely explained).
https://www.developphp.com/video/JavaScript/Audio-Play-Pause-Mute-Buttons-Tutorial
https://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial

<audio controls>
<source src="Link.mp3" type="audio/mpeg">
</audio>
Try the above Code. Note: The audio tag is not supported in Internet Explorer 8 and earlier versions.
Check this link : http://www.w3schools.com/tags/tag_audio.asp

Related

How to implement play() and pause() on HTML5 Video in jQuery?

I have a HTML video with a DIV containing custom controls over it.
The play button works fine, but the pause button does not. There are two weird things happening:
The media.pause() method just does not seem to work at all, as if it were not there.
The .addClass() and .removeClass() methods after media.pause() are not working either. But when I put console.log('anything') below it in the code, then it prints to the console. Also, the objects that it is called on are there (I used console.log to check).
// play video
$('.funnel-video-poster').on('click', function() {
var video_id = $(this).data('video-id');
document.getElementById(video_id).play();
$(this).find('.FVP-btn-play').addClass('hidden');
$(this).find('.FVP-btn-pause').removeClass('hidden');
});
// pause video
$('.FVP-btn-pause').on('click', function() {
var $poster = $(this).closest('.funnel-video-poster'),
video_id = $poster.data('video-id');
var media = document.querySelector('#' + video_id);
media.pause();
console.log(media);
$poster.find('.FVP-btn-play').removeClass('hidden');
$poster.find('.FVP-btn-pause').addClass('hidden');
console.log($poster.find('.FVP-btn-play'));
console.log($poster.find('.FVP-btn-pause'));
});
.funnel-block .funnel-video video {
display: block;
margin: 0 auto;
}
.funnel-block .funnel-video .funnel-video-poster {
background-repeat: no-repeat;
position: relative;
z-index: 2;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.funnel-block .funnel-video .funnel-video-poster.see-thru {
background: transparent !important;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 50%;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
text-align: center;
border-radius: 50%;
position: absolute;
bottom: .25rem;
left: 50%;
transform: translate(-50%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel-block">
<div class="py-5 funnel-video">
<video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
<source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
Your browser does not support HTML 5 video
</video>
<div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
<div class="FVP-btn-play hidden">Play</div>
<div class="FVP-btn-pause">Pause</div>
</div>
</div>
</div>
Here is the way that I implemented the play and pause functionality in jQuery:
$('.FVP-btn-play').on('click', function() {
$('video').trigger('play');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
$('.FVP-btn-pause').on('click', function() {
$('video').trigger('pause');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
In the HTML, I moved the hidden class from Play to Pause as this is the state of the application to start with.
I did not change the CSS, apart from adding a hidden class, which was not included.
I used jQuery toggleClass() to add and remove the hidden class on the Play and Pause buttons.
Here is a working solution based on your code (best viewed in full screen mode):
$('.FVP-btn-play').on('click', function() {
$('video').trigger('play');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
$('.FVP-btn-pause').on('click', function() {
$('video').trigger('pause');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
.hidden {
visibility: hidden;
}
.funnel-block .funnel-video video {
display: block;
margin: 0 auto;
}
.funnel-block .funnel-video .funnel-video-poster {
background-repeat: no-repeat;
position: relative;
z-index: 2;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.funnel-block .funnel-video .funnel-video-poster.see-thru {
background: transparent !important;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 50%;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
text-align: center;
border-radius: 50%;
position: absolute;
bottom: .25rem;
left: 50%;
transform: translate(-50%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel-block">
<div class="py-5 funnel-video">
<video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
<source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
Your browser does not support HTML 5 video
</video>
<div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
<div class="FVP-btn-play">Play</div>
<div class="FVP-btn-pause hidden">Pause</div>
</div>
</div>
</div>
Here is one source of information about jQuery.
Here is a reference to the HTML video element documentation.

Why does the CSS only apply when refreshed?

Div CSS loading issue
I have a simple php login system where the button calls on the JavaScript function loading() in order to display a div and an mp4 over the login. Kind of like a loading screen that always takes the same duration. The issue I have is whenever I load up the page the div and mp4 css isn't applied, resulting in it being displayed as shown in the video.
If I wait for the mp4 to end however and try again, (or even using CTRL + F5 to refresh) it fixes the issue and displays normally.
Am I doing something wrong resulting in this?
Any help would be much appreciated, thanks.
function loading() {
var overlay = document.getElementById("overlay");
overlay.style.display = 'flex';
}
.overlay {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #62a6ff;
width: 350px;
height: 350px;
border-radius: 40px;
border-color: #85baff;
border-style: solid;
border-width: 7px;
box-shadow: 0px 0px 10px 2px #000000;
}
.videoframe {
margin-top: 25%;
margin-left: 7%;
width: 300;
height: 169;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
.backvideo {
width: 300;
height: 169;
}
<input class="button" id="submit" type="submit" value="Login" onclick="loading()">
<br>
<br>
<div id="pagechange2">SignUp</div>
</form>
</div>
<div id="overlay" class="overlay" style="display:none">
<div id="videoframe" class="videoframe">
<video class="backvideo" autoplay muted crossOrigin="anonymous">
<source src="videos/background3s.mp4" type="video/mp4">
</video>
</div>
</div>
Screenshot
I fixed it and got it to work.
I changed the following:
<video class="backvideo" autoplay muted crossOrigin="anonymous">
to:
<video id="backvideo" autoplay muted crossOrigin="anonymous">
I changed the class to an id
I then went to my CSS and changed .backvideo to #backvideo and then changed
.videoframe {
margin-top: 25%;
margin-left: 7%;
width: 300;
height: 169;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
.backvideo {
width: 300;
height: 169;
}
to:
.videoframe{
margin-top: 25%;
margin-left: 7%;
width: 300px;
height: 169px;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
#backvideo{
width: 300px;
height: 169px;
}
adding px to both the width and height values

How to make a toggle onclick to hide and show video player's UI?

I want to show and hide the video player's elements details, play_pause_button and controls_bar when the video player itself is clicked but not when its elements are clicked. I have made some progress but the video player's elements hide when I click on the elements which shouldn't happen. So how can I detect that the video player was clicked but not the video player's elements.
index.html:
var play_pause_button = document.getElementById("play_pause_button");
play_pause_button.style.visibility = "hidden";
var details = document.getElementById("details");
details.style.visibility = "hidden";
var controls_bar = document.getElementById("player_controller_bar");
controls_bar.style.visibility = "hidden";
document.getElementById("video_player_box").onclick = function () {
if (controls_bar.style.visibility == "hidden") {
play_pause_button.style.visibility = "visible";
details.style.visibility = "visible";
controls_bar.style.visibility = "visible";
} else {
play_pause_button.style.visibility = "hidden";
details.style.visibility = "hidden";
controls_bar.style.visibility = "hidden";
}
}
body {
margin: 0;
}
#video_player_box {
position: relative;
height: 100%;
width: 100%;
display: block;
font-family: Helvetica, Arial, sans-serif;
color: rgb(22,22,23);
}
#video_player_box video {
height: 100%;
width: 100%;
pointer-events: none;
}
#video_player_box img {
width: 50px;
height: 50px;
}
#video_player_box #details {
width: 100%;
height: 12.5%;
background-color: rgb(108, 171, 247);
position: absolute;
top: 0;
}
#video_player_box #play_pause_button {
background-color: rgb(108, 171, 247);
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
#video_player_box #play_pause_button img {
width: 50%;
height: 50%;
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
margin: -25% 0px 0px -25%;
}
#video_player_box #player_controller_bar {
width: 100%;
height: 50px;
background-color: rgb(108, 171, 247);
position: absolute;
bottom: 0;
display: flex;
align-items: center;
}
.controller_bar_block1, .controller_bar_block3 {
text-align: center;
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}
.controller_bar_block2 {
flex: 7;
text-align: center;
padding: 0px 5px 0px 5px;
}
#video_player_box #seek_bar {
padding-top: 3px;
background: rgb(108, 171, 247);
border: rgb(22, 22, 23) 1px solid;
border-radius: 50px;
width: 100%;
float: left;
-webkit-appearance: none !important;
height: 4px;
flex: 7;
}
#video_player_box #seek_bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: rgb(22, 22, 23);
height: 1px;
width: 1px;
cursor: pointer;
border-radius: 100%;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="video_player_box">
<div id="details"></div>
<div id="play_pause_button">
<img src="https://image.flaticon.com/icons/png/512/31/31128.png">
</div>
<video poster="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg" src="https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4"></video>
<div id="player_controller_bar">
<div class="controller_bar_block1">00:00:00</div>
<div class="controller_bar_block2">
<input id="seek_bar" type="range" min="0" value="0" max="634">
</div>
<div class="controller_bar_block3">00:10:34</div>
</div>
</div>
</body>
</html>
You can use the event's target property. The target property references the element that was actually clicked, even when you attach the handler on a ascending element
(see https://developer.mozilla.org/en-US/docs/Web/API/Event/target)
you will receive the reference to the event as the first argument of your onClick handler
myElement.onclick = function (ev) {
if (ev.target.id === 'details') {
// the clicked element is the details element
}
}
you can also check if the target is the video element for example.
console.log(ev.target.nodeName === 'VIDEO')

LazyLaoding CSS background (not HTML <img> tags)

I've managed to figure out how to lazyload images on my website where the images are called into the HTML via <img> tags. I used this package on GitHub to accomplish this. However I'm having trouble acomplishing the same thing with CSS background:'s.
-Some information on the issue:
I created an image menu bar last night that changes image size/position based on the browsers screen (Link provided). All the images in this image menu bar are called in via background: within the CSS (not through an <img> tag).
-Now for my question:
How am i able to lazyload the background: images within the css of this project I've started. On my website I would just change <img src=""> to <img data-src="" (within the HTML) after following the instructions from the Github link above, and images will load as they become visible on the screen.
-Reason for doing this:
This is purely to speed up the website and to avoid loading all images at once. Any other tips to ensure this does not take a toll on loading time, or any other possible ways around this issue would be appreciated.
-Note: I've used background: and not background-image: for this project.
If you missed the link to my project: https://jsfiddle.net/Shololom/wbgn210y/
From the Github project you provided :
Lazy background images
When to use: your images are set as CSS background images instead of real img, but you still want to lazily load them.
HTML
<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>
Javascript
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
That's it. Whenever the element selected by elements_selector is not an img or an iframe, LazyLoad puts the image found in the data-src attribute in the background-image of the element.
Edit: Complete example:
// Get products
var product1 = document.getElementById('product1');
var product2 = document.getElementById('product2');
var product3 = document.getElementById('product3');
var product4 = document.getElementById('product4');
var product5 = document.getElementById('product5');
// Create Lazy loader
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
// Load images in a responsive way
function loadImgs() {
console.log('Loading images ...');
var src1;
var src2;
var src3;
var src4;
var src5;
if(window.matchMedia("only screen and (max-width:700px)").matches) {
/* The viewport is lesser than 700 pixels wide */
src1 = product1.getAttribute('data-src-small');
src2 = product2.getAttribute('data-src-small');
src3 = product3.getAttribute('data-src-small');
src4 = product4.getAttribute('data-src-small');
src5 = product5.getAttribute('data-src-small');
} else {
src1 = product1.getAttribute('data-src-large');
src2 = product2.getAttribute('data-src-large');
src3 = product3.getAttribute('data-src-large');
src4 = product4.getAttribute('data-src-large');
src5 = product5.getAttribute('data-src-large');
}
// Set the data-src for lazy loader
product1.setAttribute('data-src', src1);
product2.setAttribute('data-src', src2);
product3.setAttribute('data-src', src3);
product4.setAttribute('data-src', src4);
product5.setAttribute('data-src', src5);
// Tell lazy loader that the data should be re-processed
product1.removeAttribute('data-was-processed');
product2.removeAttribute('data-was-processed');
product3.removeAttribute('data-was-processed');
product4.removeAttribute('data-was-processed');
product5.removeAttribute('data-was-processed');
// Tell lazy loader to update
myLazyLoad.update();
}
// Load images first time
loadImgs();
// Reload images when window is resized
var lastWindowSize = window.innerWidth;
window.onresize = function(event) {
var currentWindowSize = window.innerWidth;
if((lastWindowSize <= 700 && currentWindowSize > 700) || (lastWindowSize > 700 && currentWindowSize <= 700)) {
loadImgs();
}
lastWindowSize = currentWindowSize;
};
.top-header-settings {
font-family: inherit;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .1em;
margin: 0 0 45px;
padding: 45px 0 0;
color: #524949;
border-top: 1px solid #ddd;
}
.top-menu-wrap {
margin: 0 auto;
position: relative;
;
background-color: #343434;
}
.top-menu-inner {
max-width: 1200px;
height: 260px;
/*/background-color:#343434;/*/
margin: 0 auto;
}
.top-menu-innerr {
max-width: 1161px;
height: 200px;
margin: 0 auto;
padding-top: 20px;
}
.top-menu-button {
width: 220px;
height: 220px;
display: inline-block;
margin: 5px;
text-align: center;
font-size: 16px;
opacity: .6;
transition: 0.3s;
}
.top-menu-button:hover {
opacity: 1
}
#font-face {
font-family: 'roboto';
src: url(https://fonts.googleapis.com/css?family=Roboto);
}
.top-menu-text {
width: 125px;
height: 30px;
/*/background-color:red;/*/
margin: 150px auto;
text-align: center;
color: white;
font-family: 'roboto';
font-size: 20px;
background: #343434;
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .60;
border-style: solid;
border-width: 1px;
line-height: 25px;
}
.coming-soon-top {
width: 75px;
height: 20px;
font-size: 10px;
text-align: center;
color: white;
position: absolute;
font-family: 'roboto';
background: #c78f8f;
}
#media only screen and (max-width:1200px) {
.top-menu-wrap {
margin: 0 auto;
position: relative;
background-color: #343434;
}
.top-menu-inner {
max-width: 1200px;
min-height: 340px;
/*/ background-color:#343434;/*/
margin: 0 auto;
}
.top-menu-innerr {
max-width: 80%;
min-height: 200px;
width: 80vw;
margin: 0 auto;
/*/background:red;/*/
}
.top-menu-button {
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
float: left;
margin: 1px auto;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 1;
transition: 0.3s;
color: white;
}
.top-menu-button:hover {
opacity: .6
}
#product2 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product1 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product3 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product4 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product5 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.top-menu-text {
/*/width:125px;/*/
/*/height:30px;/*/
width: 30vw;
height: 10vw;
/*/background-color:red;/*/
margin: 150px auto;
text-align: center;
color: white;
font-size: 5.9vw;
line-height: 9vw;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.7.1/lazyload.min.js"></script>
<div class="top-menu-warp">
<div class="top-menu-inner">
<div class="top-menu-innerr">
<a href="#">
<div id="product1" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="coming-soon-top">
Most Popular
</div>
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product2" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product3" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product4" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product5" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="coming-soon-top">
Coming soon
</div>
<div class="top-menu-text">
Text
</div>
</div>
</a>
</div>
</div>
A jsfiddle

Horizontal Div Scroll

I'm quite new to Jquery, I'm trying to implement horizontal scrolling on a div using the scrollLeft property, I'm not getting any error messages and nothing seems to be working, could someone explain why? Thanks in advance
this is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: pos - 200;
});
});
});
</script>
<style>
#container{
max-width: 938px;
height: 500px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
overflow: scroll;
/*display: table;*/
}
.picsdiv{
display: table-cell;
min-width: 286px;
padding-right: 80px;
height: 508px;
border: 2px solid pink;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
border: 2px solid pink;
}
.next {
right: 170px;
border-radius: 3px 0 0 3px;
}
.prev{
left: 170px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
<body>
<div id="container">
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</body>
take out the semi-colon on this line and it should work
scrollLeft: pos - 200;
firstly you must close script tag that include jquery file and also open another script tag for your jquery code
I just added a seperate script tag for the Jquery code and used the first one to only refer to the library and it now works. Thanks for all your help
You have done 2 mistakes in your code:
scrollLeft: pos - 200; should be like scrollLeft: (pos - 200), because you are passing an object as parameter
Write two <script> tags, one for jQuery, like below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javacsript"></script>
And another for your custom java-script
<script type="text/javascript">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: (pos - 200)
});
});
});
Because you can not write code inside element if you are using ths element as external reference.
Here is your complete running code
<html>
<head>
<style>
#container{
max-width: 938px;
height: 500px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
overflow: scroll;
/*display: table;*/
}
.picsdiv{
display: table-cell;
min-width: 286px;
padding-right: 80px;
height: 508px;
border: 2px solid pink;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
border: 2px solid pink;
}
.next {
right: 170px;
border-radius: 3px 0 0 3px;
}
.prev{
left: 170px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="container">
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<a class="prev"><</a>
<a class="next">></a>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: (pos - 200)
});
});
});
</script>
</html>

Categories