CODEWITHSUNDEEP
javascriptjqueryhtml
Jack
Jack

Reputation: 15872

Moving an element using javascript

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

Upvotes: 1

Views: 659

Answers (1)

Daveo
Daveo

Reputation: 19872

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); 



    });

Upvotes: 2

Related Questions