Lees meer

Status
Niet open voor verdere reacties.
K

KREEFTMEIJER

Gebruiker
Lid geworden
14 sep 2010
Berichten
188
Ik ben op zoek naar een lees meer script en vond het volgende
van 25 maart 2008 van erikBooy007.

Dhtml



Wat je ook kunt doen is het volgende:

Je zet je verborgen gedeelte in <div>-tags.

Bijv zo:



HTML Code:
1 <div id="hiddenPart" style="display: none">

2 Hier je verborgen content

3 </div>





Voor je link gebruik je dan:


HTML Code:
1

<a href="javascript: showHide('hiddenPart')">Lees Meer...</a>




en dan nog een heel klein stukje javascript:



HTML Code:
1
2
3
4
5
6
7
8

<script language="JavaScript">
function showHide(target){
if(document.getElementById(target).style.display = 'none'){
document.getElementById(target).style.display = 'block';
} else {
document.getElementById(target).style.display = 'none';
}
</script

Ik krijg het niet werkend op www.artediamici.nl/nieuws.php

Groet,
Henk
 
Hoi Henk,
Het javascript hoort geen language="JavaScript" te hebben, maar type="text/javascript".
Het = teken in de if (...) regel moet een dubbele == zijn, anders werkt het niet.
Het script kan het beste helemaal onderaan de pagina worden gezet, vlak voor de </body></html> (dat maakt de pagina sneller).
In de link "Lees meer" staat nu:
HTML: 
...
<a href="&lt;a href=&quot;javascript: showHide('hiddenPart')&quot;&gt;Lees Meer...&lt;/a&gt;" target="_parent">Lees Meer...</a>
Daar zal met plakken en knippen iets mis zijn gegaan.
Het moet zijn:
HTML: 
...
<a href="#" onclick="showHide('hiddenPart');return false;">Lees Meer...</a>
De "return false" betekent hierbij dat als de javascript-functie is uitgevoerd, niet ook nog eens de link zelf wordt uitgevoerd (in dit geval een loze bladwijzer).

======
Als er veel blokjes hidden tekst op een pagina moeten komen, kan je het ook helemaal automatiseren.
  • In de html komt steeds een class voor de LeesMeer-link en de LeesMeer-tekst:
    HTML: 
    ...
<p>Tekst 1</p>
<div class="meer">Lees meer tekst 1</div>
<div class="meerText">
	<p>Dit is de de hidden tekst als vervolg op tekst 1.<br />
	Lorem ...</p>
</div>
...
een eind verderop:
...
<p>Tekst 2</p>
<div class="meer">Lees meer tekst 2</div>
<div class="meerText">
	<p>Dit is de de hidden tekst als vervolg op tekst 2.<br />
	Nu een heel andere lorem ...</p>
</div>
...
enz.
  • Een bijbehorend javascript pikt steeds die twee classes er uit, maakt zelf de links aan, en zet daar een show/hide functie op.
  • Het LeesMeer-blokje kan ook voorzien worden van een eigen sluitknop, dan zijn er twee manieren om een blokje te sluiten.
  • Alle LeesMeer's kunnen onafhankelijk van elkaar bediend worden.
Een voorbeeld: grmc-model-15h.htm
Het javascript staat in de broncode, evenals de er op losgelaten css.
(Verder is dit work in progress: nog niet af.)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo Hunter,

Ik heb het werkend met show-hide.htm
Maar met meerdere blokjes lukt het niet, ik krijg

<p>Tekst 1</p>
<div class="meer">Lees meer tekst 1</div>
Klik om te vergroten...

zichtbaar op de site.

Waar vind ik het javascript en css, kan het niet vinden in de broncode.

Groet,
Henk
 
Hoi Henk,
Het javascipt en de css voor de automatische meer-functie staat niet in de broncode van show-hide.htm, maar in die van grmc-model-15h.htm:
[JS]<script type="text/javascript">
//<![CDATA[
var allDiv=document.getElementsByTagName('div');
for (var i=0; i<allDiv.length; i++){
if (allDiv.className=="meer" && allDiv[i+1].className=="meerText"){
allDiv.id='meer'+i;
var thisMeer=document.getElementById('meer'+i);
thisMeer.innerHTML='<a href="#" onclick="toggleMeer('+i+'); return false"><img src="images/gbmc-meer-pijltje.png" alt="">'+thisMeer.innerHTML+'</a>';
thisMeer.getElementsByTagName('img')[0].style.display='inline';
thisMeer.style.padding=0;
thisMeer.style.border=0;
thisMeer.getElementsByTagName('a')[0].style.padding='2px 5px';
thisMeer.getElementsByTagName('a')[0].style.border='1px solid #C7E7F1';

allDiv[i+1].id='meerText'+i;
var thisMeerText=document.getElementById('meerText'+i);
thisMeerText.innerHTML='<p class="minder" id="minder'+i+'"><a href="#" onclick="toggleMeer('+i+'); return false"><img src="images/gbmc-minder-pijltje.png" alt="">Sluit</a></p>'+thisMeerText.innerHTML;
thisMeerText.style.display='none';
}
}

function toggleMeer(n){
var thisMeer=document.getElementById('meer'+n);
var thisMinder=document.getElementById('minder'+n);
var thisMeerText=document.getElementById('meerText'+n);
if (thisMeerText.style.display=='none'){
thisMeerText.style.display='block';
thisMeer.getElementsByTagName('img')[0].style.display='none';
thisMeer.getElementsByTagName('a')[0].style.color='#247FCC';
thisMeer.getElementsByTagName('a')[0].style.background='#FAFAFA';
thisMeer.getElementsByTagName('a')[0].style.cursor='default';
}
else {
thisMeerText.style.display='none';
thisMeer.getElementsByTagName('img')[0].style.display='inline';
thisMeer.getElementsByTagName('a')[0].style.color='';
thisMeer.getElementsByTagName('a')[0].style.background='';
thisMeer.getElementsByTagName('a')[0].style.cursor='';
}
}
//]]>
</script>[/JS]
En de css:
Code: 
.meer {
	margin: 20px 0 10px 0;
	padding: 2px 5px;
	color: #247FCC;
	background: #FAFAFA;
	border-radius: 5px;
	font-size: .85em;
	font-weight: bold;
	border: 1px solid #C7E7F1;
	display:inline-block;
	}
.minder {
	margin: 3px 0 5px 0;
	padding: 0;
	text-align: center;
	}
.meer a,
.minder a {
	margin-top: 3px;
	color: #247FCC;
	background: #FAFAFA;
	text-decoration: none;
	border-radius: 5px;
	outline: 0;
	}
.minder a {
	padding: 2px 5px;
	border: 1px solid #C7E7F1;
	font-size: .85em;
	font-weight: bold;
	}
.meer img,
.minder img {
	width: 16px;
	height: 16px;
	margin: -3px 5px 0 0;
	vertical-align: middle;
	}
.meer img {
	display: none; /* voor noscript */
	margin: 0 5px 0 0;
	}
.meer a:hover,
.meer a:focus {
	color: #C66302;
	background: #FFFFC0;
	}
.minder a:hover,
.minder a:focus {
	color: #C66302;
	background: #FFFFC0;
	}
.meerText {
	margin-top: -1em;
	padding: 0 5px;
	background: #FFFDF5;
	border: 1px solid #C7E7F1;
	border-radius: 5px;
	}
En de meer- en minder-pijltjes zitten hier:

In dit voorbeeld zijn de stijl van de tekst- en achtergrondkleuren, van de hoverkleuren, de pijltjeskleuren enz. afgestemd op de betreffende site.
Dat kan natuurlijk naar eigen smaak geheel anders worden.

Verder is het script zo gemaakt, dat je toch de uitklappers kan zien als javascript uit staat. Dan staan namelijk alle uitklappers vanzelf geopend. De pijltjes meer/minder en de klikmogelijkheden daarop zijn er dan niet: want zonder javascript werken die toch niet.
Op deze manier zijn de uitklap-teksten ook toegankelijk voor mensen met een pure tekstbrowser of een voorlees-browser, en kan de Google-bot (die ook geen javascript kan toepassen) toch de woorden en eventuele links in de uitklappers meenemen in de indexatie van de pagina.

Met vriendelijke groet,
CSShunter
 
Hoi Hunter,

Java script en CSS op de plaats gezet, maar geen resultaat.

Groet,
Henk
 
Hoi Henk,
Ja, dat komt omdat de oude versie met:
HTML: 
<a href="#" onclick="showHide('hiddenPart');return false;">Lees Meer...</a>
<div id="hiddenPart" style="display: none">
... er ook nog in zit.
De showHide-functie bestaat in het nieuwe javascript niet meer, en het "hiddenPart" wordt ook op een andere manier geregeld (dat staat nu op {display: none} en dan kan er niets onder getoond worden).
Deze dingen moeten er dus uit, en dan draait het script in principe:

Vervolgens moet, zoals gezegd, de opmaak nog aangepast worden aan deze site.
Dat zou bv. deze kant op kunnen gaan:

Met vriendelijke groet,
CSShunter
 
Hallo Hunter,

Hartelijk dank, het werkt allemaal voortreffelijk, alleen lukt het mijn niet de achtergrondkleur van het vakje MeerText te veranderen.
Kijk vermoedelijk ergens overheen.

Groet,
Henk
 
Om geen nieuw extern stylesheet te hoeven maken, had ik aanvullende styles in de <head> toegevoegd.
De kleur van de .meerText zit daardoor op twee plaatsen: in de nieuws.css en ook op de pagina zelf in de <head>.
De laatste gaat de eerste overrulen, en dat is de boosdoener:
Code: 
.meerText {
    ...
    background: #005D75; /* donkergroen */
    }
Als alles naar wens is gemaakt, kunnen de styles uit de <head> verhuizen naar het externe stylesheet. Dan staat alles mooi bij elkaar en is geen verwarring meer mogelijk.
 
Alles is in orde en alles verhuids naar de externe stylesheet.

Hartelijk dank, weer heel veel geleerd.

Groet,
Henk
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan