Apply transition for dynamically appended divs - javascript

Good day or night to the whole stackoverflow community! (Especially for those who are reading this 😀)
The thing is I have a big container.
Several divs of the fixed height are appended into it on user's click.
Those divs have header blocks and description blocks in them.
In the end I need their description blocks to have transform: translateY(dynamicHeight), where dynamicHeight is their height value which is dependent on the header block height (header height is not universal for all items. Each item may have its own header height). (Overall div height is 200px and if header block is 53px height, description block should take the rest 147px)
$(function () {
var itemsNumber = 4; //Say, I've got this number of items from a database.
$("#btn").on("click", function () {
for (i=0; i < itemsNumber; i++) {
$("#container").append($("<div class=\"item\" id=" + i + "><div class=\"moving\"><div class=\"header\">Hi! I'm header.</div><div class=\"description\">Howdy. I am the content.</div></div></div>"));
}
});
});
#btn {
background-color: green;
color: black;
cursor: pointer;
display: inline-block;
margin-bottom: 16px;
padding: 10px 30px;
}
#container {
border: 1px solid #aaa;
display: flex;
justify-content: space-between;
min-height: 150px;
padding: 10px;
width: 550px;
}
.item {
border: 1px solid #999;
height: 200px;
overflow: hidden;
width: 120px;
}
.moving {
transform: translateY(147px); /* Need to calculate this value using jQuery or vanilla JavaScript (itemHeight - headerHeight) but have no idea how to do it, because items are added dynamically.. */
transition: transform .4s ease-in-out;
}
.item:hover .moving {
transform: translateY(0);
}
.moving div {
padding: 10px;
text-align: center;
}
.header {
background-color: red;
height: 53px; /* This value isn't going be the same for each item */
text-transform: uppercase;
}
.description {
background-color: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div> <!-- Items are added to this div -->

You can calculate dynamic height like this $("#container").height() - $(".header").height(); and use this function $(document).on("mouseenter", ".item", function() to bind hover evcent to dynamically created elements like this
$(function() {
var itemsNumber = 4; //Say, I've got this number of items from a database.
$("#btn").on("click", function() {
for (i = 0; i < itemsNumber; i++) {
$("#container").append($("<div class=\"item\" id=" + i + "><div class=\"moving\"><div class=\"header\" >Hi! I'm header.</div><div class=\"description\" >Howdy. I am the content.</div></div></div>"));
}
var hei = $("#container").height() - $(".header").height();
$(".moving").css("transform", "translateY(" + hei + "px)"); //translate using dynamic height
$(".description").css("height", hei-2+"px"); //set height of description dynamically
});
$(document).on("mouseenter", ".item", function() {
$(this).find(".moving").css("transform", "translateY(0)");
$(this).find(".moving").css("transition", " transform .4s ease-in-out");
});
$(document).on("mouseleave", ".item", function() {
var hei = $("#container").height() - $(".header").height();
$(this).find(".moving").css("transform", "translateY(" + hei + "px)");
$(this).find(".moving").css("transition", " transform .4s ease-in-out");
});
});
#btn {
background-color: green;
color: black;
cursor: pointer;
display: inline-block;
margin-bottom: 16px;
padding: 10px 30px;
}
#container {
border: 1px solid #aaa;
display: flex;
justify-content: space-between;
min-height: 150px;
padding: 10px;
width: 550px;
}
.item {
border: 1px solid #999;
height: 200px;
overflow: hidden;
width: 120px;
}
.moving div {
padding: 10px;
text-align: center;
}
.header {
background-color: red;
height: 53px;
/* This value isn't going be the same for each item */
text-transform: uppercase;
}
.description {
background-color: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div>
<!-- Items are added to this div -->
P.S. Also set height of description dynamically like this $(".description").css("height", hei-2+"px"); : -2px is of borders each 1px on item and container

Related

Problem with Prestashop frontend - how to optimize my code

I have a problem with my code that I use for item descriptions in my Prestashop store. The point is that when I add a description in html to the store, I do not provide the "ALT" attribute of the photo. I have scripts that do this automatically.
Here is the html code that I add to the full description of the item:
<img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">
After saving the changes, the code displayed in the browser looks like this:
<img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" alt="hearts icons vectors illustrations" width="200" height="300"><p class="alt">hearts-icons-vectors-illustrations.jpg</p>
The second part of the code that was added by the script is used to display the name of the photo when hovering over it.
And here is the problem. The point is that the script adds the same data that another script adds to the "ALT" of the photo. Without "-" and ".jpg" characters.
JS and CSS files are in the theme folder: "custom css" and "custom JS"
Here is the full code that I am using in my Prestashop store:
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
$(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});
$(document).ready(function () {
$("img").each(function () {
var $img = $(this);
var filename = $img.attr("src");
if (typeof attr == typeof undefined || attr == false) {
var altText = filename.substring(
filename.lastIndexOf("/") + 1,
filename.lastIndexOf(".")
);
altText = altText.replace("-", " ").replace(".jpg", "");
$img.attr("alt", altText);
}
});
});
.img2 {
max-width: 100%;
height: 100%;
margin: 0;
padding: 0px;
column-count: max-width;
background-color: white;
}
.img-wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.img {
display: block;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 5px solid transparent;
border-image: linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: transparent;
transition: all 10ms linear;
transition-delay: 300ms;
text-align: center;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
text-align: center;
font-weight: 900;
color: white;
font-size: 150%;
border: 20px solid transparent;
margin-left: 1%;
margin-right: 1%;
text-shadow: 0 0 10px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img2"><div class="img-wrap"><img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">
How can I change/optimize the above codes so that the name of the photo is displayed without the "-" and ".jpg" signs after hovering the mouse cursor?
Here on hover it shows "undefined" on my website it shows "hearts-icons-vectors-illustrations.jpg" I want it to show without "-" and ".jpg".
Prestashop version 1.7.7.3.
it's showing undefined that's why i am doing it by adding innerHTML
$(".alt").html(altText.replace(/-/g, " "));
I just added this line in your code it will replace all - with space so output will be what you want "hearts icons vectors illustrations"
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
$(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});
$(document).ready(function () {
$("img").each(function () {
var $img = $(this);
var filename = $img.attr("src");
let text = filename
if (typeof attr == typeof undefined || attr == false) {
var altText = filename.substring(
filename.lastIndexOf("/") + 1,
filename.lastIndexOf(".")
);
altText = altText.replace("-", " ").replace(".jpg", "");
$img.attr("alt", altText);
// it's showing undefined that's why i am doing it by adding innerHTML
$(this).next().html(altText.replace(/-/g, " "));
}
});
});
.img2 {
max-width: 100%;
height: 100%;
margin: 0;
padding: 0px;
column-count: max-width;
background-color: white;
}
.img-wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.img {
display: block;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 5px solid transparent;
border-image: linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: transparent;
transition: all 10ms linear;
transition-delay: 300ms;
text-align: center;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
text-align: center;
font-weight: 900;
color: white;
font-size: 150%;
border: 20px solid transparent;
margin-left: 1%;
margin-right: 1%;
text-shadow: 0 0 10px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img2"><div class="img-wrap"><img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">

Create a multiple holes through a overlay to access elements under the overlay

I am trying to create holes through an overlay to access elements under the screen
I don't want to do box-shadow effect as I would need multiple buttons to be highlighted like this. Doing an svg mask works but there are issues with clicking the buttons underneath.
Here are some sample codes I've tried to do.
Overlay: https://jsfiddle.net/bc1ovfk0/1/
<div id="overlay">
<div id="cutout"></div>
</div>
<div class="container">
<button class="button" onclick="handleClick(event);">Click Me</button>
<button class="button" onclick="handleClick(event);">Click Me</button>
<button class="button" onclick="handleClick(event);">Click Me</button>
<button class="button" onclick="handleClick(event);">Click Me</button>
</div>
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
#overlay > * {
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
}
.container{
display: grid;
grid-gap: 5em;
padding-top: 20px;
}
.button{
padding: 10px;
text-align: center;
cursor: pointer;
background-color: blue;
color: white;
font-size: 2em;
border-radius: 5px;
box-shadow: 1px 1px 1px #333;
}
#cutout {
display: inherit;
background-color: transparent;
}
handleClick = (event) => {
document.getElementById('overlay').style.display = 'block';
const elBoundingRect = event.srcElement.getBoundingClientRect();
const overlay = document.getElementById('overlay');
const insetValue = "polygon(" + elBoundingRect.x + "px " + elBoundingRect.y + "px, "
+ elBoundingRect.right + "px " + elBoundingRect.top + "px, "
+ elBoundingRect.right + "px " + elBoundingRect.bottom + "px, "
+ elBoundingRect.left + "px " + elBoundingRect.bottom + "px)";
debugger;
const cutout = document.getElementById('cutout');
cutout.style.clipPath = insetValue;
}
svg mask fiddle
Instead of "creating holes", set the overlay's z-index to -1, then set the z-index of the elements you want to be highlighted to a number bigger than -1:
Fiddle: https://jsfiddle.net/sqyw75en/
#overlay > * {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
}
.button{
z-index: 1;
padding: 10px;
text-align: center;
cursor: pointer;
background-color: blue;
color: white;
font-size: 2em;
border-radius: 5px;
box-shadow: 1px 1px 1px #333;
}

