Autor Zpráva
Lucy
Profil *
Potřebovala bych kód na rozbalování textu po kliknutí myší na první řádek nebo nadpis. Něco jako je na http://147.32.8.168/?q=Psycho majitel se ani neobtěžoval odepsat i kdyby že neporadí a ať jdu do *** nebo alespoň něco...
Tak jsem se pokusila ze zdrojového kódu vypátrat jak to je uděláno, ale neúspěšně :( Vypadá to na java nebo CSS s odkazem na externí soubor, opravdu se v tom nevyznám...
pro Vás profíky to snad bude jednoduché spíchnout to za pár minut :) (ale jedna podmínka by tu byla. Aby se to dalo vložit přímo do html kódu ne externě asi bych to na webgarden neuměla nastavit aby to šlo...)

Jestli se tedy bude někomu chtít to udělat ve volném čase nebo za symbolický poplatek tak mi pls mailněte na lucyts@email.cz díky
Radek9
Profil
<mimo téme>
1) Je to děláno v JS
2) Na webgarden to na 99% nepůjde
</mimo téma>
Joker
Profil
Lucy:
Není to tak složité, tady je první nástřel kódu, třeba to pak ještě někdo zoptimalizuje.

Kaskádové styly (do připojeného souboru .css nebo značky <style>):
.rozbaleny p { display: block;}
.sbaleny p { display: none; }


Javascript (značka <script> nebo externí soubor):
var eltKontejner = "div"; // Zde nastavit HTML prvek, který slouží jako kontejner. Asi není důvod jiný než <div>
var eltPrepinac = "h1"; // Zde nastavit prvek, který slouží jako přepínač- na ten se kliká
var clsKontejner = "kontejner"; // Zde nastavit CSS třídu, podle které se poznají kontejnery
var clsPrepinac = "rozklik"; // Zde nastavit CSS třídu, podle které se pozná přepínač
var clsSbaleny = "sbaleny"; // Zde nastavit CSS třídu, kterou má mít kontejner ve sbaleném stavu
var clsRozbaleny = "rozbaleny"; // Zde nastavit CSS třídu, kterou má mít kontejner v rozbaleném stavu

function hasClass(el, className){
  // Testuje, zda prvek má nastavenu příslušnou třídu.
  // el = daný HTML prvek anebo ID prvku (funkce umí prvek načíst), className = název třídy
  var re = new RegExp('\\b' + className + '\\b');
  //v případě, že bylo zadáno ID prvku, načte se prvek
  if(typeof(el) == "string") el = document.getElementById(el);
  if(el){
    return(re.test(el.className));
  }
}

function prepni(el){
  if(hasClass(el, clsSbaleny)){
    el.className = el.className.replace(clsSbaleny, clsRozbaleny);
  }
  else{
    el.className = el.className.replace(clsRozbaleny, clsSbaleny);
  }
}

function init(){
  var elCont = document.getElementsByTagName(eltKontejner);
  for(c in elCont){
    if(hasClass(elCont[c], clsKontejner)){
      var elSw = elCont[c].getElementsByTagName(eltPrepinac);
      for(s in elSw){
        if(hasClass(elSw[s], clsPrepinac)){
          elSw[s].onclick = function(){prepni(this.parentNode);}
        }
      }
    }
  }
}

Prvních šest řádků s proměnnými je jakési nastavení, které se dá modifikovat podle potřeb dané stránky.

To výše je udělané pro následující HTML kód:
<div class="kontejner sbaleny">
  <h1 class="rozklik">Tady je nadpis na který se má klikat</h1>
  <p>Tady je text, který se klikáním na nadpis zobrazuje/skrývá</p>
</div>


Nevím, jak funguje WebGarden, ale jestli dovolují upravovat HTML kód stránky a vkládat tam značky <script> a <style>, mělo by to jít.
Taurus
Profil
Kdysi jsem si tady z jpw zkopíroval podobný požadavek v kratším provedení:

<script type="text/javascript">
function ukaz(u){
el = document.getElementById(u).style;
el.display = (el.display == 'block')?'none':'block';
}
</script>


<h3><a href="#" onclick="ukaz('clanek1');">Název článku</a></h3>
<p style="display: none;" id="clanek1">Sem vrazíš ten text toho článku</p>
pavuk
Profil *
<a href="#" id="avice" onclick="this.style.display = 'none'; document.getElementById('vice').style.display = 'block';">Více...</a>
<div id="vice" style="display: none;">Skrytý text...
<br>
<a href="#" onclick="document.getElementById('vice').style.display = 'none'; document.getElementById('avice').style.display = 'block'">Méně...</a>
</div>

