How to make CSS hide a PHP routine

0

I need a PHP routine to be hidden and displayed another, using CSS . Because I have a routine in PHP that generates column numbers to display my information, but it will be necessary that when the browser is a certain width the number of columns will change.

See below for my PHP with CSS:

<span class="mobile_detect">
<?php
$colunas = 3;
?> 
</span>

Above is what I need. But it is not working, it continues to assign the number 3 to the variable when the browser is resized. If I remove the script PHP and put a text, for example, it quietly hides. You're just not hiding the script PHP .

CSS

.mobile_detect{
  display: none;
}
    
asked by anonymous 06.07.2017 / 10:27

2 answers

0
  

it continues to assign the number 3 to the variable when the browser is resized

What you want is impossible. Assigning the value to the variable happens before anything is displayed on the screen - and does not change. When PHP processing ends and HTML is sent to the browser, nothing else can be changed.

CSS is applied after HTML is rendered in the browser, that is, well after the logic you set there.

You need to change the logic of your program so that you do not depend on a variable in PHP when you need to modify the layout. You can do this assignment in Javascript for example.

    
06.07.2017 / 12:05
1

If I understand well you are wanting to hide the code generated by the script until it is resized, it is not displayed nor in the source code, would it? or is the php code being displayed even with the css for it to be hidden?

type if it is not to display it in the source code until the moment it is resized you will have to make a request to the server again request the page snippet using ajax or even iframe, let's see a simpler example, div where you do not have anything written when you press the button it pulls this information from the server and mounts without leaving the page itself

html code

<html>
<script>
  function kodo_puxar(){
     //aqui ele pega o div pelo id
     var meudiv = document.getElementById("kami");
     //instanciamos o objeto
     var meureq = new XMLHttpRequest();
     //especificamos a url e o metodo
     meureq.open("get","http://192.168.1.1/kodo/puxar.php",false);
     //fazemos a requisição
     meureq.send();
     //jogamos a resposta no div
     meudiv.innerHTML = meureq.responseText;
  }
</script>
<body>
<h1>exemplo stackoverflow by kodo</h1><hr>
<div id="kami">
</div>
<input type="button" value="puxar" onclick="kodo_puxar()">
</body>
</html> 

no php code people generate or html

<?php
  echo '<font color="red">testando</font>';
?>

If we look at the page (source code) the php code has not been generated yet

Butwhenwepressthebuttontherequestismadeontheserver,thenewcodeispulled

You can for example pass the dimension of the page as an argument and create the html code again based on it only if it is in the desired size, you can use events to know when it was resized or in gambiarra using setInterval, as it is also possible to do This is done directly in the javascript (but in this case the client will have access to the data of the source code)

    
06.07.2017 / 12:39