Keep right-alignment after changing to fixed-position by scroll

I've got a function on a drop-down button which when scrolled past it, it changes position to fixed so that it's always visible. Although, my problem is when it changes to position:fixed, it's usually aligned to the right, but it changes position to the left. How can I make it so that it stays in place? I can't use any fixed "right" value, as I need this to work on mobile version as well(width of parent container varies). Check my jsFiddle https://jsfiddle.net/ramisrour/2asco9n1/6/
Also, the .dropContainer doesn't need height or width, I just set it there for the fiddle, so you can test with the scrolling.
<div class="dropContainer">
<div class="dropDwn">
<div class="dropToggle">Viktig informasjon! Les her <i class="bouncer"></i></div>
<div class="dropContentBox">
<div class="dropTxt">
Vær oppmerksom på at Huawei P40-serien og Mate Xs ikke har Google Mobile Services (GMS) installert (Du kan derfor ikke laste ned apper direkte fra Google Play Butikken). Istedenfor har den AppGallery, Huaweis egen offisielle appbutikk.
</br>Du kan bruke AppGallery til å lete etter, laste ned, håndtere og dele mobilapper.
</div>
</div>
<div class="acceptCta"><span class="acceptCtaTxt">Jeg har lest og forstått </span><i class="arroww"></i></div>
</div>
</div>
.dropContainer{
position: relative;
box-sizing: border-box;
}
.dropDwn {
font-family: inherit;
background-color: #fff;
color: #333;
border: solid 1px #333;
position: relative;
text-align: center;
display: block;
z-index: 9999;
cursor: pointer;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
font-size: 16px;
width: 250px;
box-sizing: border-box;
height: 30px;
overflow: hidden;
float: right;
}
.dropDwn.open {
height: 280px;
width: 320px;
cursor: default;
background-color: #000E52;
color: #fff;
}
.dropTxt{
margin: 10px;
}
.bouncer {
position: relative;
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.5s ease;
animation: bouncer 2s infinite;
}
.dropDwn.open .bouncer {
transform: rotate(225deg);
border-color: #fff;
}
.dropContentBox {
margin-top: 10px;
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta {
display: block;
position: relative;
cursor: pointer;
text-align: center;
margin: 0 auto;
background-color: #7CBD2B;
color: #333;
height: 35px;
width: 220px;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
transition: all 0.5s ease;
z-index: 10;
}
.acceptCta:hover {
background-color: #88D41B;
padding: 9px 24px;
}
.acceptCtaTxt {
display: inline-block;
float: left;
vertical-align: middle;
position: relative;
}
.arroww {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
box-sizing: border-box;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.acceptCta:hover .arroww {
/*padding: 6px 2px;
transform: rotate(-315deg);*/
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
// Open/close
$(document).ready(function() {
$('.dropToggle').click(function() {
$(this).parent().addClass("open");
});
setTimeout(function() {
$('.acceptCta').click(function() {
//This needed
var $this = $(this);
var $container = $('.dropDwn');
var $arrow = $('.arroww');
$arrow.css("transform", "rotate(-315deg)");
$arrow.css("padding", "6px 2px");
setTimeout(function() {
$this.parent().removeClass("open");
}, 600);
setTimeout(function() {
$container.css("opacity", "0");
$container.css("right", "-1000px");
}, 1100);
setTimeout(function() {
$container.css("display", "none");
}, 1600);
});
})
});
// Hide if src image is in viewport, otherwise show
$(document).ready(function() {
var topOfOthDiv = $("[alt='Guide for installasjon av apper']").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv + 200) {
$(".dropDwn").css("right", "-1000px");
$(".dropDwn").css("opacity", "0");
} else {
$(".dropDwn").css("opacity", "1");
}
});
});
// Stick button when scrolling past it
$(document).ready(function() {
var topOfOthDiv2 = $('.dropDwn').offset().top;
var drop = $('.dropDwn');
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv2 + 20) {
drop.css("position", "fixed");
} else {
drop.css("position", "relative");
}
});
});
It's the bottom jQuery function which makes it stick by scrolling.
you have to add right value when you apply fixed position. in simalr way you can add top value too.
Update below js and also the yo
if ($(window).scrollTop() > topOfOthDiv2 + 20) {
drop.css("position", "fixed");
drop.css("right", "10px");
} else {
drop.css("position", "relative");
drop.css("right", "0px");
}
I solved this by using flex. In case anybody needs help with this here's what I did:
Max-width: 1280px; on the container, because it never gets bigger than 1280px. Added display: flex; and justify-content: flex-end; so the child element would always sit at the end of the parent element, even in fixed position.
Also added some margin and top values to make the transition from absolute to fixed more smoothly, but that might differ for you as this suited my situation.
.dropContainer{
display: flex;
max-width: 1280px;
justify-content: flex-end;
position: relative;
box-sizing: border-box;
}
.dropDwn {
font-family: inherit;
background-color: #fff;
color: #333;
border: solid 1px #333;
position: absolute;
text-align: center;
display: block;
z-index: 9999;
cursor: pointer;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
font-size: 16px;
width: 250px;
box-sizing: border-box;
height: 30px;
overflow: hidden;
float: right;
margin-right: 10px;
}
// Hide if src image is in viewport, show if not
$(document).ready(function() {
var topOfOthDiv2 = $('.dropDwn').offset().top;
var drop = $('.dropDwn');
var cont = $('.dropContainer');
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv2 - 10) {
drop.css("position", "fixed");
drop.css("top", "10px");
} else {
drop.css("position", "absolute");
drop.css("top", "");
}
});
});

