Design a dynamic div element that gracefully transitions in and out from the edge of the screen

Question

Design a dynamic div element that gracefully transitions in and out from the edge of the screen

Currently, I am in the process of developing a simple clickdummy for an application layout. The layout includes a details view on the right side that should only be visible after clicking a button. I am struggling to figure out how to make this div move using CSS or jQuery.

I attempted to use the CSS attribute visibility to show and hide the div, but it just appears instead of smoothly moving in from the side.
I also experimented with setting margin-left on the details view, but this ended up disrupting my entire layout.

What is the best way or best practice to achieve an animated moving div?

You can find my code on jsfiddle. The red details div is the one intended to move.

function toggleButton() {


}

/*STYLE*/
.window {
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
overflow-y: hidden;
}
.header, .footer {
  height: 50px;
  color: white;
  background-color: black;
  width: 100%;
}
.stage {  
  background-color: white;
  height: calc(100% - 100px);
  width: 100%;
}

.navigation {
  background-color: lightgrey;
  width: 250px;
  height: 100%;
  float: left;
}

.content{
  background-color: dimgrey; 
  height: 100%;
  width: calc(100% - 400px);
  float: left;
}

.details {
  background-color: red;
  height: 100%;
  width: 150px;
  float: right;
}

#test-table {
  width: 100%;
}

#test-table td {
  text-align:center; 
  vertical-align:middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="window">  
        <div class="header">
          header
        </div>    
        <div class="stage">       
          <div class="navigation">
            navigation
          </div>      
          <div class="content">
            <table id="test-table" border=1>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Place</th>  
              <th>Details</th> 
            </tr>
            <tr>
              <td>John</td>
              <td>20</td>
              <td>USA</td>
              <td><input type="button" onclick="toggleButton()" value="i" /> </td>
            </tr>
            <tr>
              <td>Mary</td>
              <td>30</td>
              <td>Canada</td>
              <td><input type="button" onclick="toggleButton()" value="i" /> </td>
            </tr>
            <tr>
              <td>Tim</td>
              <td>40</td>
              <td>Germany</td>
              <td><input type="button" onclick="toggleButton()" value="i" /> </td>
            </tr>              
            </table>
          </div>      
          <div class="details" id="details">
            details
          </div>      
        </div>
        <div class="footer">
          footer
        </div>
      </div>
</body>

UPDATE

I came across an interesting solution in this discussion. I tried implementing this method (jsfiddle), but now my red div is too tall. How can I resolve this issue?

javascript jquery html css

Answer 1

Answer №1

My preference is to use jQuery UI for achieving what you desire.

$( "#button1" ).on('click', function() {
   $( "#details" ).toggle( "slow" , function() {
     // Animation complete.
   });
});

I made adjustments to your CSS in the fiddle, specifying that the details div should have position:absolute;

In addition, I switched your input fields to

<input type="button" id="button1" value="i" />

(instead of using onClick="toggleButton()", I assigned an id to the input).

If you wish to learn more about the jQuery.toggle() effect, feel free to visit this link.

Here's the updated fiddle with the changes.

The movement might seem a bit unusual at first, but I will address that (unless you prefer it as is).

Best of luck :)

Answer 2

My preference is to use jQuery UI for achieving what you desire.

$( "#button1" ).on('click', function() {
   $( "#details" ).toggle( "slow" , function() {
     // Animation complete.
   });
});

I made adjustments to your CSS in the fiddle, specifying that the details div should have position:absolute;

In addition, I switched your input fields to

<input type="button" id="button1" value="i" />

(instead of using onClick="toggleButton()", I assigned an id to the input).

If you wish to learn more about the jQuery.toggle() effect, feel free to visit this link.

Here's the updated fiddle with the changes.

The movement might seem a bit unusual at first, but I will address that (unless you prefer it as is).

Best of luck :)

Answer 3

Answer №2

To achieve this effect, you can utilize the CSS animation property. Check out this updated code example

Below is the animation code snippet I implemented:

@keyframes move {
  0% { transform: translateX(150px); }
  50% { transform: translateX(0); }
  100% { transform: translateX(150px); }
}

