Want to edit things like DIV size, color, positioning (absolute), height/width etc.
You can just output the CSS like any other with Response.Write or the <%= someValue %> methods.
Here are some of the other methods:
http://cfouquet.blogspot.com/2006/06/making-dynamic-css-content-with-aspnet.html
If by "on the fly" you mean while the user is interacting with the page then you're going to need to use some javascript. I suggest learning jQuery as it provides an easy and effective way interact with the DOM.
Ryan, you may want to look into Themes if you want to change the appearance of your site based on user preferences (Learning about Skins can help as well but master themes first). This is really the right approach in the ASP.NET model unless you are looking just to adapt some specific output to certain data conditions.
I'm not sure of what you're trying to do with the information given, but to add css on the fly you can use jQuery to add the class to an element with those certain specifications.. you can have jquery wait in the background for something to happen on the client and just add the class with that certain style
Example:
<style>
p { margin: 8px; font-size:16px; }
.color { color:blue; }
</style>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("p:last").addClass("color");
});
</script>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
Related
SO. I have a simple CSS Class just like below:
.Container
{
width: 300px;
height: 100px;
background-image: url('../images/flags.png');
}
Is it possible that I change the value of background-img while running my MVC application? Some how I'd like to inject the value of background-image from my controller action. Your thoughts...
Just to make it clear that why would I need to do this? Refer to my
previous question which is not answered with a bounty of 50+.
There's a few ways to do this. Probably the easiest is to include the css class inside your master view and use some sort of base model that has a property for the value of the image you want and render that out in the view.
Alternatively, there's no reason your link tag for the css couldn't reference another controller action, take a query string parameter of the value you want and render out css instead of html. The controller could render a partial view that is css rather than html.
If the number of possible background images is well defined and small, create css classes with those background images defined.
Then switch the class of your element in HTML using ASP.NET on the server-side or JavaScript on the client-side.
E.g.:
<div class="image-container #imageClass"></div>
If you instead want to show arbitrary images, use inline-style and set that using ASP.NET. Here are two examples both using server-side rendering, written in the Razor templating syntax:
<div class="image-container" style="background-image: url(#imageUrl);"></div>
and here one using sprites where the image itself is set in the funnyimage class:
<div class="image-container funnyimage" style="background-position: #xPos #yPos"></div>
The examples above all work with server-side rendering. This means your images only switch when you change or reload the page. For changes while the page is viewed, you'll need to use AJAX.
Whatever you're doing that cannot be solved with a jQuery line like $(".Container").css('background-image', myImage); or adding a simple style tag to your head/body..
.. yeah, you can still use <style> tag injecting to manage your css.
Following the questions
Using jquery remove style tag from html page and jQuery CSS - Write into the <style>-tag, and mixing the recipe with some AJAX, here's the approach:
$.get(url, function(myImage){
if(myImage) {
$('#mystyle').remove();
$("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>" ).appendTo("head");
}
});
This way you're renewing your background image for all of your .Container on every ajax call to whatever service you're using.
Yes, it is possible now to Change HTML, CSS, and JavaScript during runtime. follow the following steps :
go to NuGet package manager and install Microsoft.AspNetCore.MVC.Razor.RuntimeCompilation. Check the compatibility during installation.
add the following line of code in your startup.cs file :
services.AddRazorPages().AddRazorRuntimeCompilation();
now save and build the project. it worked for me.
You can't change the css during runtime, but you can override the attribute by injecting the new class instead:
.ContainerUpdated
{
background-image: url('../images/newimage.png')!important;
}
In my site I am stick with some CMS. In my cms there is some sticky layout.
Now My client needs two different look on it.
So when I am on "homepage" my DIV class test show different and when I am on other page so that same class work different.
This is for home page
.test {
some data
}
This is for Other Page
.test {
some data
some data
}
So is there any way to make condition in css that if my URL is homepage so call this otherwise call this.
You should add a custom class on your body, like the page name.
<body class="home">
...
</body>
<body class="my_page">
...
</body>
Then you can have a different style for each one.
.home .test {
background: red;
}
.my_page .test {
background: blue;
}
You can't use CSS to detect the URL. So, you'll need to detect the URL with JavaScript (like this), or better, detect it on the backend.
Same css wont work differently for different pages(URLs), One way you can do is changing the inline styles with JavaScript. But it will be painful if you suppose to change a whole style-sheet.
Other way is, it is more than detecting the URL, you need to change the style-sheets dynamically for different pages. Different style-sheets may have same classes but with different styles.
Therefore, create separate style-sheets and apply dynamically.
You can get some idea about changing style-sheets dynamically here
You could use JavaSctipt to detect the URL, and then again use JavaScript to add an extra class to the body if you are on the home page. You then write separate CSS styles for elements contained within this new class.
I have a css based layout with a generic header image at the top of the page in my Rails app. There is a Course model will have a optional logo image which will hopefully replace the header image if it is present, when a user is viewing the course material. Is this possible and how do I go about it?
The css for the header is below...
#header{height:116px;width:100%;background:url('logo.jpg') top center no-repeat;}
The app is located at ... and when the user logs in, and clicks on a course, I want the course logo to replace the header image.
If I understood your problem correctly, some model defines a logo. In such case I would not mess with CSS - or at least not with assets files, because they are expected to be static.
You may define the logo in the layout: app/viev/layouts/application.html.erb Just create there something like this:
<head>
..
<style type="text/css">
#header { background-image: url("<%= #logo_path || 'logo.jpg' %>"); }
</style>
or
<head>
<% if #logo_path %>
<style type="text/css"> #header { .... } </style>
<% end %>
Then, in some controllers or actions or some views, just set the instance variable #logo_path if you want to have the logo different from the default.
In your static CSS you may define the default background-image, and just make sure that this rule from your layout has bigger importance than the rule from your static assets. If in doubt, add !important clause to the rule in layout.
Of course, if talking about dynamically you mean JavaScript, then you may just include the script and the logo path directly in an onclick attribute of given element, in a way similar to this:
<span onclick="replace_logo('<%= model.logo_path %>')">....</span>
The function replace_logo will not be difficult to write.
u can do in two ways by defining different classes for each images u want to show in header and then change claa depends on some variable(controller or action name ...etc) or by adding yield :style in head and overwriting header style depends on your requirements by using content_for :style.
I would just include that small specific portion of css in my main code and use a simple if...else statement, and change 'logo.jpg' depending on whether the user is logged in or not.
For example, if the user is logged in, the variable for the logo would be changed from the default value. If the user isn't logged in, then use the original logo.
Can't really provide more detail as there is no code to work with.
I'd like to have the images of a playing card displayed with CSS. But it would be great if there was a templating language that could set up a style like:
.playing-card-(.*) {
width: 30px
height: 40px
background-image: "/images/cards/$1.gif"
}
Does such a thing exist?
I'd love for this to exist but where I've had to do simular tasks I've had to rely on the server side to write the background-image as an inline style or use JS to do it (eg if I'm loading the data via AJAX).
I don't know if there is any CSS technology that will do this for you. Though it's not ideal, you can use jQuery to achieve this:
I would start by assigning a common class to each card "cards", then using jQuery to iterate through each item, assigning the appropriate CSS to the element.
$('.cards').each(function(index,element) {
$(element).css('background-image','url(images/cards/'+index+'.gif)');
});
The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem for users who do not have javascript enabled.
The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.
If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.
Any easy way to do this? I tried <noscript> with <style> inside of that, no luck.
One way to approach it is by always adding a CSS class to the elements you wish to have a specific style and then, once loaded, run some JavaScript to remove those classes from the elements with that class.
As an example (I use jQuery here for simplicity's sake but this can obviously be done without a JS library):
$(document).ready(function()
{
$(".nonJsClass").each(function()
{
$(this).removeClass("nonJsClass");
}
}
Where the 'nonJsClass' has CSS rules that will now only apply if the user doesn't have JS enabled.
You could add a class to the body tag, that triggers your desired CSS when JS is not enabled, then right after the body tag, remove it with JS.
Thus users with JS support won't see the effects of the special class.
Including a stylesheet inside a noscript tag was not possible before HTML5, but it is now (as long as you do it in the "head" of the document).
http://adapt.960.gs/
In the case of JavaScript being purposefully disabled or unavailable, stylesheet defaults can be served via , which is perfectly valid in the for HTML5.
scunliffe's answer is good. An alternate way would be to write a CSS style that only displays if JavaScript is enabled and only targets the div you want, using class chaining:
.prochart-colitem.js-enabled {
/* your JS-specific styles */
}
You can then use jQuery, for example, to add that additional class:
$(document).ready(function() {
$('.prochart-colitem').addClass('js-enabled');
});