Put "little hand" in the iframe

Asked

Viewed 458 times

1

Good morning. I am opening . png files with iframe and would like to know if it is possible to put that "little hand" google maps uses to drag the image inside the iframe. The utility of this "little hand" is to drag the image to the side, as well as is google maps..(Note: It is not only to change the mouse to a "little hand" but to have the same functions that it has in maps..). Valeuu
Example: inserir a descrição da imagem aqui

javascript html jquery iframe

2 answers

1

You can use the property cursor of css, for hover use grab for active use grabbing, example...

div {
  width: 150px;
  height: 150px;
  background: green;
  cursor: grab;
  cursor: -webkit-grab;
  cursor:-moz-grab;
}
div:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  cursor:-moz-grabbing;
}
<div></div>

To simulate in a iframe, it is necessary to put a layer on top giving the desired effect...

    .wrapper {
        position: relative;
    }
    
    .grab-cursor {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        cursor: grab;
        cursor: -webkit-grab;
        cursor:-moz-grab;
        z-index: 100;
    }
    .grab-cursor:active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
        cursor:-moz-grabbing;
    }
    <div class="wrapper">
        <iframe src="http://doc.jsfiddle.net/"></iframe>
        <div class="grab-cursor"></div>
    </div>

It can also be done with javascript, to set in a specific place of iframe...

var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'move'; //no body

  • I understood how you said, but when I try to use next to iframe does not apply anything...

  • It’s even, already edited

  • All right, it was great... Now if I want to move this picture with my little hand? Is it possible?

  • That’s another story, I should have told you before kk, it would be better to explain what you really want to do, there may be an easier way...

  • As I said there in the description of the topic... The "little hand" is to drag the image to the side hehe. It’s how you went, but the "little hand" should move the content inside the iframe, because the images are large and not open the whole of the browser.. Something like google maps even

  • @Luizgustavocostaceolin, the way you wrote you made the reference of the "hand" of google maps, which gave the intention that you wanted the mouse cursor to be positioned on Iframe changed to "hand", but not that you should have this behavior. Open another question explaining better what you want to do, you can reference this question in it. And take advantage and explain which size will have the iframe, and what will happen if the image is smaller than it, and if it is larger what must be done, and how you want the interaction with the image.

  • @David is better now. I recognize the mistake..

Show 2 more comments

0

You can use the jQuery UI Draggable to drag elements on the page.

Just load the plugin into your <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

And then assign the method to id of the element you want to drag:

<img id="draggable"...

<script>
$( "#draggable" ).draggable();
</script>

See example:

$( "#draggable" ).draggable();
#draggable {
   cursor: grab;
   cursor: -webkit-grab;
   cursor:-moz-grab;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<img id="draggable" src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG" />

The jQuery UI code and styles should be inserted into the source code on the page of iframe.

  • I had been trying to use draggable, but it doesn’t work with iframe.. If I play the image in a <img>, the image will lose quality.. because it’s an image of a very large flowchart

  • @Luizgustavocostaceolin Yes, it works. My test was in iframe.

  • @Luizgustavocostaceolin Vc did not mention the question where he was going to open the image. I put it in <img> just as an example.

  • if I try to pass <iframe id="draggable" width="100%" height="1000px" src="https://upload.wikimedia.org/wikipedia/commons/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG"></iframe> does not work.. or I’m traveling?

  • @Luizgustavocostaceolin In the answer shows where to put the draggable... the iframe is static, what you will move is the content of it.

Browser other questions tagged javascript html jquery iframe

You are not signed in. Login or sign up in order to post.