Css dinamico con PHP

latinpower · #1 (**permalink**) 29/05/2011, 20:03

Hola,

Me pidieron que haga una web donde el usuario pueda eleguir el Z-index para 3 capas, la cosa está en que pense hacerlo a través de css, ahora, no sé cómo puedo hacer para modificar una linea especial de un texto.

Porque si lo abro común, es decir, todo el texto en una cadena de caracteres, no sé como modificar algo del medio.

¿Existe alguna funcion que, leyendo un .css o txt me devuelva el contenido de X linea, para que lo modifique y lo vuelva a introducir en el mismo lugar?

Sé que suena difícil, pero, ¿no hay una forma de hacer algo así?

Gracias!

abimaelrc · #2 (**permalink**) 29/05/2011, 20:06

Ehhh, sinceramente no entendí eso de que pueda elegir el z-index de algo. ¿Podrías específicar mejor lo que quieres hacer?

latinpower · #3 (**permalink**) 29/05/2011, 20:26

Cita:

Iniciado por abimaelrc

Ehhh, sinceramente no entendí eso de que pueda elegir el z-index de algo. ¿Podrías específicar mejor lo que quieres hacer?

Yo le tengo que mostrar 3 capas al usuario, y el usuario tiene que elegir el valor CSS de Z-index, o sea, mediante un numero, va a elegir que capa va por encima de la otra.

abimaelrc · #4 (**permalink**) 29/05/2011, 21:09

Bueno algo así puedes hacer

index.php

Código PHP:

Ver original<?php
session_start();
if(!empty($_POST)){
    $zIndex = (int)$_POST['z_index'];
    $_SESSION[$_POST['id']] = $zIndex;
    echo $zIndex;
    exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="style.php" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function http(){
    if(typeof window.XMLHttpRequest!='undefined'){
        return new XMLHttpRequest();
    }else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('Su navegador no soporta AJAX');
            return false;
        }
    }
}
 
function request(url, params, id){
    var H=new http();
    if(!H)return;
    H.open('post',url+'?'+Math.random(),true);
    H.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    H.onreadystatechange=function(){
        if(H.readyState==4){
            document.getElementById(id).style.zIndex = H.responseText;
 
            H.onreadystatechange=function(){}
            H.abort();
            H=null;
        }
    }
    var p='';
    for(var i in params){
        p+='&'+i+'='+escape(params[i]);
    }
    H.send(p);
}
 
function addListener(element, type, expression, bubbling)
{
    bubbling = bubbling || false;
 
    if(window.addEventListener) { // Standard
        element.addEventListener(type, expression, bubbling);
        return true;
    } else if(window.attachEvent) { // IE
        element.attachEvent('on' + type, expression);
        return true;
    } else return false;
}
 
window.onload = function(){
    addListener(document.getElementById('div1'), 'click', function(){
        request('<?php echo $_SERVER['PHP_SELF']; ?>',
            {
                'id':'div1',
                'z_index':prompt('z-index',<?php echo array_key_exists('div1', $_SESSION) ? $_SESSION['div1'] : 1; ?>)
            },
            'div1'
        );
    });
    addListener(document.getElementById('div2'), 'click', function(){
        request('<?php echo $_SERVER['PHP_SELF']; ?>',
            {
                'id':'div2',
                'z_index':prompt('z-index',<?php echo array_key_exists('div2', $_SESSION) ? $_SESSION['div2'] : 2; ?>)
            },
            'div2'
        );
    });
    addListener(document.getElementById('div3'), 'click', function(){
        request('<?php echo $_SERVER['PHP_SELF']; ?>',
            {
                'id':'div3',
                'z_index':prompt('z-index',<?php echo array_key_exists('div3', $_SESSION) ? $_SESSION['div3'] : 3; ?>)
            },
            'div3'
        );
    });
}
</script>
</head>
<body>
<div id="wrap">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>
</body>
</html>

style.php

Código PHP:

Ver original<?php
    session_start();
    header('Content-Type: text/css;');
?>
*{ margin: 0; padding: 0; }
html, body{ width: 100%; height: 100%; }
#wrap{
    position: relative;
    width: 200px;
    margin: 0 auto;
}
#div1{
    width: 100px;
    height: 100px;
    background-color: #000;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: <?php echo array_key_exists('div1', $_SESSION) ? $_SESSION['div1'] : 1; ?>;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
    top: 40px;
    left: 30px;
    z-index: <?php echo array_key_exists('div2', $_SESSION) ? $_SESSION['div2'] : 2; ?>;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: #00f;
    position: absolute;
    top: 20px;
    left: 50px;
    z-index: <?php echo array_key_exists('div3', $_SESSION) ? $_SESSION['div3'] : 3; ?>;
}