Develop Reference

How to Update CSS and Variable Using GSAP Tween

Consider the following code (not tested, just an example):
const item = document.getElementById('test');
let value = 0;
let finalValue = 100;
TweenMax.fromTo(
item,
.2,
{ '--some-var': value },
{
'--some-var': finalValue
onComplete: () => {
value = finalValue;
}
}
);
The above code uses TweenMax (although TweenLite would be preferred if it supports what I need...) to update the --some-var CSS property of item. At the moment, I am using onComplete to update value to the finalValue of the animation, however, I would ideally like to do this at the same time as the tween.
In other words, I would like the Tween to update the following two values as it runs:
--some-var of item
value
I am aware that I can pass an array to target, but from what I understand, that will set the value variable to an object like so { '--some-var': XXX } instead of just XXX.
Is there a way to update two objects that have different structures? i.e. One is a DOM node (CSS update), and one is a simple variable...

This is definitely possible. In fact, Carl made a quick tip on how to do so. Just make sure you are animating the actual variable, not the element where it is called.
If you want more help in your case, please provide a minimal example of the code that reproduces your error.

Individual custom start position in Qualtrics through Javascript

I want to use either a slider question or a draggable bar chart in Qualtrics to present to respondents how they answered in former questions. More specifically, I compute a value out of then answers with weighting, and want the slider or bar to be positioned at this value.
Notably, as each respondent has a value (stored in an embedded data field), the position will thereby be individual for each respondent. Piping only works for text fields, as far as I understood the support page.
Based on this question/answer I came to the following code for the bar graph:
Qualtrics.SurveyEngine.addOnload(function()
{
var result = "${q://Field/result}";
var qwidth = $('QID1936~1~track').offsetWidth;
var resrec = ((qwidth*result)/100);
$('QID1936').select('.bar').each(function(name, index) {
name.setStyle({ width: resrec +"px"});
});
});
Basically, I get the result for each respondent out of the embedded data, get the width of the full bar graph, compute the ratio that should be colored based on the result, and update the position of the bar graph (following the mentioned answer).
Funny enough, everything works when done in the console. Also, the embedded data is correctly loaded, qwidth as well.
Two problems arise: it seems resrec could be computed wrongly, as a console.log() spits out 0 instead of the correct value. I assumed this could be somehow as a variable is not recognized as number, but several tries with Number() or 0+var did not change how this works in Qualtrics. In the console, it works just fine.
Also, no update of the bar (or slider with similar code) happens, neither with the correct value nor with the 0 that is produced by Qualtrics.
I search for two things: either a solution to the Javascript problem as described, basically how I can update the bar or slider with embedded data. Or another solution how to directly get embedded data into one of those two question formats as a starting value for each respondent individually.
Thanks for your help or ideas!

Try this:
Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var result = parseFloat("${e://Field/result}");
var qwidth = $(qid+'~1~track').offsetWidth;
var resrec = ((qwidth*result)/100);
$(qid).select('.bar').each(function(name, index) {
name.style.width = resrec + "px";
});
});
Notes:
It is best not to use a hardcoded QID
In a pipe use e: to refer to an embedded variable. q: is for questions.
Use parseFloat to convert the string to a number
No need to use setStyle if you are only setting one value

One solution proposed by Qualtrics support: when you use bars and/or sliders, piped values are actually possible.
The trick is to have the value of the bar/slider shown (a thing we do not use in the whole survey elsewhere). Then, you can access over the Advanced Question Options > Add Default Choices the blue arrow for piping text behind the value. Through this, the value is individually set to either embedded data or another answer.
Note, however, to tick "Show value" before accessing the default choices, else you will only be able to drag around the bar and set it for all simultaneously.

