Mensajes

Hola, no te recomiendo usar el float, es muy sucio y hay que estar usando hacks, y usarlo en cada elemento...

Yo uso flexbox y hace exactamente lo mismo, solo que no necesitas ir limpiando nada ni poner divs extras, simplemente se pone display inline-flex en el div padre (o flex si necesitas tener un absolute dentro) y todos los elementos que tengas dentro se alinean horizontalmente, dependiendo del ancho que tengan. Y para que no se amontonen usas flex-wrap: wrap y se reparten por filas (no más del 100% del ancho del padre en cada fila).

Respecto a bootstrap, no te recomiendo usar un framework entero, ya que seguramente no necesitarás ni la mitad de todo lo que tiene, lo único útil que les veo son el sistema de columnas, que simplemente son clases con un width %. Con eso y flexbox yo no necesito (de momento) usar frameworks.

Ahora, si solo estás haciendo pruebas y aprendiendo no hay ningún problema, me refiero para producción. O a menos que estés en un proyecto muy grande y la web va tener mil cosas y vás a usar practicamente todo lo que ofrece dicho framework, entonces si que vale la pena usarlo.


Edito: Si no me equivoco esto es lo que estabas buscando no? https://jsfiddle.net/y5x3jyc9/2/ Ni un solo float  

Código (html5) [Seleccionar] Expandir

<header>HEADER</header>
<main>
   <div class="left">Columna 1</div>
   <div class="right">Columna 2</div>
   <footer>Footer 2016</footer>
</main>

Código (css) [Seleccionar] Expandir

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

html,
body {
   width: 100%;
   height: 100%;
   text-align: center;
   margin: 0;
}

header {
   border: 1px solid grey;
   width: 100%;
   height: 15%;
   margin-bottom: 10px;
}

main {
   border: 1px solid grey;
   width: 100%;
   height: calc(85% - 10px);
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
}

.left {
   border: 1px solid grey;
   width: calc(70% - 10px);
   margin: 0 10px 10px 0;
}

.right {
   border: 1px solid grey;
   width: calc(30% - 10px);
   margin: 0 0 10px 10px;
}

footer {
   border: 1px solid grey;
   width: 100%;
   height: 15%;
}

Ahora sobre el tema del scroll, es algo muy facil, puedes ponerlo donde quieras, si quieres que se muestre el header siempre (sin tener que usar javascript) puedes ocultar el overflow en el body y mostrarlo solo en el main, de esta manera solo hace scroll este elemento: https://jsfiddle.net/y5x3jyc9/3/

Código (css) [Seleccionar] Expandir

html, body { overflow: hidden }

main { overflow-y: scroll }

O dejarlo normal: https://jsfiddle.net/y5x3jyc9/4/

A tu gusto

A parte de los medias queries tambien es importante trabajar con unidades dinámicas, como el % y vh/vw (virtual height y width que basicamente es el alto y ancho de la pantalla, no del elemento).

Para poder trabajar con vh y vw hay que configurar el viewport en el html:

Código (html5) [Seleccionar] Expandir

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Tambien puedes usar calc() para todavía conseguir un nivel más dinámico, por ejemplo: quieres que un div tenga el 100% del padre pero este tiene 10px de padding:

Código (css) [Seleccionar] Expandir

div.child { width: calc(100% - 20px) }

Te dejo un ejemplo de como usar % y calc(): https://jsfiddle.net/y5x3jyc9/

Edito: Te dejo también el ejemplo que acaba de crear para la otra pregunta: https://jsfiddle.net/y5x3jyc9/2/

No estoy seguro de como es la estructura de tu sitio, supongo que tienes un archivo main.php donde incluyes todas las demás páginas.

Tampoco sé como estás haciendo esto, el incluir cada página según la url. Una manera eficiente para esto y además para saber que metadatos incluir, es usar un array whitelist con los nombres de los url permitidos, cada uno apuntando a su archivo .php para luego incluirlos en main.php con un array_key_exists (o cualquier otra manera para hacer esto).

Yo lo hago de la siguiente manera: En index.php tengo un array donde tengo listadas todas las páginas y url de mi sitio. Por ejemplo, para saber cual es el títutlo de la página hago lo siguiente:

Código (php) [Seleccionar] Expandir

// index.php

$includes = [
    '/pagina'       => 'pagina.php',
    '/pagina2'      => 'pagina2.php'
];

$include = array_key_exists($url, $includes) ? $url : '/404';

//GET TITLE
$title = $lang->getText($include);

include($pages . 'main/main.php');

