Home/ Questions/Q 6822065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:37:09+00:00

I’m trying to change my approach in writing javascript as I did with PHP.

  • 0

I’m trying to change my approach in writing javascript as I did with PHP. Here is the old code that I check it’s working.

$(document).ready(function(){

    var calculatetotalwidth = $('#container').width()
    var calculatesegment = calculatetotalwidth / 5
    var calculaterating = calculatesegment * rating

    $('#ratings .ratingbar').animate({width:calculaterating},1200);
});

It’s simply a animation that will mimic a progressbar that will display my rating, by segmenting the width of the content div and divide it by the scope I choose (which is 5/5 in this case).

Here is my OOP approach on the problem.

var RatingsBar = {

    fadeOptions: {
    slow: 5000,
    medium: 2500,
    fast: 1200
    },

    Calculate: function (contaierid, score, scope) {

    $(document).ready(function () {

        var calculatetotalwidth = $(contaierid).width()
        var calculatesegment = calculatetotalwidth / scope
        var calculaterating = calculatesegment * score

        $('#ratings .ratingbar').animate({
        width: calculaterating
        }, RatingsBar.fadeOptions.slow);

    });

    } 
}

RatingsBar.Calculate('#container', ratings, 5)

I used the source code pattern in jqueryslideslidemenu plugin. I can’t seem to make it work. Am I missing something here?

I got the thing to work. The problem now, is that I need ratings to be used. I took it from a PHP code here:

    class rating_system {

    var $score;

    function __construct($rate) {
        $this->score = $rate;
    }

    function run_rate() {
        $this->phptojava();
        echo $this->displayrate();
    }


    function phptojava() {
        echo '<script language="javascript" type="text/javascript"> var ratings ='. $this->score ."</script>";
    }

    function displayrate() {
        $wrapper = '<div id="ratings"><div class="ratingbar">';
        $wrapper = $wrapper . '<p>' . $this->score . '<p>';
        $wrapper = $wrapper . '</div>' . '<div class="blankrating">' . '<p>' . 'ratings' . '<p>';
        $wrapper = $wrapper . '</div></div>';

        return $wrapper;
    }

}

$view = new rating_system(4);

Thanks everyone. I manage to get it working.

<html>
<head>

<?php

    class rating_system {

        var $score;

        function __construct($rate) {
            $this->score = $rate;
        }

        function run_rate() {
            $this->phptojava();
            echo $this->displayrate();
        }


        function phptojava() {
            echo '<script language="javascript" type="text/javascript"> var ratings ='. $this->score ."</script>";
        }

        function displayrate() {
            $wrapper = '<div id="ratings"><div class="ratingbar">';
            $wrapper = $wrapper . '<p>' . $this->score . '<p>';
            $wrapper = $wrapper . '</div>' . '<div class="blankrating">' . '<p>' . 'ratings' . '<p>';
            $wrapper = $wrapper . '</div></div>';

            return $wrapper;
        }

    }

    $view = new rating_system(2);
?>

<script type="text/javascript" src="jquery.js" ></script>
<script language="javascript" type="text/javascript">

var RatingsBar = {
    fadeOptions: {slow:5000,medium:2500,fast:1200},
    calculate: function (contaierid, score, scope) {
//      $(document).ready(function() {
                var calculatetotalwidth = $(contaierid).width();
                var calculatesegment = calculatetotalwidth / scope;
                var calculaterating = calculatesegment * score;
                $('#ratings .ratingbar').animate({width:calculaterating}, RatingsBar.fadeOptions.fast);
//          });//end ready function
    }//End Calculate Function
} //end object

$(document).ready(function() { 
    RatingsBar.calculate('#container',ratings,5);

});

</script>

<style type="text/css">

#container {
    height:500px;
    width:720px;

}

#ratings {
    width:720px;
    height:75px;
    position:relative;

    float:left;
}

#ratings .ratingbar {
    width:0px;
    border: 1px #910000 solid;
    height: 100%;
    float:left;
    text-align:right;
    background-image: linear-gradient(bottom, #A62E10 47%, #F52D00 82%);
    background-image: -o-linear-gradient(bottom, #A62E10 47%, #F52D00 82%);
    background-image: -moz-linear-gradient(bottom, #A62E10 47%, #F52D00 82%);
    background-image: -webkit-linear-gradient(bottom, #A62E10 47%, #F52D00 82%);
    background-image: -ms-linear-gradient(bottom, #A62E10 47%, #F52D00 82%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.47, #A62E10),
        color-stop(0.82, #F52D00)
    );

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#A62E10', endColorstr='#F52D00');
}

#ratings .blankrating {
    text-align:left;
}

</style>

</head>

<body>

<div id="container">

<?php echo $view->run_rate(); ?>

</div>
</body>
</html>

This one is the entire code I’m trying.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe this would work, hard to tell without a working test case.

    var RatingsBar = {

    fadeOptions: {
    slow: 5000,
    medium: 2500,
    fast: 1200
    },

    Calculate: function (contaierid, score, scope) {
        var calculatetotalwidth = $(contaierid).width();
        var calculatesegment = calculatetotalwidth / scope;
        var calculaterating = calculatesegment * score;

        $('#ratings .ratingbar').animate({
        width: calculaterating
        }, RatingsBar.fadeOptions.slow);
    } 
};

$(document).ready(function () {
    RatingsBar.Calculate('#container', Ratings, 5);
});

    Try reproducing your problem on jsfiddle.net and post the link.

    Edit : What is Ratings supposed to be (second argument in your function call)? Replace Ratings by any value or define a Ratings variable and the code above works.

    • 0