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

More

12 years 4 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
Offline
LimeSurvey Community Team

More

12 years 4 months ago #108444 by tpartner

Replied by tpartner on topic Responsive Star Rating

Try background-size: cover - www.w3schools.com/cssref/css3_pr_background-size.asp

.

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

More

12 years 4 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 - https://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

More

12 years 4 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
Topic Author
Offline
Premium Member

More

12 years 4 months ago - 12 years 4 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="https://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: 12 years 4 months ago by dweisser.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

12 years 4 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.

Moderators: tpartner, holch

Powered by Kunena Forum

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Responsive Star Rating

Lime-years ahead

Legal

About Us

Open Source