logo
down
shadow

Move image inside a container by clicking direction button?


Move image inside a container by clicking direction button?

By : user2953092
Date : November 19 2020, 03:59 PM
With these it helps This is not dragging - you will need to listen to the keydown event and handle moving the image yourself. This is not too hard with jQuery.
You basically need to see if they have pressed an arrow key, check the move won't go outside the container (if that is what you want), then move the image and store the new co-ordinates. Note that if they hold the key down it will repeatedly call the keydown event and the image will keep moving.
code :
// store x and y globally so you can use them wherever you need to
var x, y;

$(function() {
    // set how many pixels to move on each press
    var step = 5;
    // cache references to pointer and claw jquery objects
    var thePointer = $('#pointer');
    var theClaw = $('#claw');

    $('body').on('keydown', function(e) {
        // get the current position
        // this is already relative to claw so no need to work it out
        var pos = thePointer.position();

        // now check which key was pressed
        switch(e.which)
        {
            case 38: // up
                if(pos.top >= step) {    // check it will not go out the container
                    pos.top -= step;     // update the stored position
                    thePointer.css('top', pos.top + 'px'); // move the image
                }
                break;

            case 40: // down
                if(pos.top <= theClaw.height() - thePointer.height() - step) {
                    pos.top += step;
                    thePointer.css('top', pos.top + 'px');
                }
                break;

            case 37: // left
                if(pos.left >= step) {
                    pos.left -= step;
                    thePointer.css('left', pos.left + 'px');
                }
                break;

            case 39: // right
                if(pos.left <= theClaw.width() - thePointer.width() - step) {
                    pos.left += step;
                    thePointer.css('left', pos.left + 'px');
                }
                break;

            // let other events through such as typing in textboxes.
            default:
                return;
        }
        
        // store the co-ordinates
        x = pos.left;
        y = pos.top;
        console.log(x, y);

        // prevent default event, usually page scrolling
        return false;
    });

    $('body').on('keyup', function(e) {

        // now check which key was pressed
        switch(e.which)
        {
            case 37: case 38: case 39: case 40:
                alert("Stopped at " + x + ", " + y);
                break;
        }
    });
})
#claw {
    background-color:yellow;
    border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="claw" name='claw' style="overflow:hidden;width:320px;height:240px;position: relative; left: 0; top: 0;">
   <img id='machine_image' />
    <img id='pointer' src='http://maps.co.gov/aspnet_client/ESRI/WebADF/MarkerSymbols/circle-black-16x16.png' name='image' style="position: absolute; top: 105px; left: 145px;" />
</div>

<input type="text" placeholder="You can still type in me" />


Share : facebook icon twitter icon
Image Button only responds when clicking on the image and not the area around inside the button

Image Button only responds when clicking on the image and not the area around inside the button


By : user3571138
Date : March 29 2020, 07:55 AM
this one helps. I'm using the following button style which takes away the borders and makes a transparent background to make my image buttons: , You could wrap the presenter in a Border with a bound Background.
code :
<ControlTemplate TargetType="{x:Type Button}">
     <Border Background="{TemplateBinding Background}">
          <!-- ContentPresenter here -->
     </Border>
</ControlTemplate>
on clicking a button is there a way to check what image is inside a Div?

on clicking a button is there a way to check what image is inside a Div?


By : Green Stain
Date : March 29 2020, 07:55 AM
it should still fix some issue Hi so i have two Div elements (70px by 70px) and two images, the images have the HTML5 drag and drop functionality and can be dragged into the Div boxes. , Is this something you would like to accomplish?
JS
code :
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
 ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("text/html"),
      nodeCopy = document.getElementById(data).cloneNode(true),
      type = nodeCopy.src;

  nodeCopy.id = "newId"; 
  ev.target.appendChild(nodeCopy);

  if(type.indexOf(".png") !== -1) {
    ev.target.className = 'red-border';
  } else if(type.indexOf(".jpg") !== -1) {
    ev.target.className = 'green-border';
  } else {
    ev.target.className = 'gray-border';
  }

}
#Drop1 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
#Drop2 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}

#Drop1.red-border,
#Drop2.red-border {
  border: 1px solid red;
}

#Drop1.green-border,
#Drop2.green-border {
  border: 1px solid green;
}

#Drop1.gray-border,
#Drop2.gray-border {
  border: 1px solid darkgray;
}
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
 ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("text/html"),
      nodeCopy = document.getElementById(data).cloneNode(true),
      type = nodeCopy.src;

  nodeCopy.id = "newId"; 
  ev.target.appendChild(nodeCopy);
}

function checkImages() {
  var drop1Elem = document.getElementById('Drop1'),
      drop2Elem = document.getElementById('Drop2');

  if(drop1Elem.childNodes.length >= 1) {
    if(drop1Elem.childNodes[0].className === 'item1') {
      drop1Elem.className = 'red-border';
    } else if(drop1Elem.childNodes[0].className === 'item2') {
      drop1Elem.className = 'green-border';
    } else {
      drop1Elem.className = 'gray-border';
    }
  }

  if(drop2Elem.childNodes.length >= 1) {
    if(drop2Elem.childNodes[0].className === 'item1') {
      drop2Elem.className = 'red-border';
    } else if(drop2Elem.childNodes[0].className === 'item2') {
      drop2Elem.className = 'green-border';
    } else {
      drop2Elem.className = 'gray-border';
    } 
  }
}
Showing image inside JLabel which is stored in database by clicking Button

Showing image inside JLabel which is stored in database by clicking Button


By : Josh
Date : March 29 2020, 07:55 AM
wish of those help In Netbeans I took a Desktop Pane and inside that pane I took Label.Inside the Label I want to show image which is already stored in Database(sqlite manager) by clicking a button.This is the code I've tried, , You forgot...
code :
rs = pst.executeQuery();
Unity3D - Move an object to the opposite direction by clicking on it

Unity3D - Move an object to the opposite direction by clicking on it


By : satya dev
Date : March 29 2020, 07:55 AM
hop of those help? I'm new in Unity and I'm working on a simple project but I'm stuck. , You have to subtract the mousePosition and the center of the ball.
code :
Vector3 clickedPosition = Camera.main.ScreenToWorldPoint (Input.mousePosition);
Vector3 ballCenter = ballTransform.position;

// If this goes the opposite direction just swap the values.
Vector3 forceDirection = (ballCenter  - clickedPosition).normalized;

ballRigidbody.AddForce (forceDirection * strength, ForceMode.Impulse);
Move large image inside smaller visible container

Move large image inside smaller visible container


By : zigzag
Date : March 29 2020, 07:55 AM
Hope this helps I solved it by using css for the inner image (not background image but img tag) :
code :
.prlxPhoto
{

     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translateY(-50%) translateX(-50%);

}
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org