Ascunde / Afiseaza text

[Skeptic]

Salut,
Am in pagina <article> text text text </article> cu inaltimea de 400 px daca am de scris un text mai lung care depaseste inaltimea de 400 px iese din acel <article> background si textul e scris si mai in jos.
vezi imaginea.
s17.postimage.org/54z1xqtgv/Untitled.png
intrebarea mea e cum pot face ca textul sa fie doar in acel background mai deschis la culoare si sa am optiune de show and hide text ?

Pentru optiune de Afiseaza / Ascunde trebuie un script JavaScript.
Ca idee, textul care vrei sa fie ascuns se adauga intr-un element <span> (ascuns cu CSS) cu un ID. Apoi, la butonul care vrei sa afiseze acel <span> se inregistreaza actiune "onclick" care apeleaza o functie ce afiseaza elementul cu acel ID. Similar pt buton de ascundere.
Uite un exemplu pe care-l poti modifica /adapta la ce ai tu.

Cod: Selectaţi tot

<div id="articol">Cursuri Programare Web: www.coursesweb.net si <span id="art2" style="display:none">Cursuri, Jocuri, descriere Anime: marplo.net</span></div>
<button id="bshow">Afiseaza</button> / <button id="bhide">Ascunde</button>

<script type="text/javascript"><!--
// JavaScript Course: www.coursesweb.net/javascript/
function showhide(id, make) {
  document.getElementById(id).style.display = make;
}
document.getElementById('bshow').onclick = function(){ showhide('art2', 'inline') };
document.getElementById('bhide').onclick = function(){ showhide('art2', 'none') };
//-->
</script>

O alta solutie ar fi cu proprietatea CSS "overflow". Elementul cu articol sa aibe dimensiuni fixe, iar "overflow" face sa apara o bara de derulare cand textul depaseste dimensiunile.
Exemplu:

Cod: Selectaţi tot

<style>
#articol {
 width: 120px;
 height:100px;
 overflow-x: hidden;
 overflow-y: auto;
}
</style>

<div id="articol">Cursuri Programare Web: http://www.coursesweb.net si Cursuri, Jocuri, descriere Anime: https://marplo.net.</div>

Nu stiu dc dar nu imi merge scriptul de js. cel din css e foarte util si usor de folosit.. sa vad daca pot modifica scroll barul acela cu ce culoare vreau eu si poate il tin , am gasit multe scripturi pe google dar nici unu nu facea exact ce vreau eu , cand dau show text e aceeasi chestie apare textul dar tot ca in imagine peste acel background albicios.. eu as vrea cand dau click"show text" sa imi extinda si acel background odata cu textul. si cand dau click "hidde text" sa ascunda o parte din text si backgroundul sa se faca la forma initiala de 400px sau cat o pun eu.

Vezi exemplu de mai jos, testeaza-l asa cum e, apoi adapteaza-l la ce ai tu, dupa cum stii.
Inlocuiesti "50px" cu ce valoare vrei pt inaltime (height).

Cod: Selectaţi tot

<style type="text/css"><!--
#articol {
width: 200px;
height: 50px;
background: #edeefe;
}
//-->
</style>

<div id="articol">Cursuri Programare Web: www.coursesweb.net si <span id="art2" style="display:none">Cursuri, Jocuri, descriere Anime: marplo.net</span></div>
<br/>
<button id="bshow">Afiseaza</button> / <button id="bhide">Ascunde</button>

<script type="text/javascript"><!--
// JavaScript Course: www.coursesweb.net/javascript/
function showhide(id, make) {
  document.getElementById(id).style.display = make;
  if(make == 'none') document.getElementById(id).parentNode.style.height = '50px';
  else document.getElementById(id).parentNode.style.height = 'auto';
}
document.getElementById('bshow').onclick = function(){ showhide('art2', 'inline') };
document.getElementById('bhide').onclick = function(){ showhide('art2', 'none') };
//-->
</script>

- E greu sa gasesti un script care sa faca ce vrei /sau apropiat. In cazul cand nici acesta nu merge si nu gasesti ceva potrivit, cel mai bine sa inveti JavaScript sa-ti faci singur ce vrei, sau sa stii sa modifici /adaptezi altele gata facute.