Error al intentar modificar el contenido de un DIV

[NiuWeb]

Hola,
Recién comenzando con la programación jQuery, me encuentro con un extraño (al menos para mí) problema.

Estoy re-modificando mi web para hacerla adaptable a móviles (responsive), y en una parte me he quedado atascado porque necesito modificar la posición de unos elementos dependiendo de si es o no una pantalla pequeña.
Mi código lo tengo así:

Código:

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

		var txt;
		
		if ($(window).width() < 833)
		txt = "<table><tr><td><h2>Campo1</h2></td></tr><tr><td><h2>Campo2</h2></td></tr><tr><td><h2>Campo3</h2></td></tr>";
		else
		txt = "<table><tr><td><h2>Campo1</h2></td><td><h2>Campo2</h2></td><td><h2>Campo3</h2></td></tr>";
		
		$('#docsCont').html(txt);
});
</script>
<div id="docsCont">    
Texto en blanco
</div>

Lo cual se supone que debería hacer lo siguiente: Si la pantalla es grande, se pone una tabla con 1 columna y 3 filas; si es pequeña, pone 3 columnas de una fila...

El problema radica en que nunca modifica el contenido del DIV. Ponga lo que ponga.
He intentado algo más simple:

Código:

<script type="text/javascript">
$(document).ready(function(e) {
		
		$('#docsCont').html("ola k ase");
});
</script>
<div id="docsCont">    
Texto en blanco
</div>

Pero de igual forma no me deja modificar nada.
¿Cuál puede ser el error?

[chulifo]

Puedes probar tambien con las Media Queries .

Sin embargo para tu código, intentalo de esta manera:

Código Javascript:

$(document).ready(function(e) {
 
    var txt;
 
    if ($(window).width() < 833) {
        txt = "<table><tr><td><h2>Campo1</h2></td></tr><tr><td><h2>Campo2</h2></td></tr><tr><td><h2>Campo3</h2></td></tr>";
    } else {
        txt = "<table><tr><td><h2>Campo1</h2></td><td><h2>Campo2</h2></td><td><h2>Campo3</h2></td></tr>";
 
 
    }
    $('body').html(txt);
});
 

[g3kdigital]

Hola

Espero que tu web no la estes maquetando usando tablas y que no es por eso lo estés preguntando, sino porque tienes datos tabulados.

Dicho esto lo ideal es que las modificaciones las hagas usando Media Queries y sí no te quieres complicar la vida hay ciertos plugins para eso, de hecho solo tienes que buscar en google:

Responsive Tables

Ya sea para hacerlas tu mismo mediante css o diversos plugins, como este link:

http://exisweb.net/responsive-table-...s-and-patterns

Éxitos!

[NiuWeb]

Iniciado por chulifo

Puedes probar tambien con las Media Queries .

Sin embargo para tu código, intentalo de esta manera:

Código Javascript:

$(document).ready(function(e) {
 
    var txt;
 
    if ($(window).width() < 833) {
        txt = "<table><tr><td><h2>Campo1</h2></td></tr><tr><td><h2>Campo2</h2></td></tr><tr><td><h2>Campo3</h2></td></tr>";
    } else {
        txt = "<table><tr><td><h2>Campo1</h2></td><td><h2>Campo2</h2></td><td><h2>Campo3</h2></td></tr>";
 
 
    }
    $('body').html(txt);
});
 

Hola, lo que deseo es modificar el contenido de un DIV, no de todo el documento html xD

Sobre las Media Queries, ya las he usado, pero a eso no viene el caso. Puse ese código porque es el que tenia a mano, pero mi problema es que no funciona ponga lo que ponga, independientemente de si es ese código o no.

[infoturnosya]

definitivamente tenes otro problema xq yo pruebo tu codigo y me funciona perfecto, abri el inspector o firebug y fijate si tenes algun error javascipt