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
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>
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>
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>
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>
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.