Mostrar y ocultar un bloque
Categoría: Javascript -
20 Noviembre 2006 -
Comentarios (1)
En la mayoría de ocasiones, tener un div oculto que se abre pulsando un enlace o un botón obedece más a un interés estético que práctico, pero también había que plantearse cómo se hace, aunque no tenga ni idea de javascript.
Observen el ejemplo en Planeta Código, que creo que es suficientemente simple e intuitivo.
El javascript:
<script type="text/javascript">
// definiciones basicas
OCULTO="none";
VISIBLE="block";
function mostrar(blo) {
document.getElementById(blo).style.display=VISIBLE;
document.getElementById('ver_off').style.display=VISIBLE;
document.getElementById('ver_on').style.display=OCULTO;
}
function ocultar(blo) {
document.getElementById(blo).style.display=OCULTO;
document.getElementById('ver_off').style.display=OCULTO;
document.getElementById('ver_on').style.display=VISIBLE;
}
</script>
El HTML que proponen:
<div id="ver_on"><a href="#" onclick="mostrar('bloque')">Ver más</a></div>
<div id="ver_off" style="display: none"><a href="#" onclick="ocultar('bloque')">Ver menos</a></div>
<div id="bloque" style="display: none">Texto a mostrar u ocultar</div>
Y para finalizar, mi intento de adaptarlo a un menú para el blog (ver demo), que también funciona y valida:
<div id="botonmenu">
<a id="ver_on" href="#" onclick="mostrar('bloque')">Abrir menú</a>
<a id="ver_off" style="display: none" href="#" onclick="ocultar('bloque')">Cerrar menú</a>
<ul id="bloque" style="display: none">
<li><a href="http://juglar103.blogsome.com/archivos/" title="Listado de todos los posts">Archivos</a></li>
<li><a href="http://www.bloglines.com/public/Juglar" title="Los blogs que sigo con Bloglines">BlogRoll</a></li>
<li><a href="http://del.icio.us/juglar103/" title="Mis enlaces favoritos en del.icio.us">Enlaces</a></li>
<li><a href="mailto:{the_author_email}" title="Correo electrónico">Contacto</a></li>
<li><a href="#menu" title="Menú">Más cosas</a></li>
</ul>
</div>
Alternativas para mostrar y esconder un div con javascript:
Showing and Hiding a DIV using CSS and Javascript - netlobo.com
domCollapse
Artículos CSS / Hojas de estilo - Capas visibles e invisibles
JS Popups with Computed Absolute Positioning
Modded Up: Slide In, Slide Out, ala Digg
Ryan J Lowe’s Dev Blog » Blog Archive » LITBox
Technorati tags: div, javascript, menu, juglar103, Juglar
Técnicas de esquinas redondeadas
CSS e imágenes:
Juglar :: Caja con esquinas redondeadas
The ThrashBox™
Bullet-Proof Rounded Corners
CSS Rounded Corners example
Rounded corners and shadowed boxes (W3C)
Caótico Neutral » Redondeando esquinas (I)
Caótico Neutral » Redondeando esquinas (II)
Alsacreations, Create a rounded block with CSS and XHTML
Boxless boxes | 1976design.com
A List Apart: Creating Custom Corners & Borders
A List Apart: Creating Custom Corners & Borders Part II
CSS and Round Corners: Build Boxes with Curves [CSS Tutorials]
Round Corners
Rounding Tab Corners (Complex Spiral Consulting)
CSS Teaser Box, flexible width and height | Lab | 456 Berea Street
Flexible box with custom corners and borders | Lab | 456 Berea Street
A List Apart: Articles: Mountaintop Corners
Airtight Corners
Rounded corners in CSS :: Adam Kalsey
CSS and round corners: Borders with curves
Round corners in pure css for liquid design and transparent scrolling
MODx Content Management System | Simple Rounded Corner CSS Boxes
SitePoint Tools : Spanky Corners
ervdesign » Esquinas redondas con CSS, a gusto del consumidor
ervdesign » Esquinas redondas con CSS, ancho variable
Sólo CSS sin imágenes:
Rounded Corners Without Images
stu nicholls | snazzy borders
Cool trick: rounded boxes using CSS - and NO images! - GoTutorials Forums
WebEstilo: Esquinas redondeadas sin imagenes
Follow the Arrow
Javascript sin imágenes:
Nifty Corners
More Nifty Corners - Webdesign.HTML.it
Tutorial de Nifty Corners Cube - esquinas redondeadas con CSS y JavaScript
Demo of MochiKit Visual Elements
Editsite.net - Rounded corners
Anti-aliased Nifty Corners - Acko.net - Steven Wittens
Rounded corners without images: A Nifty Corners Inspiration :: Seky
curvyCorners - JavaScript Rounded Corners and more.
Dragon Labs | The Octopus Engine
curvyCorners - Ultimate Rounded Corners.
Transcorners — Cornerus Pride is there *scared*
Javascript con imágenes:
Transparent rounded/custom corners and borders | Lab | 456 Berea Street
TCCB v2 demo page | 456 Berea Street
Alex Sancho : Esquinas personalizadas con javascript
Varias opciones:
Corners - Nested divs revisited
Bords arrondis en XHTML/CSS
Otras esquinas:
Dynamic Drive CSS Library- Curly Corner Container
a.css, esbudellant estàndards » Técnica de Esquinas Personalizadas
How to Add Fluid Borders to Your Boxes with CSS - WebReference.com
JQuery Corner Demo
Generadores automáticos:
Generador de cajas con borde redondeado en CSS
Jalenack’s Complete Rounded Corners Creator
Spiffy Corners
Spiffy Box
Cornershop
Ver también:
CSS Rounded Corners ‘Roundup’ | Smiley Cat Web Design
Imágenes y Javascript
Agrandar imágenes de una galería en la misma ventana:
Lightbox JS
Lightbox JS v2.0
Thickbox
SonSpring | DOM Gallery
Litebox
iBox / iBegin Blog (powered by evoBlog)
aNieto2K - » Lightbox solo fue el principio
TripTracker Blog » Revamped Slideshow
Voet Cranf - JavaScript
Suckerfish HoverLightbox - Monday By Noon
Slimbox, the ultimate lightweight Lightbox clone · digitalia.be
Secuencia de imágenes controlada:
Couloir.org: Resizing, Fading Slideshow Demo
mooShow 0.03 Beta . Javascript Slideshow based on moo.fx
easyALBUM
w3schools.com
Intenta » Galeria de imágenes con Javascript I
Pragmatic and elegant solutions
sorgalla.com - jCarousel
JaS - JavaScript Slides
CSS Photo Shuffler
flickrshow › Simple javascript slideshows for Flickr
Displaying your flickr photos in an unobtrusive manner
JS/CSS/DHTML based Image Gallery - ImageGal
My Gallery
PVII Gallery Magic
ShowCase3
Photo Morpher - TwinHelix
Secuencia de imágenes automática:
slayeroffice | code | image cross fade redux
SonSpring | Slideshow Alternative
Efectos en imágenes:
Reflection.js
aNieto2K | Refleja tus imagenes
Cut & Paste Image zoom in/out
Reflection.js for mootools · digitalia.be
Imagen aleatoria cada vez que se recarga la página:
Juglar :: Imagen aleatoria
w3schools.com
Rotar imágenes aleatoriamente » Sentido Web
Citas aleatorias
Para mostrar una cita aleatoria en Blogsome, solo copia lo siguiente en tu index, sustituyendo cada “fraseX” por una cita.
Blogsome Forum - Random taglines?
Intenta - Citas aleatorias con Javascript
Mostrar un enlace aleatorio con Javascript en Intenta
<div id="cita">{literal}
<script type="text/javascript" language="JavaScript">
<!--
function random_text()
{};
var random_text = new random_text();
var number = 0;
random_text[number++] = "frase1"
random_text[number++] = "frase2"
random_text[number++] = "frase3"
random_text[number++] = "frase4"
random_text[number++] = "frase5"
random_text[number++] = "frase6"
var random_number = Math.floor(Math.random() * number);
document.write(random_text[random_number]);
--></script>{/literal}
</div>
Introducción a AJAX
Categoría: Javascript -
15 Mayo 2006 -
Comentarios (2)
Diseños alternativos
La idea consiste en permitir al visitante cambiar la apariencia de la web (el diseño completo o ciertos aspectos). El método es sencillo: en vez de una hoja de estilos disponemos de varias y permitimos variar de una a otra mediante una función javascript.
CSS Lab » Cambiando la apariencia
A List Apart: Alternative Style: Working With Alternate Style Sheets
A List Apart: Invasion of the Body Switchers
CssCreator User Preference Script
Styleswitcher Dropdown
Adactio: Jeremy Keith
24 ways: Introducing UDASSS!
EstadoBeta - Cambio de contraste con Javascript y CSS
Intenta - Crear un “style switcher” o alternador de estilos
Particletree » Dynamic CSS Changes
Mike’s Experiments: PHP: Style Changer
Cambiar el tamaño de la letra
En la hoja de estilos, deberíamos definir los tamaños de las fuentes (font-size) mediante unidades relativas (em, %), en vez de fijas (px, pt), si queremos que sean los usuarios los que puedan modificar el tamaño del texto a su antojo, mediante las funciones que para esta casuística disponen los navegadores. Por defecto, los navegadores suelen desplegar 16px.
Esta postura es la defiende uno de los principios de la accesibilidad:
“3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo.”
Ejemplos de funciones para modificar el tamaño del texto en navegadores:
- Firefox (versión 1.5.0.2): Herramientas - Opciones - Contenido - Tipografía
- Internet Explorer (versión 6.0): Ver - Tamaño de texto
La otra postura sería definir unas medidas fijas para las fuentes y permitir que el usuario pueda agrandar o disminuir el tamaño del texto pero desde funciones javascript predeterminadas en el diseño de la web (mediante botones, por ejemplo). Podría decirse que es la opción elegida por los que tienen un especial interés por controlar cómo se visualiza su diseño.
Para implementar botones que cambien el tamaño del texto:
Cambiar el tamaño de letra dinámicamente » Sentido Web
A List Apart: Power To The People: Relative Font Sizes
Zoom Zoom Zoom | Delta Tango Bravo
NoFunc · Dynamic Fonts
Aumentar el tamaño de un texto con Javascript en Intenta
Vease otra reflexión: Úsalo » Botones para cambiar el tamaño de letra
"Búsqueda
Categorías
- Blogs
(73)
- Blogsome (18)
- Buscadores (12)
- Cine (2)
- Comunicación (5)
- Diseño Web (93)
- Escritorio (4)
- Imagen (39)
- Javascript (20)
- Música (13)
- Navegadores (12)
- Ocio (34)
- Personal (24)
- RSS (23)
- Social (15)
- Utilidades (71)
- Webmaster (24)
