4 berichten aan het bekijken - 1 tot 4 (van in totaal 4)
  • Q:

    Bijdrager
    Sver
    1 november 2016 om 21:15

    Probleem jquery in verband met div

    Hallo, ik heb een webpagina met 3 divs (kaders) van 60px width, maar ik zou die moeten kunnen vergroten naar 100px als ik er met de muis over ga door te werken met de width functie, maar ik weet niet of dit correct is? (in de div is ingesteld width: 60px) Het 2de punt de kaders moeten hun gewone (60px) terug aannemen van zodra ik er buiten ga met mijn muis.

    $( “div” ).on( “mouseover”, function() {
    $( this ).css({
    width: function( index, value ) {
    return parseFloat( value ) * 2;
    }
    });
    });

    Samengevat: mijn kaders wil ik breder maken (100px) als ik met muis erover ga, maar als ik buiten de kaders zit met de muis moeten de kaders terug hun vorig formaat aannemen (60px).


    Bijdrager
    misterfrontend
    1 november 2016 om 21:52

    Je kan de mouseout functie gebruiken.
    Zo zet je de waarde op 60 pixels als je met de muis uit het div gaat.

    Maar ik denk dat je dit beter met CSS kunt oplossen.
    Zoiets?

    div {
    width: 60px;
    }

    div:hover {
    width: 100px;
    }


    Bijdrager
    misterfrontend
    1 november 2016 om 21:53

    Linkje naar voorbeeld van de jquery


    Bijdrager
    Sver
    2 november 2016 om 15:09

    Ok, bedankt dat werkt!

    Ik heb 3 divs met alle drie een andere kleur (Blauw, groen, Rood)

    Nu zou ik graag als ik op een div klik, in de console het volgende willen zien staan:

    event type is :click

    Target is: [object HTMLDivElement]

    target html is: Blauw

    (de target html moet zich aanpassen, afhankelijk of ik op blauw, groen of rood klik)

    <style>
    div {
    margin: 10px;
    padding: 12px;
    border:2px solid #666;
    width: 60px;
    }

    </style>
    </head>
    <body>

    <div style=”Background-color: #0000FF” target=”Blauw”>
    Blauw</div>
    <div style=”Background-color: #04B404″ target=”Groen”>
    Groen
    </div>
    <div style=”Background-color: #DF0101″ target=”Rood”>
    Rood
    </div>

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

    <script>
    $(document).ready(function(){
    $(‘div’)
    .click (function(){
    console.log(‘Event type is: click’);
    })
    .click(function (){
    console.log(target);
    })
    .click(function (){
    console.log (‘target html is:Groen’)

    })

    });
    </script>

4 berichten aan het bekijken - 1 tot 4 (van in totaal 4)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.