CODEWITHSUNDEEP
javascripthtmlcss
Michael Lopez
Michael Lopez

Reputation: 79

Onclick event to move an element down a specific number of pixels

I know some things about HTML and CSS but I want to build code that will move an element a certain amount of pixels after a click, and then return it after another click.

The two websites that I have are these: http://www.miguelonenterprises.com/2018roadtrip.htm http://www.miguelonenterprises.com/wrap6.css.

Right now I have it set to a hover property.

I found this site which potentially has the answers:http://jsfiddle.net/fgvr2/]1

$(function(){
    $('.box').on('click',function(){
       $(this).toggleClass('clicked');
    });
});

And I can integrate the CSS and HTML just fine. But I have no idea how to integrate the JavaScript / JQuery element.

Any help would be greatly appreciated.

Thanks.

Upvotes: 0

Views: 3580

Answers (3)

SirPilan
SirPilan

Reputation: 4857

One way to do it. Toggle a class and add transition-duration to the moving element.

/* Copy this content to a js file. Example "click.js" */

$('.myWrapper').on('click', () => {
  $('.myMover').toggleClass('addMargin');
});
/* Copy this content to a css file. Example click_style.css */    

.myWrapper {
  width: 100px;
}

.myText {
  background-color: #FF9800;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}

.myMover {
  transition-duration: 1s;
  border-radius: 0 0 10px 10px;
  padding: 10px;
  background-color: #FF9800;
}

.addMargin {
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Load the css and js from files (place in <head></head> of your html-file)-->
<script type="text/javascript" src="click.js"></script>
<link rel="stylesheet" type="text/css" href="click_style.css" />

<div class="myWrapper">
  <div class="myText">
    Some Text
  </div>
  <div class="myMover">
    I'm moving!
  </div>
</div>

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89364

You can toggle a class when the element is clicked which would place the element a specific number of pixels lower. You also need to add a transition-duration for the property that should start a transition when changed (in this case top).

$(function(){
    $('.movingBox').on('click',function(){
       $(this).toggleClass('clicked');
    });
});
.movingBox{
  background-color: green;
  width: 100px;
  height: 100px;
  position: fixed;
  border: 1px solid red;
  top: 10px;
  transition: top 1s;
}

.clicked{
  position: fixed;
  top: 100px;/*whatever number of pixels you want the div to be from the top of the page*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="movingBox">
</div>

Upvotes: 1

PolymorphismPrince
PolymorphismPrince

Reputation: 307

Assuming you’ve set the CSS position property to absolute, it can be done very easily in JavaScript without jquery. Let’s say that the HTML ID of your element is example. In JavaScript you can do the following:

var element = document.querySelector(“example”);
element.addEventListener(“click”,function () {
    var temp = element.style.top.substring(0,element.style.top.length - 2);
    element.style.top = (parseInt(temp) + 5 ) + “px”;
}

From the code it should be clear how to return it to it’s original position after the click. If it isn’t I encourage that you learn some JavaScript here.

Upvotes: 0

Related Questions