spoiler

hanna · 18 jan 2013

Ik heb dit aangemaakt en werkt prima, alleen zou ik er nog graag inhebben hoe je het langzaam laat openen met .toggle('slow'); ik weet niet precies hoe ik het hier tussen moet zetten. Wie o wie, bedankt alvast.

Code:

<div style="padding: 3px; text-align:right; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Kleine tekst: </b><a href=\'#\' onClick=\'return false;\'>lees minder</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>De hele tekst: </b><a href=\'#\' onClick=\'return false;\'>lees meer</a>'; }" /><b>De hele tekst: </b><a href="#" onClick="return false;">lees meer</a></span></div><div class="quotecontent"><div style="display: none; margin-top:10px; text-align:left; margin-left: 5px;">{TEXT}</div></div></div>

Of zou het ook hier in aangepast kunnen worden.??

Code:

            <script type="text/javascript">
            $("document").ready(
               function()
               {
                  $("input.changevalue").toggle(
                     function()
                     {
                        $(this).val('{L_COLLAPSE_VIEW}');
                     },
                     function()
                     {
                        $(this).val('{L_EXPAND_VIEW}');
                     }
                  );
               }
            );
            </script>

timmb · 19 jan 2013

Hanna, Om 11:09 heb je hier al een topic voor aangemaakt: http://www.helpmij.nl/forum/showthread.php/748554-spoiler-bbcode

hanna · 19 jan 2013

Ja, dat weet ik, maar omdat niemand reageert heb ik het ook hier gezet. Ik heb het er ook bij gezet.

csshunter · 19 jan 2013

Hoi Hanna,
Voor iets betere leesbaarheid van de lange regel

, daar staat dus dit:

HTML:

<div style="padding: 3px; text-align:right; border: 1px solid #d8d8d8; font-size: 1em;">
    <div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; 
        font-weight: bold; display: block;">
        <span onClick="
            if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; 
                this.innerHTML = '<b>Kleine tekst: </b><a href=\'#\' onClick=\'return false;\'>lees minder</a>'; 
            }
            else { 
                this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; 
                this.innerHTML = '<b>De hele tekst: </b><a href=\'#\' onClick=\'return false;\'>lees meer</a>'; 
            }" />
            <b>De hele tekst: </b><a href="#" onClick="return false;">lees meer</a>
        </span>
    </div>
    <div class="quotecontent">
        <div style="display: none; margin-top:10px; text-align:left; margin-left: 5px;">{TEXT}</div>
    </div>
</div>

=======
Voor een langzame uitroller/inroller heb ik dit scriptje (geen jQuery nodig):

custom-confirm-box-2.htm
Zie broncode.
In wat daar de "custom-confirm-box" is, kan natuurlijk van alles aan Meer... tekst gezet worden.
Deze is gemaakt voor één uitrollend element.
Wil je 'm voor méér elementen op een pagina bruikbaar maken, dan zal de functie gegeneraliseerd moeten worden (d.m.v. een volgnummer toekennen aan elke uitklapper).

Met vriendelijke groet,
CSShunter

crash · 19 jan 2013

hanna zei:
Ja, dat weet ik, maar omdat niemand reageert heb ik het ook hier gezet. Ik heb het er ook bij gezet.

Graag de volgende keer een verzoek doen om je topic te verplaatsten. Hou er ook rekening mee dat iedereen hier vrijwillig helpt en het dus even kan duren eer je een antwoord krijgt.

hanna · 19 jan 2013

Oké crash, zal ik doen.

Bedankt CSShunter, ik ga proberen of hier iets mee kan binnen de phpbb.
Ik heb n.l. een phpbb forum opgezet en daar heb ik het voor nodig, maar na normale websites is dit toch weer heel anders, dus ik ben het allemaal aan het uitzoeken.
De css binnen de html.
Je hoort het nog.

hanna · 19 jan 2013

Dit werkt dus inderdaad niet, was ik al bang voor. (het is wel een leuke

) Ik had zelf ook al het een en ander geprobeerd.
Die ik hier boven neer heb gezet werkt wel, alleen het slow wil ik er nog in hebben.

Zo ben ik ook met een accordion aan het puzzelen, ik maak er zo een, maar om dat te implementeren in PhpBB is toch weer een heel ander gebeuren.

