PHP count divs to change CSS

Question

The below code looks at my wordpress site to determine if a field has a value and if so, displays it inside a div with a header.

    <?php if (get_post_meta($post->ID, '_one_wysiwyg', true)){ ?>
        <div class="section1">
            <div style="float:<?php echo $direction; ?>"><h3>Jack's Two Cents</h3></div>
                <?php echo get_post_meta($post->ID, '_one_wysiwyg', true); ?>
        </div>
        <?php }

        if (get_post_meta($post->ID, '_two_wysiwyg', true)){ ?>
        <div class="section2">
            <div style="float:<?php echo $direction; ?>"><h3>Jill's Two Cents</h3></div>
                    <?php echo get_post_meta($post->ID, '_two_wysiwyg', true); ?>
        </div>
        <?php }

     if (get_post_meta($post->ID, '_three_wysiwyg', true)){ ?>
        <div class="section3">
            <div style="float:<?php echo $direction; ?>"><h3>George's Two Cents</h3></div>
                <?php echo get_post_meta($post->ID, '_three_wysiwyg', true); ?>
        </div>
     <?php }

     if (get_post_meta($post->ID, '_four_wysiwyg', true)){ ?>
        <div class="section4">
            <div style="float:<?php echo $direction; ?>"><h3>Sally's Two Cents</h3></div>
                    <?php echo get_post_meta($post->ID, '_four_wysiwyg', true); ?>
        </div>
     <?php } 

     if (get_post_meta($post->ID, '_five_wysiwyg', true)){ ?>
        <div class="section5">
            <div style="float:<?php echo $direction; ?>"><h3>Alex's Two Cents</h3></div>
                <?php echo get_post_meta($post->ID, '_five_wysiwyg', true); ?>
        </div>
     <?php } ?>

For those that don't know, the if statements look inside the database for the given post's field called #_wysiwyg and whether the field has a value. If it has no value, the section is ignored and nothing is displayed for that section.

You'll notice an undefined variable $direction inside the style tag of the div containing the h3 (header) of each grouping.

I want to be able to alternate the float for each grouping between left and right so that the header will be on the right side for the first group, on the left for the second, right for the third, left for the fourth and right for the fifth.

The reason I need to do this dynamically is obviously because all five groups won't always be displayed. Some posts may have two, some four, some none at all.

Is this possible in PHP? If so, how? and if not, how?

You could probably use css's :nth-child(odd) for this, instead of using php — nishantjr
– nishantjr, Commented Jun 7, 2014 at 2:00
Why does it matter how many there are when you've stated they are alternating anyway? Or did you fail to mention what should happen in instances when there is an odd number of sections? — Popnoodles
– Popnoodles, Commented Jun 7, 2014 at 2:02
I suppose it wouldn't matter how many there are... I just don't know the logic behind the code required to make the headers alternate between left and right float. — Sweepster
– Sweepster, Commented Jun 7, 2014 at 15:16

Popnoodles · Accepted Answer · 2014-06-08 17:16:51Z

You could use :nth-child(odd) but it's not 100% compatible with browsers. I'm having to assume that the problem is that you don't know which groups exist. So to do this in PHP, you could keep a count of the number of sections outputted and if the number is even add another class alt. You would use CSS to pull the .section.alt to the right. You don't need to add a style tag, use CSS.

.section{
    width: 50%:
    float: left;
}
.section.alt{
    float: right;
}

PHP

$sections = 0;

<?php if (get_post_meta($post->ID, '_one_wysiwyg', true)){ 
    $sections++;
    ?>
    <div class="section1 section <?php echo ($sections % 2 == 0)? 'alt' : ''; ?>">
        <div><h3>Jack's Two Cents</h3></div>
            <?php echo get_post_meta($post->ID, '_one_wysiwyg', true); ?>
    </div>
    <?php }

    if (get_post_meta($post->ID, '_two_wysiwyg', true)){ 
    $sections++;
    ?>
    <div class="section2 section <?php echo ($sections % 2 == 0)? 'alt' : ''; ?>">
        <div><h3>Jill's Two Cents</h3></div>
                <?php echo get_post_meta($post->ID, '_two_wysiwyg', true); ?>
    </div>
    <?php }

 if (get_post_meta($post->ID, '_three_wysiwyg', true)){
    $sections++;
    ?>
    <div class="section3 section <?php echo ($sections % 2 == 0)? 'alt' : ''; ?>">
        <div><h3>George's Two Cents</h3></div>
            <?php echo get_post_meta($post->ID, '_three_wysiwyg', true); ?>
    </div>
 <?php }

 if (get_post_meta($post->ID, '_four_wysiwyg', true)){
    $sections++;
    ?>
    <div class="section4 section <?php echo ($sections % 2 == 0)? 'alt' : ''; ?>">
        <div><h3>Sally's Two Cents</h3></div>
                <?php echo get_post_meta($post->ID, '_four_wysiwyg', true); ?>
    </div>
 <?php } 

 if (get_post_meta($post->ID, '_five_wysiwyg', true)){
    $sections++;
    ?>
    <div class="section5 section <?php echo ($sections % 2 == 0)? 'alt' : ''; ?>">
        <div><h3>Alex's Two Cents</h3></div>
            <?php echo get_post_meta($post->ID, '_five_wysiwyg', true); ?>
    </div>
 <?php } ?>

And if you wanted to do it with less code:

$sections = array(
    '_one_wysiwyg' => "Jack's Two Cents",
    '_two_wysiwyg' => "Jill's Two Cents",
    '_three_wysiwyg' => "George's Two Cents",
    '_four_wysiwyg' => "Sally's Two Cents",
    '_five_wysiwyg' => "Alex's Two Cents",
);

$section_count = 0;
foreach ($sections as $section_key => $title){
    if ($section_html = get_post_meta($post->ID, $section_key, true)){
        $section_count ++;
        ?>
            <div class="section <?php echo ($section_count % 2 == 0)? 'alt' : ''; ?>">
                <div><h3><?php echo $title; ?></h3></div>
                <?php echo $section_html; ?>
            </div>
        <?php
    }
}

You should try to avoid repeating code. I've added how to do it with less code.

nishantjr · Accepted Answer · 2014-06-07 02:04:41Z

0

If you change the class of all section to section, this CSS should work.

section { float: left;}
section:nth-child(odd){ float: right;}

answered Jun 7, 2014 at 2:04

nishantjr

1,8301 gold badge17 silver badges40 bronze badges

1 Comment

Popnoodles Over a year ago

That won't work if the classes are changed to section. It also won't work for <IE9 even with the CSS fixed.

Collectives™ on Stack Overflow

PHP count divs to change CSS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related