How do I change class name for CSS inside a PHP Loop?

Question

Hello I am trying to change CSS content on some DIVs depending of their class name.

To explain better, I have a while loop in PHP reading from the database to output DIVs and I have a field named "section" with data such as A,B,C,D,E,F,G.

For the DIVs located in section "A" and "B" I want the class name to be desk_box_hor (for horizontal) ELSE I want it to desk_box_ver(vertical).

Below is what I tried doing only two sections (A,B) that need to be vertical. The others need to be horizontal. If theres a more efficient way of doing this please tell me. I have about 200 of these DIVs being output on screen.

If you have a better title please recommend one, I didn't know what to put lol.

Thanks in advance!

My fiddle of what I want both DIVs to look like

PHP:

while($row = mysqli_fetch_assoc($desk_coord_result)){   
                        //naming X,Y values
                        $id    = $row['coordinate_id'];
                        $x_pos = $row['x_coord'];
                        $y_pos = $row['y_coord'];
                        $sec_name = $row['section_name'];
                        //draw a DIV box at its X,Y coordinate   
    //if section A and B do vertical                    
    if($sec_name == 'B' || $sec_name == 'A'){
        echo '<div class="desk_box_ver" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';

    }
//else do it horizontal
    else{
        echo '<div class="desk_box_hor" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
        }
    } //end while loop for desk_coord_result

CSS:

/* desk boxes*/
.desk_box_ver{ 
width: 23px;
height: 10px;
border: 4px solid black; 
padding:10px;
}   

.desk_box_hor{ 
width: 10px;
height: 23px;
border: 4px solid black; 
padding:10px;
}   

Also, lets say I want to use these two classes in the same Jquery function, is this the proper way of doing it?

$(".desk_box").add(".desk_box_ver").click(function() {
or
$(".desk_box, .desk_box_ver").click(function() {

Answer 1

In answer to your question "If theres a more efficient way of doing this please tell me." (I'll leave your other questions to someone else) yes, there are more efficient ways to write this PHP code, which then makes debugging and maintenance easier:-

a) Instead of two very long echo strings which are almost exactly the same, introduce a new PHP variable, say, $class. Then write:

$class = 'desk_box_hor';
if($sec_name == 'A' || $sec_name == 'B'){
    $class = 'desk_box_ver';
}
echo '<div class="' . $class . '" data="' . $id . '" style="position:absolute;left:' . $x_pos . 'px;top:' . $y_pos.'px;">id:' . $id . '</div>';

Now you only have one long echo string to write, and to debug. Also my preference is (though this is opinion only) to put a space either side of all those string concatenation dot operators - it makes it easier to decipher whats going on.

b) The next improvement you can make is to swap all the single and double quotes. Then you can write a single string with no concatenation operators at all, as you can put a PHP variable inside double quotes. Again, it makes the string of html clearer and easier to read, and debug. (Browsers can handle single or double quotes in the HTML tags). You end up with:

 echo "<div class='$class' data='$id' style='position:absolute;left: $x_pos" . "px;top: $y_pos" . "px;'>id:$id</div>";

c) Next we can make the HTML code being created more readable; at the moment your script is generating a huge block of HTML markup (200 divs?) with no line breaks. Horrendous to debug. Just add \\n to the end of your echo string like so:

echo ".....id:$id</div>\n";

and that will split the generated HTML markup into separate lines (but the onscreen text will be unaffected). Much easier then to see if one of the items went wrong (for instance, if the database returns an empty value for one of the records, it will stand out in the HTML like a sore thumb). Note that you can add \\n inside a string surrounded by double quotes; if you stay with the original single quoted string you would have to add with a dot operator:

.....id:$id</div>' . "\n";

d) Lastly, you could cut out all those 200 position:absolute strings from the generated HTML markup by putting it into your CSS stylesheet, just retaining the CSS values that vary. Ie:

.desk_box_hor, .desk_box_ver { position: absolute; }

Answer 2

As regards why you are only getting vertical divs, never horizontal, I'll just try an educated guess. Are you really getting back from the database what you think you are?

For instance, you say in your comments the field name is "section", but the PHP is looking for a "section_name" field. Or is the data itself wrong? Have you got PHP error checking on, eg error(reporting(E_ALL)? If not, it would not return an error message, but still blindly go on reading through all rows in the db.

In that case it will always take the else part of your if...else. Supposedly this is the horizontal div path, but because the CSS has the width and height values the wrong way round (see above) it will actually produce vertical boxes all the time.