hanna · 20 jan 2013

Misschien dat iemand wel weet hier in deze code "slow" achter .toggle moet?? Als ik het zo .toggle('slow') krijg ik een error, ik ben niks waard met javascript.

Code:

      <script type="text/javascript">
        $("document").ready(
           function()
           {
              $("input.changevalue").toggle(
                 function()
                 {
                    $(this).val('{L_COLLAPSE_VIEW}');
                 },
                 function()
                 {
                    $(this).val('{L_EXPAND_VIEW}');
                 }
              );
           }
        );
        </script>

csshunter · 20 jan 2013

De .toggle('slow') schijnt in de html-replacement te moeten zitten, en niet in de jQuery-opdracht.

Zie hier: [url]www.phpbb3bbcodes.com/viewtopic.php?t=1701[/URL]
In bijbehorend demo-YouTuubje zie je 'm slowen.

Is dat 'm?

Met vriendelijke groet,
CSShunter

hanna · 20 jan 2013

Het was ook alleen een vraag, ik heb niet zoveel verstand van javascript.

Ja, ik ken deze maar hier is de layout lelijk van plus dat als hij de tekst laat zien er op de knop nog steeds show staat.
De mijne http://mijncentjes.nl/viewtopic.php?f=4&t=6 vind ik mooier, ik zou alleen graag hebben dat hij niet in een klap open schiet.
Verder vind ik hem prima.

csshunter · 22 jan 2013

Hoi hanna,
Als je kans ziet om dit in de <head> te krijgen:

HTML:

<script type="text/javascript">
        $("document").ready(
           function()
           {
              $("input.changevalue").toggle(
                  function()
                 {
                    $(this).val('Sluit hele artikel');
                 },
                 function()
                 {
                    $(this).val('Lees hele artikel');
                 }
              );
           }
        );
</script>

... en dit als format voor de html te droppen:

HTML:

<div style="padding: 3px; border: 1px inset #666666; font-size: 1em;">
	<div class="morebox" style="border: 1px inset #999999; margin-bottom: 3px; font-size: 0.75em; display: block;">
		<div style="text-align: center;">
			<input type="button" class="changevalue" value="Lees hele artikel" 
			style="font-size: 12px; margin: 3px 0; padding:0px;" 
			onclick="$(this).parents('.morebox').find('.content').toggle('slow');">
		</div>
		<div class="content" style="display: none; margin-top: 10px; text-align: left; margin-left: 5px;">
			<hr />
			<span style="font-weight: bold">“Iedere HEAO MER-muts</span> die een cursus volgt mag zich bewindvoerder noemen. 
			En dat is dan ook wat je zult aantreffen: een 25-jarige schoolverlater die jou gaat vertellen dat je het allemaal 
			niet zo slim hebt aangepakt. Tien tegen één dat ze Miranda of Lonneke heet en dochter is van een apotheker – iemand 
			die afgestudeerd is en toch winkelier is geworden (vrij naar Youp). En Miranda heeft gekozen voor HEAO MER 
			omdat ze “daar alle kanten mee op kan”. En dat blijkt handig voor Miranda als ze na een half jaar uiteindelijk toch 
			zwicht voor de onmetelijke status en Toyota Yaris van de zaak die het vak van TempoTeam intercedente met zich mee 
			brengt. <br />
			<br />
			enz.
		</div>
	</div>
</div>

... dan zou dit het resultaat moeten worden:

Test: cntjes-nw.htm

Komt dat in de buurt?

Met vriendelijke groet,
CSShunter (even op jacht in het jQuery-struikgewas

)

hanna · 22 jan 2013

Ha CssHunter,

het werkt zoals ik bedoelde, alleen verandert hij de knoptekst niet.

De code in de head staat er en onderstaande in de html.

Code:

<div style="padding: 3px; border: 1px inset #666666; font-size: 1em;">
    <div class="morebox" style="border: 1px inset #999999;  font-size: 0.75em; display: block;">
        <div style="text-align: right;">
            <input type="button" class="changevalue" value="Lees hele artikel" 
            style="font-size: 12px; margin: 5px 5px 5px 0; padding:0px;" 
            onclick="$(this).parents('.morebox').find('.content').toggle('slow');">
        </div>
        <div class="content" style="display: none; margin-top: 1px; text-align: left; margin-left: 5px; padding: 0 5px 5px 5px;">
            <hr />
            <span style="font-weight: normal">{TEXT}
        </div>
    </div>
