KOMPOOS.NL

more...

home » css » more.html

sitemap


voorbeeld van more…

een heleboel tekst

Maar niet genoeg ruimte om alles weer te geven

meer… hier is de rest van de tekst

Klik ergens buiten deze tekst om de "more...box" weer te sluiten. Je kan zo veel tekst als je wilt hier "kwijt".
De procedure lijkt heel eenvoudig, maar dat zit toch wel even iets anders in elkaar... In IE en Mozilla is het een koud kunstje om te "hoveren" wat je maar wilt. In Opera wordt dat al iets lastiger, en in Safari en Chrome is het een complete ramp. De meeste website-ontwikkelaars "laten het maar voor wat het is" (en hopen dat je hun "kunstwerkjes" alleen maar in IE zal bekijken...). Op de kompoos hebben we een goede poging gedaan om alles écht cross browser te krijgen. Dat is bijna gelukt. In Chrome en Safari hebben we een achtergrondkleur toegevoegd om een "weigerende" focus/active te maskeren. Als webkit in de toekomst het "gehover" wat bijschaaft, zal de procedure perfect zijn (Zo, er is nu wel genoeg tekst toegevoegd om de "meer..." wat inhoud te geven...).

uitleg more… procedure

Plaats de onderstaande stylesheet en de html-code respectievelijk in de head-sectie en body-sectie van jouw pagina. Alles in de class "more", wat tussen de <em></em> geplaatst wordt, zal bij een klik op "meer..." getoond worden.

stylesheet "more... -procedure"


<style type="text/css">
        .begin-more{
                font-size:120%}
        .more{
                width:350px;
                padding:1em;
                border:1px solid #808080;
                float:left}
        .clear-both{
                clear:both}
        .verberg_meer{
                color:#808080;
                background:inherit;
                text-decoration:none;
                outline-style:none}
        .verberg_meer em{
                display:none;
                font-style:normal;
                margin-top:-1em;
                padding:0 12px 12px 3px}
        .verberg_meer:focus,.verberg_meer:active{
                text-decoration:none;color:transparent}
        .verberg_meer:active span,verberg_meer:focus span,
        .webkit-more-fix:active,.webkit-more-fix:focus{
                visibility:hidden}
        .verberg_meer:active em,.verberg_meer:focus em{
                display:block;
                background:transparent;
                font-style:normal;
                color:#444;
                cursor:default}
        .chrome-more-fix:hover,.chrome-more-fix:focus,.chrome-more-fix:active{
                display:block;
                background:#aaa;
                color:#444;
                font-style:normal}
</style>

html-code voor het "meer... -gebeuren"


<div class="more">
        <h4>een heleboel tekst</h4>
        <p>
                Maar niet genoeg ruimte om alles weer te geven
        </p>
        <div>
                <a class="verberg_meer" href="#more">
                        <span class="webkit-more-fix">meer…</span>
                        <em class="chrome-more-fix">
                                <b class="begin-more">hier is de rest van de tekst</b>
                        </em>
                </a>
        </div>
</div>
<div class="clear-both"></div>