locked
ickeck.js prevent loading rating RRS feed

  • Question

  • User448619955 posted

    Hi there.

    I'm using icheck.js in my app and I want to use rating(staring) in my page and let people vote for something.

    this is my code:

    <link href="Content/Star.css" rel="stylesheet" />
    <script src="Scripts/icheck.min.js"></script>

    ...

    <div class="star-rating">
            <div class="star-rating__wrap">
                <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
                <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
                <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
                <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
                <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
                <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
                <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
                <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
                <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
                <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
            </div>
        </div>

    and after running my app it changes to:

    <div class="star-rating">
        <div class="star-rating__wrap">
            <div class="iradio_square-yellow" style=";"><input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
            <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
            <div class="iradio_square-yellow" style=";"><input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
            <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
            <div class="iradio_square-yellow" style=";"><input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
            <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
            <div class="iradio_square-yellow checked" style=";"><input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
            <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
            <div class="iradio_square-yellow" style=";"><input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
            <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
        </div>
    </div>


    My class after running must be star-rating__input ,but it's iradio_square-yellow.

    Wednesday, January 10, 2018 1:12 PM

All replies

  • User-832373396 posted

    Hi vahid.ch,

    Sir, I guess that you want this:

    <div class="star-rating">
      <div class="star-rating__wrap">
        <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
      </div>
    </div>
    .star-rating{
    	font-size: 0;
    }
    .star-rating__wrap{
    	display: inline-block;
    	font-size: 1rem;
    }
    .star-rating__wrap:after{
    	content: "";
    	display: table;
    	clear: both;
    }
    .star-rating__ico{
    	float: right;
    	padding-left: 2px;
    	cursor: pointer;
    	color: #FFB300;
    }
    .star-rating__ico:last-child{
    	padding-left: 0;
    }
    .star-rating__input{
    	display: none;
    }
    .star-rating__ico:hover:before,
    .star-rating__ico:hover ~ .star-rating__ico:before,
    .star-rating__input:checked ~ .star-rating__ico:before
    {
    	content: "\f005";
    }

    Simple Online Working Example:

    By the way, may I know your icheck.js Cdn and CSS Cdn if you don't like my solution so that I could debug your code on local  :)

    With regards, Angelina Jolie

    Thursday, January 11, 2018 7:33 AM