Update image position

Rahulk1 · September 8, 2021, 10:53am

On each click on the button, image position would change. Image position must be predefined.
Like on the first click image position translate to a pre-defined position, on second click image position translate or move to a different pre-defined position & so on.

TechnoBear · September 8, 2021, 10:54am

Please post your code to enable others to assist.

Rahulk1 · September 8, 2021, 10:55am

There is no code to display. just have to use this functionality in my code.

TechnoBear · September 8, 2021, 10:57am

And I’m asking you to show us your code, so we can see what you are working with and understand what you are trying to achieve.

Rahulk1 · September 8, 2021, 11:01am

Please refer to tag id=“change_loc” or class=“btn”

`<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.css" integrity="sha512-UoT/Ca6+2kRekuB1IDZgwtDt0ZUfsweWmyNhMqhG4hpnf7sFnhrLrO0zHJr2vFp7eZEvJ3FN58dhVx+YMJMt2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.js" integrity="sha512-EmZuy6vd0ns9wP+3l1hETKq/vNGELFRuLfazPnKKBbDpgZL0sZ7qyao5KgVbGJKOWlAFPNn6G9naB/8WnKN43Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>

<div id="display">
<div id="gps_device_div" onkeypress="myFunction(event)"><img id="gps_device" src="img/gps2.png" alt="gps device"></div>
<div id="display_div"><br><br>
<p id="power_on">Powering On...</p>
<p id="detect_sig">Detecting Satellites....</p>
<img id="sig_img" src="img/signals.gif">
<p id="ob1">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Road Point A</p>
<p id="ob2">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Road Point B</p>
<p id="ob3">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Road Point C</p>
<p id="ob4">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point A</p>
<p id="ob5">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point B</p>
<p id="ob6">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point C</p>
<p id="ob7">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point D</p>
<p id="ob8">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Field Point </p>

</div>
<button id="in" class="bt" disabled onclick="In()">In</button>
<button id="out" class="bt" disabled onclick="out()">Out</button>
<button id="esc" class="bt" disabled onclick="esc()">Esc</button>
<button id="enter" class="bt" disabled onclick="enter()">Enter</button>
<button id="nav" class="bt" onclick="nav()">Nav</button>
<button id="menu" class="bt" onclick="menu()">Menu</button>
<button id="goto" class="bt" disabled onclick="Goto()">Goto</button>
<button id="power" class="bt" disabled onclick="power()">Power</button>
<img id="person" src="img/person4.png">
<button id="start" class="start" onclick="start()">Start </button>
<button id="change_loc" class="btn">Change Loc</button>
<button id="reset" class="reset" onclick="reset()">Reset</button>
</div>
<script src="js/main.js"></script>

</body>
</html>
`


pannellum.viewer('panorama-360-view', {
    "type": "equirectangular",
    "panorama": "https://i.ibb.co/42JSzBv/Screenshot-34.png",
    "autoLoad": true
})

function reset(){
    window.location.reload();
}
function power(){

        document.getElementById("power_on").style.display="inline";
        setTimeout(function(){ swal({position:'top-end', title:"Message",text:"Click on ENTER button to proceed",icon: "info",button: "ok",}) }, 300);
        document.getElementById("enter").disabled = false;
}
function enter(){

    
        document.getElementById("power_on").style.display="none";
        document.getElementById("detect_sig").style.display="inline";
    document.getElementById("sig_img").style.display="inline";
    setTimeout(function(){ swal({position:'top-end', title:"Message",text:"Signals from minimum four satellites are required.Click on IN button for observations",icon: "info",button: "ok",}) }, 1000);
    document.getElementById("in").disabled = false;
    
}
function start(){

    document.getElementById("person").style.display="inline";
    setTimeout(function(){ swal({title:"Message",text:"Click on POWER button on device to turn on GPS",icon: "info",button: "ok",position:"center",}) }, 500);
    document.getElementById("power").disabled = false;
}
function In(){

    document.getElementById("detect_sig").style.display="none";
    document.getElementById("sig_img").style.display="none";
    document.getElementById("ob1").style.display="inline";
    setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 1",icon: "success",button: "ok",}) }, 500);
    document.getElementById("goto").disabled = false;
}

    
    
function Goto(){

    document.getElementById("detect_sig").style.display="none";
    document.getElementById("sig_img").style.display="none";
    document.getElementById("ob1").style.display="none";
    document.getElementById("ob2").style.display="none";
    document.getElementById("ob3").style.display="none";
    document.getElementById("ob4").style.display="none";
    document.getElementById("ob5").style.display="none";
    document.getElementById("ob6").style.display="none";
    document.getElementById("ob7").style.display="none";
    document.getElementById("ob8").style.display="none";
    setTimeout(function(){ swal({title:"Success",text:"Observations are saved successfully!! ",icon: "success",button: "ok",}) }, 500);
    setTimeout(function(){ swal({title:"Message",text:"Click on change location ",icon: "success",button: "ok",}) }, 2500);
   /* document.getElementById("change_loc").disabled = false;*/

}
/*
function change_loc()
{
    var ch=1;
    switch(ch){

        case 1:{

            setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 2",icon: "success",button: "ok",}) }, 500);
            document.getElementById("person").style.transform="translate(-600px,-150px)";
            document.getElementById("ob1").style.display="none";
            document.getElementById("ob2").style.display="inline";
            ch++;
            break;
        }
        case 2:{

            setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 3",icon: "success",button: "ok",}) }, 500);
            document.getElementById("person").style.transform="translate(-40px,-280px)";
            document.getElementById("ob1").style.display="none";
            document.getElementById("ob2").style.display="none";
            document.getElementById("ob3").style.display="inline";
            ch++;
            break;
        }



    }

}*/
/*
function change_loc()
{
var clicks = 0;
if(clicks = 0)
{
    setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 2",icon: "success",button: "ok",}) }, 500);
    document.getElementById("person").style.transform="translate(-600px,-150px)";
    document.getElementById("ob2").style.display="inline";
}
else if(clicks = 1)
{

    setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 3",icon: "success",button: "ok",}) }, 500);
    document.getElementById("person").style.height="80px";
    document.getElementById("person").style.width="40px";
    document.getElementById("person").style.transform="translate(-800px,-200px)";
    document.getElementById("ob3").style.display="inline";

}
++clicks;

}*/


$( "#button-container button" ).on( "click", function() {
    alert("hello")
  });


$.fn.toggleClick = function(funcArray) {
    return this.click(function() {
      var elem = $(this);
      var index = elem.data('index') || 0;
  
      funcArray[index]();
      elem.data('index', (index + 1) % funcArray.length);
    });
  };
  
  $('.btn').toggleClick([
    function() {
       
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 2",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-600px,-150px)";
        document.getElementById("ob2").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 3",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-40px,-280px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob3").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 4",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-230px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob4").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 5",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-470px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob5").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 6",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-820px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob6").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 7",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-1000px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob7").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 8",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-800px,-200px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob8").style.display="inline";
    }
  ]);

system · December 8, 2021, 6:01pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Moving an image using javascript JavaScript	3	77360	October 8, 2014
Image moving code variable help JavaScript	1	718	May 14, 2010
Clicking button to move image to right has no effect JavaScript	3	8338	June 18, 2015
Code to change an image on button click JavaScript html5 , css3	3	2870	February 15, 2018
In theory this should be simple? JavaScript	1	326	March 8, 2011

Update image position

Related topics