How to add some text labels to roundSlider - javascript

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

Related

Having Trouble Setting Up Velocity Js

I'm trying to use Velocity Js for the first time and I'm having trouble getting it to work. Below is a nav menu that I'm trying to create. Everything in the code works fine except for the Velocity Js bits. The animation for the menu even works, but the menu doesn't open. I included both links that the Velocity JS site told me to include, as well as a page link to velocity.min. js. I tried using one or the other, or both, and nothing worked. What am I missing or doing wrong here?
HTML:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Testing Velocity JS</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/velocity-animate#2.0/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/velocity-animate#2.0/velocity.ui.min.js"></script>
<scrpt src="velocity.min.js"></scrpt>
<script src="navmenutest.js" async></script>
</head>
<body>
<script>document.body.classList.add('fade');</script>
<div id="container">
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Gallery</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>Custom PC's</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
JS:
$('.open-overlay').click(function() {
$('.open-overlay').css('pointer-events', 'none');
var overlay_navigation = $('.overlay-navigation'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
overlay_navigation.velocity('transition.slideLeftIn', {
duration: 300,
delay: 0,
begin: function() {
$('nav ul li').velocity('transition.perspectiveLeftIn', {
stagger: 150,
delay: 0,
complete: function() {
$('nav ul li a').velocity({
opacity: [1, 0],
}, {
delay: 10,
duration: 140
});
$('.open-overlay').css('pointer-events', 'auto');
}
})
}
})
} else {
$('.open-overlay').css('pointer-events', 'none');
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
$('nav ul li').velocity('transition.perspectiveRightOut', {
stagger: 150,
delay: 0,
complete: function() {
overlay_navigation.velocity('transition.fadeOut', {
delay: 0,
duration: 300,
complete: function() {
$('nav ul li a').velocity({
opacity: [0, 1],
}, {
delay: 0,
duration: 50
});
$('.open-overlay').css('pointer-events', 'auto');
}
});
}
})
}
})
You misspell the scrpt keyword, It should be script.
<script src="velocity.min.js"></script>

JQuery Slider is not Showing in Handlebars

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>

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

Jquery animation pagePiling

I am looking for jquery animation similar to this website http://cuberto.com/.
So far i have accomplished this link http://codepen.io/mirmibrahim/pen/MJoGBY through pagePiling.js. Can anyone assist me complete it exactly the way on curberto. I dont know how to load half of the page with image and half with text and open the next section to be from the square animating on first slide.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin - Horizontal scroll</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="pagePiling.js plugin by Alvaro Trigo." />
<meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--script src="../jquery-1.9.1.js"></script-->
<script type="text/javascript" src="../jquery.pagepiling.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
direction: 'horizontal',
menu: '#menu',
scrollingSpeed: 2000,
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function() {
$('#pp-nav').addClass('custom');
console.log("After Render ");
},
afterLoad: function(anchorLink, index) {
// $.fn.pagepiling.setAllowScrolling(false);
console.log("After Load " + index);
if (index == 1) {
console.log("index " + index);
} else if (index == 2) {
}
if (index > 1) {
$('#pp-nav').removeClass('custom');
} else {
$('#pp-nav').addClass('custom');
}
},
onLeave: function(index, nextIndex, direction) {
console.log("After Load " + index);
if (index == 1) {
/* $( "#block" ).animate({
width: "100%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "12em",
borderWidth: "20px"
}, 4000 , function() {
// Animation complete.
//alert("s");
});
*/
$("#block").animate({
width: "58%"
}, 1000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(500);
});
} else if (index == 2 && nextIndex == 1) {
$("#block").animate({
width: "0%"
}, 3000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(2000);
});
}
}
});
});
</script>
<style>
#section1 img {
margin: 20px 0;
opacity: 0.7;
}
/* colors
* --------------------------------------- */
#colors2,
#colors3 {
position: absolute;
height: 163px;
width: 362px;
z-index: 1;
background-repeat: no-repeat;
left: 0;
margin: 0 auto;
right: 0;
}
#colors2 {
background-image: url(imgs/colors2.gif);
top: 0;
}
#colors3 {
background-image: url(imgs/colors3.gif);
bottom: 0;
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip {
color: #AAA;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active">Page 1</li>
<li data-menuanchor="page2">Page 2</li>
<li data-menuanchor="page3">Page 3</li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<!--img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /-->
<div class="intro">
<div>
<div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block">
</div>
<h1 style="color: white;">DIGITAL</h1>
<p style="color: white;">CREATIVE AGENCY</p>
</div>
</div>
</div>
<div class="section">
<div class="intro">
<h1>Simple to use</h1>
<p>Just use the option direction: 'horizontal' to have it working!</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Isn't it great?</h1>
<p>Just as you expected!</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
</div>
</body>
</html>
I think pagepiling.js might be the wrong direction because it just animates on one page, rather than animating between two pages.
The way I've handled stuff like this in the past is with a PJAX plugin like Barba.JS, which allows you to add animated transitions between site navigation events. Barba hijacks the page change by changing the URL manually, grabbing new content for the new page, and performing a transition (in which you can animate elements like Cuberto does!) between the old and new pages.
Let me know if this is helpful, or if I missed the point, and I'll try to update my answer accordingly!
EDIT: Just realized this is a seven-month old question, but hopefully this is helpful to someone nonetheless!

Categories

Resources