</div>

http://mijncentjes.nl/viewtopic.php?f=4&t=6

csshunter · 22 jan 2013

Hoi Hanna,
Mooi, dat is al halverwege.
Maar ik zie het stukje javascript dat de wisseling van de knoptekst verzorgt (zoals in reactie #11) niet in de <head> van de pagina staan (en het staat ook niet in één van de externe javascripts).
Als die functie er niet is, kan de knoptekst niet veranderen.

Met vriendelijke groet,
CSShunter

hanna · 22 jan 2013

Ja, ik zie het maar snap er niets van, als ik de overall_header.html download, zit het er netjes in, kijk ik in de bron dan is het er niet.

csshunter · 22 jan 2013

Aha...
Ik zie in die overall_header.html staan:

HTML:

<script type="text/javascript">
    $("document").ready(
       function()
       {
          $("input.changevalue").toggle(
             function()
             {
                $(this).val('{L_COLLAPSE_VIEW}');
             },
             function()
             {
                $(this).val('{L_EXPAND_VIEW}');
             }
          );
       }
    );
</script>

en niet:

HTML:

<script type="text/javascript">
        $("document").ready(
           function()
           {
              $("input.changevalue").toggle(
                  function()
                 {
                    $(this).val('Sluit hele artikel');
                 },
                 function()
                 {
                    $(this).val('Lees hele artikel');
                 }
              );
           }
        );
</script>

D.w.z. er wordt gewisseld tussen de oude namen op de knop (uit de demo), maar die zijn nu aangepast. Die moeten in elk geval nog even in de Nederlandse knop-namen omgezet worden.

Maar ... zoals het nu is, zouden de teksten {L_COLLAPSE_VIEW} en {L_EXPAND_VIEW} moeten verschijnen op de knop (even lokaal uitgeprobeerd: inderdaad), en dat gebeurt ook niet.

1.
Dat zou misschien aan de accolades er in kunnen liggen, als die in het phpbb-systeem een speciale betekenis hebben (geen idee). Dan zou het met de NL namen goed moeten gaan.

2.
Andere mogelijkheid: ik heb geen "cdata" verpakking in het scriptje staan, wat eigenlijk wel moet; misschien is dat een struikelpunt. Dan wordt het:

HTML:

<script type="text/javascript">
// <![CDATA[
        $("document").ready(
           function()
           {
              $("input.changevalue").toggle(
                  function()
                 {
                    $(this).val('Sluit hele artikel');
                 },
                 function()
                 {
                    $(this).val('Lees hele artikel');
                 }
              );
           }
        );
// ]]>
</script>

Helpt dat?

Met vriendelijke groet,
CSShunter

hanna · 22 jan 2013

Ik heb het erin gezet, maar ik zie het niet ????

Ik heb het ook bij het phpbb forum gevraagd, hoe dit kan.

csshunter · 22 jan 2013

Ik heb het erin gezet

Er staat nog steeds de {L_COLLAPSE_VIEW} en de {L_EXPAND_VIEW} in het javascript van de mijncentjes.nl/overall_header.html, en de cdata-tags zie ik ook niet.

Hoe kan dat nou?

Is ie wel goed geüpload?

csshunter · 22 jan 2013

PS:
Je kan ook altijd "Lees hele artikel (Aan/Uit)" of zoiets op de knop zetten, dan ben je mooi van alles af. :d

hanna · 22 jan 2013

Ja, is misschien ook een idee, ik wacht nog even af wat ze bij het bb forum zeggen, je hoort het nog.

hanna · 23 jan 2013

Het werkt, je kon de cache ook nog legen in phpbb zelf, dat had ik dus nog niet ontdekt.

$(this).val('Lees hele artikel'); dit haalt hij niet uit de head.

$(this).val('Sluit hele artikel'); dit haalt hij wel uit de head.

Je bent hartstikke bedankt. CssHunter

spoiler

Gebruiker

Gebruiker

Gebruiker

Meubilair

Verenigingslid

Gebruiker

Gebruiker

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Meubilair

Gebruiker

Gebruiker

Wij waarderen jouw privacy