how to resize?

Sep 8, 2013 at 9:10 PM
I know the plugin doesn't support resizing now but I'd like to 1) suggest that this be a new feature and 2) like suggestions on how to accomplish this task with the current version.

I've setup standard sized images to use with rateit: 16px, 32px, 48px, 64px. Depending on the end user's screen size I use the largest size possible and I'd like to resize certain rateit elements on the page as the window resizes to a lower width.
Coordinator
Sep 9, 2013 at 6:14 AM
Hi Joey,

I actually think it might not be much of a problem, even with the current code.

I believe these are the step you have to perform:
  1. OnLoad or OnResize add the correct to each of the rate it element , for example ".small", for 16px, and ".huge" for 64px. These classes match up with classes in your style sheet that match the right pictures.
  2. OnResize: call $('.rateit').rateit('starwidth', XX), and $('.rateit').rateit('starheight', XX), where XX is the new number of pixels (so 64 not '64px').
And this should be enough.

I did a very basic check on step 2, and saw that it resize correctly, so I see no problem with implementing the solution.

Perhaps in the future I will add a demo to the examples page showcasing the resize.

Gidon
Sep 9, 2013 at 7:57 PM
Thanks gidon, looks like two elements don't receive the new size after doing this: rateit-selected and rateit-hover and cause image repetition in the y direction. I put some code in to do this after the init section and everything is working as expected.
Coordinator
Sep 10, 2013 at 5:18 AM
That's good to hear. Could you be so kind to post the code? So I can integrate it into the plugin?

Btw it's always nice to see people using the plugin in ways I didn't expect.
Sep 12, 2013 at 5:56 AM
I just threw these two lines in after the init code block to get those two elements to size. I'm using version 1.0.9 with some modifications, but this is still an issue for latest too. Threw together this jsfiddle test for this. Just resize the page to see the affect.
            //init rateit plugin
            if (!itemdata('init')) {
                ...
            }

            item.find('.rateit-selected').height(itemdata('starheight'));
            item.find('.rateit-hover').height(itemdata('starheight'));
Coordinator
Nov 7, 2013 at 12:10 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.