Here is a solution using the Qualtrics Question API method setChoiceValue that does not require you to compute the ratio and update the length of the bars manually.
Below is an example code for the result of ten respondents saved in embedded data from previous questions.
Qualtrics.SurveyEngine.addOnload(function()
{
var embedded = ["${e://Field/r1}", "${e://Field/r2}",
"${e://Field/r3}", "${e://Field/r4}", "${e://Field/r5}",
"${e://Field/r6}", "${e://Field/r7}", "${e://Field/r8}",
"${e://Field/r9}", "${e://Field/r10}"];
for (var i = 0; i < 11; i++) {
var index = i + 1;
var choiceInput = embedded[i];
this.setChoiceValue(index, choiceInput);
}
});
For one respondent:
Qualtrics.SurveyEngine.addOnload(function()
{
var value = "${e://Field/r1}";
this.setChoiceValue(1, value);
});

Is there another option for jquery opacity?

I have a series of sliders that control the items / links on my site. http://wp11004271.server-he.de/alloytoy4.0/. At the moment there is only two options for these links, available (dark background) and unavailable (light background). I would like to add some in-between variables for links that are available in another capacity.
var filter = {};
var unmarkItem = function (alloy) {
var domalloy = $('#alloy_' + alloy);
domalloy.css('opacity', 1);
// alloys[alloy].marked = false;
};
var markItem = function (alloy) {
var domalloy = $('#alloy_' + alloy);
domalloy.css('opacity', 0.2);
// alloys[alloy].marked = true;
};
Iam only familiar with true or false but want to add other options.
Any thoughts on what to add?

You are currently using marked as a Boolean, which means, that it can only be two values assigned to: true or false.
If you want more options, I would recommend to use marked as an Integer, means a number without any decimal places (guess thats the right word for it, if not, correct me) so without a comma.
Create variables called for example MODE_DISABLED, MODE_INACTIVE, MODE_ACTIVE, etc. and assign number values to them, like var MODE_DISABLED = 1; or something like that.
Then you can set the modes like
alloys[alloy].marked = MODE_INACTIVE;
and dont have to keep in mind whats the value for which mode.
Your function markItem should get a second parameter for the value.

Jquery mobile value overrides toFixed method

Please check:
http://jsfiddle.net/LdWHH/
Obviously it does not make sense to set it to toFixed(1) first and then to toFixed(2). The point is that the .slider("refresh") seems to have its own internal conversion and thus it ignores or overrides the toFixed method. I don't know.
In my german browser it also displays the . correctly as ,
How can I adjust this manually?
$("#plus3").on("mousedown taphold", function () {
var sv4 = $('#slider-vertical4').val();
var sv4fixed = Number(sv4).toFixed(1);
var total = (Number(sv4fixed) + 0.1).toFixed(2);
$('#slider-vertical4').val(total).slider("refresh");
});

I don't really understand what you're trying to achieve.
If your problem is that using +/- : 5.0 will appear as 5.
You can try doing it in two times, set&refresh then set
$('#slider-vertical4').val(total.toFixed(1)).slider("refresh")
$('#slider-vertical4').val(total.toFixed(1));

Twitter Bootstrap Typeahead to function like Google Chrome Omnibox

Love the Twitter Bootstrap typeahead functionality but I have a small tinkering I'd like to do - I want to have the best match (or first match is probably simpler) result in the drop-down be autofill in the input box.
The functionality I'm looking for is exactly the way the Google Chrome Omnibox works
Anyone know of a solution for this?

Playing a bit, I come up with that code.
Live demo (jsfiddle)
$('.omnitype').each(function() {
var $omnitype = $(this);
$omnitype.typeahead({
source: mySource,
items: 4,
sorter: function(items) {
// Bootstrap code
/* ... */
// Modified code (delay the return of sorted)
var sorted = beginswith.concat(caseSensitive, caseInsensitive);
// if there is a first element, we fill the input select what we added
var first = sorted.length && sorted[0];
if (first) {
var origin = this.$element.val();
this.$element.val(first);
createSelection(this.$element.get(0), origin.length, first.length);
}
// back to the intended behavior
return sorted;
}
});
});
I used this answer to provide the createSelection function (not sure if really needed).
Still needs quite some tweaking, as the keys doesn't work as expected. It may be easier to recode the whole plugin with some checking that would give naturally the intuitive behavior.
Or you may be able to catch the key events before the plugin and do what is appropriate.