Defining custom css attributes and changing any value with animate() - javascript

I'm trying to make a result screen in javascript that displays animated scores. For the specific field in the example it's supposed to go from the value to 0 in two seconds, two seconds after the screen appears. Since it's easy to change css values with animate() I thought I could assign the values to some custom css property, then have the element's value take it from there. According to this article I just have to place -- in front of custom css attributes and this one shows me how to use the animate() method. So I tried doing this
$elementSuccess.css('--value', scorePlus);
and it turns out --value's value is undefined. When I display scorePlus somewhere it appears, so it's defined. Is there another way to define a custom value?
Here is the entire code for this element. Will there be any errors with it if a custom attribute is defined correctly?
$elementSuccess.html(scorePlus);
$elementSuccess.css('--value', scorePlus);
setTimeout(function(){
$elementSuccess.animate({
'--value': 0
},
{
duration: 2000,
progress: function(){
$elementSuccess.html(Math.round($elementSuccess.css('--value')));
}
}
);
},2000);

Try this:
var scorePlus=100;
var $elementSuccess=$('.success');
var myObject = {score:scorePlus};
$elementSuccess.html(scorePlus);
$(myObject).delay(2000).animate({score:0},{duration:2000,progress:function(){$elementSuccess.html(Math.round(myObject.score))}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="success"></div>
Based on my understanding of your problem, basically using a pseudo myObject and animating its score property should provide you with the desired effect. Also, instead of setTimeout, I resorted to using delay().

Related

What is the proper way to set values to a Slider Input? (Protractor Automation)

I have this slider input in html code:
(Sorry about this being an image, I do not have access to the code for the page, I just have to test it).
And I'm trying this code:
this.maxdivedepth = function (value) {
var slider = util.getElementAsyncSafe(by.id("maximum-dive-depth"));
browser.actions().dragAndDrop(
slider,
{x: value, y: 0}
).mouseUp().perform();
};
'value' being "100" for example.
Terminal doesn't show any error, but I don't see the sliders doing anything..
I tried several things, using diferent selectors for example, but still the same.
Can anybody help me with this?
First you need to identify the locator for the circle element displayed on the slider. Then you can drag it using below code,
var slider = $(".rz-pointer-min"); //im not sure about the locator of the circle element.
browser.actions().mouseMove(slider).mouseDown().mouseMove({x:20,y:0 }).mouseUp().perform()

JavaScript retrieving element's CSS values

I'm currently making a basic drag and drop system and need to retrieve the top and left properties of the element being moved. If I do this:
var mover = document.getElementById('mover');
alert(mover.style.top);
Will alert nothing ( ' ' )
Is there any way of retrieving CSS values (in JS) without having to define them with JS first?
You will need to use getComputedStyle if you wish to retrieve properties that are computed rather than defined.
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
FROM the MDN link...
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
You can get the position of the element as position().top, The css values can be retrieved as .css("margin-top") or .css("top")
alert($('#mover').position().top);
alert($('#mover').css("margin-top"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='mover'>dasdasD</div>
Since you dislike jQuery, here is the solution in pure JS
Update :
var mover = document.getElementById('mover');
alert(window.getComputedStyle(mover).getPropertyValue('margin-top'));
<div id='mover'>dasdasD</div>
There are three possible tops to worry about:
The actual top position. Every element has a top resulting from the page layout, whether or not it has a computed value for the top property. Get this with getBoundingClientRect.
The computed value of the CSS property top. Get this with getComputedStyle, as mentioned in other answers
The current style value set on the element for top. Get this with elt.style.top as you attempted.
var mover = document.getElementById('mover');
alert(mover.offsetTop);
alert(mover.offsetLeft);

Change height of panel form javascript

Using JS Can get the height of an asp.net panel
var test1 = $$('ViewFeatureProperties')[0].offsetHeight;
if (test1<500)
{
//change height of panel to 275
$$('ViewFeatureProperties')[0].offsetHeight = 275px;
}
could get the value in test1, but wouldnt update to 275 if test1<500, any advice? ta
The offsetHeight property is read only, use height instead.
Your first line of code and if statement are, at least syntactically, correct examples of how to use it. To set it change your code to read:
$$('ViewFeatureProperties')[0].style.height= '275px';
Notice I've also wrapped my value with ' so that I'm assigning it a string.
Alternative:
Since you're using jQuery it seems, you can use jQuery to set the height:
$('ViewFeatureProperties').eq(0).height(275);
No massive difference, it's just that you now still have your jQuery object if you want to chain more functions.

How to get the CSS left-property value of a div using JavaScript

My CSS rule looks like this:
#my-div{
display: none;
position: absolute;
left: -160px;
bottom: -150px;
}
I'm trying to get value of the left-property like this:
document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft
The problem is that both return null. Where is the problem?
The problem is that someElement.style.left only work if you have inline style. Since you apply your styling through a stylesheet, you will not be able to fetch the value the way you expect.
You have a couple of other approaches you could take to get the value through JavaScript:
window.getComputedStyle:
It is possible to get the computed style of an element using window.getComputedStyle, the problem is that it has quite limited support (IE9+). If you still want to use it you could wrap it up in a function to make it a bit easier to get each property:
function getCssProperty(elmId, property){
var elem = document.getElementById(elmId);
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// You could now get your value like
var left = getCssProperty("my-div", "left");
Working example
jQuery (or some other library):
Another option would be to use a JavaScript library like jQuery (or whatever you prefer), which will provide you with a cross-browser solution to get the value.
With jQuery you could use the .css() method to read the CSS-property of the element.
$(function () {
var left = $("#my-div").css("left");
});
Working example
​
You should call this
document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft
when document is loaded, if you call it earlier it will return null because element doesnt exists yet. So you can use jQuery to determine when all content is loaded.
$(function() {
//put your code here
});
The problem is that, since CSS is loaded separately from the JS, there's no official way to ensure that the style.left property will be accurate. The style.left property is a different, higher-priority style override.
You'll need to use the getComputedStyle function.
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
Ex:
var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");
Maybe you have to call your functions after document ready.
If you use jQuery you can find left value faster:
$(document).ready(function() {
var $left = $('#my-div').css('left');
console.log($left);
});

jQuery hide - how to know if element has started to hide but still visible?

I have form where are inputs. Answers and visibility of the inputs may affect visibility of other inputs which are located below it.
I have javascript function which is called when value of some of the inputs have changed. The function is going through every input and checking it’s visibility and answer. Based on that information it may hide or show some other inputs. One loop is enough, because visibility of the element can’t affect visibility of previous elements.
$(".test_this").each(function() {
var id_number = $(this).attr("id").split("_")[1];
var tested_id = parseInt(id_number) + 1;
if ($(this).find("input:checked").val() != 1 || $(this).is(":hidden")) {
if ($("#element_"+tested_id).is(":visible")) {
$("#element_"+tested_id).hide();
}
}
else {
if ($("#element_"+tested_id).is(":hidden")) {
$("#element_"+tested_id).show(500);
}
}
});
My code is working well, but I would like to add duration to hide-function, but then my visibility check fails. Is it possible to know if some element has started to hide but is still visible?
I don’t want to use callback function, because it is executed after the delay. Second, I don’t want to change values of hidden inputs. One solution is to add some extra class which existence would be possible to check, but is there some better way to do this?
My code in Fiddle: http://jsfiddle.net/nmUPj/3/
For the further information, my actual code is lot more complicated and getting information about form from MySQL and generating form and javascript code with PHP.
You can check if the element is still animating by:
$("#element_"+tested_id).is(":animated")
Alternatively, you can give a callback function to your show(),
$("#element_"+tested_id).show(5000, function(){
alert('animation completed');
});

Categories