How to pass a responsive DIV size to PHP?

Question

I've been trying to pass an specific Div's height and width to a PHP code, the problem is, the page is supposed to be responsive, with div height and width changing accordingly.

How can I pass these values dynamically?

 <?php    
    /* Configuration Start */

    $thumb_directory = 'img/thumbs';
    $orig_directory = 'img/original';

    $stage_width=600;   // How big is the area the images are scattered on
    $stage_height=400;

    /* Configuration end */

    $allowed_types=array('jpg','jpeg','gif','png');
    $file_parts=array();
    $ext='';
    $title='';
    $i=0;

    /* Opening the thumbnail directory and looping through all the thumbs: */

    $dir_handle = @opendir($thumb_directory) or
 die("There is an error with your image directory!");

    $i=1;
    while ($file = readdir($dir_handle)) 
    {
        /* Skipping the system files: */
        if($file=='.' || $file == '..') continue;

        $file_parts = explode('.',$file);
        $ext = strtolower(array_pop($file_parts));

        /* Using the file name (withouth the extension) as a image title: */
        $title = implode('.',$file_parts);
        $title = htmlspecialchars($title);

        /* If the file extension is allowed: */ 
        if(in_array($ext,$allowed_types))
        {
            /* Generating random values for the position and rotation: */
            $left=rand(0,$stage_width);
            $top=rand(0,400);
            $rot = rand(-40,40);         

            /* Outputting each image: */

            echo '
            <div id="pic-'.($i++).'" class="pic" style="top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.') no-repeat 50% 50%; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg);">
            <a class="fancybox" rel="fncbx" href="'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'</a>
            </div>';
        }
    }

The specific variables are $stage_width and $stage_height, those are supposed to receive the div size, but as you can see, right now, all I can do is to set a static value in them.

Is there anyway to do that? Either with JS, PHP or something else entirely?

Essentially, the browser cannot communicate directly with PHP, so there is no way for server-side code to know what size a DIV will be in a random client-side browser. — MikeB, Oct 25 '19 at 13:38
Possible duplicate of [How do I pass JavaScript variables to PHP?](https://stackoverflow.com/questions/1917576/how-do-i-pass-javascript-variables-to-php) — ponury-kostek, Oct 25 '19 at 13:38
I totally understand that, but is there another way to tackle this problem? — Julia de Lucca Ribeiro, Oct 25 '19 at 13:56
@MikeBrockington "Essentially, the browser cannot communicate directly with PHP [...]" I don't know what you are trying to say, but AJAX allows the browser to communicate directly with PHP, as well as simply sending a request to a server. — Félix Adriyel Gagnon-Grenier, Oct 25 '19 at 17:29
@FélixGagnon-Grenier. What I am trying to say is that while you can use AJAX or similar to talk back to the server, you cannot talk to _this piece of code_ While it is possible to break things down into asynchronous components, that is an order of magnitude more complex than my wild, general assumption regarding the abilities of this coder. I note that your own answer notes that AJAX exists, but suggests not to use it!! — MikeB, Oct 27 '19 at 17:57
@MikeBrockington Ah I see. Yes, it is indeed more complex, I was just confused by the "essentially", but I think I understand what you mean. Thanks for the clarification! — Félix Adriyel Gagnon-Grenier, Oct 27 '19 at 19:27

score 1 · Answer 1 · answered Oct 25 '19 at 17:28

Take a moment to learn about AJAX.

AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.

In this case, you would:

Compute the actual div size on the client using javascript
Send an ajax request to the server with those values
Create the div markdown with the correct values
Replace the div on the client with the markdown received from the asynchronous request.

This, however, is a bit clunky. You could be better off simply doing all that transformation on the client, using JavaScript:

Generate the markdown with PHP (like you are doing) but without the top and left styling
On client side, after the page loads (the 'DOMContentLoaded' event in JavaScript) compute the actual sizes and transform the divs accordingly.

window.addEventListenet('DOMContentLoaded', () => {
  // get the div real size with getComputedStyle or something like that
  // replace the div's style with correct calculations
})

How to pass a responsive DIV size to PHP?

1 Answers1