jQuery delay() to start when you scroll to a specific div

I have delays in place within my div gray. I don't want those delays or animation to start until the user would scroll to that specific div. What I have tried doing is not working. The delays and animation still work, but they begin once the page loads.
Does anyone see what I am doing wrong?
$(function() {
var oTop = $('.gray').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
textdelays();
}
});
});
$(function textdelays(){
$('#text').delay(1000).fadeIn(2200);
$('#text-button').delay(1000).fadeIn(2200);
$('#text-button').animate({'top': '60%'}, 1000);
});
.green {
background-color: green;
width: 100%;
height: 500px;
}
.yellow {
background-color: yellow;
width: 100%;
height: 500px;
}
.gray {
background-color: #CCC;
width: 100%;
height: 300px;
}
#text {
color: blue;
display: none;
text-align: center;
position: relative;
margin: 0 25%;
top: 35%;
font-size: 1.3em;
}
#text-button {
position: relative;
wdith: 100%;
text-align: center;
top: 70%;
display: none;
cursor: pointer;
}
.border-span {
border: 2px solid #FFF;
padding: 15px 10px;
color: #FFF;
font-weight: bold;
}
.border-span:hover {
background-color: #FFF;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="yellow"></div>
<div class="gray">
<div id="text">text.</div>
<div id="text-button"><span class="border-span">text animation</span></div>
</div>

Draggable not working in jqueryUI

I have a simple progress bar for my <audio> element and I want to make it so the knob is draggable, so I decided to try the jquery UI .draggable method, but it does not work on my knob. All it does is prevent my knob from appearing when you hover over the player as if the code beneath is invalid as soon as that code is in there.
I've tried this for hours and cannot figure out what's wrong with my code. You can see the player below here: I've included a test audio file also so you can see it in action. (The knob is supposed to fade in when you hover over the player, but doesn't after the draggable method. Something is making it invalid, if you wish to see the knob, simply remove the code marked /** This does not work /** )
/**
VARIABLES
**/
/** Elements **/
var player = $("#player");
var playerE = $("#player")[0];
var playerE = $("#player").get(0);
var playbutton = $("#playButton");
var scrubber = $(".scrubber");
var progress = $(".progress");
var buffered = $(".buffered");
var knob = $(".knob");
/** Variables **/
var isPlaying = 0;
var buffered = 0;
var progress = 0;
/**
CONTROLS
**/
/** Scrubber and Time **/
playerE.ontimeupdate = function () {
audioTimeUpdater();
};
function audioTimeUpdater() {
var progress = playerE.currentTime / playerE.duration;
var buffered = playerE.buffered.end(0) / playerE.duration;
$(".progress").width((progress * 100) + "%");
$(".buffered").width((buffered * 100) + "%");
}
/** This does not work **/
$("#.knob").draggable({
axis: "x"
});
/** This also stops working after the above code, if I remove it, it works. **/
$(".player-small").mouseenter(function () {
$(".knob").stop().fadeIn(200);
});
setTimeout(function () {
$(".player-small").mouseleave(function () {
$(".knob").stop().fadeOut(200);
});
}, 3000);
/**
EVENT HANDLERS
**/
/**
FUNCTIONS
**/
function play(file, title) {
playbutton.removeClass("playFailed");
var filename = "/music/" + file;
player.attr("src", filename).trigger("play");
playerHasError();
if (playerIsToggled === 0) {
playerToggle();
}
}
function playerHasError() {
$("#player").on("error", function (e) {
source = $("#player").attr('src');
pushModal("We can't play that!", "Audio element error.", ("An error occured and " + source + " cannot be played. If this is an error that persists please contact the website administrator."), "Audio element returned error trying to play source.", 1);
playbutton.addClass("playFailed");
});
}
button {
border: none;
outline: none;
}
body,
nav,
ul,
li,
a {
padding: 0;
margin: 0;
list-style: none;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
body {
overflow-y: scroll;
}
::selection {
background: rgba(255, 64, 129, 0.85);
color: black;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: rgba(255, 64, 129, 0.85);
color: black;
}
.player-small {
height: 55px;
width: 100%;
background: #ff4081;
}
.player-height-anim {}
.player-small .left {
height: 55px;
float: left;
width: 60%;
}
.player-small .right {
height: 55px;
float: right;
width: 40%;
}
.transport {
overflow: auto;
}
.play-button-con {
height: 55px;
width: 55px;
float: left;
}
.play {
padding-top: 3px;
width: 55px;
height: 55px;
font-size: 18px;
padding-right: 4px;
text-align: center;
}
.playFailed {
color: rgba(255, 255, 255, 0.17)!important;
pointer-events: none;
}
.next-button-con {
height: 55px;
width: 55px;
float: left;
}
.next {
padding-top: 2px;
padding-right: 8px;
width: 55px;
height: 55px;
text-align: center;
letter-spacing: -3px;
font-size: 11px;
padding-bottom: 2px
}
.scrubber-con {
float: left;
height: 55px;
width: calc(100% - 111px);
}
.scrubber {
width: calc(100% - 40px);
margin: auto;
margin-top: 25px;
height: 5px;
background: rgba(0, 0, 0, .04);
cursor: pointer;
}
.scrubber .knob {
float: right;
height: 13px;
width: 13px;
position: relative;
bottom: 4px;
left: 5px;
background: white;
border-radius: 50px;
display: none;
}
.scrubber .knob:hover {
cursor: grab;
}
.scrubber .knob:active {
cursor: grabbing;
}
.scrubber .progress {
height: 100%;
float: left;
background: white;
width: 0%;
position: relative;
z-index: 1;
transition: ease 300ms;
}
.scrubber .buffered {
height: 5px;
position: relative;
width: 0%;
background: rgba(0, 0, 0, .09);
transition: ease 1000ms;
}
.player-small button {
color: white;
float: left;
background: rgba(0, 0, 0, .04);
cursor: pointer;
}
.player-small button:hover {
background: rgba(0, 0, 0, .12);
}
<script type="text/javascript " src="http://code.jquery.com/jquery-latest.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="player-small">
<div class="w-ctrl">
<div class="controls">
<div class="left">
<div class="transport">
<div class="play-button-con">
<button class="play" id="playButton">â–º</button>
</div>
<div class="next-button-con">
<button class="next">►► </button>
</div>
<div class="scrubber-con">
<div class="scrubber">
<div class="progress">
<div class="knob"></div>
</div>
<div class="buffered"></div>
</div>
</div>
</div>
</div>
<div class="right">
<audio id="player" src="http://c1d20c5c.ngrok.io/music/test.mp3" controls="controls" preload="none"></audio>
</div>
</div>
</div>
</div>
So as you see the knob doesn't even appear, and if you make it appear, it is still not draggable. I tested the lint and everything is OK and should be working, but it isn't. What am I doing wrong?
Your selector is wrong:
$("#.knob").draggable({...});
#.knob won't work, you can either select via an id using #idname or via a class using .classname.
In your html, knob is a class, so using
$(".knob").draggable({
axis: "x"
});
Should work, but be aware that this selects all html elements with the knob class.

Categories