Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Responsive Star Rating

  • dweisser
  • dweisser's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 10 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 10 months ago #108444 by tpartner
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
  • dweisser's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 10 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.
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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 10 months ago #108475 by tpartner
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
  • dweisser's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 10 months ago - 9 years 10 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:
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 10 months ago by dweisser.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 10 months ago #108532 by tpartner
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.

Lime-years ahead

Online-surveys for every purse and purpose