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.
Related
Hi guys I've been working on this project that saves the position of the drag and drop and i was wondering if there is away to save is position to a text or excel file giving you the time of the move.
i.e DIV 1 was moved to A at 09:00, DIV 1 was moved from A to B at 09:15 if that makes sense.
Couldn't figure it out.
<html>
<head>
<\head>
<style>
#draggable1 {
position: fixed;
bottom: 0;
margin: 1px 0;
padding: 0 20px;
height: 20px;
width: 50px;
line-height: 20px;
border-radius: 1px;
background: #136a8a;
background: -webkit-linear-gradient(to right, #267871, #136a8a);
background: linear-gradient(to right, #267871, #136a8a);
color: #fff;
list-style: none;
}
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
}
#draggable,
#draggable2 {
margin-bottom: 20px;
}
#draggable {
cursor: n-resize;
}
#draggable3 {
cursor: move;
}
#containment-wrapper {
width: 700px;
height: 500px;
border: 1px solid #000;
padding: 5px;
}
h3 {
clear: left;
}
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
}
<\style>
<body>
<ul class="drag-sort-enable">
<li0 id="draggable1" class="draggable ui-widget-content" input type="text" >659451</li0>
</body>`
<script>
var sPositions = localStorage.positions || "{}",
positions = JSON.parse(sPositions);
$.each(positions, function(id, pos) {
$("#" + id).css(pos)
})
$("#draggable1").draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function(event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
<\script>
I have a button that I want to be able to close if it's clicked outside the area of the popout. I tried adding a toggle class but I am not sure if I am doing it right. I used the example from geekforgeeks.
https://www.geeksforgeeks.org/how-to-toggle-an-element-class-in-javascript/
But I am getting the following error message:
Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('function openPopOut() {popOut.classList.add("open");setTimeout(closePopOut, 8000);
}') contains HTML space characters, which are not valid in tokens.
Any pointers on how to proceed?
This is my code:
const activateBtn = document.querySelector(".activate-btn");
const html = document.querySelector("html");
const popOut = document.querySelector(".pop-out");
const popOutCloseBtn = popOut.querySelector(".pop-out__close-btn");
function openPopOut() {
popOut.classList.add("open");
setTimeout(closePopOut, 8000);
}
function closePopOut() {
popOut.classList.remove("open");
}
// activateBtn.addEventListener("click", openPopOut);
activateBtn.addEventListener("click", function (e){
activateBtn.classList.add(openPopOut);
});
popOutCloseBtn.addEventListener("click", closePopOut);
html.addEventListener("click", function (e) {
if (e.target !== popOut) popOut.classList.remove("pop-out");
});
body {
display: flex;
width: 100%;
height: 100%;
}
button {
cursor: pointer;
}
.activate-btn {
margin: auto;
}
.pop-out {
position: absolute;
bottom: 32px;
right: 32px;
display: flex;
width: 175px;
height: 100px;
background-color: cornflowerblue;
border: 1px solid;
border-radius: 4px;
transform: translateX(210px);
transition: transform 333ms ease-out;
}
.pop-out__close-btn {
position: absolute;
top: 8px;
right: 8px;
background-color: transparent;
font-weight: bold;
border: none;
}
.pop-out__msg {
margin: auto;
}
.pop-out.open {
transform: translateX(0);
}
<html>
<button class="activate-btn">Activate</button>
<div class="pop-out">
<button class="pop-out__close-btn">X</button>
<h3 class="pop-out__msg">Hello!</h3>
</div>
</html>
Fixed your code.
The popup shows when you click the button, when you click outside the popup, it disappears.
const activateBtn = document.querySelector(".activate-btn");
const html = document.querySelector("html");
const popOut = document.querySelector(".pop-out");
const popOutCloseBtn = popOut.querySelector(".pop-out__close-btn");
function openPopOut() {
popOut.classList.add("open");
setTimeout(closePopOut, 8000);
}
function closePopOut() {
popOut.classList.remove("open");
}
// activateBtn.addEventListener("click", openPopOut);
activateBtn.addEventListener("click", function (e){
openPopOut();
});
popOutCloseBtn.addEventListener("click", closePopOut);
document.addEventListener("click", function (e) {
if (e.target !== popOut && e.target !== activateBtn) closePopOut();
});
body {
display: flex;
width: 100%;
height: 100%;
overflow-x: hidden;
}
button {
cursor: pointer;
}
.activate-btn {
margin: auto;
}
.pop-out {
position: absolute;
bottom: 32px;
right: 32px;
display: flex;
width: 175px;
height: 100px;
background-color: cornflowerblue;
border: 1px solid;
border-radius: 4px;
transform: translateX(210px);
transition: transform 333ms ease-out;
}
.pop-out__close-btn {
position: absolute;
top: 8px;
right: 8px;
background-color: transparent;
font-weight: bold;
border: none;
}
.pop-out__msg {
margin: auto;
}
.pop-out.open {
transform: translateX(0);
display: flex;
}
<html>
<button class="activate-btn">Activate</button>
<div class="pop-out">
<button class="pop-out__close-btn">X</button>
<h3 class="pop-out__msg">Hello!</h3>
</div>
</html>
im in the process of taking two projects that i found on instagram. i am making a random color generator and on the side of the text it shows a clipboard button so i can or who ever can randomly generate a color and copy the hex code. i have went over the code and both projects and i am getting a "Uncaught TypeError: Cannot read property 'select' of null " in the console.
the project can be found at the following link https://codepen.io/nhmalbone0311/pen/KKmYQbQ.
let letters = "0123456789ABCDEF";
const body = document.querySelector("body");
const colorElement = document.querySelector("#color");
function getColor() {
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * letters.length)];
}
body.style.backgroundColor = color;
colorElement.innerHTML = color;
}
function copyText() {
var copyText = document.getElementById("#color");
copyText.select();
document.execCommand("copy");
document.getElementById("notification").style.opacity = "1";
setTimeout(() => {
document.getElementById("notification").style.opacity = "0";
}, 1000);
}
console.log(copyText);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #494e6b;
transition: 0.1s;
}
/* p field */
.colors {
float: left;
margin-bottom: 20px;
font-size: 26px;
padding: 10px 57px;
text-align: center;
color: #fff;
background: #000;
}
/* btns */
.btn {
cursor: pointer;
width: 50px;
height: 47px;
border: none;
margin: 0 5px 0;
font-size: 25px;
}
.g-color {
padding: 5px 13px;
border: 3px solid #111;
letter-spacing: 1px;
outline: none;
font-size: 25px;
transition: 100ms ease-in-out;
cursor: pointer;
}
.g-color:hover {
outline: none;
color: red;
}
.tooltip {
position: relative;
display: flex;
align-item: center;
justify-content: center;
width: 180px;
height: 50px;
font-size: 20px;
padding: 10px;
border-radius: 10px;
bottom: 7rem;
left: 14rem;
color: #fff;
background: #98878f;
opacity: 0;
transition: .5s;
}
.tooltip:after {
position: absolute;
content: "";
width: 25px;
height: 25px;
top: -8rem;
right: 50px;
background: #985e6d;
transform: rotate(45deg);
}
<div class="container">
<p id="color" class="colors">#</p>
<button onclick="copyText()" class="btn"><i class="far fa-copy"></i></button>
<div class="generate-color">
<button onclick="getColor()" class="g-color">Generate Color</button>
</div>
<!-- notification -->
<div class="tooltip" id="notifaction">
<p>Text Copied!</p>
</div>
</div>
im using code pen as i do this as a hobby for now in its just easier for me to show my work off and have people me if i need it.
im just now working on getting out of tutorial hell and founding projects on the web in intergrading them into my own style and changing things up.
remove the # from the "#color" in var copyText = document.getElementById("#color");
I have a div which acts like a button when I press it. I add classes to change color and the circle inside moves to the right when is clicked. What I would like to do, is to call a function and then change a global variable inside the function and pass it back. I am also testing the code using the document.getElementById("test").innerHTML and the 12th changes to 13th and vise versa successfully. However, the variable flag13th does not change. It always has a false value.
Any ideas folks on this? I would appreciate your help. Thank you.
document.getElementById("toggleButton").addEventListener("click", dekatosTritos);
var flag13th = false;
function dekatosTritos() {
var ThirteenthSalary = document.getElementById("toggleButton").classList;
if ((ThirteenthSalary.contains("toggle-btn")) && (ThirteenthSalary.contains("active"))) {
flag13th = false;
document.getElementById("test").innerHTML = "12th";
} else {
flag13th = true;
document.getElementById("test").innerHTML = "13th";
}
}
document.getElementById("test11").innerHTML = flag13th;
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test">12th</p>
<p id="test11"> </p>
Here's an example that uses no JavaScript, but rather an input type checkbox that can be submitted with your form:
.toggler {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
opacity: 0;
}
.toggler-btn {
display: inline-block;
position: relative;
width: 60px;
height: 28px;
border-radius: 28px;
cursor: pointer;
background: gray;
transition: background 0.3s;
}
.toggler-btn:after {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
transition: transform 0.3s;
}
.toggler-label::after {
content: attr(data-label);
}
/* CHECKED STATES */
.toggler:checked ~ .toggler-btn {
background: #0bf;
}
.toggler:checked ~ .toggler-btn:after {
transform: translateX(30px);
}
.toggler:checked ~ .toggler-label::after {
content: attr(data-labelchecked);
}
<div class="Question_13th">13th Month Salary?</div>
<input class="toggler" type="checkbox" id="13th" name="13th">
<label class="toggler-btn" for="13th"></label>
<div class="toggler-label" data-label="12th" data-labelchecked="13th"></div>
Here's an example that uses JavaScript, classList.toggle() and bool = !bool to toggle a boolean
const EL_btn = document.querySelector("#toggleButton");
const EL_test = document.querySelector("#test");
let is13 = false;
function dekatosTritos() {
is13 = !is13; // Toggle boolean
EL_btn.classList.toggle('active', is13);
EL_test.innerHTML = is13 ? "13th" : "12th";
}
EL_btn.addEventListener("click", dekatosTritos); // Do on btn click
dekatosTritos(); // and on init.
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test"></p>
I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML
The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?
Here is my code:
(function ($) {
$.fn.text_editor = function(options) {
this.each(function() {
var buttons = {
buttons: ['bold', 'italic', 'underline']
};
var parametres = $.extend(buttons, options);
// generated html
$("body").html("<div class=\"container\">");
$("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
$("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
$("body").append("<br>");
$("body").append("<div class=\"buttons\"");
$("body").append("<button id=\"bold\">gras</button>");
$("body").append("<button id=\"italic\">italic</button>");
$("body").append("<button id=\"barre\">underline</button>");
// js
$("bold").execCommand("bold");
$("italic").execCommand("italic");
$("underline").execCommand("underline");
console.log($("bold"));
});
};
})(jQuery);
$(document).ready(function() {
$("textarea").text_editor()
});
After some searching, I came acrossthis article.
and this code pen. https://codepen.io/souporserious/pen/xBpEj
hope this helps.
$('.wysiwyg-controls a').on('click', function(e) {
e.preventDefault();
document.execCommand($(this).data('role'), false);
});
$controls-color: #ADB5B9;
$border-color: #C2CACF;
* {
box-sizing: border-box;
}
.wysiwyg-editor {
display: block;
width: 400px;
margin: 100px auto 0;
}
.wysiwyg-controls {
display: block;
width: 100%;
height: 35px;
border: 1px solid $border-color;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: #fff;
a {
display: inline-block;
width: 35px;
height: 35px;
vertical-align: top;
line-height: 38px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: $controls-color;
}
[data-role="bold"] {
font-weight: bold;
}
[data-role="italic"] {
font-style: italic;
}
[data-role="underline"] {
text-decoration: underline;
}
}
[class^="menu"] {
position: relative;
top: 48%;
display: block;
width: 65%;
height: 2px;
margin: 0 auto;
background: $controls-color;
&:before {
#extend [class^="menu"];
content: '';
top: -5px;
width: 80%;
}
&:after {
#extend [class^="menu"];
content: '';
top: 3px;
width: 80%;
}
}
.menu-left {
&:before, &:after {
margin-right: 4px;
}
}
.menu-right {
&:before, &:after {
margin-left: 4px;
}
}
.wysiwyg-content {
max-width: 100%;
width: 100%;
height: auto;
padding: 12px;
resize: both;
overflow: auto;
font-family: Helvetica, sans-serif;
font-size: 12px;
border: 1px solid $border-color;
border-radius: 0 0 3px 3px;
background: #F2F4F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wysiwyg-editor">
<div class="wysiwyg-controls">
<a href='#' data-role='bold'>B</a>
<a href='#' data-role='italic'>I</a>
<a href='#' data-role='underline'>U</a>
</i>
</i>
</i>
</div>
<div class="wysiwyg-content" contenteditable>
<b>Let's make a statement!</b>
<br>
<i>This is an italicised sentence.</i>
<br>
<u>Very important information.</u>
</div>
</div>
NOTE: this is not my code.
execCommand is an experimental function, and its an function of document and not html elements. You can however call this function as below -
$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");