5 star rating.

[RobYost]

I found an example on the internet that seems to work. (https://codepen.io/jamesbarnett/pen/vlpkh)

in a HTMLFrame:

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

in customeCSS:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/
.rating { 
  border: none;
  float: left;
}
.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}.rating > .half:before { 
  content: "\f089";
  position: absolute;
}.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

But I don't like that the css file is not on my server.  So I downloaded it. 

But I am unsure where to put it or how to change the reference to it

in font-awesome.css:
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

Also netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css references:

src: url('../font/fontawesome-webfont.eot?v=3.2.1');

It looks like I should  create 2 folders in the files directory:

css

font

and put font-awesome.css in css

and put fontawesome-webfont.eot in font

 

if I do that what should the @import line look like?

 

 

 

[Sherzod]

Hi,

 

It looks like I should  create 2 folders in the files directory:

css

font

and put font-awesome.css in css

and put fontawesome-webfont.eot in font

 

if I do that what should the @import line look like?

 

Can you try this ?:

 

1. HTMLFrame:

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

2. customeCSS (without @import url ):

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/
.rating { 
  border: none;
  float: left;
}
.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}.rating > .half:before { 
  content: "\f089";
  position: absolute;
}.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

3. CustomFiles:

files/css/font-awesome.css

4. ServerModuleBeforeInit:

procedure TUniServerModule.UniGUIServerModuleBeforeInit(Sender: TObject);
begin
  MimeTable.AddMimeType('eot', 'application/font', False);
end;

Result:

 

Best regards,

[RobYost]

I added the HTML to the HTMLFrame, CustomCSS, customFiles and the BeforeInit Code.
 
Under Files I added a folder css and put the css file I downloaded in it.  Then I removed the @import line.
Then I created a folder font under files and put the file fontawesome-webfont.eot
 
But I still just get the little squares instead of stars. I must not have followed your instructions quite right.

 

I have a link to the project file I used:

 

http://propertysidekick.com/public/Stars.zip

 

I still don't know how to upload a file.

[Sherzod]

Hi,

 

It seems you are using a browser other than Firefox

 

Can you try to download these files too and put to font folder ?!:

http://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.eot?#iefix&v=3.2.1
http://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1
http://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1

procedure TUniServerModule.UniGUIServerModuleBeforeInit(Sender: TObject);
begin
  MimeTable.AddMimeType('eot', 'application/font', False);
  MimeTable.AddMimeType('woff', 'application/font', False);
  MimeTable.AddMimeType('ttf', 'application/font', False);
end;

Best regards,

[Sherzod]

http://propertysidekick.com/public/Stars.zip

 

I still don't know how to upload a file.

 

Try "More reply options" button...

[RobYost]

Thank you, it is working now.

[Kenneth]

How I can get the result of the rating in the program?

[Tokay]

Up

1. How can get result of the rating on the back side?

2. Does it works on the current UniGUI (1562)?

[Sherzod]

1 hour ago, Tokay said:

2. Does it works on the current UniGUI (1562)?

I think it should work. You can test.

 

1 hour ago, Tokay said:

1. How can get result of the rating on the back side?

On 6/25/2017 at 3:25 PM, RobYost said:

<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    

Here you can use click handler. Or set the handler to the class="rating".

[Tokay]

I've added to HTMLFrame '<h1>Pure CSS Star Rating Widget</h1>'

Added to customeCSS your CSS.

Added to CustomFiles and ServerModuleBeforeInit.

Downloaded font-awesome.css and fontawesome-webfont.woff from mentioned URL.

Run app, but it does not show rating stars. Only 'Pure CSS Star Rating Widget' and nothing more.

issues in the browser console are absent.