RSS
Recortes: 3
alertas
altura
javascript
menu
validacion
Me gustó que las etiquetas con los errores de validación se crearan en el momento de mostrar estas alertas y que además salieran con una sutil animación.
<p id="pnombre"> <label id="lnombre">Nombre:</label> <input type="text" id="inombre" name="nombre" /> </p> ... <p class="btn"><a id="send" href="#">[enviar]</a></p>
$(document).ready(function() { $("#send").click(function() { var oForm = document.forms[0]; var oNombre = oForm.elements["nombre"]; var bOk = true; $("p.error").remove(); if(oNombre.value=="") { oNombre.focus(); $("#pnombre" ).after("<p class='error'>Por favor, indíca tu nombre.</p>"); bOk = false; } ... $("p.error").slideDown(); if(bOk) oForm.submit(); return false; }); });
Se trata de un menú totalmente accesible.
Puede tener varios niveles.
Los enlaces a # desplegan un submenu y los enlaces a una página van a ella.
.submenu { display: none; }
<ul id="menu"> <li><a href="#">opcion 1</a><ul class="submenu"> <li><a href="opcion.php">opcion 1.1</a></li> </ul></li> <li><a href="#">opcion 2</a><ul class="submenu"> <li><a href="opcion.php">opcion 2.1</a></li> <li><a href="#">opcion 2.2</a><ul class="submenu"> <li><a href="opcion.php">opcion 2.2.1</a></li> <li><a href="opcion.php">opcion 2.2.2</a></li> </ul></li> </ul></li> </ul>
$(document).ready(function () { $("#menu a").click(fOption); }); function fOption() { var jThis = $(this); var href = jThis.attr("href"); if(href.indexOf("#")>-1) { $(".submenu").css({ display: "none" }); jThis.parent().children("ul").css({ display: "block" }); jThis.parents(".submenu").css({ display: "block" }); return false; } return true; }
Yo había creado bloques de la misma altura con jquery (es muy sencillo) pero esta función lo hace de modo genérico (se le pasa la lista de elementos).
Visto en Sentido Web
function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); }
Ejemplo de llamada:
$(document).ready(function() { equalHeight($(".recent-article")); equalHeight($(".footer-col")); });