Pochází z tohoto vlákna
Lucy
Profil *
Super, ani jsem nedoufala že to bude tak jednoduché :) omlouvám se za založený nový topic, nějak jsem to asi přehlédla, když ono je tu toho tolik...
Ten první je pro mě dosti složitý a dlouhý a ani nevím jak ho zprovoznit. Když to dám na web, tak se mi vypíše celý ten kód na stránce a nic to nedělá (nejspíš problém mezi klávesnicí a židlí...)
Nakonec mi fungují ty další dva. Všem moc děkuji :)
Lucy
Profil *
hehe, v programování se nevyznám, ale umím dělat s excelem, takže jsem si vaše scripty vložila do svého projektu Generátoru odkazu původně pro Blueboard na počítadlo stažení, ale zvrtlo se to v něco většího... Taže neodolám a musím se pochlubit svou prací :) Generátor odkazu Předpokládám že vy to asi potřebovat nebudete, ale někomu se to náhodou hodit může :)
Lucy
Profil *
Taurus:
Kdysi jsem si tady z jpw zkopíroval podobný požadavek v kratším provedení:
>
<script type="text/javascript">
function ukaz(u){
el = document.getElementById(u).style;
el.display = (el.display == 'block')?'none':'block';
}
</script>
>
>
<h3><a href="#" onclick="ukaz('clanek1');">Název článku</a></h3>
<p style="display: none;" id="clanek1">Sem vrazíš ten text toho článku</p>

já vím že jsem hrozná, ale trochu jsem modifikovala ten kód, aby se na konci ukázal ještě odkaz na zavření když bude článek mooc dlouhý :)
Nechce se mi to tady rozepisovat jako to máte vy tady, ale prsknu to sem tak jak to mám "zhuštěno"...

Vlastně stačí smazat ten poslední tag </p> a za to dát následující řádek a po kliknutí na nadpis se na konci toho textu ukáže "sbalit" a tím se to dá zavřít a nemusí se rollovat zase nahoru :)
<a href="#" onclick="ukaz('clanek1');">sbalit</a><p style= id="clanek1"></p>
Teď nevím jestli musí být na konci </p> 2x když tam je style na začátku a na konci ale takhle to funguje (alespoň ve Firefoxu)
Sice programovat neumím, ale dokážu si něco málo domyslet a experientovat a ono to občas vyjde :D
pavuk
Profil *
To jsme právě taky řešili ve výše zmíněným vlákně ([#5]) a je to tam i s tím odkazem na sbalení, v kódu se jmenuje "méně"... :-)
Lucy
Profil *
V [#5] tam jde o to že to "více" po kliknutí zmizí a zobrazí se "méně" na konci, to se dá dobře použít třeba na článek který je moc dlouhý. nechám vypsat třeba 2 řádky a potom tam dám ten script se zbytkem textu a neruší tam žádný odkaz v textu a na konci je zase zabalení. Ale v [#4] je to nadpis na který se klikne pro rozbalení a ten tam tůstane, takže na konci je potřeba něco co to zase zabalí když je ten článek moc dlouhý a nechce se ti rollovat stránku zase až nahoru. To dělá ten odkaz co sem upravila. Jasný šel by i ten z [#5] upravit aby to "více tam zůstalo i po kliknutí, ale nevím co tam přepsat aby to tak bylo :D přece jenom mazat je jednodušší a selský rozum to nakonec vyřešil :) Kdyby to nešlo tak se budu ptát jak to předělat aby to tak šlo... ale povedlo se :)
Lucy
Profil *
Tak mám další věc. Jak do [#5] od pavuk zakomponovat onclick="Effect.toggle('vice', 'slide')"( to je zasunutí a vysunutí objektu "vice") přidáním do řady v původním kódu na konec oddělený středníkem mi nějak nejde :(
viz: <a href="#" id="avice" onclick="this.style.display = 'none'; document.getElementById('vice').style.display = 'block'; Effect.toggle('vice', 'slide')">Více...</a> myslela jsem že to pujde nakombinovat ale asi sem se zpletla, nebo to strčila na špatný místo.

A nebo v následujícím scriptu udělat zkrytí toho odkazu "otevřít" (tady se ten text vysune a zasune po kliknutí a vypadá to hezky)
<a href="#" onclick="Effect.toggle('id', 'blind', { duration: 2 }); return false;">otevři</a><div id="id" style="background:0000;">
<div>TEXT
<a href="#" onclick="Effect.toggle('id', 'slide', { duration: 2 }); return false;">zavři</a></div></div>
Marbulinek
Profil
Alebo si len pozri dokumentáciu k JQuery.. :)

Vaše odpověď

Mohlo by se hodit

Podělte se prosím o své zkušenosti s touto kategorií Věnujte pozornost pravidlům. Zejména:
• Máte-li zájem o tuto nabídku/poptávku, využijte uvedený kontakt, nepište do diskuse.
• Držte se tématu.
  • Nepoučujte.

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: