Moving an element using javascript

Question

I've built a small Javascript application which can move an SVG element, i've now tried to rebuild it using image elements for the controls rather than SVG shapes.

Javascript + jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">         
    $(document).ready(function(){
        var panning = false;
        var direction;

        function startPan(dir){
            panning = true;
            direction = dir;
        }  

        function stopPan(){
            panning = false;
        }

        function pan(){  
            var item = $("#moveme"); 
            var x = item.position().left; 
            var y = item.position().top;            
            var amount = 1;
            if(direction == "left"){
                x -= amount;
            } else if (direction == "right"){
                x += amount ;
            } else if (direction == "up"){
                y -= amount;
            } else if (direction == "down"){
                y += amount;
            }

            item.css("left", x);
            item.css("top", y);
        }

        function panLoop(){          
            if(panning == true){      
                pan();
            }
        }
        setInterval(panLoop,100);
    });
</script>

<style>
    .button:hover{
        opacity: 0.5;
    }

    .button{
        position: absolute;
    }

    .compass{
        position: absolute;
    }

    div.pan{
        position: absolute;
        width: 90px;
        height: 90px;
    }

    #moveme{
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<div class="pan">
    <img class="button"
         style="top: 0px; left: 30px;"
         src="images/tu.png"
         onmouseover="startPan('up')"
         onmouseout="stopPan()" />
    <img class="button" 
         style="top: 30px; right: 0px;"         
         src="images/tr.png"
         onmouseover="startPan('right')"
         onmouseout="stopPan()" />     

    <img class="button" 
         style="bottom: 0px; left: 30px;"         
         src="images/td.png"
         onmouseover="startPan('down')"
         onmouseout="stopPan()" />       

    <img class="button" 
         style="top: 30px; left: 0px;"         
         src="images/tl.png"
         onmouseover="startPan('left')"
         onmouseout="stopPan()" />

    <img class="compass"
         style="top: 21px; left: 21px;"
         src="images/c.png"/>

</div>

<div id="moveme">
    HELLo
</div>

However it's not calling the mouseover event, and I can't figure out why....

Here is the version using SVG:

Working version using Javascript + SVG

Working version: Working without SVG

Isn't case important here? i.e. onMouseOver? Otherwise maybe try it on a div wrapping the img tags, or even use divs only and set the images as their back-ground image. — Matt Lacey
– Matt Lacey, Commented Aug 17, 2011 at 23:45
The case of event handlers in this case does not matter. HOWEVER, the OP should be using event handlers added by jQuery, not added in the markup, IMO. — Jared Farrish
– Jared Farrish, Commented Aug 17, 2011 at 23:47

Daveo · Accepted Answer · 2011-08-18 00:02:27Z

2

See here http://jsbin.com/ecihij/edit#source

When you write your functions you do not need to put them inside the jQuery document Ready section

Jarred is right you should also be using jQuery event handers see updated example here http://jsbin.com/ecihij/2/edit.

And code below

HTML

<!DOCTYPE html>
<html>
<head>


<style>
    .button:hover{
        opacity: 0.5;
    }

    .button{
        position: absolute;
    }

    .compass{
        position: absolute;
    }

    div.pan{
        position: absolute;
        width: 90px;
        height: 90px;
    }

    #moveme{
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<div class="pan">


    <p class="button bup" style="top: 0px; left: 30px;" > up</p>

    <p  class="button bright" syle="top: 30px; right: 0px;" >right </p>  


    <p  class="button bdown" style="bottom: 0px; left: 30px;">down </p>     

    <p class="button bleft" style="top: 30px; left: 0px;" >left </p>

    <p  class="compass" style="top: 21px; left: 21px;">compass </p>

</div>

<div id="moveme">
    HELLo
</div>
</body>
</html>

JAVASCRIPT

         var panning = false;
        var direction;

function startPan(dir){
            panning = true;
            direction = dir;
        }  

        function stopPan(){
            panning = false;
        }

        function pan(){  
            var item = $("#moveme"); 
            var x = item.position().left; 
            var y = item.position().top;            
            var amount = 1;
            if(direction == "left"){
                x -= amount;
            } else if (direction == "right"){
                x += amount ;
            } else if (direction == "up"){
                y -= amount;
            } else if (direction == "down"){
                y += amount;
            }

            item.css("left", x);
            item.css("top", y);
        }

        function panLoop(){          
            if(panning === true){      
                pan();
            }
        }

     setInterval(panLoop,100);

$(document).ready(function(){


  $('.bup').mouseover(function(){  startPan('up');  }).mouseout(stopPan); 
  $('.bright').mouseover(function(){  startPan('right');  }).mouseout(stopPan); 
  $('.bleft').mouseover(function(){  startPan('left');  }).mouseout(stopPan); 
  $('.bdown').mouseover(function(){  startPan('down');  }).mouseout(stopPan); 



    });

edited Aug 18, 2011 at 0:02

answered Aug 17, 2011 at 23:51

Daveo

20k10 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jared Farrish Over a year ago

Please put the relevant code within your answer, not just in a link. :)

Matt Lacey Over a year ago

I think he's on the money here though, move them out of that part and I reckon you'll be good to go.

Jack Over a year ago

Hey i've uploaded it as an example, and so that it's available to download if you like. jtbrown.me.uk/assets/unrelated/pan/pan.html

Collectives™ on Stack Overflow

Moving an element using javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related