How to make a content property in css use php


Tags: php,html,css,arrays

Problem :

So I take from an array some informations for a barlike chart I made. Here is the CSS:

<style>
.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}
.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 20px auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
}
.inner {
  background-color: green;
  position: absolute;
  z-index: 1;
  text-align: right;
  border-right: 2px solid black;
}
.inner:after {
  content: '$avg_width';
  display: inline-block;
  left: 10px;
  position: relative;
  height: 100%;
  top: -14px;
}
.target {
  background-color: transparent;
  width: 19px;
  position: absolute;
  z-index: 2;
  color: black;
  text-align: right;
  border-right: 2px dotted black;
}
.target:after {
  content: 'Target: $target_width';
  display: inline-block;
  left: 28px;
  position: relative;
  height: 100%;
  top: 14px;
}
.solid_line {
  color: black;
  float: right;
  width: 3px;
  border-right: 3px solid black;
  height: 16px;

}
</style>

Here is the php:

<?php

    $target = number_format((float)$data->data[2][32][3], 2, '.', '');
    $array = [];
    $sum = 0;
    $path = $data->data[2];
    $bar_width = '200px'; 
    foreach($path as $key => $item){
        if($key > 1 && isset($item[5])){ 
            $array[] = (int)$item[5];
            $sum += (int)$item[5];
        }
    }
    $avg = ($sum / count($array));
    $base   = max($target, $avg);
    $target_width = $bar_width / 100 * ($target / $base * 100);
    $avg_width = $bar_width / 100 * ($avg / $base * 100);
    $percent = $avg / $target;                       
?>

And here is the HTML:

<div class="outer"> 
    <div class="target">
    </div>                   
    <div class="inner">
    </div>
</div>

As you can see I try to make use of the content property in css and to use php within it, but for some reason it does not display the results.



Solution :

That's because you're accessing PHP variable directly in CSS. HTML/CSS are executed client side where as PHP executes on client side.

So you need to echo the PHP variable inside your on page CSS. Like this:

.inner:after {
  content: '<?php echo $avg_width ?>';

Above echo code will execute on server side and give value to client side CSS to render the element properly.

Make sure You're using it on ON PAGE/INLINE CSS, this won't work on external .CSS files.


    CSS Howto..

    How to call CSS from JavaScript

    How to draw a dotted line with css?

    How to center social buttons in bootstrap login page?

    How to change CSS based on Season using JavaScript

    How come one of my columns in bootstrap is not functioning properly?

    How do I use CSS with simple form?

    CSS selector: how to style items [1-2][5-6][9-10] etc by pair

    How to play a video inside a logo

    How to make a wavy border line to separate background images in html5/css?

    Wordpress- How do i change the default font of navigation menu?

    How to get rid of spacing between Bootstrap panels?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    How to refer css style from another?

    Flotcharts: How to place the legend on the right of the chart

    How to indent text in a select drop down menu using CSS

    How to style pseudo counter in CSS

    How to make text input line up with button in IE7?

    How to manage CSS files on design A/B test

    How to selectively load css in rhtml?

    How to simplify my CSS stylesheet?

    2 divs aligned side by side, how to make right div fill width 100%?

    How can I apply text attributes to text in a list in CSS

    How to color row on specific value in angular-ui-grid?

    How can i include only custom css and js files in rails application

    Using css modules, how can I use composes to include a list of variables for colors

    How to make horizontal division using html div tag and css

    How to fill margin space with divs and give it styles?

    HTML / CSS How to add image icon to input type=“button”?

    How can I reduce ons-list-item height?

    How to implement a version of css?