Adauga animatie propietati overflow

Propietatea overflow este aceea care ne ajuta sa adaugam un continul voluminos intr-un spatiu redus. Ca orice alta proprietate CSS poate fi modificata dinamic cu JavaScript, adica pot avea o valoare pre-stabilita si cu un simplu click se poate modifica.

In exemplul de mai jos se observa o caseta cu o inaltime fixa, indiferent de continulul din interior va ocupă întotdeauna acelasi spatiu. Folosind overflow se adauga la caseta o bara scroll (defilare) pentru a pute fi vizibil tot continutul din caseta.

<div style="height: 100px;overflow-y: scroll;width:500px;">
....... aici vine textul .......
</div>

Stores are divided into multiple categories of stores which sell a selected set of goods or services. Usually they are tiered by target demographics based on the disposable income of the shopper. They can be tiered from cheap to pricey.
Some shops sell secondhand goods. Often the public can also sell goods to such shops. In other cases, especially in the case of a nonprofit shops, the public donates goods to these shops, commonly known as thrift stores in the USA or charity shops in the UK. In give-away shops goods can be taken for free. In antique shops, the public can find goods that are older and harder to find.

Definire dimensiuni casetei o facem cu width si height

Acum, vom adauga un buton pseudo(un link), care va extinde sau restrange, mai precis, schimbarea celor doua proprietati care le controleaza overflow.

Creem HTML cu unele etichete suplimentare pentru a evita probleme si de a identifica atributele ID-ul si apoi, acestea sa poata fi manipulate cu JavaScript:

Acum unde doresi sa apara caseta cu respectivul continut adaugi urmatorul cod html;

<div id="centrado">
<a href="javascript:expandir();" id="elenlace">mareste</a>
<div id="micontenedor" style="height: 200px;overflow-y: scroll;">
....... aici continutul .......
</div>
</div>

si adaugam inainte de ]]></b:skin> codul CSS urmator:

<style>
#centrado {
margin: 0 auto;
width: 400px;
}
#elenlace {
float: right;
text-decoration:none;
width: 100px;
height: 1.6em;
line-height: 1.6em;
text-align: center;
background-color: #ABC;
border-radius: 4px 4px 0 0;
color: #234;
font-family: Tahoma;
font-size: 11px;
margin-right: -1px;
letter-spacing: 0px;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
#elenlace:hover {
letter-spacing: 4px;
text-decoration:none;
}
#micontenedor {
clear: both;
margin: 0;
overflow-x: hidden;
background-color: #EEE;
border: 3px solid #456;
color: #222;
font-family: Georgia;
font-size: 13px;
outline: 1px solid #ABC;
padding: 10px 10px 0 10px;
text-align: justify;
text-shadow: 1px 1px 1px #CCC;
/* animamos el cambio */
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
</style>

si ultimul pas adaugam codul JavaScript urmator inainte de </head>

<script type='text/javascript'>
//<![CDATA[
function expandir() {
el = document.getElementById("micontenedor");
// leemos la propiedad overflowY
if(el.style.overflowY=="scroll") {
// si está colapsado, lo expandimos
document.getElementById("elenlace").innerHTML = "inchide"; // cambiamos el texto del enlace
el.style.overflowY = "visible"; // quitamos la barra de scroll
el.style.height = el.scrollHeight + "px";// cambiamos la altura
} else {
// si está expandido, lo colapsamos
document.getElementById("elenlace").innerHTML = "mareste"; // cambiamos el texto del enlace
el.style.overflowY = "scroll"; // agregamos la barra de scroll
el.style.height = "200px"; // restauramos la altura
}
}
//]]>
</script>

si rezultatul este urmatorul:

mareste

Donec blandit tempus congue. Ut tellus nisi, convallis nec sodales a, gravida nec justo. In hac habitasse platea dictumst. Quisque egestas tincidunt augue et dignissim.

Mauris lorem eros; tincidunt vel elementum a, tempus ac ante! Etiam gravida porttitor convallis? Sed cursus cursus sem porttitor ullamcorper? Phasellus congue diam volutpat quam iaculis vel posuere dui sollicitudin! In et dui quis libero cursus fringilla a non odio. Integer sit amet lorem tortor.

Duis mauris libero, fermentum id lacinia sed, molestie sed massa. Etiam ut metus lacus, non fringilla felis. Vestibulum luctus venenatis justo id rutrum. Nullam rhoncus bibendum magna ut consectetur. Praesent suscipit ligula sit amet nibh sagittis nec lobortis mi vulputate. Nulla a turpis quis erat viverra ullamcorper at ac metus.

Alte informatii in Vagabundia