Modify and maintain the selected DIV tag on the Master Page

My CSS class, selected, highlights the current step in a DIV on separate pages by moving the selected word to the next DIV.

However, I am struggling to achieve the same effect in Master Page VB .Net where all steps are on one page. How can I highlight the next step when the page loads? Thank you for your help.

<div id="Div1">
    <div class="step selected" id="Div2">
        <h2>
            Join</h2>
        <img src="./assets/images/signup_arrow.png" class="selected">
    </div>
    <div class="step" id="Div3">
        <h2>
            Choose</h2>
    </div>
    <div class="step" id="Div4">
        <h2>
            INVITE</h2>
    </div>
</div>

Answer №1

If you wish to dynamically modify the values of these controls, you will need to make them accessible on the server side by using the runat="server" attribute. Once this is done, you can access the controls either directly in the MasterPage or indirectly through constituent Controls or the Page itself using FindControl("Div2"), which will retrieve an HtmlGeneric control representing the div. From there, you can utilize its Attributes collection to alter the class (unlike WebControls, controls under System.Web.UI.HtmlControls.* do not have a direct CssClass property).

There are also options available for client-side modifications.

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

Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs. Below you can find the ...

When there are multiple elements inside a bootstrap button, it causes the button to lose its

I've encountered an issue with the bootstrap button. Whenever I insert 2 elements like div or span inside it, the little arrow within the button ends up below the button text. It seems to be caused by a float attribute which then arranges the elements ...

Setting default values for ASP.NET view routing can help streamline navigation and

I have a unique routing setup that uses {controller}/{id}/{action} instead of the typical {controller}/{action}/{id} Now, I am looking to configure the defaults so that if no id is provided, it will default to the Index action in the controller. If an Id ...

Is it possible to initially design a login page using HTML/CSS and JavaScript, and then integrate VUE into it?

As part of a school project, I am tasked with developing a web-based application for a library system. The goal is to create a platform where librarians can login and manage books by adding, removing, or editing them. My responsibility lies in handling the ...

Click anywhere outside the sidemenu to close it

I want the menu to behave like the side menu on Medium. When the side menu is open and the user clicks outside of #sidebar-wrapper, the side menu should close. Currently, I have to click the toggle X to close the menu. html <a id="menu-toggle" href="# ...

Is there a way to verify if a postback has occurred within a template control?

In my web application, I am utilizing a template control. Currently, the OnLoad function gets executed even during postbacks (which is expected). Is there a way for me to access an isPostback property within this method, so that I can perform the require ...

Troubleshooting Bootstrap 4: The .col class is experiencing issues with functionality

Why is the .col-6 class malfunctioning on screen sizes below 575px, causing the cards to appear distorted? How can this issue be resolved? To see the problem, click on Run code snippet->Full Page and resize the screen width to below 575px: .divCard{ ...

Background images in Google Chrome browser only become visible after I manually modify the element's CSS using the inspect tool

The issue I'm facing is with the Google Chrome browser not displaying background images unless I inspect the element's CSS using the inspecting tool. I have an anchor tag set with the following properties: display: block; float: left; width: 2 ...

Update error message for users who are unable to access their account in the Password Recovery feature

When utilizing the ASP.NET PasswordRecovery control with the standard membership provider, a locked out user may receive the following confusing error message: "We were unable to access your information. Please try again." I am seeking to modify this mes ...

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

Is the answer not accessible within this setting?

Similar Question: Response is not available in context? How to solve it? I am trying to send a PDF file to a client as an attachment. I attempted to use the Response object for this purpose, but encountered an error. Response.Buffer = false; ...

Add a textbox control to a gridview based on a condition in C# ASP.NET

I have included a Label called lbannotation in my ASP.NET gridview by default: <asp:TemplateField HeaderText="annotation" ItemStyle-HorizontalAlign="Left"> <ItemTemplate> <asp:Label ID="lbannotation" ...

How can I align the menu to the right in the navbar using Bootstrap 4?

I'm currently customizing the Bootstrap 4 default navbar and I want to add a collapsing menu that is positioned on the right, instead of the left, when it's not collapsed. So far, I have attempted to use text-right and float-right, but unfortuna ...

Is it possible to incorporate a background color into a table using the predefined classes in Bootstrap?

Is there a way to utilize the default color scheme in twitter-bootstrap-3? I attempted using "Active" and "Success" for colors rather than background-color, but it did not work with this code snippet. <table class="table table-bordered background-col ...

Z-index ordering for menus containing submenus

I'm trying to create a menu with animated submenus that slide in from the left side of the page. However, no matter what z-index I assign to my submenu, it always appears on top of my content. I positioned my submenu 150px to the left to show the over ...

Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Encountering an error with externally loaded scripts: Refusing to load the script 'https://code.jquery.com/jquery-3.4.1.slim.min.js' due to violating the Content Security Policy directive: "script-src 'self' https://ajax.googlea ...

The PHP code to include the head section with a link to the CSS is not functioning properly

I've recently dabbled in PHP and encountered my first issue that I can't seem to resolve. My goal is to have my index.php file, with the following code in the head section: <head> <?php require 'php/main/head.html'; ?> & ...

Using CSS to overlay multiple text boxes onto an image at different positions

Can you help me solve this challenge? I have an image of a real property that will be randomly loaded into a DIV with a width of 200 pixels. The image needs to be resized to 200 pixels wide while maintaining its proportional height. Additionally, I have fo ...

Tips for updating the date format in Material UI components and input fields

Is there a way to customize the date format in Material UI for input text fields? I am struggling to format a textField with type 'date' to display as 'DD/MM/YYYY'. The available options for formatting seem limited. It would be helpful ...

Programmatically enable/disable ScriptManager based on the presence of ScriptManagerProxy controls

I have attempted to implement the recommended method for programmatically disabling a ScriptManager without success, as outlined in this thread: Disable ScriptManager on certain pages StandardScriptManager.ascx: <%@ control language="vb" autoeventwire ...