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

Webprogrammeren & scripting

[JS] Style.left / Style.top lijkt niet te werken...

carlobernardini
2 antwoorden
  • Ik heb het volgende script inelkaargeknutseld net:
    [code:1:4ed694de98]
    function EnlargeThisImage(ImgSrc,ImgDestination,ImgId) {

    function laatZien(x) {
    layer = document.getElementById(x);
    if(layer.style.display == 'block') {
    document.getElementById(x).style.display = 'none';
    }
    else{
    document.getElementById(x).style.display = 'block';
    }

    }
    var destination = ImgDestination;
    var ImgSrc = ImgSrc.replace("thumbs/","");
    var y = Math.round( ((parseInt(screen.availHeight)/2) - (parseInt(document.getElementById(ImgId).height)/2)) );
    var x = Math.round( ((parseInt(screen.availWidth)/2) - (parseInt(document.getElementById(ImgId).width)/2)) );
    document.getElementById(destination).style.top = y;
    document.getElementById(destination).style.left = x;
    laatZien('shadowMedia');
    laatZien(destination);
    document.getElementById(destination).innerHTML = "<img src='"+ImgSrc+"' />";

    }
    [/code:1:4ed694de98]
    De idee ervan is dat wanneer je op een bepaalde afbeelding drukt de functie EnlargeThisImage(ImgSrc,ImgDestination,ImgId) wordt aangeroepen wat twee divs opent. De "destination" div is het belangrijkste, want daar komt de afbeelding in terecht. Het probleem is alleen dat ik die div in het midden van het scherm wil centreren.
    Nu heb ik dat opgelost door javascript de hoogte en breedte van het scherm te laten meten (availHeigt..) en dat te delen door twee, min de helft van de breedte / hoogte van het plaatje. Dat lijkt goed te werken aangezien de variabelen x en y keurig een waarde toegewezen krijgen. Wanneer ik deze waarde alleen probeer toe te passen met document.getElementById(destination).style.top = y; gebeurt er niks en blijft de div op 0px links en 0px top zitten, dus geen afstand van het scherm…

    De code van de divs:
    [code:1:4ed694de98]
    <div style="position:absolute; top:0px; left:0px; z-index:0; display:none; width:100%; height:100%; background-image:url(art/shadow.gif);" id="shadowMedia">
    <div id="imgenlarge" style="display:none; position:absolute; cursor:pointer; border:5px solid #CCCCCC;" onclick="showall('shadowMedia'),showall('imgenlarge')">
    </div>
    </div>
    [/code:1:4ed694de98]

    Wat vergeet ik / doe ik fout?

    Alvast bedankt!
  • Je moet een eenheid vermelden bij die properties. Dus bijvoorbeeld
    [code:1:30387e0a0e]bla.style.top = x+ 'px';[/code:1:30387e0a0e]

    Als bonus een tip ;)
    Vermeld bij parseInt altijd de radix. Dat voorkomt fouten.

    [quote:30387e0a0e]If no radix argument is provided or if it is assigned a value of 0, the function tries to determine the base. If the string starts with a 1-9, it will be parsed as base 10. If the string starts with 0x or 0X it will be parsed as a hexidecimal number. If the string starts with a 0 it will be parsed as an octal number. (Note that just because a number starts with a zero, it does not mean that it is really octal.) [/quote:30387e0a0e]

    Voorbeeld ter illustratie:
    [code:1:30387e0a0e]
    <script type="text/javascript">
    var x = '010';

    document.write (parseInt(x)); // 8
    document.write ('<br>');
    document.write (parseInt(x, 10)); // 10
    </script>
    [/code:1:30387e0a0e]

Beantwoord deze vraag

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