Let us know when the information on a different tab is updated

Question

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a change on that tab as well. How can I achieve this? Conversely, if they're on the error tab, the Data tab should turn red. Also, once the tab is clicked, I want to remove the red color. Any assistance would be appreciated!

Desired Output

https://i.sstatic.net/BozhN.png

runCode = () => {
   document.getElementById("dataOutput").innerHTML = "Paragraph changed!";
   document.getElementById("errorOutput").innerHTML = "Error Occurred";
 }

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

javascript css

Answer 1

Answer №1

Utilizing MutationObservers, I believe I have successfully achieved your desired outcome. Although it may require some restructuring, the essence should be clear:

// To reuse our tabs, we store a reference to them
const data = document.getElementById("dataOutput");
const error = document.getElementById("errorOutput");
const runCode = () => {
  data.textContent = "Paragraph changed!";
  error.textContent = "Error Occured";
};

// Remove the 'changed' class from clicked tabs
const tabs = document.querySelector('.nav-tabs');
tabs.onclick = ({ target }) => target.classList.remove('changed');

// Watch for mutations in our output elements
new MutationObserver(observe).observe(data, { childList: true });
new MutationObserver(observe).observe(error, { childList: true })

function observe(mutations) {
  const target = mutations[0].target;
  // Extract the name of the changed tab by removing 'Output' from the target's id
  const tabName = target.id.slice(0, target.id.indexOf('O'));
  const tab = document.querySelector(`a[href="#${tabName}"]`);
 
  // Add the 'changed' class to the corresponding tab if it's not currently active
  if (!target.parentNode.classList.contains('active')) {
    tab.classList.add('changed');
  }
}

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

a.changed {
  color: red
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f150e0a1a0d063f4c514b514e">[email protected]</a>/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081df9c989fdf9b82b1c2dfc2dfc4">[email protected]</a>/bootstrap.min.js"></script>
  </head>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

Answer 2

Utilizing MutationObservers, I believe I have successfully achieved your desired outcome. Although it may require some restructuring, the essence should be clear:

// To reuse our tabs, we store a reference to them
const data = document.getElementById("dataOutput");
const error = document.getElementById("errorOutput");
const runCode = () => {
  data.textContent = "Paragraph changed!";
  error.textContent = "Error Occured";
};

// Remove the 'changed' class from clicked tabs
const tabs = document.querySelector('.nav-tabs');
tabs.onclick = ({ target }) => target.classList.remove('changed');

// Watch for mutations in our output elements
new MutationObserver(observe).observe(data, { childList: true });
new MutationObserver(observe).observe(error, { childList: true })

function observe(mutations) {
  const target = mutations[0].target;
  // Extract the name of the changed tab by removing 'Output' from the target's id
  const tabName = target.id.slice(0, target.id.indexOf('O'));
  const tab = document.querySelector(`a[href="#${tabName}"]`);
 
  // Add the 'changed' class to the corresponding tab if it's not currently active
  if (!target.parentNode.classList.contains('active')) {
    tab.classList.add('changed');
  }
}

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

a.changed {
  color: red
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f150e0a1a0d063f4c514b514e">[email protected]</a>/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081df9c989fdf9b82b1c2dfc2dfc4">[email protected]</a>/bootstrap.min.js"></script>
  </head>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

Answer 3

Answer №2

To illustrate how this can be achieved:

executeCode = () => {
   document.getElementById("dataOutput").innerHTML = "Updated paragraph!"
   document.getElementById("errorOutput").innerHTML = "An Error Occurred"
   document.querySelector("li:not(.active) > a").style.color = "Blue"
 }

.fab {
      width: 60px;
      height: 60px;
      background-color: #A7C0CD;
      border-radius: 50%;
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transition: all 0.1s ease-in-out;
      font-size: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      color: white;
      text-align: center;
      line-height: 58px;
      float: right;
      margin: 8px;
      z-index: 5000;
      position: absolute;
      right:0;
      top:0;
    }

    .fab:hover {
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transform: scale(1.05);
    }

 <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      </head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@16.5.6/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@13.48.32/bootstrap.min.js"></script>
      </head>
      <body>

    <div class="fab" id="executeCode" onclick="executeCode();">EXECUTE</div>
            <ul class="nav nav-tabs">
              <li class="active"><a id="dataTab" data-toggle="tab" href="#data">Data</a></li>
              <li><a id="errorTab" data-toggle="tab" href="#error">Errors</a></li>
            </ul>

            <div class="tab-content">
              <div id="data" class="tab-pane fade in active">
                <div id="dataOutput"></div>
              </div>
              <div id="error" class="tab-pane fade">
                <div id="errorOutput"></div>
              </div>
            </div>
      </body>
    </html>

For a more interactive approach, Javascript can identify the displayed text in a tab and change the corresponding tab's color to red.

Simply assign IDs to the tabs and adjust the css property for "color".

Answer 4

To illustrate how this can be achieved:

executeCode = () => {
   document.getElementById("dataOutput").innerHTML = "Updated paragraph!"
   document.getElementById("errorOutput").innerHTML = "An Error Occurred"
   document.querySelector("li:not(.active) > a").style.color = "Blue"
 }

.fab {
      width: 60px;
      height: 60px;
      background-color: #A7C0CD;
      border-radius: 50%;
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transition: all 0.1s ease-in-out;
      font-size: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      color: white;
      text-align: center;
      line-height: 58px;
      float: right;
      margin: 8px;
      z-index: 5000;
      position: absolute;
      right:0;
      top:0;
    }

    .fab:hover {
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transform: scale(1.05);
    }

 <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      </head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@16.5.6/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@13.48.32/bootstrap.min.js"></script>
      </head>
      <body>

    <div class="fab" id="executeCode" onclick="executeCode();">EXECUTE</div>
            <ul class="nav nav-tabs">
              <li class="active"><a id="dataTab" data-toggle="tab" href="#data">Data</a></li>
              <li><a id="errorTab" data-toggle="tab" href="#error">Errors</a></li>
            </ul>

            <div class="tab-content">
              <div id="data" class="tab-pane fade in active">
                <div id="dataOutput"></div>
              </div>
              <div id="error" class="tab-pane fade">
                <div id="errorOutput"></div>
              </div>
            </div>
      </body>
    </html>

For a more interactive approach, Javascript can identify the displayed text in a tab and change the corresponding tab's color to red.

Simply assign IDs to the tabs and adjust the css property for "color".

Let us know when the information on a different tab is updated

Desired Output

Answer №1

Answer №2

Similar questions

The anonymous function in the Google strategy is not being executed

Initiating an Ajax POST request when the onblur() event is triggered

Initial space in model variable not being displayed

Can you interact with a node within an Electron application even if the node integration feature is not enabled?

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

An effective method for finding a key in a multi-dimensional array or object based on its value using JavaScript and/or jQuery

Is there a way for my component to function seamlessly within another component without the need for redundant code?

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

Having Trouble with Shopify's Asynchronous Ajax Add to Cart Feature?

Having trouble with Cordova, Angular, and PushPlugin? Your callback isn't firing

The discrepancy in percentages by a single pixel within Webkit

Can someone explain why the console.log(items) command seems to be executing twice

Automated library that refreshes the webpage instantly upon any server modifications

Challenge with Angular date selection component

Invoking res.download() in the Express framework

Design a model class containing two arrow functions stored in variables with a default value

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

The center div is not functioning properly

Can anyone suggest methods for displaying query data from a JSON file using HTML?

Using Vue.js to bind data in two directions by using an object with v-for