JQuery Slider is not Showing in Handlebars - javascript

I am new to Handlebars/Jquery and have been trying to test this https://jsfiddle.net/aLr8q3nf/
When I try to show/hide the sliders using plain HTML and it's working fine, however when I try to test the same functionality using .hbs/node.JS does not work for me. When I click the button the function is being called (verified by showing up the alert;) but it does not show/hide the sliders for me not sure what am I doing wrong.
Can someone please guide me where to look?
Here is my Style.css
#box {
display: none;
top: 50px;
left: 50px;
}
Here is my index.hbs
<html>
<script src="jquery-1.11.3.min.js"></script>
<link href="roundslider.min.css" rel="stylesheet" />
<script src="roundslider.min.js"></script>
<script type="text/javascript">
showBox = function () {
$('#box').toggle();
alert("Test");
}
$('#slider').roundSlider({
sliderType: "min-range",
value: 23,
svgMode: true,
rangeColor: "#03a9f4",
pathColor: "#ececec",
borderWidth: 0,
editableTooltip: false,
handleShape: "dot",
radius: 120,
width: 15
});
</script>
<form>
<div id="box">
<div id="slider"></div>
</div>
<button onclick="showBox();">Click</button>
</form>

In case someone looking for help just moved the function as below and it worked.
<br><br>
<button onclick="showBox()">Click</button>
<script type="text/javascript">
window.showBox = function () {
$("#box").toggle();
}
$("#slider1").roundSlider({
sliderType: "min-range",
value: 23,
svgMode: true,
rangeColor: "#03a9f4",
pathColor: "#ececec",
borderWidth: 0,
editableTooltip: false,
handleShape: "dot",
radius: 20,
width: 5,
});
</script>

Related

How to add some text labels to roundSlider

Below, is the html script that I have for the roundSlider widget, I was trying to add some label text into this widget but couldn't figure it out. Since I will need multiple widgets of those for my project, I will have to give each one a different label/name.
In the below attached image, thats where I am thinking of adding these labels
Please, any help would be highly appreciated. Thanks.
html script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.col1 {left:75px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<!-- <p>Slider</p> -->
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
Image:
roundSlider Image
Three roundSlides:
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.row2 {top:450px;}
.row3 {top:750px;}
.col1 {left:75px;}
.col2 {left:470px;}
.col3 {left:870px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<div id="slider2" class='slider row1 col2'></div>
<div id="slider3" class='slider row1 col3'></div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) { $.getJSON('/set_abcd/' + event.value); }
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) { $.getJSON('/set_fghkva/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
Remove the position absolute so that your text appears after the slider.
Hope this is what you expected.
If you are using multiple sliders use flex to add numerous sliders with one parent div for both the slider and paragraph
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.container {
display: flex;
}
.child
{
margin-left:100px;
}
</style>
<body>
<div class="container">
<div class="child">
<div id="slider1" class='slider row1 col1'></div>
<center>
<p>slider1</p>
</center>
</div>
<div class="child">
<div id="slider2" class='slider row1 col2'></div>
<center>
<p>slider1</p>
</center>
</div>
<div class="child">
<div id="slider3" class='slider row1 col3'></div>
<center>
<p>slider1</p>
</center>
</div>
</div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) {
$.getJSON('/set_my_number/' + event.value);
}
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) {
$.getJSON('/set_abcd/' + event.value);
}
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) {
$.getJSON('/set_fghkva/' + event.value);
}
});
$("#turn_off_button").click(function() {
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
In roundSlider you have the tooltipFormat property, through which you can make any custom tooltip text or element.
Refer the below demos:
https://jsfiddle.net/soundar24/deLqk8sr/
https://jsfiddle.net/soundar24/deLqk8sr/1
https://jsfiddle.net/soundar24/deLqk8sr/131/
https://roundsliderui.com/demos.html#custom-tooltip
Some use-case demos:
https://jsfiddle.net/soundar24/j7ady5o8/
https://jsfiddle.net/soundar24/jwjwrLw7/
Hopes this helps you...
Just use the below inside the call to roundSlider after the change event
create: function(event) {$(".rs-tooltip-text").append("<br/><span>test</span>");}
just uses the class for the existing tooltip and appends some html after that

Google chart tooltips not showing when using uikit

I am using Uikit (getuikit.com) and google charts but the tooltips in the chart do not show when using uk-sortable="handle: .uk-sortable-handle".
I have done a jsfiddle so you can see it is not working at the moment.
It works if I take out the link for the uikit.css(but I need it this one).
Also it works if I remove the uk-sortable="handle: .uk-sortable-handle" from the div(but I also need this one to make the tile draggable) the tooltips come back, so I know it is something to do with uikit. Have anyone found a work around this?
Thank you for your help.
**HTML**
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
<script type="text/javascript">google.charts.load('45', {packages: ['table','controls','corechart','treemap','map','geochart','gauge','timeline']});</script>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit-icons.min.js"></script>
<div uk-sortable="handle: .uk-sortable-handle">
<div id="chart" style="width: 400px; height: 400px;"></div>
</div>
**JS**
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var dTable2 = google.visualization.arrayToDataTable([
['Date', 'TY', 'LY'],
['04/05/19', 98.5, 94.5],
['05/05/19', 94.2, 98.1],
['06/05/19', 96.3, 98.9],
['07/05/19', 98.2, 96.5],
['08/05/19', 94.4, 95.2],
['09/05/19', 96.2, 94.5],
['10/05/19', 98.8, 97.5],
['11/05/19', 96.5, 98.1],
['12/05/19', 97.7, 98.5],
['13/05/19', 95.4, 94.3]
]);
var options = {
focusTarget: 'category',
tooltip: {isHtml: true},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#a5a5a5',
fontSize: 10
}
},
chartArea:{
top: 25,
left: 50,
width:'95%',
height:'80%'
},
height: 250,
width: 800,
backgroundColor: '#5a5959',
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#a5a5a5',
fontSize: 10,
fontName: 'Arial',
bold: false,
italic: false
},
},
vAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#a5a5a5',
fontSize: 10,
bold: false
},
format: '#'
},
colors: ['#99ca3d', '#798860'],
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(dTable2, options);
}
Here is the jsfiddle
https://jsfiddle.net/justme0112/kqaLmvgu/1/
I expect the tooltips to work with uikit.
I found the solution, you just need to comment line 6055 from uikit.css
.uk-sortable svg {
pointer-events: none;
}
That was making the hover not appear on the google chart.

