I would like to have several sliders on one page but in various positions. (I do not mean the starting value of each slider, but the position of the slider itself, so that sliders are not vertically aligned.)
This CSS-Code ("Look and Feel" - "advanced" - "Add Custom CSS") does the job, but for all sliders in the survey at once:
.Skin .horizontalbar {
margin: 2em 0.5px 0.5px 0.5px;
position: relative;
left: 500px;
}
Is there a way to change the position for each slider seperately? (Via CSS in "Look and Feel" or Javascript?)
Page 1 / 1
You can do it in CSS using the nth-child psuedo-class. You can also do it with JavaScript (any number of ways).
> @TomG said:
> You can do it in CSS using the nth-child psuedo-class. You can also do it with JavaScript (any number of ways).
Thank you for your fast comment!!
I got the CSS code I mentioned above from somewhere else; since I am myself not (yet) adept in CSS a quick search on "nth-child pseudo-class" made me guess, that I need a bit more guidance.
Would it be possible for you to show me one of the ways to do it with JavaScript? Or point me to a source that illustrates how to adress/change properties (like position on the screen) for idividual sliders via JavaScript?
I already searched for information on my specific problem, (e.g. here)
but could not find a solution or a way towards it.
> You can do it in CSS using the nth-child psuedo-class. You can also do it with JavaScript (any number of ways).
Thank you for your fast comment!!
I got the CSS code I mentioned above from somewhere else; since I am myself not (yet) adept in CSS a quick search on "nth-child pseudo-class" made me guess, that I need a bit more guidance.
Would it be possible for you to show me one of the ways to do it with JavaScript? Or point me to a source that illustrates how to adress/change properties (like position on the screen) for idividual sliders via JavaScript?
I already searched for information on my specific problem, (e.g. here)
but could not find a solution or a way towards it.
Hi @Max!
It looks like you may be asking about custom programming/code. We actually have a Developer Corner in the community that is reserved for these types of questions. Therefore, we recommend asking your question in that section instead so coders and programmers are more likely to answer your question.
P.S. They might assume that you already have a basic knowledge of programming and how to integrate it into Qualtrics. If you do not, we recommend checking out W3Schools and our pages on Adding Custom CSS and Adding JavaScript to get a basic understanding!
It looks like you may be asking about custom programming/code. We actually have a Developer Corner in the community that is reserved for these types of questions. Therefore, we recommend asking your question in that section instead so coders and programmers are more likely to answer your question.
P.S. They might assume that you already have a basic knowledge of programming and how to integrate it into Qualtrics. If you do not, we recommend checking out W3Schools and our pages on Adding Custom CSS and Adding JavaScript to get a basic understanding!
> @Emily said:
> Hi @Max!
>
> It looks like you may be asking about custom programming/code. We actually have a Developer Corner in the community that is reserved for these types of questions. Therefore, we recommend asking your question in that section instead so coders and programmers are more likely to answer your question.
>
> P.S. They might assume that you already have a basic knowledge of programming and how to integrate it into Qualtrics. If you do not, we recommend checking out W3Schools and our pages on Adding Custom CSS and Adding JavaScript to get a basic understanding!
Hi Emily,
thank you for your reply!
I thought this is the Developers Corner? I posted this question in Developers Corner/Custom Code.
Thanks for those Links. I do know how to add JavaScript to individual Questions via the JavaScript Editor, but when I add for example this in the JavaScript editor ofa particular slider question nothing happens:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
left: 100
});
> Hi @Max!
>
> It looks like you may be asking about custom programming/code. We actually have a Developer Corner in the community that is reserved for these types of questions. Therefore, we recommend asking your question in that section instead so coders and programmers are more likely to answer your question.
>
> P.S. They might assume that you already have a basic knowledge of programming and how to integrate it into Qualtrics. If you do not, we recommend checking out W3Schools and our pages on Adding Custom CSS and Adding JavaScript to get a basic understanding!
Hi Emily,
thank you for your reply!
I thought this is the Developers Corner? I posted this question in Developers Corner/Custom Code.
Thanks for those Links. I do know how to add JavaScript to individual Questions via the JavaScript Editor, but when I add for example this in the JavaScript editor ofa particular slider question nothing happens:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
left: 100
});
Your easiest path forward is probably CSS with the QID specified:
```css
.Skin #QID1 .horizontalbar {
margin: 2em 0.5px 0.5px 0.5px;
position: relative;
left: 100px;
}
.Skin #QID2 .horizontalbar {
margin: 2em 0.5px 0.5px 0.5px;
position: relative;
left: 200px;
}
```
Attached is a working example and the qsf. This seems like a change that will lead to all kinds of problems but since there is no context provided it's hard to predict. Good luck.
https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_bI3T8QfFbo9qb2d?Q_SurveyVersionID=current&Q_CHL=preview
```css
.Skin #QID1 .horizontalbar {
margin: 2em 0.5px 0.5px 0.5px;
position: relative;
left: 100px;
}
.Skin #QID2 .horizontalbar {
margin: 2em 0.5px 0.5px 0.5px;
position: relative;
left: 200px;
}
```
Attached is a working example and the qsf. This seems like a change that will lead to all kinds of problems but since there is no context provided it's hard to predict. Good luck.
https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_bI3T8QfFbo9qb2d?Q_SurveyVersionID=current&Q_CHL=preview
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.