JavaScript: Using marginLeft to position rating stars over image

Question

Am using a JavaScript plugin to apply rating stars for a review. This [fiddle] has most of the code. The stars come in the place of the dropdown (the external resource isn't loading to show this in the fiddle). The stars are showing fine on the localhost, but I wanted to position the stars to appear somewhere in the middle (or maybe over the image itself, wherever).

To this effect, i'm making use of:

   $(function() {
    var _elm=document.getElementById('example2');
    _elm.style.marginLeft = "150px"; 
      $('#example2').barrating({
        theme: 'fontawesome-stars',
        readonly: true,
        initialRating: 3
      });    
 });

But the stars do not change their position. How do I position the stars then? For completion, there are no console errors.

You shouldn't need to use any Javascript for this, only CSS. IE `#example2 { margin-left: 150px; }` — APAD1, Jan 27 '16 at 18:39
can you post full html+css, looks like you are missing something there — BinaryGhost, Jan 27 '16 at 18:43
Then you will need to recreate your issue exactly as it is on your local setup, you have not given us enough to work with in order to help you. — APAD1, Jan 27 '16 at 18:50
@dandavis the var_elm declaration was an afterthought since i figured i should change the css through the script. — Agni Scribe, Jan 27 '16 at 18:55
@ APAD1 @BinaryGhost have updated the fiddle: https://jsfiddle.net/omwpz0tw/8/ — Agni Scribe, Jan 27 '16 at 19:06

score 1 · Accepted Answer · answered Jan 27 '16 at 19:13

1

The plugin is setting the example2 select to be display:none, So any changes on it wont be usefull.

You should apple your css directly to

.br-theme-fontawesome-stars .br-widget

For example you can give it

  margin-left:20px;
  margin-top:-50px;

But then it will be bellow the image so you can give it z-index

z-index:100;

and then you will see the changes on the arrows.

The final result will be:

.br-theme-fontawesome-stars .br-widget {
  height: 28px;
  white-space: nowrap;
  margin-left:20px;
  margin-top:-50px;
  z-index:100;
}

fiddle - https://jsfiddle.net/omwpz0tw/12/

answered Jan 27 '16 at 19:13

BinaryGhost

801
4
9

The only problem is that if I edit `.br-theme-fontawesome-stars .br-widget`, the position setting gets applied to other reviews making use of it for which the position would have to be different. that's why i needed another way to position it on the element itself. – Agni Scribe Jan 28 '16 at 07:15
1

Try wrapping the select in another div and giving him the style – BinaryGhost Jan 28 '16 at 07:16
yes it works now - used position instead of margin. but still, why shouldn't it work without wrapping it in a div? anyways, thanks for the help. – Agni Scribe Jan 28 '16 at 08:17
1

Glad to help :). The plugin is hiding the select and adding a new html. So we need to wrap it to easily control the position of the generated html by the plugin – BinaryGhost Jan 28 '16 at 08:19

JavaScript: Using marginLeft to position rating stars over image

1 Answers1