Welcome, Guest
Username: Password: Remember me

TOPIC: Responsive Star Rating

Responsive Star Rating 6 months 2 weeks ago #108389

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 205
  • Thank you received: 5
  • Karma: 5
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 administrator has disabled public write access.

Responsive Star Rating 6 months 1 week ago #108444

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4364
  • Thank you received: 827
  • Karma: 381
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Responsive Star Rating 6 months 1 week ago #108446

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 205
  • Thank you received: 5
  • Karma: 5
Hey TPartner,
I tried cover, contain 100% 100% and it doesn't seem to work. Here is the CSS I'm working with.
/* 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 administrator has disabled public write access.

Responsive Star Rating 6 months 1 week ago #108475

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4364
  • Thank you received: 827
  • Karma: 381
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Responsive Star Rating 6 months 1 week ago #108480

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 205
  • Thank you received: 5
  • Karma: 5
TPartner -
I'm struggling.

Test Survey.

It doesn;t seem to work without including:
<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: 6 months 1 week ago by dweisser.
The administrator has disabled public write access.

Responsive Star Rating 6 months 1 week ago #108532

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4364
  • Thank you received: 827
  • Karma: 381
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.207 seconds
Donation Image