Question

I’m using UIZE JavaScript framework to move image elements inside a div. This is functioning properly.

I would like to have this functionality do two other things.

1. Automatically reset the position of the image in case the user drags the image out of bounds or not allow the user to drag it out of bounds at all.

2. If the user drags the image to a predefined location “the green box” here on sample page: http://www.marklaurel.com/sample.php
   I would like to display a div that asks the user if they would like to visit the website of the corresponding image.

I have this function that is currently triggered by a button:

   <script type="text/javascript">
    function snapBack()
    {
        with (document)
       {
        getElementById('logoUize').style.left = '133';
        getElementById('logoUize').style.top = '6';
        getElementById('logoPsd').style.left = '240';
        getElementById('logoPsd').style.top = '60';
        getElementById('logoAfx').style.left = '240';
        getElementById('logoAfx').style.top = '206';
        getElementById('logoMaya').style.left = '130';
        getElementById('logoMaya').style.top = '237';
        getElementById('logoHtml5').style.left = '22';
        getElementById('logoHtml5').style.top = '194';
        getElementById('logoCss3').style.left = '22';
        getElementById('logoCss3').style.top = '48';
    }
     }
     </script>

However, I get this warning from the browser console:

Warning: Error in parsing value for 'left'.  Declaration dropped.
Source File: http://marklaurel.com/sample.php
Line: 0

Warning: Error in parsing value for 'top'.  Declaration dropped.
Source File: http://marklaurel.com/sample.php
Line: 0

May I please get some help in getting this to work?

Answer 1

133 isn’t a valid CSS position. You want 133px instead, or another unit such as 133em.

(Don’t worry, I made this mistake a few years ago and then wondered why my site only worked in IE :P)