Make sure to apply it within the .details class like so:

animation: move 1s ease;
animation-iteration-count: infinite;

Answer 4

To achieve this effect, you can utilize the CSS animation property. Check out this updated code example

Below is the animation code snippet I implemented:

@keyframes move {
  0% { transform: translateX(150px); }
  50% { transform: translateX(0); }
  100% { transform: translateX(150px); }
}

Make sure to apply it within the .details class like so:

animation: move 1s ease;
animation-iteration-count: infinite;

Answer 5

Answer №3

To approach this issue, elementzero23 suggests utilizing keyframes in CSS, which offers a variety of methods.

Another option is to use JQUERY to modify the CSS or manipulate classes during scenarios where multiple changes are necessary.

Personally, I find JQUERY to be more straightforward, unless specific requirements dictate otherwise.

For reference, check out this sample: https://jsfiddle.net/ksf9jsbg/

HTML

<div class="box1"></div>
<div class="box2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

CSS

.box1{
  position:absolute;
  top:0;
  left:0;
  width:20%;
  height:20%;
  background: #000;
}

.box2{
  position:absolute;
  top:50%;
  left:0;
  width:20%;
  height:20%;
  background: #090;
  transition: all 1.5s ease;  /*ADD THIS TO ENSURE SMOOTH MOVEMENT*/
}

JS

$('.box1').mouseup(function() {
$('.box2').css("transform", "translateX(300px)"); //THE MOST IMPORTANT PART
});

In this example, only the transform property of an element with the class "box2" was modified.

UPDATE

Check out the revised version of your fiddle, give it a go.

Answer 6

To approach this issue, elementzero23 suggests utilizing keyframes in CSS, which offers a variety of methods.

Another option is to use JQUERY to modify the CSS or manipulate classes during scenarios where multiple changes are necessary.

Personally, I find JQUERY to be more straightforward, unless specific requirements dictate otherwise.

For reference, check out this sample: https://jsfiddle.net/ksf9jsbg/

HTML

<div class="box1"></div>
<div class="box2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

CSS

.box1{
  position:absolute;
  top:0;
  left:0;
  width:20%;
  height:20%;
  background: #000;
}

.box2{
  position:absolute;
  top:50%;
  left:0;
  width:20%;
  height:20%;
  background: #090;
  transition: all 1.5s ease;  /*ADD THIS TO ENSURE SMOOTH MOVEMENT*/
}

JS

$('.box1').mouseup(function() {
$('.box2').css("transform", "translateX(300px)"); //THE MOST IMPORTANT PART
});

In this example, only the transform property of an element with the class "box2" was modified.

UPDATE

Check out the revised version of your fiddle, give it a go.

Design a dynamic div element that gracefully transitions in and out from the edge of the screen

Answer №1

Answer №2

Answer №3

Similar questions

Javascript and the output of Ajax request

retrieveStyle() rooted framework Category

trouble executing a straightforward xpath search

Using PHP and JQuery to Implement Cloudinary Callbacks

Error: Trying to break down a non-iterable object is not valid

Tips for assigning a cookie as the id of a div?

Javascript - issue with accurately retrieving element offset value while scrolling

What causes the scrollTop to appear erratic?

Exploring tools to grasp the intricacies of HTML page structure

Uncover and control nested objects in JSON data

Make the Height of the Parent Div Based on the Position of its Children

Fancybox causing issue with submit button functionality

How come my show and edit routes are not recognizing req.body as defined, unlike my create route?

Having trouble establishing an HTTPS connection with a Node.js server

Exploring the World of jQuery Caching and Navigating Through Objects

When utilizing Angular, the mat-datepicker is displayed underneath the modal, even after attempting to modify the z-index

Manipulating DOM elements using JavaScript Vanilla with the Jquery <<S.fn.init [selector]>> framework

Struggling to Locate the Chat Element on Google Hangouts Using Selenium Python

Check if the DIV element does not exist in the DOM before using the

"Headers cannot be set once they have been sent to the client... Error handling for unhandled promise rejection