Trouble with referencing a javascript variable using jquery

Question

I'm trying to animate a div element so that it changes its width.

The problem is that I want it to change its width to a variable that's stored in a .js file and I'm not sure how to get it to recognize it.

My HTML code:

<section style="width:100%;  height:120px;  clear:both;" >
    <section class="campaign_statistics" style="background-color:#EFEFEF;">

        <?php include('progress_chart.php'); ?>

    </section>
</section>

Uses include for that PHP file which contains:

if ($blog_id == 9)
    echo
    '
    <script>
    var percent = String(businessProgress.getPercent());
    document.write(businessProgress.toString());
    </script>
    '
;

I defined the variable percent to be referenced in jQuery. The .js file has an object that I made that stores some variables and I made getters to get their info when needed.

The toString() method:

this.toString = function(){
    var string = '<div class="campaign_progress" style="width:0%;"> <div class="campaign_percentage_bar">' + String(this.getPercent()) + '% Percent Unit Progress</div> <div class="campaign_dollars">$' + mySlice(this.getCurrent()) + '<span class="goal"> of $' + mySlice(this.getGoal()) + '</span></div></div>';
return string;
}

Basically builds the div element that I want to animate.

The width is set at 0% and when my jquery is called in the header:

<script>
    $(document).ready(function() {
        $(".campaign_percentage_bar").animate({width:String(percent)+'%')}, 5000);
    });
</script>

This is how I'm referencing that variable. I have the script calls in my header, so that all should be ok. If you can give any suggestions or if I need to clarify more or give more info, please comment.

Can you post a JSfiddle?

Rich
– Rich

2013-08-19 22:09:07 +00:00
Commented Aug 19, 2013 at 22:09 — Rich
– Rich, Commented Aug 19, 2013 at 22:09
What are you trying to reference? The variable percent?

David L
– David L

2013-08-19 22:12:38 +00:00
Commented Aug 19, 2013 at 22:12 — David L
– David L, Commented Aug 19, 2013 at 22:12
Are you sure it's a string ?

adeneo
– adeneo

2013-08-19 22:17:52 +00:00
Commented Aug 19, 2013 at 22:17 — adeneo
– adeneo, Commented Aug 19, 2013 at 22:17
width:String(percent)+'%') <<<< Extra Paren

Daniel
– Daniel

2013-08-20 00:19:50 +00:00
Commented Aug 20, 2013 at 0:19 — Daniel
– Daniel, Commented Aug 20, 2013 at 0:19
@DavidL yes, that is the variable I'm trying to reference.

WhyAyala
– WhyAyala

2013-08-20 14:43:03 +00:00
Commented Aug 20, 2013 at 14:43 — WhyAyala
– WhyAyala, Commented Aug 20, 2013 at 14:43

Daniel · Accepted Answer · 2013-08-20 00:22:33Z

1

Try this

$(".campaign_percentage_bar").animate({width:percent+'%'}, 5000);

answered Aug 20, 2013 at 0:22

Daniel

5792 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

WhyAyala Over a year ago

This is exactly what I was looking for. You were right about that extra parenthetical. I also changed the class to campaign_progress, the one I was using before wasn't correct. Thanks

Collectives™ on Stack Overflow

Trouble with referencing a javascript variable using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related