simple - Utilice el ancho de un DIV en la declaración If en el archivo Php

php iif

Question

Tengo un archivo .php en el que tengo un diseño que me gustaría cambiar dependiendo del ancho de un div. Ese div es uno de los padres del siguiente código y está situado en otro archivo.

<?php if ($(".container").width() > 400) { ?>

    <div class="sub-container">
        <div">sidepanel-left</div>
        <div>content</div>
        <div>sidepanel-right</div>
    </div>

<?php } else { ?>

    <div class="sub-container">
        <div>sidepanel-left
                <div>sidepanel-right</div>
        </div>
        <div>content</div>
    </div>

<?php } ?>

Eso me da una página en blanco con solo Html, etiquetas de cabeza y cuerpo.

Estoy seguro de que es un código bastante básico que necesito, pero estoy empezando en PHP / JS y no estoy seguro de lo que estoy haciendo -_-

¡Déjeme saber si usted necesita más información!

Gracias de antemano por la ayuda! :)

SEGUNDO.

Answer 1

No puedes hacer esto en PHP. Lo que puedes hacer es lo siguiente:

Desde el lado de PHP, muestra este código HTML:

    <div class="container">
        ...
        <div class="sub-container">
            <div>sidepanel-left</div>
            <div>content</div>
            <div>sidepanel-right</div>
        </div>

    </div>

Luego, en su página HTML, asegúrese de que esté cargado jquery, y ponga esto:

    <script type="text/javascript">
    $(document).ready(function() { 

        $(''.container'').each(function(){
            var $this = $(this);
            if ( $this.width() > 400 ) {
                $this.addClass(''wide-container'');
            }
        });
    }); 
    </script>

Luego, en su archivo css puede configurar una clase para contenedor regular y contenedor ancho, y también puede controlar los estilos de subcontenedores:

    .container {
        // default styles here
    }

    .container.wide-container {
        // override wide container styles
    }

    .container.wide-container > .subcontainer {
        // override subcontainer styles
    }

Puede utilizar consultas de @media para obtener resultados similares, pero las consultas de @media se pueden aplicar de acuerdo con el ancho de la pantalla, no con un contenedor en particular.