Highlighted

Move one object to the position of another

Explorer ,
Apr 20, 2019

Copy link to clipboard

Copied

I have two object

<div id = "object1"></div> 

<div id = "object2"></div> 

These "object" are setting with style property like:

<style>

#MyObject2 {

top: 700; left: 400px; width: 70px; height: 70px;

position: absolute;

background-image:  url(http://xxx1.png); background-size: cover;">

}

</style>

And so on.

I need a function that permit with a mouseclick to move the object2 to the place of the object1.

How it is possible to do?

Thanks and Happy Easter to all!!

https://forums.adobe.com/people/gian+carlog61267382  wrote

In your last script I need a variable at this point: "10px".

$( ".block2" ).animate({ "left": "10px" }, "slow" );

Are we getting any closer?

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

var MyObject1 = $("#MyObject1").position();

$("#MyObject2").animate({top: MyObject1.top, left: MyObject1.left});

});

});

</script>

<style>

#MyObject1 {

top: 100px;

left: 200px;

width: 70px;

height: 70px;

position: absolute;

background-color: red;

}

#MyObject2 {

top: 700px;

left: 400px;

width: 70px;

height: 70px;

position: absolute;

background-color: yellow;

z-index: 100;

}

</style>

</head>

<body>

<div id="MyObject1"></div>

<div id="MyObject2"></div>

<button>Move</button>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Move one object to the position of another

Explorer ,
Apr 20, 2019

Copy link to clipboard

Copied

I have two object

<div id = "object1"></div> 

<div id = "object2"></div> 

These "object" are setting with style property like:

<style>

#MyObject2 {

top: 700; left: 400px; width: 70px; height: 70px;

position: absolute;

background-image:  url(http://xxx1.png); background-size: cover;">

}

</style>

And so on.

I need a function that permit with a mouseclick to move the object2 to the place of the object1.

How it is possible to do?

Thanks and Happy Easter to all!!

https://forums.adobe.com/people/gian+carlog61267382  wrote

In your last script I need a variable at this point: "10px".

$( ".block2" ).animate({ "left": "10px" }, "slow" );

Are we getting any closer?

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

var MyObject1 = $("#MyObject1").position();

$("#MyObject2").animate({top: MyObject1.top, left: MyObject1.left});

});

});

</script>

<style>

#MyObject1 {

top: 100px;

left: 200px;

width: 70px;

height: 70px;

position: absolute;

background-color: red;

}

#MyObject2 {

top: 700px;

left: 400px;

width: 70px;

height: 70px;

position: absolute;

background-color: yellow;

z-index: 100;

}

</style>

</head>

<body>

<div id="MyObject1"></div>

<div id="MyObject2"></div>

<button>Move</button>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 20, 2019 0
Adobe Community Professional ,
Apr 20, 2019

Copy link to clipboard

Copied

I think this will do what you asked for.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Animate</title>

<style>

.container {

margin: 0 auto;

width: 80%;

position: relative;

}

.block1 {

position: absolute;

background-color: #abc;

left: 10px;

width: 150px;

height: 150px;

z-index: 100;

}

.block2 {

position: absolute;

background-color: #ff0000;

left: 165px;

width: 150px;

height: 150px;

}

</style>

</head>

<body>

<div class="container">

<button id="right">CLICK ME &raquo;</button>

<div class="block1"></div>

<div class="block2"></div>

</div>

<!--jQuery 3 library-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

$( "#right" ).click(function() {

  $( ".block1" ).animate({ "left": "+165px" }, "slow" );

});

</script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2019 1
Adobe Community Professional ,
Apr 20, 2019

Copy link to clipboard

Copied

After re-reading your post, you actually want object 2 to move, not object 1.

OK.  My revised code.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Animate</title>

<style>

.container {

margin: 0 auto;

width: 80%;

position: relative;

}

.block1 {

position: absolute;

background-color: #abc;

left: 10px;

width: 150px;

height: 150px;

}

.block2 {

position: absolute;

background-color: #ff0000;

left: 165px;

width: 150px;

height: 150px;

z-index: 100;

}

</style>

</head>

<body>

<div class="container">

<button id="left"> &laquo; CLICK ME </button>

<div class="block1">

</div>

<div class="block2">

</div>

</div>

<!--jQuery 3 library-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

$( "#left" ).click(function() {

  $( ".block2" ).animate({ "left": "10px" }, "slow" );

});

</script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2019 1
Explorer ,
Apr 21, 2019

Copy link to clipboard

Copied

Thank you Nancy for you gentle help,

I''m sorry, It is my fault to tryed before to explain in a short way my purpose, but what I really ned is a var for  "+165", because "object1" is in movement, so I also need a variable for vertical parameter.

In wich way can I complete your script or do what i need?

Thank you and I beg pardon for my incomplete question.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 0
Explorer ,
Apr 21, 2019

Copy link to clipboard

Copied

(The movement is from up to down)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 0
Explorer ,
Apr 21, 2019

Copy link to clipboard

Copied

In your last script I need a variable at this point: "10px".

$( ".block2" ).animate({ "left": "10px" }, "slow" );

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 0
Adobe Community Professional ,
Apr 21, 2019

Copy link to clipboard

Copied

Show us your code.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 0
LEGEND ,
Apr 21, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/gian+carlog61267382  wrote

In your last script I need a variable at this point: "10px".

$( ".block2" ).animate({ "left": "10px" }, "slow" );

Are we getting any closer?

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

var MyObject1 = $("#MyObject1").position();

$("#MyObject2").animate({top: MyObject1.top, left: MyObject1.left});

});

});

</script>

<style>

#MyObject1 {

top: 100px;

left: 200px;

width: 70px;

height: 70px;

position: absolute;

background-color: red;

}

#MyObject2 {

top: 700px;

left: 400px;

width: 70px;

height: 70px;

position: absolute;

background-color: yellow;

z-index: 100;

}

</style>

</head>

<body>

<div id="MyObject1"></div>

<div id="MyObject2"></div>

<button>Move</button>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 2
Explorer ,
Apr 21, 2019

Copy link to clipboard

Copied

Thank you Osgood,

this work perfectly.

Thank you very much!!

Thank also to Nancy.

Only one thing: is there a way to set the time of animation? Not "slow" or "fast" but in millisecond, if yes wich is the syntax?

Thank you again.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 0
Adobe Community Professional ,
Apr 21, 2019

Copy link to clipboard

Copied

Yes, you may use a duration number instead of a string.

Refer to the jQuery API documentation.

http://api.jquery.com/animate/

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 1
Explorer ,
Apr 21, 2019

Copy link to clipboard

Copied

Thank you Nancy!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2019 0