¿Qué está mal aquí?

[serg_prog]

Hola a todos. Tengo un problema y es que:
Tengo una pág. con una barra lateral a la izq. y otra a la derecha. Y quiero que si la barra izq. supera (en height) a la de la derecha, se muestre un borde por la parte derecha en la barra izquierda.

Por lo contrario, si la barra derecha supera a la izq., quiero que se muestre un borde en la parte iqz. de la barra de la derecha.

He hecho este código pero no funciona:

Código:

SidebarHeight = $(".sidebar").outerHeight() 
PostHeight = $(".post").outerHeight()

if (SidebarHeigh > PostHeight) {
	   $(".sidebar").css({ border: "1px" });
} else {
	   $(".post").css({ border: "1px" });
}

sidebar = barra de la izq.
post = barra de la der.


Muchas gracias.

[David]

Además del error en el nombre de la variable al comparar (SidebarHeight), con el método css() no puedes usar la forma corta "border", debes especificar border-left, border-right, etc.

[serg_prog]

Iniciado por David

Además del error en el nombre de la variable al comparar (SidebarHeight), con el método css() no puedes usar la forma corta "border", debes especificar border-left, border-right, etc.

Ok, lo he corregido, pero sigue sin funcionar:

Código:

<script type="text/javascript">

SidebarHeight = $(".sidebar").outerHeight() 
PostHeight = $(".post").outerHeight()

if (SidebarHeight > PostHeight) {
	   $(".sidebar").css({ border-right: "1px" });
} else {
	   $(".post").css({ border-left: "1px" });
}

</script>

[David]

¿Dónde pones ese código?

También, especifica tipo y color del borde (border-right: "1px solid #000")

[serg_prog]

Iniciado por David

¿Dónde pones ese código?

También, especifica tipo y color del borde (border-right: "1px solid #000")

Lo tengo colocado justo encima de lo que son las dos barras. es decir:

Código:

<div class="content">
	
<script type="text/javascript">
SidebarHeight = $(".sidebar").outerHeight() 
PostHeight = $(".post").outerHeight()
if (SidebarHeight > PostHeight) {
	   $(".sidebar").css({ border-right: "1px solid #CCC" });
} else {
	   $(".post").css({ border-left: "1px solid #CCC" });
}
</script>

<?php get_sidebar(); ?>

<?php include('includes/post.php'); ?>

</div>

Como se puede ver: he vuelto a modificar el código. Y sin resultado. Sin embargo, cuando incluyo el borde desde el CSS, se muestra correctamente, pero con el código no.

No entiendo por qué. Por favor, alguien sabe la respuesta?

[David]

Colócalo después de que los elementos estén creados o cuando el DOM esté listo ($(document).ready())

[serg_prog]

Iniciado por David

Colócalo después de que los elementos estén creados o cuando el DOM esté listo ($(document).ready())

:S Nada. He probado poniéndolo después de que estén creados (después de <?php get_sidebar(); ?> y <?php include('includes/post.php'); ?>). E incluso poniéndolo al final del todo, pero nada. sigue sin funcionar.

En cuanto a lo del DOM no lo termino de comprender. Aclaro que en cuanto a javascript soy novato. ¿Cual podría ser la solución?

[David]

Revisa esto:
http://api.jquery.com/ready/

[serg_prog]

Iniciado por David

Revisa esto:
[url]http://api.jquery.com/ready/[/url]

Desgraciadamente para mi sigue sin funcionar. el código que he usado ha sido:

Código:

<script type="text/javascript">

SidebarHeight = $(".sidebar").outerHeight() 
PostHeight = $(".post").outerHeight()

$(document).ready(function() {
if (SidebarHeight > PostHeight) {
	   $(".sidebar").css({ border-right: "1px solid #CCC" });
} else {
	   $(".post").css({ border-left: "1px solid #CCC" });
}
});

</script>

[serg_prog]

alguien sabe la respuesta?

Gracias