How is it possible to control CSS with a range slider via jQuery?
Some example code:
$('.font_size').on('input', function() {
var fontsizeval = $(this).attr('value');
var fontsizemin = $(this).attr('min');
var fontsizemax = $(this).attr('max');
$('.text').css("font-size", fontsizeval + "px");
});
* {
font-size: 12px;
}
.text {
font-size: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">Text
<div>
Font Size: <input class="font_size" type="range" value="120" min="30" max="200">
Would be very thankful for help!
use val() instead of attr("value")
$('.font_size').on('input', function() {
var fontsizeval = $(this).val();
var fontsizemin = $(this).attr('min');
var fontsizemax = $(this).attr('max');
$('.text').css("font-size", fontsizeval + "px");
});
* {
font-size: 12px;
}
.text {
font-size: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Font Size: <input class="font_size" type="range" value="120" min="30" max="200">
<div class="text">Text
<div>
Related
I am making a google docs like app, and I want the user to be able to select the text, and then change the size to whatever they want. I tried to use variables but it didn't work so I am not sure what to do. Is there any way to allow the user to change the font size and if so how?
Here is the code for the app:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editor</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button class="bold" onclick="document.execCommand('bold',false,null);">
𝗕
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
𝘐
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
U̲
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeColorText(this.value);"
/>
<label>Select color</label>
<button id="highlight"><mark>Highlight</mark></button>
<fieldset class="userInput" contenteditable="true"></fieldset>
<script>
var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");
boldBtn.addEventListener("click", function () {
boldBtn.classList.toggle("inUse");
});
italicBtn.addEventListener("click", function () {
italicBtn.classList.toggle("inUse");
});
underlineBtn.addEventListener("click", function () {
underlineBtn.classList.toggle("inUse");
});
highlightBtn.addEventListener("click", function () {
highlightBtn.classList.toggle("inUse");
});
const changeColorText = (color) => {
document.execCommand("styleWithCSS", false, true);
document.execCommand("foreColor", false, color);
};
document
.getElementById("highlight")
.addEventListener("click", function () {
var range = window.getSelection().getRangeAt(0),
span = document.createElement("span");
span.className = "highlight";
span.appendChild(range.extractContents());
range.insertNode(span);
});
</script>
</body>
</html>
I think this is the output you want. Also, don't use document.execCommand, it has been deprecated
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editor</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button class="bold" onclick="document.execCommand('bold',false,null);">
𝗕
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
𝘐
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
U̲
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeColorText(this.value);"
/>
<label>Select color</label>
<button id="highlight"><mark>Highlight</mark></button>
<input
type="number"
class="font-size"
id="fontSize"
/>
<label>Select Font Size</label>
<fieldset class="userInput" contenteditable="true"></fieldset>
<script>
var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var fontSize = document.querySelector("#fontSize");
var highlightBtn = document.querySelector("#highlight");
var userInput = document.querySelector('.userInput');
boldBtn.addEventListener("click", function () {
boldBtn.classList.toggle("inUse");
});
italicBtn.addEventListener("click", function () {
italicBtn.classList.toggle("inUse");
});
underlineBtn.addEventListener("click", function () {
underlineBtn.classList.toggle("inUse");
});
highlightBtn.addEventListener("click", function () {
highlightBtn.classList.toggle("inUse");
});
const changeColorText = (color) => {
document.execCommand("styleWithCSS", false, true);
document.execCommand("foreColor", false, color);
};
fontSize.addEventListener('input', updateValue);
function updateValue(e) {
userInput.style.fontSize = `${e.target.value}px`;
}
document
.getElementById("highlight")
.addEventListener("click", function () {
var range = window.getSelection().getRangeAt(0),
span = document.createElement("span");
span.className = "highlight";
span.appendChild(range.extractContents());
range.insertNode(span);
});
</script>
</body>
</html>
Add this to your HTML:
<button class="font-smaller">-</button>
<button class="font-bigger">+</button>
Add this to your JS:
const fontSmaller = document.querySelector(".font-smaller");
const fontBigger = document.querySelector(".font-bigger");
let fontSize = 15.5; // play with this number if needed
fontSmaller.addEventListener("click", () => {
document.querySelector(".userInput").style.fontSize = `${fontSize--}px`;
});
fontBigger.addEventListener("click", () => {
document.querySelector(".userInput").style.fontSize = `${fontSize++}px`;
});
Change as needed. This will change the size of the whole text.
You can implement it like this.
// Increase/descrease font size
$('#increasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) + 2;
if (curSize <= 32)
$('#content').css('font-size', curSize);
});
$('#resettext').click(function() {
if (curSize != 18)
$('#content').css('font-size', 18);
});
$('#decreasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) - 2;
if (curSize >= 14)
$('#content').css('font-size', curSize);
});
header {
text-align: center;
}
/* text-controls */
button {
vertical-align: bottom;
margin: 0 0.3125em;
padding: 0 0.3125em;
border: 1px solid #000;
background-color: #fff;
font-weight: bold;
}
button#increasetext {
font-size: 1.50em;
}
button#resettext {
font-size: 1.25em;
}
button#decreasetext {
font-size: 1.125em;
}
.textcontrols {
padding: 0.625em 0;
background: #ccc;
}
/* content */
#content {
margin: 3em 0;
text-align: left;
}
/* demo container */
#container {
width: 90%;
margin: 0 auto;
padding: 2%;
}
#description {
margin-bottom: 1.25em;
text-align: left;
}
#media all and (min-width: 700px) {
#container {
width: 700px;
}
button {
margin: 0 0.625em;
padding: 0 0.625em;
}
}
<div id="container">
<header>
<h1 id="title">
Allow Users to Change Font Size
</h1>
<p>Click the buttons to see it in action</p>
<div class="textcontrols">
<button role="button" id="decreasetext" <span>smaller</span>
</button>
<button role="button" id="resettext">
<span>normal</span>
</button>
<button role="button" id="increasetext">
<span>bigger</span>
</button>
</div>
<!--/.textcontrols-->
</header>
<main id="content" role="main">
<div id="description">
<h2>Allow users to resize text on the page via button controls.</h2>
<p>In this instance, users can decrease text, increase text, or reset it back to normal.</p>
<h2>Set default text size with CSS</h2>
<p>The default text size must be set using an internal stylesheet in the header of your page. In this case: <code>font-size: 1.125em</code> (aka, 18px).</p>
<h2>Set the controls with JavaScript</h2>
<p>Then we set the resize controls with JavaScript. In this example, we're resizing all text within the div with an id of "content".</p>
<p>The controls check the current text size, and then changes it (or not) accordingly.</p>
</div>
<!--/#description-->
</main>
<!--/#content-->
</div>
<!--/#container-->
I want to add the current range slider number on the range slider circle. I want my below range slider like this Screenshot.
$(".slider").on("change", function() {
console.clear()
var max = $("[name=plan]:checked").data('max')
var total = 0
//get total
$(".slider").each(function() {
total += parseInt($(this).val()) //calculate total
})
console.log("Total --" + total + " Max --" + max)
if (total > max) {
$(this).val(0) //set value to 0 again..
console.log("can't move..")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="radio" id="starter" name="plan" data-max="12" value="starter" checked>
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" data-max="24" value="plus">
<label for="plus">Up to 24</label><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider">
<output class="range-text">
<span class="number"></span><span class="text">Videos</span>
</output><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
This solution by css-tricks.com, edited by me might help you. Unfortunately, you cannot position the 'bubble' over the default slider handle because then you can't click on the handle. In my opinion, it looks fairly good, and if you edit the slider styles themselves I think it could be very convincing.
If you want to make it exactly like in the screenshot, however, I really recommend reading this article by css-tricks.com as it really goes in depth about creating a custom slider.
var range = document.getElementById('range');
var bubble = document.getElementById('bubble');
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = val;
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
.range-parent {
position: relative;
margin: 0 auto 3rem;
}
.range {
width: 100%;
}
.bubble {
background: dodgerblue;
color: white;
padding: 4px 12px;
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
body {
margin: 2rem;
}
<div class="range-parent">
<input type="range" class="range" id="range">
<output class="bubble" id="bubble"></output>
</div>
I found my answer on jQuery Range Slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Custom handle</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle.text( ui.value );
}
});
} );
</script>
</head>
<body>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
</body>
</html>
I'm making an workspace where you can adjust divs with javascript by width, left and height. But whenever I try to export the main ID (the workspace for the user). html2canvas does not detect its content. I'm able to convert the paramater divs with html2canvas. But not the main ID that I need to convert? Can someone help me out? Is it because I adjust the divs with Javascript? I've put the code below. Thanks in advance!
I've put the html2canvas function at the bottom of the HTML page to make it more clear. The JavaScript file is just filled with the parameters of my interface.
The code that I'm talking about that's not working is:
<script>
html2canvas(document.querySelector("#main")).then(canvas => {
document.body.appendChild(canvas)
});
</script>
document.onclick = function(){
//Breedte vlak 1
var vlak2Left = -5;
var vlak3Left = 68;
var vlak4Left = 55;
//Hoogtes
var sliderValue2 = document.getElementById("hoogte1").value;
var sliderValue6 = document.getElementById("hoogte4").value;
var sliderValue8 = document.getElementById("hoogteCanvas").value;
var sliderValue10 = document.getElementById("hoogte23").value;
//Breedtes
var sliderValue1 = document.getElementById("breedte1").value;
var sliderValue3 = document.getElementById("breedte2").value;
var sliderValue4 = document.getElementById("breedte3").value;
var sliderValue7 = document.getElementById("breedte4").value;
var sliderValue9 = document.getElementById("breedteCanvas").value;
//X-meter
var sliderValue5 = document.getElementById("xmeter3").value;
var vlak2Total = Number(vlak2Left)+Number(sliderValue1);
var vlak3Total = Number(vlak3Left)+Number(sliderValue1)+Number(sliderValue3)-Number(sliderValue5);
var vlak4Total = Number(vlak4Left)+Number(sliderValue1)+Number(sliderValue3)+Number(sliderValue4)-Number(sliderValue5);
document.getElementById("VLAK1").style.width = sliderValue1 + "px";
document.getElementById("VLAK2").style.left = vlak2Total + "px";
document.getElementById("VLAK3").style.left = vlak3Total + "px";
document.getElementById("VLAK4").style.left = vlak4Total + "px";
//Hoogte vlak 1
document.getElementById("VLAK1").style.height = sliderValue2 + "px";
//Breedte vlak 2
document.getElementById("VLAK2").style.width = sliderValue3 + "px";
document.getElementById("VLAK3").style.left = vlak3Total + "px";
//Hoogte vlak 2+3
document.getElementById("VLAK2").style.height = sliderValue10 + "px";
document.getElementById("VLAK3").style.height = sliderValue10 + "px";
//Breedte vlak 3
document.getElementById("VLAK3").style.width = sliderValue4 + "px";
document.getElementById("VLAK4").style.left = vlak4Total + "px";
//X-meter vlak 3
document.getElementById("VLAK3").style.right = sliderValue5 + "px";
//Hoogte vlak 4
document.getElementById("VLAK4").style.height = sliderValue6 + "px";
//Breedte vlak 4
document.getElementById("VLAK4").style.width = sliderValue7 + "px";
//Hoogte canvas
document.getElementById("main").style.height = sliderValue8 + "px";
//Breedte canvas
document.getElementById("main").style.width = sliderValue9 + "px";
//Values tonen
document.getElementById("valueBreedte1").innerHTML = sliderValue1;
document.getElementById("valueHoogte1").innerHTML = sliderValue2;
document.getElementById("valueBreedte2").innerHTML = sliderValue3;
document.getElementById("valueBreedte3").innerHTML = sliderValue4;
document.getElementById("valueXmeter3").innerHTML = "-" + sliderValue5;
document.getElementById("valueHoogte4").innerHTML = sliderValue6;
document.getElementById("valueBreedte4").innerHTML = sliderValue7;
document.getElementById("canvasHoogte").innerHTML = sliderValue8;
document.getElementById("canvasBreedte").innerHTML = sliderValue9;
}
html {
font-family: Helvetica, Arial, sans-serif;
}
#main {
overflow: hidden;
/* width: 1860px;*/
width: 600px;
height: 600px;
position: absolute;
border: 3px solid rgba(0, 0, 0, 0.397);
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.parameters1 {
grid-area: 1 / 1 / 2 / 2;
}
.parameters2 {
grid-area: 1 / 2 / 2 / 3;
}
.parameters3 {
grid-area: 1 / 3 / 2 / 4;
}
.parameters4 {
grid-area: 1 / 4 / 2 / 5;
}
.parameters5 {
grid-area: 1 / 5 / 2 / 6;
}
#VLAK1,
#VLAK2,
#VLAK3,
#VLAK4 {
position: absolute;
margin: 0;
}
#VLAK1 {
background-color: #e28e8e;
width: 100px;
height: 300px;
z-index: -1;
}
#VLAK2 {
background-color: #f3de7f;
width: 100px;
height: 300px;
left: 95px;
transform: skewX(30deg);
z-index: -2;
}
#VLAK3 {
background-color: rgb(176, 241, 168);
width: 100px;
height: 300px;
left: 269px;
transform: skewX(-30deg);
z-index: -3;
}
#VLAK4 {
background-color: #c3c3c3;
width: 100px;
height: 300px;
left: 356px;
z-index: -4;
}
p {
margin: 0;
}
.slidecontainer {
width: 10%;
/* Width of the outside container */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="script.js"></script>
<script src="html2canvas.min.js"></script>
<title>4 VLAKKEN</title>
</head>
<body>
<!--SLIDERS-->
<div class="grid">
<div class="parameters1">
<p>Breedte vlak 1:</p>
<p id="valueBreedte1">100</p>
<input type="range" id="breedte1" value="100" min="100" max="600">
<br><br>
<p>Hoogte vlak 1:</p>
<p id="valueHoogte1">300</p>
<input type="range" id="hoogte1" value="300" min="173" max="600">
</div>
<div class="parameters2">
<p>Breedte vlak 2:</p>
<p id="valueBreedte2">100</p>
<input type="range" id="breedte2" value="100" min="100" max="300">
<br><br>
<p>Hoogte vlak 2+3:</p>
<p id="valueHoogte23">300</p>
<input type="range" id="hoogte23" value="300" min="300" max="600">
</div>
<div class="parameters3">
<p>Breedte vlak 3:</p>
<p id="valueBreedte3">100</p>
<input type="range" id="breedte3" value="100" min="100" max="300">
<br><br>
<p>X-meter vlak 3:</p>
<p id="valueXmeter3">-0</p>
<input type="range" id="xmeter3" value="0" min="0" max="200">
</div>
<div class="parameters4">
<p>Breedte vlak 4:</p>
<p id="valueBreedte4">100</p>
<input type="range" id="breedte4" value="100" min="100" max="600">
<br><br>
<p>Hoogte vlak 4:</p>
<p id="valueHoogte4">300</p>
<input type="range" id="hoogte4" value="300" min="0" max="600">
</div>
<div class="parameters5">
<p>Breedte canvas:</p>
<p id="canvasBreedte">600</p>
<input type="text" id="breedteCanvas" value="600" min="0" max="1860">
<br><br>
<p>Hoogte canvas:</p>
<p id="canvasHoogte">600</p>
<input type="text" id="hoogteCanvas" value="600" min="0" max="600">
</div>
</div>
<br><br>
<div ID="main">
<div id="VLAK1"></div>
<div id="VLAK2"></div>
<div id="VLAK3"></div>
<div id="VLAK4"></div>
</div>
<script>
html2canvas(document.querySelector("#main")).then(canvas => {
document.body.appendChild(canvas)
});
</script>
</body>
</html>
So I made a custom select and I want to set a value into div: valueHolder. I used the same code as for text, but it doesn't work.
I tried to use this code:
$('#adwin-select-category').find('div.valueHolder').val(target.val());
var containerCategory = $('#adwin-select-category .dropContainer');
$('#adwin-select-category').on('click', function(event)
{
var target = $(event.target);
if(target.hasClass('valueHolder') || target.attr('id') === '#adwin-select-category')
{
containerCategory.show();
document.getElementById("adwin-select-category").style.borderColor = "#FFAC0D";
}
else if(target.hasClass('dropOption'))
{
$('#adwin-select-category').find('div.valueHolder').text(target.text());
$('#adwin-select-category').find('div.valueHolder').val(target.val());
containerCategory.hide();
document.getElementById("adwin-select-category").style.borderColor = "#DDD";
showElements();
}
});
#adwin-select-category
{
position: relative;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="adwin-select-category" class="btn">
<div class="valueHolder" value=""></div>
</div>
Example of the options:
option 1
I want to set a value from the example option (value="1") to the valueHolder
Here's how to use data- attributes:
$('#adwin-select-category > div').on('click', function(e) {
var divVal = $(this).data('value');
var divText = $(this).text();
console.log( divVal );
console.log( divText );
});
#adwin-select-category
{
position: relative;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="adwin-select-category" class="btn">
<div class="valueHolder" data-value="1">ONE</div>
<div class="valueHolder" data-value="2">TWO</div>
<div class="valueHolder" data-value="3">THREE</div>
<div class="valueHolder" data-value="4">FOUR</div>
</div>
I'm recently new at programming and JavaScript. I'm not sure why this doesn't work. I'm trying to insert numbers into an empty array. And then have them displayed into the div with the id of "value".
My JavaScript:
var array = new Array();
// var array = [];
$(document).ready(function() {
$('#btn').on('click', function() {
var $input = $('#input').val();
array.push($input);
});
$('#value').text(array);
console.log(array);
});
My HTML:
<div id="number">
<input type="text" id="input">
<button id="btn"> Submit </button>
</div>
You render the empty array once, when the document is ready. Adding more items to the array doesn't rerender the DOM with the new items. You need to update the DOM on each click by moving $('#value').text(array); into the click event handler:
var array = new Array();
// var array = [];
$(document).ready(function() {
var $input = $('#input');
var $value = $('#value');
$('#btn').on('click', function() {
var val = $input.val();
array.push(val);
$value.text(array);
console.log(array);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input">
<button id="btn">Add</button>
<div id="value"></div>
Just a reminder that Input Fields supply a String not an Integer.
Take a look:
var myArray = [];
$(function() {
$('#btn').on('click', function() {
var $input = $('#input').val();
myArray.push(parseInt($input));
console.log(myArray)
$('#value').text("[" + myArray.join(", ") + "]");
});
});
.input {
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
.input input {
width: 60px;
height: 1.25em;
}
.input button {
padding: .25em .6em;
}
.output {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
<input type="number" id="input" /> <button id="btn">Add</button>
</div>
<div class="output">
<div id="value"></div>
</div>