Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

hoogte div veranderen dmv link

Anoniem
Ger
6 antwoorden
  • Beste designers,

    Ik vroeg me af of het mogelijk was om de hoogte van een div groter te maken dmv een link.
    Met andere woorden als ik op bijvoorbeeld 'lees meer' klik dat de div de rest van de teks weergeeft onder het stukje dat er al stond.

    Het is dan de bedoeling dat de div's er onder dan ook automatisch naar beneden schuiven.

    Is dit mogelijk met CSS? of moet ik daar javascript oid voor gebruiken?

    Ik hoop dat jullie begrijpen wat ik bedoel!

    gr.
  • Dat soort dingen kan je eigenlijk alleen met javascript doen. Normaal gesproken zou ik zeggen ga hier kijken, maar het lijkt erop alsof ze met de site bezig zijn. De demo's zijn offline, en daar kan je toch wel het beste zien wat MooTools allemaal kan (en kan je ook beter afkijken als je javascript niet al te best beheerst, zoals moi).

    Er zal vast ook een makkelijke manier zijn om het te doen, via een mousedown attribute in je link maar daar is mijn javascript kennis niet voor toereikend. Je kan het vragen in het Webprogrammeren & scripting forum onderdeel, of wachten op iemand die meer javascript kennis heeft.
  • Zoiets moet lukken, heb dat als hide-functie op een forum:
    [code:1:d2b38b898a]<div style="display:inline">
    <a href="javascript: void(0);" onClick="var spoiler = this.parentNode.getElementsByTagName('dd')[0];
    if ( spoiler.style.display == 'none' ) {
    spoiler.style.display = ''; this.innerHTML = 'Verberg';
    }
    else {
    spoiler.style.display = 'none'; this.innerHTML = 'Verborgen inhoud';
    };
    ">Verborgen inhoud</a>
    <dd style="display: none;border:solid 1px;border-color:#C1CEF3;background-color:#E0E5F5;margin:3px">
    HETGEEN JE WIL VERBERGEN
    </dd>
    </div>[/code:1:d2b38b898a]
    Enige nadeel is dat IE6 (7 ben ik even niet zeker) het niet pikt als je dit gaat nesten, dus een uitklapding binnen een ander uitklapding.
  • Nou ja, ik dacht dat het misschien niet verkeerd was om mijn javascript kennis een beetje op te vijzelen en heb nu dus na wat proberen en zoeken op het net (wat jij natuurlijk ook wel had kunnen doen) mijn javascript kennis een beetje uitgebreid en onderwijl op een redelijke oplossing gekomen, al zeg ik het zelf. Als er een beter manier is om het te doen moet iemand anders maar een voorstel doen.
    [code:1:21a5b416b4]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>bla</title>
    <script type="text/javascript">
    function changeHeight(height)
    {
    elem = document.getElementById("div1");
    elem.style.height = height;
    }
    </script>
    </head>

    <body>
    <div id="div1" style="border:1px solid red;"><p id="para1">
    <a href="javascript:void(null)" onmousedown="changeHeight('200px')">Maak de div 300px hoog</a>,
    <a href="javascript:void(null)" onmousedown="changeHeight('auto')">maak ongedaan</a> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut libero libero, dignissim nec, scelerisque vulputate, cursus eget, ligula. In porttitor metus ut neque. Phasellus elementum lacus vitae diam. Ut congue sodales magna. Sed eu magna. Sed congue. Sed mattis quam quis quam. Pellentesque nec ipsum. Aliquam elementum metus a est. Donec fermentum nisi ac nibh. Donec dignissim congue mauris. Curabitur est lacus, rutrum sed, adipiscing et, dictum id, erat. Praesent elit ipsum, fringilla ut, egestas vitae, vulputate ut, nunc.</p>
    </div>
    </body>
    </html>[/code:1:21a5b416b4]

    [i:21a5b416b4]edit: Ger is me voor, met weer iets heel anders dan ik in ged88 had…(en ik vindt zijn oplossing eigenlijk een leukere)[/i:21a5b416b4]
  • Super!
    Dit is precies wat ik zocht… bedankt Ger (en Drewster uiteraard ook voor het meedenken)!

    Had ook wel iets gevonden maar dat was het naar mijn idee toch net niet….
  • [quote:989e0cf703="dropkick"]…(en Drewster uiteraard ook voor het meedenken)…[/quote:989e0cf703]Ja ja, ik heb weer voor niets zitten zoeken… :cry:

    Het is misschien iets praktischer om Ger's oplossing in een functie in de head te stoppen dan heb je niet bij iedere div oid waar dit voor komt dat lapje javascript.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.