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>
Related
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>
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>
I am not an expert in HTML, CSS, or JavaScript, but I have this website that needs to be responsive on all devices. However, it does not seem like it is working for some reason and instead creates major gaps of white space when I view the website on a mobile web browser:
Here is the code for it:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em verdana, arial, helvetica, sans-serif;
line-height: 0px;
}
h1,h2 {
font-size: 2em;
color: #f00;
text-align: center;
text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
}
.af-textWrap {
display: block;
text-align: center;
color: #b7b7b7;
}
.af-element {
text-align: center;
}
#awf_field-90534028,
#awf_field-90534029 {
display: block;
width: 98%;
max-width: 28.125em;
margin: auto;
text-align: left;
}
.image {
display: block;
width: 98%;
max-width: 30em;
height: auto;
margin: auto;
}
</style>
</head>
<body>
<div id="worked"></div>
<script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%"> </div></div></div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<input name="meta_web_form_id" type="hidden" value="604218668">
<input name="meta_split_id" type="hidden" value="">
<input name="listname" type="hidden" value="awlist4661276">
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true">
<input name="meta_adtracking" type="hidden" value="My_Web_Form">
<input name="meta_message" type="hidden" value="1">
<input name="meta_required" type="hidden" value="name,email">
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap">
<input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
</div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap">
<input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
</div>
</div>
<div class="af-element buttonContainer">
<input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>
<div class="af-element privacyPolicy">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
</div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
'use strict';
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = '0' + min + 'm';
var min2 = min + 'm';
var sec1 = '0' + sec + 's';
var sec2 = sec + 's';
var col = ':';
document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
}());
</script>
</body>
</html>
Looks like your iframe is injected by JavaScript so I personally suggest adding a setInterval() to your code to monitor the iframe element. Once the iframe element is available, get the body in the iframe and set it's margin to 0.
$(function() {
$('#test').append('<iframe src="http://www.w3schools.com"></iframe>');
var timer = setInterval(function() {
$('iframe').load( function() {
$('iframe').contents().find("head").append($("<style type='text/css'>body{margin:0;}</style>"));
clearInterval( timer ); // Clear the interval
});
}, 10);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
My Classic ASP cart page uses divs for a quantity selector within a form:
<form action="/update-cart/" method="post">
<div class="quantity-selector detail-info-entry">
<div class="detail-info-entry-title">Quantity</div>
<div class="entry number-minus"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </div>
</div>
</div>
</form>
when - or + is clicked the 1 will update as expected. the code to do this is this:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. Do i use:
<input type="hidden" id="Num" name="Num" value="" />
Or another way. Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field.
Thanks
This demo has 2 features of note.
The following are done with HTML and inline JS (e.g. onchange='...)
<input>s .number-minus and number-plus
<output> .number displays the sum of .number-minus and .number-plus
As requested, the sum of .number-minus and .number-plus is stored in a <input [hidden]> named .secret. This value was derived from <output> value by using jQuery (overkill IMO). `
$(function() {
$('#pos, #neg').on('change', function(event) {
var cnt = $('#counter').val();
$('#secret').val(cnt);
console.log('Secret: ' + secret.value);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript/jquery onChange function for div.text to update form hidden field value</title>
<meta name="description" content="SO33312004">
<style>
.detail-info-entry-title,
#pos,
#neg {
font-variant: small-caps;
}
.entry {
padding: 3px;
margin: 0 5px;
width: 48px;
line-height: 1.6;
border: 2px solid #00E;
border-radius: 8px;
display: table-cell;
}
#counter {
font-weight: 900;
margin: auto;
display: table-cell;
height: 24px;
}
#form33312004 {
color: #0CF;
background: hsla(180, 100%, 10%, 1);
width: 33%;
height: 30%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.field {
width: 50px;
display: table-cell;
}
footer {
font-size: .75em;
text-align: center;
}
</style>
</head>
<!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val-->
<body>
<form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
<fieldset class="quantity-selector detail-info-entry">
<legend class="detail-info-entry-title">Quantity</legend>
<div class="field">
<input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
<label for="pos">Positive</label>
</div>
<output for='pos neg' id="counter" name="counter" class="entry number">0</output>
<div class="field">
<input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
<label for="neg">Negative</label>
</div>
</fieldset>
<input id="secret" type="hidden">
</form>
<div class="field">
<footer>Observe the hidden input's value thru
<br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
<script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</body>
</html>
With pure JS:
document.getElementById("Num").value = < variable name >
With jQuery(not 100% sure)
$("Num").value(< variable name>)
So I solved the problem myself.
I added the following line:
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);
});
I am sure I had tried this but after thought I may have omitted the $ at the beginning. Always something simple in the end
I am a beginner at JavaScript and I have been working on this very simple project for a couple of days. It is supposed to allow you to calculate the area and perimeter of a rectangle, but despite how much I tweaked the code, it will not calculate when I enter numbers. It should just be a simple user interface that allows you to input into two text boxes:
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var width = parseFloat($("width").value);
var length = parseFloat($("length").value);
$("area").value = "";
$("perimeter").value = "";
if (isNaN(width) || width <= 0) {
alert("Width must be a valid number and greater than zero.");
}
else if (isNaN(length) || width <= 0) {
alert("Length must be a valid number and greater than zero.");
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area;
$("perimeter").value = perimeter;
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333366; }
#content {
width: 450px;
margin: 10px auto;
padding: 5px 20px;
background: white;
border: thin solid black; }
#salesTax, #total {
color: black; }
#taxCalc label {
display: block;
width: 6em;
text-align: right;
padding-right: 1em;
float: left; }
#taxCalc input {
display: block;
float: left; }
#taxCalc br {
clear: left; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Area and Perimeter Calculator</title>
<link rel="stylesheet" type="text/css" href="sales_tax.css" />
<script type="text/javascript" src="sales_tax.js"></script>
</head>
<body>
<div id="content">
<h2>Area and Perimeter Calculator</h2>
<p>Enter the values below and click "Calculate".</p>
<div id="taxCalc">
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="area">Area:</label>
<input type="text" id="area" disabled="disabled" /><br />
<label for="perimeter">Perimeter:</label>
<input type="text" id="total" disabled="disabled" /><br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</div>
</body>
</html>
If anyone can please help even a little, I would genuinely appreciate it,
Thank you.
There were two problems with your script (Well technically three, but I think the missing v at the beginning was a copy/paste mistake.
1st: The window.onload functions needs to be outside calculate_click. It never gets called, because the calculate_click never gets called.
2nd: The input for perimeter, had id="total", but you were calling $("perimeter"). This is fixed in the jsfiddle.
Here is a working form.