Display a distinct button on the webpage if the logged-in user has not clicked on it yet

Seeking a solution to emphasize buttons that the User has not visited in the event of changes to the content of the views that appear when these buttons are clicked. The answer must utilize the ASP.net MVC CSS framework.

<head>
<style type="text/css">

 body{
     overflow-x:scroll;
 }
    .auto-stylelay1 {
        font-size: 18px;
        text-align: left;
        cursor: pointer;
    }
</head>
<div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand" style="font-size: 22px">
                <a href="#">
                    <strong>
                </strong>
                </a>
            </li>
         <b></b>
                <p class="auto-style2"><strong>Hello @User.Identity.Name!</strong></p> 
                <li class="auto-stylelay1">@Html.ActionLink("Home", "Index", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Proof of Concept", "POC", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Reports", "report", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Links/Other Resources", "Links", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("About", "About", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
    </div>

I am looking to modify the layout style of page buttons on the menu bar if the user has not interacted with them. I have implemented a check to determine the user's browsing history, but I still need the code to make modifications to the shared layout file based on the user.

I anticipate that the button will be highlighted with a new content indicator. Essentially, I want to alter the class styles for the li html action links depending on whether the user has visited that particular page or not. If the button has been clicked, I want the class to revert to auto-stylelay1.

Answer №1

One potential solution is to store the data in local storage.

Begin by assigning an id to each list item:

<li id="Home" class="auto-stylelay1">@Html.ActionLink("Home", "Index", "Home")</li>
<li id="POC" class="auto-stylelay1">@Html.ActionLink("Proof of Concept", "POC", "Home")</li>
<li id="Reports" class="auto-stylelay1">@Html.ActionLink("Reports", "report", "Home")</li>

When a button is clicked, add it to an array and save it in local storage:

$("a").on("click", function (e) {
   e.preventDefault(); // prevent link from being followed

   var retrievedData = localStorage.getItem("buttonsClicked");
   var buttonsClicked = JSON.parse(retrievedData);
   var elementId = $(this).attr('id'); // Get the element ID
   buttonsClicked.push(elementId);
   localStorage.setItem("buttonsClicked", JSON.stringify(buttonsClicked)); // save to local storage
   window.location = $(this).attr('href'); // follow the link
});

Upon loading the view, check which buttons have been pressed:

$(document).ready(function() {
   var retrievedData = localStorage.getItem("buttonsClicked");
   var buttonsClicked = JSON.parse(retrievedData);
   // loop through the array
   buttonsClicked.forEach(function (value) {
       $("#"+value).addClass("auto-stylelay1");
   });
});

You can include this script in the _Layout view.
Note: This code has not been tested. Please let me know if it works.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize morris.js within an AngularJS directive to handle undefined data

Using the morris.js charts in my angular js app has been a great addition. I decided to convert it into a directive for better organization and functionality: barchart.js: angular.module('app_name').directive('barchart', function () ...

Arranging DIVs in a vertical layout

Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness. Here are some examples: Wider layout Taller layout I have tried using floats, inline-block display, ...

Detonating the second-level element in a PHP/Typescript array

My PHP code is currently formatting an array for me with the following structure: $data = $dataQuery->fetchAll(PDO::FETCH_ASSOC); if(count($data)){ $data_arr=array(); $data_arr["records"]=array(); $data_arr["records"] = ...

What is the best location to place an HTML wrapper element within a React Project?

Just diving into the world of React, I've embarked on a simple project with bootstrap My goal is to reuse a specific HTML structure: <div className="container"> <div className="row"> <div className="col-lg-8 col-md-10 mx-auto"&g ...

The task "gulp js src - duplication and implementation of base" involves duplicating

My gulp task is set up to copy JavaScript files. The initial setup below did not work: gulp.src('./**/*.js', {base: '../src/main/'}) .pipe(gulp.dest('../target/dist')); After making some adjustments, the following code ...

Discovering how to adjust the "border-spacing" in a React Material-UI Table to ensure each row is nicely separated

I am looking to create Material-UI Collapsi Table Rows with separate styling. Check out the link for more information: https://material-ui.com/components/tables/#CollapsibleTable.tsx const theme = createMuiTheme({ overrides: { MuiTable: { root ...

Reposition the selection column to the right side within the UI-Grid

I am currently working with ui-grid and I need help relocating the selection column to the right side. Appreciate any assistance. Thank you! ...

How should v-select, item-text, and item-value be correctly utilized?

When I make an API call, the response is returned. https://i.sstatic.net/AsFzu.png from another perspective. https://i.sstatic.net/T4vqa.png I store the result of the API call in a variable called result = [];. To create a dropdown list, I use v-select ...

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

Item.find() .then(function (items) { if (items.length === 0) { Item.insertMany(defaultItems) .then(function () { console.log("Successfully Saved"); }) .catch(function (err) { console.l ...

Send back Complex data type to display using AJAX

My Objective I am dealing with a complex type generated by EF from a stored procedure. This type returns a list of GetAvailableRooms_Results. I want the user to choose two dates and then get a list of available rooms (complex type) returned by the stored ...

Exploring Methods to Access External Iframes Using PHP or JavaScript

I need assistance tracking my package that was sent through the local post service. The tracking information can be found at this link: . Using the tracking number RF166699170SK, I should be able to locate the package. However, when I attempt to retrieve ...

Issue with deactivating attribute through class name element retrieval

There are multiple input tags in this scenario: <input type="checkbox" class="check" disabled id="identifier"> as well as: <input type="checkbox" class="check" disabled> The goal is to remov ...

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

What is the method for showcasing an array using AngularJs in my specific scenario?

I have an array in JavaScript structured like this: var data = [ 2005 = [ Jan = [0,1,2,3,5...], Feb = [0,1,2,3,5...], ...more ], 2006 = [ Jan = [0,1,2,3,5...], Feb = [0,1,2,3,5...], ...more ], 200 ...

The cursor is located on the right side instead of the usual left side

Why is the cursor positioned on the right side rather than the left side? $('.legoact').focus(); When the cursor is positioned on the right side, it can be achieved using the following CSS properties: .lego{ background:#ddd; width:70%; m ...

Extract JSON information using JavaScript or jQuery within the client's browser

I am looking to extract data on the client side by storing it in an input field after serializing it. JavaScriptSerializer objJavaScriptSerializer = new JavaScriptSerializer(); string jsonString = objJavaScriptSerializer.Serialize(_statusVal); jsonFmtStat ...

What are the steps for encoding a value using jquery serialize?

I attempted to encode all values using the following code: encodeURIComponent($("#customer_details").serialize()); Unfortunately, it did not produce the desired results. Is there a method to retrieve all elements on a form and individually encode each v ...

Manipulate the lines in an HTML map and showcase the distinctions between them

I've been searching through various inquiries on this particular subject, but none have provided me with a satisfactory response. I have created a map where I've set up 4 axes using the following code: function axis() { var bounds = ...

Converting a busboy file stream into a binary object in Node.js: A step-by-step guide

Seeking assistance with image file upload functionality by integrating Express and Node.js. Currently, I am utilizing the Busboy package to receive binary data in a file format. Specifically, my inquiry revolves around understanding how to capture this bi ...