how to get range slider value? - javascript

I want to store the value that is set by the user when he uses the slider and I want to store the value in a variable, for example a user uses the price slider, and he sets the value to $1000, i want to store this value in a variable then compare it in an if else statements for example:
recommend.addEventListener("click", () => {
if(selected.textContent === "Productivity" && selected2.textContent === "1080P" && priceSetByUser> 1000)
$(model).show();
});
here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class = "slider" id = "slide">
<div
id="slider-range" style="width: 50%; left: 25%; background-image: linear-gradient(to top, #bd6077 0%, #ec7e5d 100%);">
</div>
<p><label for="amount" style="color: #f6931f; position: relative; left: 45%;">Price range:
</label>
<input type="text" id="amount" style="border:none; color:#f6931f; font-weight:bold;left: 45%;
position: relative; background-color: rgb(48, 43, 43); width: 20%;"></p>
</div>
$("#slider-range").slider({
range: true,
min: 0,
max: 10000,
values: [0, 100],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$("#amount").change(); //add this line to trigger text change
},
stop: function(){ // when user stops
console.log($( "#amount" ).val())
}
})

<input id="slider" type="range" min="" max=""
step="any" value=""/>
<script>
var slider = document.getElementById("slider");
slider.addEventListener("input", (event) => {
console.log(event.target.value);
}
</script>

Consider the following.
$(function() {
var myRange = [
0,
0
];
$("#slider-range").slider({
range: true,
min: 0,
max: 10000,
values: [0, 100],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$("#amount").change();
myRange = ui.values;
},
stop: function() { // when user stops
console.log(myRange.join(" - "));
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="slider" id="slide">
<div id="slider-range" style="width: 50%; left: 25%; background-image: linear-gradient(to top, #bd6077 0%, #ec7e5d 100%);">
</div>
<p><label for="amount" style="color: #f6931f; position: relative; left: 45%;">Price range:</label>
<input type="text" id="amount" style="border:none; color:#f6931f; font-weight:bold;left: 45%; position: relative; background-color: rgb(48, 43, 43); width: 20%;"></p>
</div>
This defines an Array that can be used later with both Range Values.

Related

How do I change rangeSlider default starting minimum and maximum values so I can store and retrieve from a DB Table

By default, the rangeSlider plug in calculates default values of 33 min and 66 max. The code below is completely functional, around line 125 I have further comments on where I think my solution resides. Remove and add // to see what I am talking about. I hope this makes sence and thanks in advance for any help
<?php
$qty_min = isset($_REQUEST['qty_min']) ? $_REQUEST['qty_min'] : "33";
$qty_max = isset($_REQUEST['qty_max']) ? $_REQUEST['qty_max'] : "66";
$first_load = "false";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard - SB Admin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
<style>
/* RANGE SLIDER BAR REGULAR CSS */
.primaryText{
font-weight: 300;
font-size: 50px;
text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.secondaryText{
font-weight: 300;
font-size: 25px;
}
.createdBy {
font-weight: 300;
font-size: 17px;
margin-top: 10px;
}
.createdBy a{
color: #333;
font-weight: 500;
}
.message {
background: white;
padding: 10px;
display: inline-block;
text-align: center;
color: #000;
margin: 25px 0;
font-size: 13px;
box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
border-radius: 4px;
}
.projHeader{
text-align: center;
}
.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
.footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}
body{background: #333; font-family: poppins;}
.projHeader, .createdBy a, .message{color: #fff;}
.message{background: rgba(255, 255, 255, 0.1);}
.demoContainer{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 400px;}
.sliderContainer{position: relative; border-radius: 20px;
background: #6a6a6a; width: 400px; height: 10px; margin-top: 40px;}
.sliderContainer:after{content:""; clear: both; display: block; }
.slider{height: 10px; float: left;}
.slider_a{background: transparent;}
.slider_b{background: #fd1874; border-radius: 20px;}
.slider_c{background: transparent;}
.slider_adj{position: absolute; padding: 3px 10px; background: #fff; top: 12px; cursor: move; user-select: none; z-index: 1; font-size: 13px; color: #333; border-radius: 20px; width: 20px; text-align: center;}
.slider_adj_1{top: -28px;}
.slider_adj_2{z-index: 3}
</style>
<div class="projHeader">
<div style="background:rgb(124, 124, 124);padding-bottom:40px;">
<div style="color:white;font-size:16px;font-weight: 100"> Slide the numbered ovals to select your desired range.</div>
<div align="center">
<div class="sliderContainer" id="sliderContainer">
<input type="hidden" name="qty_min" id="qty_min" value="<?php echo $qty_min ?>" placeholder="<?php echo $qty_min ?>" />
<input type="hidden" name="qty_max" id="qty_max" value="<?php echo $qty_max ?>" placeholder="<?php echo $qty_max ?>" />
<div class="slider slider_a" id="slider_a"></div>
<div class="slider slider_b" id="slider_b"></div>
<div class="slider slider_c" id="slider_c"></div>
<div style="width:70px" class="slider_adj slider_adj_1" id="slider_adj_1"></div>
<div style="width:70px" class="slider_adj slider_adj_2" id="slider_adj_2"></div>
</div>
</div>
</div>
<div style="color:white"> var-a_wt = <span id="var-a_wt"></span></div>
<div style="color:white"> var-b_wt = <span id="var-b_wt"></span></div>
<div style="color:white"> var-c_wt = <span id="var-c_wt"></span></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var sliderContainer, sliderContainerWt;
var sliderHandleWt;
$(document).ready(function(){
sliderContainer = $("#sliderContainer");
sliderContainerWt = sliderContainer.outerWidth();
sliderHandleWt = $("#slider_adj_1").outerWidth();
setLeftPosition();
setDraggable();
bindMouseUp();
updateGraph();
});
function setLeftPosition(){
var wt = sliderContainerWt/3;
$(".slider").css({"width": wt+"px" })
The two lines below work great, but I need to change default values on the fly, then store them in a DB table to restore custom values on page reload. The two lines below calculate 33 and 66 only
//var sliderHandlePos_1 = wt-sliderHandleWt/2;
//var sliderHandlePos_2 = wt*2-sliderHandleWt/2;
The two lines below kind of work, but throws off the format of my slider bar and min and max values are still not right
var sliderHandlePos_1 = '<?php echo $qty_min ?>';
var sliderHandlePos_2 = '<?php echo $qty_max ?>';
$("#slider_adj_1").css({"left": sliderHandlePos_1+"px"});
$("#slider_adj_2").css({"left": sliderHandlePos_2+"px"});
}
</script>
<script>
function updateGraph(){
I think my solution is in the next 3 lines of code, but my limited skills in javascript inhibit me from wrapping my head around it.
var a_wt = parseInt(($("#slider_a").width()/sliderContainerWt*100).toFixed(0));
var b_wt = parseInt(($("#slider_b").width()/sliderContainerWt*100).toFixed(0));
var c_wt = parseInt(($("#slider_c").width()/sliderContainerWt*100).toFixed(0));
I have tried the following, but no luck. I need the initial values to load from the table via PHP just once, then java script takes back over and keeps track of slider values, as YES I understand PHP is server side script, so I understand why this does not work. Just and example> I need a JavaScript equivalent.
var a_wt = <?php echo $qty_min ?>;
var b_wt = <?php echo ($qty_max-$qty_min) ?>;
var c_wt = <?php echo (100-$qty_max) ?>;
I don't think my solution is beyond this point. But of course I could be wrong.
$("#slider_adj_1").html(a_wt+"%");
$("#slider_adj_2").html((b_wt+a_wt)+"%");
document.getElementById('qty_min').value = a_wt;
document.getElementById('qty_max').value = b_wt+a_wt;
document.getElementById('var-a_wt').innerHTML = a_wt;
document.getElementById('var-b_wt').innerHTML = b_wt;
document.getElementById('var-c_wt').innerHTML = c_wt;
return { a: a_wt,
b: b_wt,
c: c_wt
}
}
</script>
<script>
function bindMouseUp(){
$("#slider_adj_1, #slider_adj_2").on("mouseout", function(){
$("#slider_adj_1, #slider_adj_2").draggable( "destroy" );
});
$("#slider_adj_1, #slider_adj_2").on("mouseover", function(){
setDraggable();
});
}
function setDraggable(){
var maxLeft = $("#slider_a").offset().left-(sliderHandleWt/2);
var maxRight = $("#slider_b").offset().left+$("#slider_b").outerWidth()-(sliderHandleWt/2);
var startX, start_a_Wt, start_b_Wt, start_c_Wt;
$("#slider_adj_1").draggable({
axis: 'x',
containment: [ maxLeft, 0, maxRight, 0 ],
refreshPositions: true,
start: function(event, ui){
startX = $(this).position().left;
start_a_Wt = $("#slider_a").width();
start_b_Wt = $("#slider_b").width();
},
drag: function(event, ui){
var endX = $(this).position().left;
var finalX = endX - startX;
var slider_a = start_a_Wt + finalX;
var slider_b = start_b_Wt - finalX;
$("#slider_a").css("width", slider_a+"px");
$("#slider_b").css("width", slider_b+"px");
updateGraph();
},
stop: function(event, ui){
maxLeft = $("#slider_a").position().left;
maxRight = $("#slider_c").position().left;
}
});
var maxLeft_2 = $("#slider_a").offset().left+$("#slider_a").outerWidth()-(sliderHandleWt/2);
var maxRight_2 = $("#slider_a").offset().left+sliderContainerWt-(sliderHandleWt/2);
$("#slider_adj_2").draggable({
axis: 'x',
containment: [ maxLeft_2, 0, maxRight_2, 0 ],
start: function(event, ui){
startX = $(this).position().left;
start_b_Wt = $("#slider_b").width();
start_c_Wt = $("#slider_c").width();
},
drag: function(event, ui){
var endX = $(this).position().left;
var finalX = endX - startX;
var slider_b = start_b_Wt + finalX;
var slider_c = start_c_Wt - finalX;
$("#slider_b").css("width", slider_b+"px");
$("#slider_c").css("width", slider_c+"px");
updateGraph();
},
stop: function(event, ui){
maxLeft_2 = $("#slider_b").offset().left;
maxRight_2 = $("#slider_c").offset().left + $("#slider_c").width();
}
});
}
</script>
I was completely going down the wrong path. After reading further in the PROPER documentation, I came up with the following completely functioning code, just in case this helps someone else. I also show how to explode the my_range variable so now you can store these variable in a database table. Great documentation at http://ionden.com/a/plugins/ion.rangeSlider/start.html
<?php
$my_range = isset($_REQUEST['my_range']) ? $_REQUEST['my_range'] : "";
$split_range = (explode(";",$my_range));
$qty_min = $split_range[0];
$qty_max = $split_range[1];
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<form action="slider_test2.php" method="post">
<input style="color:blue" type="text" class="js-range-slider" name="my_range" value="" />
<br>
<?php echo "my_range = " . $my_range; ?>
<?php echo "<br>qty_min = " . $qty_min; ?>
<?php echo "<br>qty_max = " . $qty_max; ?>
<br>
<button type="submit" >submit</button>
</form>
<script>
$(".js-range-slider").ionRangeSlider({
type: "double",
grid: true,
min: 1,
max: 100,
from: <?php echo $qty_min ?>,
to: <?php echo $qty_max ?>,
postfix: "%",
skin: "big"
});
</script>

Javascript not working in Chrome/Firefox but ok in Safari

I'm working on a image overlay section in my website. Three images are in elements which are stacked and revealed one at a time by resizing the elements horizontally using the scrollbar position. It works perfectly in Safari but not in Chrome/Firefox.
I have run the code through the w3c validator and fixed all issues but I still have the same problem...works in safari but not in Chrome/Firefox.
I would really appreciate it if someone could take a look at the code for me below.
Thanks in advance,
Chris
var xyz;
var slide1Width = $("#slide1").width();
var slide2Width = $("#slide2").width();
var slide3Width = $("#slide3").width();
var counter = 0;
$(document).ready(function(e) {
/////////Slide scroll-resize activation/////////
$(window).scroll(function(e) {
var slide1Height = $("#slide1").height();
xyz = $("body").scrollTop();
$("#inputs").text(xyz);
//When slide1 scroll-resize is enabled
if (xyz <= slide1Width && xyz >= 50) {
$("#slide2").css({
"width": xyz
});
};
//When slide2 scroll-resize is enabled
if (xyz >= slide1Width * 2 + 25 && xyz <= slide1Width * 3) {
$("#slide3").css({
"width": xyz - slide1Width * 2
});
};
var video = document.getElementById("video");
video.currentTime = (xyz - slide1Width) / 55;
if (xyz >= slide1Width && xyz < slide1Width * 2) {
$("#video").css({
"visibility": "visible"
});
} else {
$("#video").css({
"visibility": "hidden"
});
};
$("#video").height($("#slide1").height());
/*$("#video").width($("#slide1").width());*/
});
});
window.onload = function(e) {
var x = $("#slide1").width();
var y = $("#slide1").innerHeight();
$("#slide2").resizable({
containment: "parent",
minWidth: 50,
stop: function(event, ui) {
$("body").scrollTop($(this).width());
}
});
$("#slide2").css({
"height": y,
"width": 50
});
$("#slide3").resizable({
containment: "parent",
minWidth: 25,
stop: function(event, ui) {
$("body").scrollTop($(this).width() + x);
}
});
$("#slide3").css({
"height": y,
"width": 25
});
///////////Slide 3 click behaviour////////////
//Single click//
$("#slide3").click(function(e) {
$("body").scrollTop($("#slide1").width() * 2 + $(this).width());
});
//Double click//
$("#slide3").dblclick(function(e) {
$("body").scrollTop($("#slide2").width());
});
///////////Slide 2 click behaviour////////////
//Single click//
$("#slide2").click(function(e) {
$("body").scrollTop($(this).width());
});
};
$(window).resize(function() {
var x = $("#slide1").width();
var y = $("#slide1").innerHeight();
var z = $("#slide2").width();
var slide3width = $("#slide3").width();
var result = z / x;
var b = result * 100;
var c = b.toString() + "%";
var result3 = slide3width / x;
var slide3percentInt = result3 * 100;
var slide3percentString = slide3percentInt.toString() + "%";
$("#slide2").css({
"height": y,
"width": c
});
$("#slide2").resizable({
minWidth: 50,
containment: "parent"
});
$("#slide3").css({
"height": y,
"width": slide3percentString
});
$("#slide3").resizable({
minWidth: 25,
containment: "parent"
});
});
body {
background-color: black;
height: 5000px;
}
#box1 {
width: 100%;
height: 100px;
background-color: black;
}
#wrapper {
position: fixed;
width: 80%;
height: auto;
margin: auto;
left: 10%;
}
img {
width: 100%;
height: auto;
z-index: 1;
}
#slide1 {
position: absolute;
float: left;
width: 100%;
height: auto;
padding: 0;
margin: 0;
border: none;
z-index: 1;
}
#slide2 {
position: absolute;
float: left;
padding: 0;
margin: 0;
border: none;
background-image: url("WESetBW.svg");
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}
#slide3 {
position: absolute;
padding: 0;
margin: 0;
border: none;
background-image: url("WESetViz.svg");
background-repeat: no-repeat;
background-size: cover;
z-index: 4;
}
#video {
position: relative;
float: left;
margin: 0;
border: none;
z-index: 3;
visibility: hidden;
width: 100%;
object-fit: cover;
}
#inputs {
height: 20px;
width: 100px;
background-color: white;
color: red;
position: fixed;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="box1">
</div>
<div id="slide1">
<img src="WESet-photo.svg" alt="World's End set" />
</div>
<div id="slide2">
</div>
<div id="slide3">
</div>
<video id="video">
<source src="WEsetOriginalVideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="inputs">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

Get text under draggable div (jquery)

I have draggable div which dragging above .outerDiv with text content. How can I get text from .outerDiv which got into the borders of draggable div ?
$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
width: 20px;
height: 20px;
background-color: red;
}
.outerDiv
{
width: 160px;
height: 160px;
background-color: #ccc;
}
.ui-resizable {
position: absolute !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div> sdfsdfsd
<br>
first
<br>
second
<br>
third
</div>
Edit: I want code that takes part of the text, under .isStore, from .outerDiv and puts it in .isStore after dragging.
var is_colliding = function( $div1, $div2 ) {
// Div 1 data
var d1_offset = $div1.offset();
var d1_height = $div1.outerHeight( true );
var d1_width = $div1.outerWidth( true );
var d1_distance_from_top = d1_offset.top + d1_height;
var d1_distance_from_left = d1_offset.left + d1_width;
// Div 2 data
var d2_offset = $div2.offset();
var d2_height = $div2.outerHeight( true );
var d2_width = $div2.outerWidth( true );
var d2_distance_from_top = d2_offset.top + d2_height;
var d2_distance_from_left = d2_offset.left + d2_width;
var not_colliding = ( d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left );
// Return whether it IS colliding
return ! not_colliding;
};
$(function(){
$(".outerDiv .isStore")
.draggable(
{
containment: ".outerDiv",
drag: function() {
$('.targetElem').each(function(){
$isStore = $('.isStore');
if (is_colliding($isStore , $(this))) {
var elemName = $(this).text();
if ($isStore.text().indexOf(elemName) == -1) {
$isStore.append(elemName+'<br>');
}
}
});
}
}
)
.resizable({ containment: ".outerDiv" });
});
.targetElem {background:yellow;}
.isStore
{
width: 20px;
height: 20px;
background-color: red;
}
.outerDiv
{
width: 160px;
height: 160px;
background-color: #ccc;
}
.ui-resizable {
position: absolute !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div>
<br>
<br>
<br>
<span class="targetElem">first</span><br>
<br>
<span class="targetElem">second</span><br>
<br>
<span class="targetElem">third</span>
</div>
I used code that detects if two divs are colliding:
http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery
Here is a silly example;
I just created a draggable div which contain both the text and the isStore box:
$(".outerDiv .content").draggable({ containment: ".outerDiv" });
$(".outerDiv .isStore").resizable({ containment: ".outerDiv" });
.isStore
{
width: 20px;
height: 20px;
background-color: red;
}
.outerDiv
{
width: 160px;
height: 160px;
background-color: #ccc;
}
.ui-resizable {
position: absolute !important;
}
.content {
width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class="content"><div class='isStore'></div> sdfsdfsd
<br>
first
<br>
second
<br>
third
</div></div>
Is this what you mean? (putting the text inside the red draggable/resizable div) Or do you want code that dynamically takes the code from outerDiv and puts it in isStore?
Note I used "overflow:hidden" in the style for isStore so that it doesn't show outside of the div.
$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
width: 20px;
height: 20px;
background-color: red;
overflow: hidden;
}
.outerDiv
{
width: 160px;
height: 160px;
background-color: #ccc;
}
.ui-resizable {
position: absolute !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'>sdfsdfsd
<br>
first
<br>
second
<br>
third</div>
</div>

requestAnimationFrame with multiple independent objects

I am attempting to animate two different objects, a div formatted to look like a square and another formatted to look like a circle. I have a button for each object to start the animation which consists of just moving the object from left to right. I have included the code below. The issue I am having is that if I click on the Move Square button and then click on the Move Circle button, the square moves back to the left. What I am attempting to do is to move the objects independently of one another.
I am sure there is an object oriented solution for this but I have searched and have not found anything that makes sense to me. Any suggestions?
$(document).ready(function() {
var moveSquare = $('#moveSquare');
var moveCircle = $('#moveCircle');
var square = $('#square');
var squareText = $('#squareText');
square.css({
top: '100px',
left: '0px',
color: 'white',
position: 'fixed',
'text-align': 'center'
});
var pos_square = square.position();
squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px');
var circle = $('#circle');
var circleText = $('#circleText');
circle.css({
top: '300px',
left: '0px',
color: 'white',
position: 'fixed',
'text-align': 'center'
});
var pos_circle = circle.position();
circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px');
moveSquare.on('click', function() {
console.log('movesuqare here');
requestAnimationFrame(function(timestamp) {
starttime = timestamp;
move(timestamp, square, squareText, 800, 5000);
});
});
moveCircle.on('click', function() {
console.log('movecircle here');
requestAnimationFrame(function(timestamp) {
starttime = timestamp;
move(timestamp, circle, circleText, 800, 1000);
});
});
function move(timestamp, element, elementText, distance, duration) {
var runtime = timestamp - starttime;
var progress = runtime / duration;
progress = Math.min(progress, 1);
var leftPos = (distance * progress).toFixed(0) + 'px';
element.css({
left: leftPos,
position: 'absolute'
});
element.css({
'text-align': 'center'
});
var topPos = element.css('top') + '<br/>';
elementText.html(topPos + leftPos);
console.log(element.prop('id') + leftPos);
if (runtime < duration) {
requestAnimationFrame(function(timestamp) {
move(timestamp, element, elementText, distance, duration);
});
}
}
});
html {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body {
font-family: 'Courier New';
color: black;
font-size: 15px;
width: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.container {
width: 100px;
height: 100px;
}
.square_css {
width: 100px;
height: 100px;
background-color: blue;
}
.circle_css {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.shapeText {
padding-top: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" />
</head>
<body>
<div>
<input type="button" id="moveSquare" value="Move Square" />
</div>
<div>
<input type="button" id="moveCircle" value="Move Circle" />
</div>
<div id="square" class="square_css">
<div id="squareText" class="shapeText"></div>
</div>
<div id="circle" class="circle_css">
<div id="circleText" class="shapeText"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script>
</body>
</html>
The problems is caused by the two animations sharing a common variable starttime.
To fix, you need some way of each animation having its own starttime.
There's a number of ways you could do that, the simplest of which is to pass a start time to move() along with the other parameters, from the click handlers. And because move() calls itself, starttime needs to be passed on to the next call.
$(document).ready(function() {
var square = $('#square').css({
'top': '100px',
'left': '0px',
'color': 'white',
'position': 'fixed',
'text-align': 'center'
});
var circle = $('#circle').css({
'top': '300px',
'left': '0px',
'color': 'white',
'position': 'fixed',
'text-align': 'center'
});
var squareText = $('#squareText');
var circleText = $('#circleText');
var pos_square = square.position();
var pos_circle = circle.position();
squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px');
circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px');
$('#moveSquare').on('click', function() { // button
console.log('movesuqare here');
requestAnimationFrame(function(timestamp) {
move(timestamp, timestamp, square, squareText, 800, 5000);
});
});
$('#moveCircle').on('click', function() { // button
console.log('movecircle here');
requestAnimationFrame(function(timestamp) {
move(timestamp, timestamp, circle, circleText, 800, 1000);
});
});
function move(starttime, timestamp, element, elementText, distance, duration) {
var runtime = timestamp - starttime;
var progress = runtime / duration;
progress = Math.min(progress, 1);
var leftPos = (distance * progress).toFixed(0) + 'px';
element.css({
left: leftPos,
position: 'absolute'
});
element.css({
'text-align': 'center'
});
var topPos = element.css('top') + '<br/>';
elementText.html(topPos + leftPos);
console.log(element.prop('id') + leftPos);
if (runtime < duration) {
requestAnimationFrame(function(timestamp) {
move(starttime, timestamp, element, elementText, distance, duration);
});
}
}
});
html {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body {
font-family: 'Courier New';
color: black;
font-size: 15px;
width: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.container {
width: 100px;
height: 100px;
}
.square_css {
width: 100px;
height: 100px;
background-color: blue;
}
.circle_css {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.shapeText {
padding-top: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" />
</head>
<body>
<div>
<input type="button" id="moveSquare" value="Move Square" />
</div>
<div>
<input type="button" id="moveCircle" value="Move Circle" />
</div>
<div id="square" class="square_css">
<div id="squareText" class="shapeText"></div>
</div>
<div id="circle" class="circle_css">
<div id="circleText" class="shapeText"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script>
</body>
</html>

Fade in Function Won't work with Chart in Flot

I have the following code that make a simple line chart of price during the day
<!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>Flot Line Graph</title>
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h4 { width: 450px; margin-left:200px; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative;}
.legend table, .legend > div { height: 50px !important; opacity: 1 !important; right: -55px; top: 10px; width: 80px !important; }
.legend table { border: 3px solid #555; padding: 5px; font-weight:800; }
.col-md-1{width:50px !important;;
padding:0px !important;;}
.col-md-4{padding: 0px !important;;}
form{font-weight: 800;}
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class = "col-md-1" style="width:100px; margin-left:100px; margin-top:40px">
<form>
<input id="price_cat" type="radio" name="price_val" value="0" checked> LMP<br>
<input id="price_cat" type="radio" name="price_val" value="1"> MLC<br>
<input id="price_cat" type="radio" name="price_val" value="2">MCC
</form>
</div>
<div class="col-md-4">
<h4 id ="title"></h4>
<div id="placeholder" style = "width:850px; height:450px"></div>
<h4>Hour</h4>
</div>
</div>
</body>
<script type="text/javascript">
//Rome, Italy
var mkt_data = $.getJSON('https://bc2.demo.socrata.com/resource/9kzc-t3jm.json', function(response) {
console.log(response);
});
$.when(mkt_data).then(function(data) {
var price_data = data
var collection = []
var lmp_c =[]
var mcc_c = []
var mlc_c = []
var series = []
data.forEach(function(a) {
var lmp_s = []
var mcc_s = []
var mlc_s = []
lmp_s.push(Number(a.hour.replace("HE","")),Number(a.lmp));
lmp_c.push(lmp_s);
mcc_s.push(Number(a.hour.replace("HE","")), Number(a.mcc));
mcc_c.push(mcc_s)
mlc_s.push(Number(a.hour.replace("HE","")), Number(a.mlc));
mlc_c.push(mlc_s)
})
series.push({label:"LMP", data: lmp_c},{label:"MLC", data: mlc_c},{label:"MCC", data: mcc_c})
console.log(series[0].label);
$("#title").html("Average LMP per hour of the Day Jan - June 2016")
$.plot($("#placeholder"), [series[0]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
$("input:radio[name=price_val]").change(function(){
var price_series = Number($('input:radio[name=price_val]:checked').val());
console.log(price_series, typeof price_series);
$("#title").html("Average "+series[price_series].label+" per hour of the Day Jan - June 2016")
$.plot($("#placeholder").fadeIn(500), [series[price_series]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
});
});
the chart work and so does the change listener but I can't get the fade in to work properly. I would usually attached it to the element selector but the flot libraries $.plot() function is making it unclear to me where I should put the call to fadeIn(). I just want to achieve a smoother transition when changing datasets. The fade in call is at line 114.

Categories

Resources