My MVC website has a black and white color scheme with specific design elements in blue color. I handle all the coloring through CSS.
I would like to change the color of these elements from blue to a different color occasionally. However, when using jQuery to do this upon document loading, the colors in asynchronously loaded elements do not change.
Is there a way to dynamically alter the CSS file itself in MVC, or perhaps an event for updating asynchronously loaded elements as well?
Have you considered organizing your elements into separate files and then selectively including the ones you need? For instance:
In a file called default.css
#myDiv {
color: blue;
}
You could then have another file, let's say red.css.
#myDiv {
color: red !important;
}
In your main page, you can load the red.css based on specific conditions. Here’s an example:
<link rel="stylesheet" type="text/css" href="/css/default.css" />
<% if (SomeCondition) { %>
<link rel="stylesheet" type="text/css" href="/css/red.css" />
<% } %>
Are the colors on your website going to change frequently? If not, consider implementing a method that generates a new stylesheet based on the current time.
public ActionResult GenerateStyle() {
string stylesheet = FetchStyles();
return Content(stylesheet, "text/css");
}
After revisiting the question, I decided to provide a completely different response.
Dealing with CSS is primarily declarative, which offers significant convenience. When you declare a style, you don't have to worry about reapplying it to new elements or reprocessing the DOM. Changes happen seamlessly within the browser. On the other hand, imperatively altering new elements every time a modification occurs can be cumbersome and prone to errors. Therefore, there isn't a universal event for "async loaded elements" and it's advisable not to seek one.
Benefits of Caching
In a web environment, keeping a constant CSS file is generally a good practice. The browser caches the CSS, allowing it to be quickly retrieved when needed. If you make changes to your CSS, the browser might not detect them immediately. While there are various considerations to keep in mind, this holds true in most scenarios.
So, even if you edit your CSS file, unless you directly inform the browser of the change, it may not take notice.
One technique called cache-busting involves adding a GET parameter after the CSS link, for example:
<link href="https://www.famous-cats.com/style/puna.css?v=3" rel="stylesheet" type="text/css" />
The browser perceives ?v=1 as distinct from ?v=2, leading it to cache versions with different GET parameters even if they reference the same file.
Modifying Files
However, is it advisable to directly alter the CSS file itself? If 95% of the rules remain consistent each time (except for specific color changes), it might be beneficial to segregate them into a "main" file and manage color-related rules separately in a different file or inline in the HTML.
Another consideration when changing files is whether you intend to generate new styles programmatically. If not, maintaining constant files and switching between them might be more efficient.
DOTLESS
DOTLESS is an asp.net port of LessCSS. For its features, visit , where you'll find it shares similarities with Sass but with a slightly different syntax.
One advantage is the ability to use variables and retrieve their values from URL parameters. For instance, linking to style.less?color=fuschia will assign the value of the variable "color" to your preferred shade.
Less is a valuable tool that can significantly streamline development.
The Recommended Solution
A practical approach is to handle color modifications in a separate CSS file:
<link href="https://www.famous-cats.com/style/main.css" rel="stylesheet" type="text/css" />
<link href="https://www.famous-cats.com/style/color.less?color=00FF55" id="colorcss" rel="stylesheet" type="text/css" />
To change colors, simply use:
document.getElementById('colorcss').href = 'color.less?color=F35741';
(I've assigned an id to the link tag).
This method works effectively.
Explore Less further to understand how you can employ color variables. You can enable administrators to easily select a specific color.
Remember, inline CSS can be useful and creating it in Razor is straightforward. For a few rules, it's a viable option. If you're not using Less, consider inline CSS or generate CSS through an MVC controller-action (set the MIME type to text/css and utilize a URL parameter for color changes or cache busting).
I trust this addresses your query.
I am facing an issue with a Div and Table placed inside a container. Although they are meant to completely fill the container, occasionally there is a one pixel difference which can be quite annoying. I have prepared a test case and attached a screenshot h ...
I created a web application using jquery mobile and ran into an issue. I am trying to call a function by clicking on a dynamically generated anchor tag, but it's not working and showing an error that the function is not defined. Any assistance on this ...
My objective is to design a button with multi-line text and an icon positioned centrally next to it for both lines. Refer to the screenshot below for clarification: https://i.sstatic.net/ODPI2.png Despite my efforts, I am encountering difficulty in cente ...
I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...
Looking at the code below, I find myself having to manually input arr[0], arr[1], arr[2]. But what if the array options change in the future? I want the code to dynamically update without any manual changes. Essentially, I need a solution that loops throu ...
To extract specific text from multiple div tags, I need to trigger an event when clicking a button. <div class="col-lg-3 col-md-6 mb-4"> <div class="pricing-table pricing-secondary"> <div class="price-hea ...
I am attempting to format this complete form with an indentation: <%= form_for([micropost, micropost.comments.build], :html => { :id => "blah_form" }) do |f| %> <div class="field"> <p2>Who are you?</p2> ...
I have been struggling to align the label to the left of my switchbox. Despite searching through stackoverflow and other websites, I haven't been successful in achieving the desired alignment. Here is a trimmed down version of the code for reference: ...
This Question May Have Been Asked Before: Sequencing ajax requests I am faced with the task of retrieving songs by various artists through an array of artist names using Ajax calls to a remote webservice. My main concern is ensuring that all the ajax ...
Is there a way to hide the scrollbar functionality on a horizontal scrollbar without using "overflow: hidden"? I need to maintain JS functionality and ensure compatibility with all modern browsers. $j = jQuery.noConflict(); var $panels = $j('#primar ...
OBJECTIVE I aim to restrict the user from scrolling while the page is loading. ISSUE The snippet of code provided successfully prevents the user from scrolling during the additional 2 seconds of the loader animation: $('body').toggleClass(&ap ...
In my ASP .NET MVC project, I have the Create action method below: public ActionResult CreateVMNetwork(int vmid) { VMAssignIps vmips = new VMAssignIps() { TechnologyIP = new TechnologyIP() { TechnologyID = ...
Just returning to the world of coding and struggling with a basic problem. Any help would be greatly appreciated. I am trying to position the 'header-top' (red) div at the top, and the 'header-bottom' (blue) div at the bottom. However, ...
Before you downvote, please consider my rationale. I am in the process of developing a web-based educational project that includes an art section. When a user clicks on a button, an element containing a picture of an art piece appears. I then want to open ...
I'm having some trouble with the RottenTomatoes movies API. I've been trying to display the movie's synopsis below the input field, but it's not working as expected. Can anyone point out what might be causing the issue here? If you nee ...
I'm struggling with jQuery and can't seem to figure out how to change the selected radio button based on a value in another select box. <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" na ...
Is there a way to simulate a mouse event on a dynamically created object, such as a menu item? It seems to work on a statically created menu, like this: $("#Help").trigger("mouseenter"); However, it doesn't work on a menu that has been created dynam ...
i am looking to create a component similar to this https://i.sstatic.net/fwIB0.png currently, I am utilizing a material UI pop menu in my project below is the JSX code snippet <div className="navMenu" style={{ position: "relative" ...
I'm currently in the process of developing an ASP.NET MVC web application and incorporating jQuery for certain client side functionalities. One feature I'm working on involves displaying categories retrieved from a database, and dynamically gener ...
I've been attempting to stretch a div to the browser's height using CSS in jQuery, but it doesn't seem to be working. I can successfully apply 100% width to the div, but height is proving to be a challenge. Any ideas why this might be happen ...