Click to Delete html and javascript

Question

I want to have two divs side by side, the first one contains a table of information the other will contain two buttons a delete and edit. The first div I want to be 100% of the screen the second will be off the screen to start with then once I click the first div with the table the second will slide out and push the first div over and show the delete and edit buttons

<div id="div1">
   <table>
      <tr>
         <td>Some Information</td>
      </tr>
   </table>
</div>
<div id="div2">
   <button id="delete"></button>
   <button id="edit"></button>
</div>
//Javascript Code
<script>
   $(document).ready(function(){
      $('#div1').click(function {
         //slide div2 out and push div1 to the left to show delete and edit buttons
      });
   });
</script>

I am trying to make it similar to the iOS mail app where you can swipe to delete but instead you will click and if you click again div1 will push div2 off the screen so basically I want to toggle the delete and edit div on and off the screen.

Not sure what javascript and css is involved in this. Thanks in advance for any answers.

jerrylow · Accepted Answer · 2014-07-31 23:15:20Z

You can do something like such structure the actionable elements in a div which will then be shifted around based on the state.

<div id="div2">
    <div class="inner">
       Fusce fermentum
    </div>
    <div class="actions">
        <button id="delete"></button>
        <button id="edit"></button>
    </div>
</div>

Have #div2 be position:relatve;

#div2 {
    background: #eeeeee;
    padding: 20px 80px 20px 20px;
    overflow: hidden;
    position: relative;
}

.actions {
    background: red;
    position: absolute;
    height: 100%;
    right: -60px;
    top: 0;
    transition: right 0.2s ease-in-out;
    width: 60px;
}

.reveal .actions {
    right: 0;
}

Then just toggle the class with jQuery:

$(document).ready(function() {
    $('#div2').click(function() {
        $(this).toggleClass('reveal');
    });
});

http://jsfiddle.net/P6gAe/1/

Angus · Accepted Answer · 2014-07-31 23:13:40Z

0

And this to your head

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

Add this to your script

$(document).ready(function(){


$( "button" ).click(function() {
  $( "#div1" ).hide( "drop", { direction: "up" }, 500 );
});



});

answered Jul 31, 2014 at 23:13

Angus

4495 silver badges17 bronze badges

Collectives™ on Stack Overflow

Click to Delete html and javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related