- Posts: 5033
- Thank you received: 1257
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Display answers or tokenattributes as an overlay over a graphic
- jelo
- Topic Author
- Offline
- Platinum Member
Less
More
8 years 8 months ago #123278
by jelo
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Display answers or tokenattributes as an overlay over a graphic was created by jelo
E.g. you have price labels inside a graphic and want to display different prices on the labels.
Is there a proven way to place text from e.g. answers or tokenattributes on a graphic at certain positions?
If SVG would be supported in every browser I would go that route, but with a bitmap graphic and inside Limesurvey, I don't see a practical solution.
Is there a proven way to place text from e.g. answers or tokenattributes on a graphic at certain positions?
If SVG would be supported in every browser I would go that route, but with a bitmap graphic and inside Limesurvey, I don't see a practical solution.
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
- steve_81
- Offline
- Premium Member
Less
More
- Posts: 136
- Thank you received: 37
8 years 8 months ago - 8 years 8 months ago #123282
by steve_81
Replied by steve_81 on topic Display answers or tokenattributes as an overlay over a graphic
Hi,
I'm not so familiar with design, but what about a few div-Containers?
A divContainer with to divs inside, floating into each other.
<div>
<div style="height: 20em; width: 20em; background-color: #E1E1E1; float: left">The picture</div>
<div style="position: absolute; float: left; margin: 5em 10em">little Label {Token}</div>
</div>
Greets
Stefan
I'm not so familiar with design, but what about a few div-Containers?
A divContainer with to divs inside, floating into each other.
<div>
<div style="height: 20em; width: 20em; background-color: #E1E1E1; float: left">The picture</div>
<div style="position: absolute; float: left; margin: 5em 10em">little Label {Token}</div>
</div>
Greets
Stefan
Last edit: 8 years 8 months ago by steve_81.
The topic has been locked.
- jelo
- Topic Author
- Offline
- Platinum Member
Less
More
- Posts: 5033
- Thank you received: 1257
8 years 8 months ago #123297
by jelo
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Replied by jelo on topic Display answers or tokenattributes as an overlay over a graphic
Thanks for the idea. Perhaps someone can comment on crossbrowser issues when using this approach.
The idea looks great inside the html editor of limesurvey. But there seem to be some issues with templates and the different divs. When using an image with a certain size, the image is not limited to the question text area, but overlapping answer items as well.
The idea looks great inside the html editor of limesurvey. But there seem to be some issues with templates and the different divs. When using an image with a certain size, the image is not limited to the question text area, but overlapping answer items as well.
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
- steve_81
- Offline
- Premium Member
Less
More
- Posts: 136
- Thank you received: 37
8 years 8 months ago #123301
by steve_81
Replied by steve_81 on topic Display answers or tokenattributes as an overlay over a graphic
Hi,
if you make the size of the div relative to the available space and the size of the image too, you prevent an overflow (the height then depends on the picture size):
<p>
Questiontext:</p>
<div>
<div style="float:left; width:70%">
<img src="source/to/your/pic.jpg" width="100%"/></div>
<div style="position: absolute; float: left; margin: 10% 10%;">
little Label</div>
</div>
<div style="clear: left">
[This div is needed for a proper line break. You can leave it blank or continue with your question.]
</div>
Additional hint: You can define the styles in an own class in the template if you want.
The div-Containers are so common, no Browser should have problems, usually it is displayed always in the same desgin.
Nice Greetings
Stefan
if you make the size of the div relative to the available space and the size of the image too, you prevent an overflow (the height then depends on the picture size):
<p>
Questiontext:</p>
<div>
<div style="float:left; width:70%">
<img src="source/to/your/pic.jpg" width="100%"/></div>
<div style="position: absolute; float: left; margin: 10% 10%;">
little Label</div>
</div>
<div style="clear: left">
[This div is needed for a proper line break. You can leave it blank or continue with your question.]
</div>
Additional hint: You can define the styles in an own class in the template if you want.
The div-Containers are so common, no Browser should have problems, usually it is displayed always in the same desgin.
Nice Greetings
Stefan
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10098
- Thank you received: 3589
8 years 8 months ago - 8 years 8 months ago #123305
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Display answers or tokenattributes as an overlay over a graphic
A couple of small additions...
1) You should define the position of the wrapper div (relative) so the "Little Label" div is positioned relative to it.
2) I don't think you need to float the Little Label" div - positioning it absolutely will override that.
1) You should define the position of the wrapper div (relative) so the "Little Label" div is positioned relative to it.
2) I don't think you need to float the Little Label" div - positioning it absolutely will override that.
Code:
<p> Questiontext: </p> <div style="position:relative"> <div style="float:left; width:70%"> <img src="source/to/your/pic.jpg" width="100%"/> </div> <div style="position: absolute; width: 50%; left: 10%; top: 10%;"> Little Label </div> </div> <div style="clear: both"> <!--This div is needed for a proper line break. You can leave it blank or continue with your question.--> </div>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 8 months ago by tpartner.
The topic has been locked.
- jelo
- Topic Author
- Offline
- Platinum Member
Less
More
- Posts: 5033
- Thank you received: 1257
8 years 8 months ago #123340
by jelo
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Replied by jelo on topic Display answers or tokenattributes as an overlay over a graphic
Very informative post, Tony. Thanks.
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.