// main.php

// aqui incluyes tus páginas, (Dentro de <body>)
include($includes[$include]);

(nota: lo que hago en $title es pasar la url a una clase que coge el texto de memcached o de la db si es la primera vez y todavía no está cacheado)

De esta manera ya sabes en que página estás y puedes saber que información incluir de manera dinámica.

También te sirve por si quieres incluir css, js, contenido, etc... especifico de la página, con un simple if:

Código (php) [Seleccionar] Expandir

if ($include == '/pagina') {}

Un consejo a la hora de imprimir de php a html, usa el shorthand que viene activado por defecto en php 5.4:

Código (php) [Seleccionar] Expandir

<meta name="title" content="<?= $title ?>">

Cuando hay bastantes se nota la diferencia. Solo sirve para imprimir, para todo lo demás abre con los tags completos.

[Aquí tienes el fallo]

¿Tienes todo ese tochaco de código asi de mal ordenado en un solo archivo? Me duelen los ojos solo de mirarlo por encima. Ordenalo por partes en distintos archivos y dale un estilo adecuado para que sea más facil leerlo y encontrar fallos.

Así por encima veo unos cuantos:

Primero, el atributo language de la etiqueta <script> ya no se usa, quitalo para que no moleste y no de problemas. Tampoco es necesario especificar type="text/javascript" ya que es por defecto.

Segundo, no deberías mover el objeto del parametro de jquery post y la variable php no sé está imprimiendo correctamente (Aquí tienes el fallo):

Código (javascript) [Seleccionar] Expandir

$.post( "gastos.php", { cantidadkm : "<?= $_POST['cantidadkm'] ?>" } );

En todo caso podrias crear una variable con el valor que imprime php, pero el objeto es mejor dejarlo donde esta:

Código (javascript) [Seleccionar] Expandir

var cantidadkm = "<?= $_POST['cantidadkm'] ?>";

$.post( "gastos.php", { cantidadkm : cantidadkm } );

Si tu versión de PHP es menor a 5.4.0, tendrás que activar short_open_tag o usar los tags completos: <?php echo $variable; ?>

Mejor usa el evento click o on click de jquery (en lugar de una función):

Código (javascript) [Seleccionar] Expandir

$('.boton').click(function () {
    // código aquí
});

La siguiente manera no falla nunca:

Código (javascript) [Seleccionar] Expandir

$('.boton').on('click', function () {
    // código aquí
});

En serio, la estructura de tu archivo da pena, no solo que uses mil veces la misma etiqueta una detrás de otra, es que tienes repetidas etiquetas como head body, etc que són únicas. Y por cierto, <!DOCTYPE html> tiene que ir arriba de cualquier código html:

Código (html5) [Seleccionar] Expandir

<!DOCTYPE html>
<html>

Si es muy sencillo, no viste el ejemplo que puse?

La función post de jquery acepta las variables como parametros para enviarlas junto a la petición post:

Código (javascript) [Seleccionar] Expandir

$.post( "test.php", { name: "John", time: "2pm" } );

En este ejemplo (que lo puedes encontrar en la página de jQuery), name y time son los index con los que tendrás que cogerlos en php:

Código (php) [Seleccionar] Expandir

$name = $_POST['name']; // "John"
$time = $_POST['time']; // "2pm"

[pero no debería!]

Sigue sin funcionar... y es muy raro, tengo otros scripts en el mismo archivo con un evento click y haciendo preventDefault y si que funcionan. Pero este caso es ligeramente distinto.

De todas maneras, la finalidad del script es evitar el submit (siempre en todo momento ya que se envia por ajax) y comprobar que los campos pasen los controles. Si se ejecuta el callback es porque todo está bien, pero veo mensajes (del plugin) cuando se ejecuta el submit (de los select)...

Esto quiere decir que el formulario no se envia porque html5 required lo cancela (o no lo deja iniciar), y no porque el on submit lo detenga... Entonces en cuanto los required se rellenan el submit se ejecuta, pero no debería!

¿Alguna idea de porqué ocurre esto?


Edito: He probado poniendo return false en el callback y en el on submit. No consigo hacer que no se envie el submit... debe haber algo en alguna parte...  

Edito 2: Que le den al submit, uso un elemento <a> y dejo de complicarme ya la vida 

Estoy usando un plugin jquery llamado formly para verificar los campos antes de mandarlos. El problema es que el evento on submit (dentro del plugin) no detiene el submit y el formulario se sigue enviando de todas formas...

Código (javascript) [Seleccionar] Expandir

