JQuery loop changing div background depending on it's class and php array

Question

I have 2 arrays, 1 with indexes and colors in hexadecimal (without #) another one with corresponding indexes and type of exercise.

What I'm trying to achieve by that is generating a schedule, which to a div containing specified exercise type adds a class "ExerciseType" + index of exercise from an array. It's like this e.g. "ExerciseType0" or "ExerciseType1" (got that one done and working). Then I'm trying to use jQuery to change background colors to the div's with classes corresponding to indexes.

To do that I've tried to write a function $ColorIndex - array of indexes as key's and colors in hexadecimal as value's .ExerciseType0 etc. got no styling before.

<script type=\"text/javascript\" src=\"jquery-1.8.2.js\"></script>
<script type=\"text/javascript\">
    $(document).ready(function(){
        var ColorIndexJS = <?php echo json_encode($ColorIndex) ?>;
        var ColorIndexLength = ColorIndexJS.length;
        var counter = 0;
        while(counter<ColorIndexLength){
            $('.ExerciseType' + counter.toString()).css("background-color", "#"+ColorIndexJS[counter]);
            counter++;
        }
    });
</script>

The result I get from this code in firebug is

$(document).ready(function(){
var ColorIndexJS = ["FF4040","EEC591","FF7F24"];
var ColorIndexLength = ColorIndexJS.length;
document.write("ExerciseType");
var counter = 0;
while(counter<ColorIndexLength){
$('.ExerciseType' + counter.toString()).css("background-color", "#"+ColorIndexJS[counter]);
counter++;
}
});

As seen here php_array is converted successfully, but the function itself just doesnt want to work. Any ideas?

Sadly none, firebug didn't help me there.

Stranko
– Stranko

2012-11-02 14:40:09 +00:00
Commented Nov 2, 2012 at 14:40 — Stranko
– Stranko, Commented Nov 2, 2012 at 14:40

epascarello · Accepted Answer · 2012-11-02 13:03:59Z

1

why not have the php write out CSS classes and there would be zero JavaScript involved?

<style>
    .ExerciseType0{background-color:#FF4040;}
    .ExerciseType1{background-color:#EEC591;}
    .ExerciseType2{background-color:#FF7F24;}
</style>

The reason why your code fails is the document.write, it replaces the page content since it happens after the document is loaded.

edited Nov 2, 2012 at 13:03

answered Nov 2, 2012 at 12:58

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

3 Comments

Stranko Over a year ago

Those ExerciseType0 etc. are generated in php code. There is not even a mention of them in layout.css can that be the problem?

epascarello Over a year ago

They do no have to be mentioned in any CSS file.

Stranko Over a year ago

I'm new to this so sorry for such stupid questions. Thanks to your advice I got it working, never styled in another file than layout.css so I made my own task way more difficult than it is in reality.

Clyde Lobo · Accepted Answer · 2012-11-02 13:00:43Z

0

Your js code is correct sans for the document.write that seems to overwrite your code.

Try un-commenting the document.write at DEMO and you will know what I meant.

answered Nov 2, 2012 at 13:00

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

3 Comments

Stranko Over a year ago

I'm new to js, this document.write was my try at debugging, was trying to do smth like echo in php to see where my code went wrong. Problem is, js doesnt work on my site, don't know why though. If you'd like to see the site it's here, nothing fancy yet silowniainz.jcom.pl/schedule.php

Clyde Lobo Over a year ago

jQuery doesnt seem to load on that page. I guess the path to jquery is wrong. And you HTML seems messed up. You have a div tag ending after the HTMl tag and then some scripts tags

Stranko Over a year ago

Can't choose 2 answers, can't even vote up :(, dang, thanks for helping me :)

Collectives™ on Stack Overflow

JQuery loop changing div background depending on it's class and php array

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related