soy Kseso y esto EsCSS

Toggle: ocultar sidebar y expandir el artículo. Aplicado a blogger.

Cómo dar la opción al usuario para ocultar el sidebar (y sus widgets) y expandir el cuerpo del artículo aplicado a blogger.

Toggle: ocultar sidebar y expandir el artículo. Aplicado a blogger.

·Por Kseso ✎ 3

Toggle sidebarDesde siempre he tenido una guerra interna con los sidebar o columnas laterales. Los diseños multicolumnas, una principal o de contenido y una o más para alojar elementos secundarios. Entiendo que estos son necesarios y ayudan en muchos aspectos, tanto a la página como a los visitantes. Pero a la vez restan espacio al contenido de la página, hacen crecer su altura (en ocasiones kilómetros) y la ayuda o su necesidad es esporádica.

La cuestión es que no está en manos de autor de la página saber cuándo será de ayuda y cuando estorbará la columna lateral. Así que una vez asumido ésto, la decisión es fácil y cómoda. Sólo hay que echar balones fuera, renunciar al dilema y que sea el visitante quien tome la decisión de ocultarla o no.

Toggle sidebar: si quieres

Y eso es lo que tienes disponible desde hoy en este blog. Fíjate en el detalle de la esquina superior derecha del artículo y en la banda de todo el borde derecho y juega con él.

A continuación te cuento cómo lo he implementado en el blog. Pero este artículo tiene esta vez otra finalidad añadida: recabar un poco de ayuda en la función js.

La idea

La idea es sencilla: aplicar un display: none al #sidebar-wrapper, que en blogger es el padre de todos los widgets que se muestran a la derecha. Y ya de paso ajustar un par de cosillas más para que luzca bien.

La disyuntiva: puro Css o javascript

La primera opción fue realizarlo en puro Css. Bien con la pseudoclase :target sin salto o con :checked. Pero decidí meterme en camisa de 11 varas y, por una vez y sin que sirva de precedente, usar js. La finalidad, al pinchar sobre el elemento toggle añadir una clase al id="content-wrapper".

Por si hay alguien que no lo sepa, nunca he escrito una función de javascript. Para mi js es tabú, cosa de brujos negros, vamos, que soy un ignorante completo en la materia. Así que... lo primero fue buscar cómo se hace eso. Y di con la forma para hacerlo funcionar en mi caso, pero que soy consciente que es una chapuza. La vemos después.

Los elementos del html

Obligado por lo anterior, he incluido 2 spans en el html para ocultar y mostrar. Al ser una característica que sólo quiero mostrar en los post, los incluyo con un condicional de blogger para que sólo se carguen en las páginas de los artículos. Quedó así:

<div class="post hentry">Línea ya existente <b:if cond='data:blog.pageType == "item"'> <span title="Expandir anchura artículo" class="expandir" onclick="expandir(id)"></span> <span title="Mostrar sidebar" class="contraer" onclick="contraer(id)"></span> </b:if>

El javascript

Como ves, la chapuza es que uso dos elementos, y que cada uno ejecuta una función. Lo repito, chapuza. Así que aquí va el grito de socorro:

Cualquier ayuda para mejorar el js será agradecida

<b:if cond='data:blog.pageType == "item"'> <script> function expandir(id){ document.getElementById('content-wrapper').className='completo'; } function contraer(id){ document.getElementById('content-wrapper').classList.remove("completo"); } </script> </b:if>

De nuevo encerrada en su condicional de blogger por la misma razón. La primera función añade la clase "completo" al div "content-wrapper" al pinchar sobre el primer span y la segunda la quita o remueve al hacer click sobre el segundo.

Sencillo, ¿verdad?. Eso creía yo hasta que lo testé en ie9. añadir la clase y esconder el sidebar lo hacía a la perfección. Pero ahí se quedaba. No lo volvía a mostrar. El depurador decía que:
No se puede obtener valor de la propiedad 'remove': el objeto es nulo o está sin definir
Supongo que no soportará el .classList.remove()

En mi desconocimiento la forma sencilla que encontré fue sustituirlo por lo mismo que en la primera función. Quedó así:

<b:if cond='data:blog.pageType == "item"'> <script> function expandir(id){ document.getElementById('content-wrapper').className='completo'; } function contraer(id){ document.getElementById('content-wrapper').className=''; } </script> </b:if>

En vez de remover la clase añadida no escribe ninguna. Y aquí yo con mi medalla ya en el pecho, cuando voy y descubro que por ahí anda una "función" llamada toggle que hace, por lo visto, lo mismo pero más límpio y sencillo. Creo. Así que medalla fuera y certeza de que esta parte necesita mejoras.

El Css necesario

Con lo anterior, al cargar la página de los post el div="content-wrapper" lo hace sin clase alguna y por lo tanto el artículo y el sidebar se muestran con el tamaño y propiedades definidas. Al pulsar el primer span se le añade la clase "completo", así que ahora sólo es cuestión de agregar las reglas css necesarias para anular las propiedades que se necesitan:

Primero, ocultamos el lateral y, para que no estorben, también el span que han sido usado, dejando sólo visible y funcional uno de los dos:

#content-wrapper.completo #sidebar-wrapper, #content-wrapper.completo .expandir, #content-wrapper .contraer {display: none;}

Y a la vez que se retira el lateral, crece el artículo:

#content-wrapper.completo #main-wrapper { float: none; padding-right: 20px; width: 100%; } /*añado un poco de "aire" a la derecha del texto*/ #content-wrapper.completo .post.hentry {padding-right: 3rem;}

A continuación ya sólo resta estilizar un poco los spans que controlan las funciones para que luzcan y a la vez hacer que ocupen todo el lateral derecha de arriba a abajo para que estén siempre a mano y no haya que subir hasta arriba de la página para acceder a ellos.

.expandir, #content-wrapper.completo .contraer { background:#EDEDED; position: absolute; display: inline-block; width: 1rem; border-left: 1px solid #E0E0E0; top: 0; bottom: 0; right: 0; color: #CDCDCD; cursor: pointer; outline: 0 none; text-decoration: none; }

La pestaña superior está realizada con el pseudoelemento :before de cada span, cambiando sólo el valor de la propiedad content.

.expandir:before, .contraer:before { background: #FFFFFF; border-bottom: 1px solid #E0E0E0; color: #2D4261; content: '»'; /*en el css real codificado: '\00BB'*/ font-family: carme; font-size: 1rem; line-height: 1.1em; padding: 2px 0; position: absolute; right: 0; text-align: center; text-indent: 2px; top: 0; width: 1rem; } .contraer:before {content: '«';}/*en el css real codificado: '\00AB'*/

En mi caso, creo que con el artículo expandido las líneas de texto quedan demasiado largas, así que opté por añadir un poco más de padding derecho y a la vez aumentar un poco el tamaño del texto, suavizando su color para que no resulte tan duro. Así se muestra en función de estar ocultos o no los widgets laterales.

El blog con el sidebar plegado (toggle) o no

Créditos: inspirado en:

Posíblemente la idea del botón del toggle ocupando toda la altura y otros detalles del mismo te resulten familiares. Si es así, buena memoria. Y si no, la inspiración e idea base la tomé de la forma en que Paul Irish y Andy Davies lo realizan en sus blogs.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso