I want to make an application with dynamic theming. For example, there is a button, you click it and color of some elements changes by some rule. First idea - do it with
<style type="text/css" ng-bind="ownStyle"></style>
and init ownStyle in $rootScope:
$rootScope.ownStyle = "* {color: green }";
But it seems awful + it's too hard to write css rules as string. Is there a more elegancy way to do it?
Can try something like this..
$rootScope.color = red;
$scope.changecolor = function(){
$rootScope.color = blue;
}
/* Base color */
.dinamic{
background-color: white;
}
<style>
.dinamic{
background-color: {{$rootScope.color}} !important;
}
</style>
<button class="dinamic">I Will Change Color</button>
You can use ng-class directive.
Just add this directive to "some elements", set proper condition and it'll be fine.
You can use ng-class built in directive.
<div ng-class="{'some-class': condition}></div>
Related
How can I use the attribute expanded when I style it using CSS?
I got a dropdown which is
expanded="false"
and when it's open it becomes
expanded="true".
There is no class so I was wondering if I can use that attribute for styling?
Thanks
div[ expanded="true"]{
color:red;
}
<div expanded="true">huujioujo</div>
Yes, you should be able to:
div[expanded=true] { color: red; }
However, there isn't a expanded HTML attribute that I know of? It would be better to just add the class .expanded instead of using expanded="true".
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');
I would like to override setting that already defined with selecting
parent selector but I don't know how.
Say, there are 2 pages on a website like the following...
-Home page-
<body><h1 class="sifr">Home</h1></body>
-About page-
<body class="about"><h1 class="sifr">About</h1></body>
then, I have these in sirf-config.js...
sIFR.replace(fontname, {
selector: 'h1.sifr',
css: '.sIFR-root { color: #666666; font-size:29px; }'
});
sIFR.replace(fontname, {
selector: 'body.about h1.sifr',
css: '.sIFR-root { color: #FFFFFF; font-size:29px; }'
});
but it doesn't work...
If anybody help me I would appreciate.
Run the replacements for body.about h1.sifr before h1.sifr. sIFR doesn't calculate specificity but executes the replacements in-order. Replacing h1.sifr replaces all such elements, so body.about h1.sifr only finds elements that have already been replaced.
Check the order your loading CSS vs issuing the replace commands ...
I don't use Sifr, so I don't know exactly how it works. I assume that the code creates CSS code like this:
h1.sifr { color: #666666; font-size: 29px; }
body.about h1.sifr { color: #FFFFFF; font-size: 29px; }
If it does, that will override the color style for the heading in the about page, as the selector for the second line is more specific than the selector in the first line.
You can read more about specificity here.
If it doesn't work, it's because there is something in your code that doesn't look like you think it does, and it may very well be something in some other part of your code that you haven't shown here that is causing the problem.
You can use the Firebug plugin in Firefox to inspect the elements in the page to see exactly which css is affecting each element.
How do I change the style (color) of a div such as the following?
"<div id=foo class="ed" style="display: <%= ((foo.isTrue) ? string.Empty : "none") %>">
<%= ((foo.isTrue) ? foo.Name: "false foo") %>"`
Try this:
in the .aspx file put thees lines
<div id="myDiv" runat="server">
Some text
</div>
then you can use for example
myDiv.Style["color"] = "red";
If you want to alter the color of the div with client side code (javascript) running in the browser, you do something like the following:
<script>
var fooElement = document.getElementById("foo");
fooElement.style.color = "red"; //to change the font color
</script>
If you wanted to change the class instead of the style directly:
ie.. create another class with the styling you want...
myDiv.Attributes["class"] = "otherClassName"
You should set your colors in CSS, and then change the CSS class programatically. For example:
(CSS)
div.Error {
color:red;
}
(ASP.NET/VB)
<div class='<%=Iif(HasError, "Error", "")%>'> .... </div>
Generally, you can do it directly
document.getElementById("myDiv").style.color = "red";
There's a reference here.
It looks like you are writing ASP, or maybe JSP. I'm not too familiar with either language, but the principles are the same no matter what language you are working in.
If you are working with a limited number of colours, then the usual option is to create a number of classes and write rule-sets for them in your stylesheet:
.important { background: red; }
.todo { background: blue; }
And so on.
Then have your server side script generate the HTML to make the CSS match:
<div class="important">
You should, of course, ensure that the information is available through means other than colour as well.
If the colours are determined at run time, then you can generate style attributes:
<div style="background-color: red;">
That code fragment doesn't say much - if the code is server-side why don't you change e.g. the class of the HTML element there?
IMO this is the better way to do it. I found some of this in other posts but this one comes up first in google search.
This part works for standard JavaScript. I am pretty sure you can use it to remove all styles as well as add/overwite.
var div = document.createElement('div');
div.style.cssText = "border-radius: 6px 6px 6px 6px; height: 250px; width: 600px";
OR
var div = document.getElementById('foo');
div.style.cssText = "background-color: red;";
This works for jQuery only
$("#" + TDDeviceTicketID).attr("style", "padding: 10px;");
$("#" + TDDeviceTicketID).attr("class", "roundbox1");
This works for removing it JQUERY
$("#" + TDDeviceTicketID).removeAttr("style");
$("#" + TDDeviceTicketID).removeAttr("class");