How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

Question

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor moves off it. Here's the HTML code snippet:

Exploring solutions, I attempted using onMouseOver and onMouseOut in HTML but hit roadblocks. Similarly, my trials with GSAP's timeline animation proved challenging to control.

The current setup involves adding and removing event listeners with timeouts to regulate function calls' speed.

var cards = document.getElementsByClassName('card');
var currentCard;
var currentIndex;
var leftSpread = 150;
var rightSpread = 200;
var initialOffset = 100;

(function initialLoad() {
  for (var i = 0; i < cards.length; i++) {
    cards[i].style.zIndex = i;

    cards[i].addEventListener("mouseenter", this);

    if (i > 0) {
      cards[i].style.left = cards[i - 1].offsetLeft + initialOffset + 'px';
    }
  }
})();

function handleEvent(evt) {
  switch (evt.type) {
    case "mouseenter":
      this.cardMouseOver(evt);
      break;
    case "mouseout":
      this.cardMouseOut(evt);
      break;
    default:
      return;
  }
}

function cardMouseOver(event) {
  currentIndex = event.target.style.zIndex;
  event.target.style.zIndex = 10;

  for (var i = 0; i < cards.length; i++) {
    if (event.target == cards[i]) {
      currentCard = i;
    } else {
      cards[i].removeEventListener("mouseenter", this);
    }
  }

  setTimeout(function() {
    cards[currentCard].addEventListener("mouseout", this);
  }, 50);

  for (var i = 0; i < cards.length; i++) {
    if (i < currentCard) {
      cards[i].style.left = cards[i].offsetLeft - leftSpread + 'px';
    } else if (i > currentCard) {
      cards[i].style.left = cards[i].offsetLeft + rightSpread + 'px';
    }
  }

  cards[currentCard].removeEventListener("mouseenter", this);
}

function cardMouseOut(event) {
  cards[currentCard].style.zIndex = currentIndex;

  setTimeout(function() {
    for (var i = 0; i < cards.length; i++) {
      cards[i].addEventListener("mouseenter", this);
    }
  }, 100);

  for (var i = 0; i < cards.length; i++) {
    if (i === currentCard) {
      cards[i].removeEventListener("mouseout", this);
    }
  }

  for (var i = 0; i < cards.length; i++) {
    if (i < currentCard) {
      cards[i].style.left = cards[i].offsetLeft + leftSpread + 'px';
    } else if (i > currentCard) {
      cards[i].style.left = cards[i].offsetLeft - rightSpread + 'px';
    }
  }
}

body {
  background-color: #242424;
  padding: 0;
  margin: 0;
}

.cards-container {
  background: #fff;
  margin: 20px auto;
  position: absolute;
  left: 21%;
  top: 375px;
}

.card {
  position: absolute;
  background: rgb(255, 255, 255);
  border: 1px solid black;
  height: 250px;
  transition: 0.2s;
  width: 200px;
  box-shadow: -1px 0px 1px 1px rgba(0, 0, 0, 0.747);
}

.card:hover {
  transition: all 0.2s ease;
  width: 250px;
  height: 350px;
  top: -75px;
}

<body>
  <header>
    <div class="cards-container">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </header>
</body>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.0.min.js"></script>

My aim is to achieve smooth transitions based on the highlighted card and reset positions when no card is highlighted.

javascript html css dom

Answer 1

Answer №1

There are a few different approaches you could take to accomplish this task

An option is to use a boolean flag that switches when an element is in motion or out of place. Once the element returns to its original position, you can switch it back.

let hasDOMChanged = false

function handleEvent(event) {
  hasDOMChanged = true
  switch (event.type) {
    case "mouseenter":
      this.handleMouseEnter(event);
      break;
    case "mouseout":
      this.handleMouseOut(event);
      break;
    default:
      return;
  }
}

// Add a function to reset hasDOMChanged to false when the element is restored

Another approach is to manage animations and CSS modifications using classes (.inUse, .active, .hovered, etc.) and then create a loop that verifies if any element possesses an "active" class

const pageModified = () => {
  if(Array.from(document.querySelectorAll(".inUse")).length > 0) {
    return false
  } else {
    return true
  }
}

UPDATE: In relation to animations, they become quite simple once you understand the process! I suggest checking out W3Schools' guide on @keyframes

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

You can also specify animation-direction as forward, reverse, etc. It offers great versatility!

Answer 2

There are a few different approaches you could take to accomplish this task

An option is to use a boolean flag that switches when an element is in motion or out of place. Once the element returns to its original position, you can switch it back.

