Jump to content

5 star rating.


RobYost
 Share

Recommended Posts

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?

 

 

 

Link to comment
Share on other sites

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:

post-906-0-88365800-1498503568_thumb.png

 

Best regards,

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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,

  • Upvote 1
Link to comment
Share on other sites

  • 4 years later...
  • 11 months later...
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".

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...