- Posts: 115
- Thank you received: 4
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Responsive Star Rating
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
9 years 11 months ago #108389
by dweisser
Responsive Star Rating was created by dweisser
Hi all,
I have implemented the Star Rating workaround described here: here
It works great. I'm using custom images that are roughly 100px in width. My object was to make the selection simpler for tablets and phone users. However, I cannot by any stretch of CSS figure out how make the background images responsive to browser size.
The workaround uses div background images and then slides up and down on mouseover, etc.
I've been at for a hours. I've tried a lot of different approaches and now I've come to you, most humbly, oh great and powerful LimeSurvey user community!
Any thoughts would be most appreciated. Thank you.
David
I have implemented the Star Rating workaround described here: here
It works great. I'm using custom images that are roughly 100px in width. My object was to make the selection simpler for tablets and phone users. However, I cannot by any stretch of CSS figure out how make the background images responsive to browser size.
The workaround uses div background images and then slides up and down on mouseover, etc.
I've been at for a hours. I've tried a lot of different approaches and now I've come to you, most humbly, oh great and powerful LimeSurvey user community!
Any thoughts would be most appreciated. Thank you.
David
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10114
- Thank you received: 3595
9 years 11 months ago #108444
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 Responsive Star Rating
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
9 years 11 months ago #108446
by dweisser
Replied by dweisser on topic Responsive Star Rating
Hey TPartner,
I tried cover, contain 100% 100% and it doesn't seem to work. Here is the CSS I'm working with.
As you can see, I separated style for the Cancel button from the Star-rating. I inserted background-cover everywhere I could just in case. I was starting to think I have to change the image size from px to %, but it doesn't seem to work either. I'm stuck.
I tried cover, contain 100% 100% and it doesn't seem to work. Here is the CSS I'm working with.
Code:
/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */ /*Cancel Rating*/ div.rating-cancel{ float:left; width:52px; /*17*/ height:52px; /*15*/ text-indent:-999em; cursor:pointer; display:block; background:transparent; overflow:hidden } div.rating-cancel,div.rating-cancel a{ background:url(../../../surveyassets/questiontype/starrating/cancel.png) no-repeat 0 0 /*-16*/ } div.rating-cancel a{ display:block; width:50px; /*16*/ height:100%; /*100%*/ background-position:0 0px; border:0 } div.rating-cancel:hover { background-position:0 -63px /*-32*/ } /*Assign Star Ratings*/ div.star-rating{ float:left; width:137px; /*17* The width and the height of one star.*/ height:148px; /*15*/ text-indent:-999em; cursor:pointer; display:block; background:transparent; overflow:hidden background-size: cover; } div.star-rating,div.star-rating a{ background:url(../../../surveyassets/questiontype/starrating/star1.png) no-repeat 0 0px; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ /*background-size: 100% 100%;*/ /* background-size: contain;*/ } div.star-rating a{ display:block; width:137px; /*16*/ height:100%; /*100%*/ background-position:0 0px; background-size: cover; border:0 } div.star-rating-on a{ background-position:0 -148px!important /*-16*/ } div.star-rating-hover a{ background-position:0 -296px /*-32*/ } /* Read Only CSS */ div.star-rating-readonly a{ cursor:default !important } /* Partial Star CSS */ div.star-rating{ background:transparent!important; overflow:hidden!important background-size: cover; } /* END jQuery.Rating Plugin CSS */
As you can see, I separated style for the Cancel button from the Star-rating. I inserted background-cover everywhere I could just in case. I was starting to think I have to change the image size from px to %, but it doesn't seem to work either. I'm stuck.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10114
- Thank you received: 3595
9 years 11 months ago #108475
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 Responsive Star Rating
Can you activate a live sample?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
9 years 11 months ago - 9 years 11 months ago #108480
by dweisser
Replied by dweisser on topic Responsive Star Rating
TPartner -
I'm struggling.
Test Survey.
It doesn;t seem to work without including:
Now I have a couple of js errors - but at least the Stars work. I'll; continue to work to debug. Thanks for having a look!
I'm struggling.
Test Survey.
It doesn;t seem to work without including:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Now I have a couple of js errors - but at least the Stars work. I'll; continue to work to debug. Thanks for having a look!
Last edit: 9 years 11 months ago by dweisser.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10114
- Thank you received: 3595
9 years 11 months ago #108532
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 Responsive Star Rating
From what I can see, the problem is not with background images. The container divs are not resizing because they don't have relative sizes.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.