Hichcharts Add Button to toggle between Series

I am working on Highcharts and trying to toggle between series with click of buttons - switch on and off a series from a button rather than the legend. Can we do it using Javascript?
use chart.series[seriesNumber].hide(). reference [https://api.highcharts.com/class-reference/Highcharts.Series#hide]
$( document ).ready(function() {
$('#container').highcharts({
series: [{
data: [120, 20, 50, 100, 510, 345, 120]
}, {
data: [132, 240, 444, 424, 230, 350, 330]
}]
});
// the button action
var chart = $('#container').highcharts();
$('.button').click(function(){
var seriesNumber = this.value;
var series = chart.series[seriesNumber];
if (series.visible) {
series.hide();
} else {
series.show();
}
});
});
.button {
width: 150px;
}
#container {
height: 250px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<input type="button" class="button" value="0"></input>
<input type="button" class="button" value="1"></input>
<div id="container"></div>
</body>
</html>

Dim background screen when modal popup opens

I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but I can't get it to work.
This is what I have:
JavaScript:
function popup(centername, centertype, area, address, province, itprovider, software, addon,
principalname, principleemmail, itname, itemail, itno, academicname, academicno, academicemail,
invigilatorname, invigilatorno, invigilatoremail, centeridep, provinceidep, centernameep, centertypeidep, id) {
var $dropdown = $("#ddlCenterType");
$("#txtCenterName").val(centername);
$("#txtArea").val(area);
$("#txtAddress").val(address);
$("#ddlProvince").val(province);
$("#ddlProvider").val(itprovider);
$("#ddlSoftware").val(software);
$("#ddlAddOn").val(addon);
$("#txtPrincipalName").val(principalname);
$("#txtPrincipalEmail").val(principleemmail);
$("#txtITName").val(itname);
$("#txtITemail").val(itemail);
$("#txtITNumber").val(itno);
$("#txtAcadName").val(academicname);
$("#txtAcadNumber").val(academicno);
$("#txtAcadEmail").val(academicemail);
$("#txtInvName").val(invigilatorname);
$("#txtInvNumber").val(invigilatorno);
$("#txtInvEmail").val(invigilatoremail);
$("#txtCenterId").val(centeridep);
$("#txtProvinceID").val(provinceidep);
$("#txtCtrName").val(centernameep);
$("#txtTypeID").val(centertypeidep);
$("#txtID").val(id);
$dropdown.val(centertype);
$("#popupdiv").dialog({
width: 1250,
height: 1290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").css({
background: "rgb(0, 0, 0)",
opacity: ".50 !important",
filter: "Alpha(Opacity=50)",
});
},
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}
I also added this in the CSS but still doesn't work:
.ui-widget-overlay {
opacity: .50 !important;
filter: Alpha(Opacity=50) !important;
background-color: rgb(50, 50, 50) !important;
}
I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!
Just remove the important from opacity and it will work. Though I would recommend to use CSS for this. You can add and remove a class when modal opened and closed, and use it in combination with ui-widget-overlay to override background and opacity.
Here is a working example of how would that work
$( function() {
$("#dialog").dialog({
width: 360,
height: 290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").addClass('modal-opened');
},
close: function(event, ui){
$(".ui-widget-overlay").removeClass('modal-opened');
}
});
} );
.ui-widget-overlay.modal-opened{
background: rgb(0, 0, 0);
opacity: 0.5;
filter: Alpha(Opacity=50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a plnkr of the above example https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview

Can't seem to store val into var to be called back later

I need your help,
How can the code below be modified such that when a date is selected, that it will store the selected date into (var z) and then its value can be called back later. I can't seem to figure this out, it should be simple, and right by eyes. What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var z
window.onload = function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$('#d1').datepicker({
onSelect:function(){
z = $(this).val()
alert(z)
$("#dd").dialog("close")
}
});
}//end of window.onload
function callback() { alert(z) }
</script>
</head>
<body>
<div style="display:none" id="dd">
<div id="d1">
</div>
</div>
<p><input onlick="callback()" type="submit" value="Submit" name="B1"></p>
</body>
</html>
There are too many missing semicolons in your code. Plus , In spite of putting in window.onload put your code in $(document).ready(function() { }); .
I made some changes in your code. Its working now.
Have a loot at This.
I think this is exactly what you are asking for.
There seem to be a few things going on. The onclick was mispelled, and as was pointed out - semicolons were missing. This should work.
<script type="text/javascript">
var z;
$(document).ready(function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$("#B1").click(function(){
callback();
});
$('#d1').datepicker({
onSelect:function(){
z = $(this).val();
alert(z);
$("#dd").dialog("close");
}
});
});//end of window.onload
function callback() {
alert(z);
}
</script>
I also modified the input button to:
<input type="button" value="Submit" name="B1" id="B1">
And you can also play around with the fiddle, here: http://jsfiddle.net/jE8tL/

Categories

Resources