let hasDOMChanged = false

function handleEvent(event) {
  hasDOMChanged = true
  switch (event.type) {
    case "mouseenter":
      this.handleMouseEnter(event);
      break;
    case "mouseout":
      this.handleMouseOut(event);
      break;
    default:
      return;
  }
}

// Add a function to reset hasDOMChanged to false when the element is restored

Another approach is to manage animations and CSS modifications using classes (.inUse, .active, .hovered, etc.) and then create a loop that verifies if any element possesses an "active" class

const pageModified = () => {
  if(Array.from(document.querySelectorAll(".inUse")).length > 0) {
    return false
  } else {
    return true
  }
}

UPDATE: In relation to animations, they become quite simple once you understand the process! I suggest checking out W3Schools' guide on @keyframes

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

You can also specify animation-direction as forward, reverse, etc. It offers great versatility!

Answer 3

Answer №2

After some persistent digging, I stumbled upon the solution which turned out to be much simpler than anticipated. To achieve a smooth animation when hovering over cards with the mouse, I utilized CSS transition and transform attributes.

I defined the following CSS classes:

.card {
    position: absolute;
    background: rgb(255, 255, 255);
    height: 275px;
    width: 200px;
    box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.747);
    transition: all .4s ease;
}

.card.left {
    transform: translateX(-175px);
}

.card.right {
    transform: translateX(175px);
}

To achieve the desired effect, I added and removed event listeners for "mouseenter" and "mouseover."

function handleEvent(evt) {
    switch(evt.type) {
        case "mouseenter":
            this.cardMouseOver(evt);
            break;
        case "mouseout":
            this.cardMouseOut(evt);
            break;
        default:
            return;
    }
}

function cardMouseOver(event) {
    for (var i = 0; i < cards.length; i++) {
        if (event.target == cards[i]) {
            currentCard = i;
        }
    }

    // Code snippet continued...
}

function cardMouseOut(event) {
    // Code snippet continued...
}

In this script, cards represents an array of the "card" elements.

Answer 4

After some persistent digging, I stumbled upon the solution which turned out to be much simpler than anticipated. To achieve a smooth animation when hovering over cards with the mouse, I utilized CSS transition and transform attributes.

I defined the following CSS classes:

.card {
    position: absolute;
    background: rgb(255, 255, 255);
    height: 275px;
    width: 200px;
    box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.747);
    transition: all .4s ease;
}

.card.left {
    transform: translateX(-175px);
}

.card.right {
    transform: translateX(175px);
}

To achieve the desired effect, I added and removed event listeners for "mouseenter" and "mouseover."

function handleEvent(evt) {
    switch(evt.type) {
        case "mouseenter":
            this.cardMouseOver(evt);
            break;
        case "mouseout":
            this.cardMouseOut(evt);
            break;
        default:
            return;
    }
}

function cardMouseOver(event) {
    for (var i = 0; i < cards.length; i++) {
        if (event.target == cards[i]) {
            currentCard = i;
        }
    }

    // Code snippet continued...
}

function cardMouseOut(event) {
    // Code snippet continued...
}

In this script, cards represents an array of the "card" elements.

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

Answer №1

Answer №2

Similar questions

Execution priority of Javascript and PHP in various browsers

Tips on efficiently rebinding jQuery events to dynamically loaded content without having to manually do it for each event or class

Configuration of an MVC-based web application

A quick guide on automatically populating text boxes with characteristics of the item chosen from a drop-down menu

Combine an array of objects that are dynamically created into a single object

"Notification: The marker element has been eliminated" encountered while attempting to restore text ranges using Rangy within a Vue component

"Applying CSS styles to expand the size of

Place the div directly beside the input field on the right side

How can I adjust the Bootstrap container width without it changing when resizing the browser window?

in node.js, virtual machine scripts can import modules using the require function

Update all occurrences of a particular value to null within the Realtime Database using Firebase Cloud Functions

Issues with the functionality of the WordPress plugin

Updating a value in Expressjs variable is not working as expected

Array updating using the foreach method in Angular

The best way to organize and position a Label and TextBox in C#

Doubt surrounding the behavior of Node.js when a file is required that does not export anything from a module

Tips for hiding a bootstrap modal in Angular4 when it has no content

Utilize AJAX to dynamically refresh the page without having to reload it, enabling the use of both POST and GET methods

Using Jquery to iterate through a dynamic list of elements

Utilize the power of DOJO JavaScript to implement Reverse AJAX functionality in