(function($) {

$.fn.formly = function(callback) {

    // Submit button
    this.on('submit', function(e) {

        // NOT WORKING AT ALL...
        e.preventDefault();
        var canSubmit = true;

        $(this).find('input').each(function() {

            // Required
            if ($(this).attr('required')) {
                canSubmit = functions.required(this);
            }

            // Validate
            if ($(this).attr('validate')) {
                canSubmit = functions.validate(this);
            }

            // Match
            if ($(this).attr('match')) {
                canSubmit = functions.match(this);
            }

        });

        if (canSubmit) {
            if (callback) {

                var clientInfo = $(this).serializeArray();

                /* Password hash function */
                var p = $('#reg_pwd').val(),
                    c = $('#confirm_pwd').val(),
                    shaObj = new jsSHA('SHA-512', 'TEXT');

                shaObj.update(p);
                var p_hash = shaObj.getHash("HEX"),
                    shaObj = new jsSHA('SHA-512', 'TEXT');

                shaObj.update(c);
                var c_hash = shaObj.getHash("HEX");

                callback(clientInfo, p_hash, c_hash);
            }
        }

    });

En mi archivo scripts.js llamo al plugin y pongo el callback que es el que debería enviar el formulario (dropzone se tiene que encargar de esto, junto a la imagen):

Código (javascript) [Seleccionar] Expandir

        $('#register').formly(function(clientInfo, p_hash, c_hash) {

            Dropzone.autoDiscover = false;
            $('#myDropzone').dropzone({
                init: function() {
                    var myDropzone = this

                    myDropzone.processQueue();

                    myDropzone.on('sending', function(data, xhr, formData) {
                        formData.append('client_info', clientInfo);
                        formData.append('reg_pwd', p_hash),
                        formData.append('confirm_pwd', c_hash);
                        console.log('I just sended the info...');
                    });

                    myDropzone.on('success', function(file, response) {
                        myDropzone.removeFile(file);
                        response == '' ? window.location.replace('//admin.inmopaco.tk/') : alert('success_' + response);
                    });
                }
            });

        });

Para poco, dropzone me da error diciendo que ya esta inicializado... y no se sube nada. Dropzone lo tengo que inicializar fuera de formly y luego dentro tengo que procesar el queue y enviar el formulario. ¿Como prodría hacer esto sin reinicializar dropzone para que no de error?

¿Y para evitar que el formulario se envie al darle al boton? Tiene que ser dropzone el que envie el array y los hashes.

Gracias!

Comparto vuestra frustración, ya me las veo malas para hacer que mis webs se vean igual de bien en los distintos navegadores, como para tener que rehacerlas todas para soportar la monstruosidad de IE...

Es culpa de Microsoft por no querer seguir los estandares...

Que no floten los abuelos xD Desarrollar para software obsoleto o mal diseñado es una perdida de tiempo. A menos que haya mucha gente interesada, para cuatro gatos que todavia usan IE no vale la pena.

Si vas a hacer el esfuero, lo primero que habria que hacer sería localizar el código incompatible y buscar hacks en google para la versión especifica (si, has oido bien... que los hacks son encima especificos para una version y no todas  asi de malo es IE... y seguramente EDGE).

Suerte con eso.

Ya te dije en tu otra pregunta que buscaras un poquito, no es necesario que habras otra. Ejemplos de como guardar datos en una base de datos los tienes por todas partes.

Si te hubieras molestado solo un poquito en buscar en este mismo subforo, te hubieras dado cuenta que en una de las preguntas pongo un ejemplo de como recibir datos por ajax y guardarlos: http://foro.elhacker.net/php/ajax_recibir_daros-t452816.0.html;msg2071906#msg2071906

Puedes preguntar a los expertos, hay muchos proyectos de código abierto de diversos juegos online que tuvieron el mismo dilema (como hacer una comunicación entre cliente-servidor eficiente). Dos que más recuerdo ahora mismo son Mangos y TrinityCore (ambos emuladores de WoW).

Tienes documentación en sus respectivas páginas y foros e incluso acceso para ver el código (c y c++) en github y hacerte una idea de como implementarlo en tu aplicación.

Tambien tienen canal de irc, donde hablan sobre el desarrollo y tambien ayudan a quien pregunta algo relacionado con el funcionamiento del emulador (por lo menos lo he visto en el irc de TrinityCore, no sé como es el ambiente en Mangos). Eso si, hay que hablar ingles  (en el canal de habla hispana solo hay un moderador y creo que algun contribuidor (españoles y latinos).