moving an image in javascript

Question

Even though it seems very easy I am unable to do it.

I have an image inside div and I should move the image up and down not the entire div.

HTML

<div>


<img src="Image/Scope.png" id="indImage" style="height:auto; max-height:80%; width:auto; max-width:90%;" />
</div>

Javascript

  $("#moveUp").on('click',function() {

                alert($('#indImage').offset());


                if(wind_moveup_click != 7){
                $('#indImage').animate({
                marginTop : "-=2px"
                });
   });

But the image is not moving up

Whats the mistake i am doing?

Thanks:)

Set the height of your container div to a value higher than the image height and check — Harsha Venkataramu
– Harsha Venkataramu, Commented Jul 4, 2013 at 7:21
what is "wind_moveup_click "? your code is working with me. i just modify it a little bit. — Vond Ritz
– Vond Ritz, Commented Jul 4, 2013 at 7:24

Vond Ritz · Accepted Answer · 2013-07-04 07:28:35Z

2

Here's the FIDDLE

HTML

<div>
    <img src="Image/Scope.png" id="indImage" style="height:auto; max-height:80%; width:auto; max-width:90%; position:absolute;" />
</div>
<input type="button" id="moveUp" value="Click Me!" style="margin-top:25px;" />

Javascript

$("#moveUp").on('click', function () {

    //alert($('#indImage').offset());
    var wind_moveup_click = 0;

    if (wind_moveup_click != 7) {
        $('#indImage').animate({
            marginTop: "-=2px"
        });
    }
});

answered Jul 4, 2013 at 7:28

Vond Ritz

2,01215 silver badges15 bronze badges

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

1 Comment

Chris Over a year ago

Your answer has an extra } closing the if statement, which is what makes this work.

Sergio · Accepted Answer · 2013-07-04 07:33:57Z

2

You had forgoten a } on your if statement. You also need to define the wind_moveup_click variable before using it in the if statement, but maybe you did that, just not in the sample you posted to us.

FIDDLE

and this

if (wind_moveup_click != 7) {
    $('#indImage').animate({
    });
}

edited Jul 4, 2013 at 7:33

answered Jul 4, 2013 at 7:26

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Comments

Ionică Bizău · Accepted Answer · 2013-07-04 07:33:48Z

1

Add position:absolute to your img CSS.

#indImage {
    position: absolute;
    height:auto;
    max-height:80%;
    width:auto;
    max-width:90%;
}

JSFIDDLE

Like @Ohgodwhy correctly said:

the position can be anything other than static

That means that you can choose between absolute, relative, fixed and so on.

But another big problem is that you didn't close the opened { in if. So you have a syntax error.

edited Jul 4, 2013 at 7:33

answered Jul 4, 2013 at 7:24

Ionică Bizău

114k95 gold badges311 silver badges491 bronze badges

1 Comment

Ohgodwhy Over a year ago

actually, the position can be anything other than static.

Chris · Accepted Answer · 2013-07-04 07:24:35Z

0

Try adding the css style position: relative to the <div> tag, e.g.:

<div style="position: relative;">

answered Jul 4, 2013 at 7:24

Chris

3,2951 gold badge37 silver badges35 bronze badges

Comments

Sherin Jose · Accepted Answer · 2013-07-04 07:27:38Z

0

Edit as,

$('#indImage').animate({
  marginTop : "-2px",
});

answered Jul 4, 2013 at 7:27

Sherin Jose

2,5263 gold badges20 silver badges39 bronze badges

Collectives™ on Stack Overflow

moving an image in javascript

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related