Diskuze: Javascript spoiler textu

JavaScript JavaScript Javascript spoiler textu

Avatar
Štefan Pružinský:

Zdravím,
potreboval by som vedieť ako vytvoriť javascript spoiler textu, ktorý bude vytvárať spoiler po nejakom počte znakov. Napríklad: Mám kalendár, kde je dňa 7.5. - 6 mien čo činí cca 25 znakov. Chcem aby sa mi napr. po 15 znakoch vytvoril spoiler. Vopred ďakujem za pomoc!

Odpovědět 17.10.2014 20:54
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
Štefan Pružinský:

Čaute mám ešte jeden problém. Chcel by som ten spoiler upraviť tak, aby sa vysúval plynule.
Pôvodný kod bol:

<div style="text-align:center">
<button title="Podrobnejší kalendár(kliknite)" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Podrobnejší kalendár</button>
</div>
<br><br>
<div id="spoiler" style="display:none">
        <div id=st>
        <script language="Javascript">
        var d=new Date();
        var to=-4-d.getTimezoneOffset()/60;
        document.write ( '<script language="Javascript" src="http://script.days.ru/calendar.php?tmshift='+to +'&images=1&hrams=0"><\/script>');
        </script>
        </div>
</div>

Skúšal som to cz toggle() v jquery, ale nejde to:

<button>Podrobnejší kalendár</button>
<div id="spoil" style="display:none">
        <script language="Javascript">
        var d=new Date();
        var to=-4-d.getTimezoneOffset()/60;
        document.write ( '<script language="Javascript" src="http://script.days.ru/calendar.php?tmshift='+to +'&images=1&hrams=0"><\/script>');
        </script>
</div>

<script>
$( "button" ).click(function() {
$( "spoil" ).toggle( "slow" );
});
</script>

Vopred ďakujem za pomoc!

Editováno 20.10.2014 17:40
Nahoru Odpovědět 20.10.2014 17:38
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Štefan Pružinský
Honza Bittner:

Tím myslíš styl :

abcefg

na

abc...
abc[ukaž zbytek]

Nebo tak?
// samozřejmě po 25ti znacích

Nahoru Odpovědět 20.10.2014 17:41
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tukmak
Člen
Avatar
Odpovídá na Štefan Pružinský
Tukmak:

U selectoru spoil ti chybí značka pro id (#). To znamená:

<script>
$( "button" ).click(function() {
$( "#spoil" ).toggle( "slow" );
});
</script>
 
Nahoru Odpovědět  +1 20.10.2014 18:22
Avatar
Odpovídá na Honza Bittner
Štefan Pružinský:

Áno, presne tak.
Podarilo sa mi už vytvoriť pomale vysúvanie textu, ale stále neviem vytvoriť tú podmienku(1,2,3,4 Ukaž dalej)

        <dl>
                <div id="st">
                <dt><button href="#">Podrobnejší kalendár</button></dt>
                <dd>
      <br><br>
                        <script language="Javascript">
        var d=new Date();
        var to=-4-d.getTimezoneOffset()/60;
        document.write ( '<script language="Javascript" src="http://script.days.ru/calendar.php?tmshift='+to +'&images=1&hrams=0"><\/script>');
        </script>
                </dd>
                </div>

        </dl>

  <script>
  $(function()
{

        $('dd').hide();


        $('dt').click(function()
        {
                var rodic = $(this).parent(),
                rodic.find('dd').slideUp();


                vyrok.not(':visible').slideDown();

                return false;
        });

  });
  </script>
Nahoru Odpovědět 20.10.2014 20:27
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
Odpovídá na Tukmak
Štefan Pružinský:

Diki za radu, to prvé riešenie je lepšie. Dalo by sa zmeniť funkcie za nejakú inú funkciu z klasickým slow(zhora-dole, plynule) vysunutím?

Nahoru Odpovědět 20.10.2014 20:37
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Štefan Pružinský
Honza Bittner:

Řekněme, že máme nějaký text

Zítra budeme ve škole probírat nové věci v matematice.

To chceme rozdělit tak, že prvních 25 znaků necháme a pro zbytek doplníme 3 tečky, které případně mohou po kliku zobrazit zbytek. Tedy takto:

Zítra budeme ve škole pro...

//bírat nové věci v matematice.

Ty si tedy vezmeš string veta, ten rozdělíš na 25písmen a zbytek. Poté zbytek vložíš do nějaké proměnné, za 25písmen dostadíš element s třídou zobraz - který bude obsahovat 3 tečky a následně také span se třídou skryte, který bude zobrazovat zbytek textu. Po kliknutí na 3 tečky, nebo samozřejmě cokoli co budeš chtít - nějaké tlačítko - se ti zobrazí zbytek.

<p>Zítra budeme ve škole pro<span class="zobraz">...</span><span class="skryte>bírat nové věci v matematice.</span>

Takto nějak bych to udělal.

Nahoru Odpovědět  +1 20.10.2014 20:48
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Tukmak
Štefan Pružinský:

len pre info existuje este fadeToggle() - dalej fadeTo, fadeOut, slideToggle() - slideDown, slideUp

Nahoru Odpovědět 20.10.2014 20:57
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
Odpovídá na Honza Bittner
Štefan Pružinský:

bohužiaľ neviem o funkcii ktorá si vie rozdeliť text podľa počtu znakov.

Nahoru Odpovědět 20.10.2014 21:03
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
Odpovídá na Honza Bittner
Štefan Pružinský:

a dalši problem je v tom´, že ja ten text ťahám z inej stránky (ešte aj s nastavením časového posunu, pretože to robia Rusi (cca +3 hod od SEČ) - je to kalendár):

<script language="Javascript">
        var d=new Date();
        var to=-4-d.getTimezoneOffset()/60;
        document.write ( '<script language="Javascript" src="http://script.days.ru/calendar.php?tmshift='+to +'&images=1&hrams=0"><\/script>');
        </script>
Nahoru Odpovědět 20.10.2014 21:28
Najefektívnejším spôsobom debuggingu je modlitba. :)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.