I'm surprised that there is no "text-decoration: reverse" in CSS as it seems very awkward to achieve using JavaScript. I.E. set the element's foreground and background color to the background and foreground of the parent respectively.
I noticed JavaScript techniques for that here
Surely it's not that complicated?
What are you calling reverted?
Do you mean to set the background as the foreground color and vice versa?
(Maybe it's a stupid comment, but if so it is not a decoration is it?)
Anyway you're about to have a fight between DRY and MVC here :
either you declare a new CSS class
each time you want to do that. That's
redundant and painful, but you indeed
separated the style from the code.
Typically:
.mydiv {
background-color: blue;
color: red;
font-family:...;
(...)
}
.mydiv:hover {
color: red;
background-color: blue;
}
another option is to do that through javascript. Proxify suggested using jQuery.
The result would probably look like that... (not tested)
$(".invert").map(function (el) {
var color = el.css("color");
var bgcolor = el.css("background-color");
el.css("color", bgcolor).css("background-color",color);
})
The concept of "reversing" background and foreground style of text is not that easy to implement to the browser. If one allow your "text-decoration: reverse" in the browser, should background image also reverse onto texts? This is not what a browser today can draw.
Now consider transparencies and those alpha value. There are many aspects that make your idea of "reverse" impractical to implement in general.
well you could try using jQuery, it's a simpler way to achieve the same as normal javascript.
How about something like:
var bgColor = "#123456";
var textColor = bgColor.match(/^#([0-8][0-9a-fA-F])+$/g) == null ? "#000000" : "#ffffff";
So it uses white colored text for dark bacground colors, and black text color for lighter background colors.
While there is no CSS available to reverse text, there does exist a html element called bdo (bi-directional override) and the selector dir="rtl" and with it you can reverse text.
You can reverse the text in your page
If you then give it a class, you can then add additional style elements, for example, and you'll need to view the source code for this page to "read" what I've done. (p.s. you don't need to include the element, that's there to differentiate the code from the rest of this blurb...)
You can reverse the text in your page
.reverso
{ color: #cc3300;
font-size: 200%; }
and so on.
I hope that helps (O:
Checkout this -
http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/
Related
Most web browsers, by default, render pages as having a white background. However, this is to some extent user customizable, and some browsers are different. So, I want to find a way, either through CSS or JavaScript, to find out the background color of the page. The documentation on Mozilla's website suggests that document.bgColor can be used, and that its default value is white. It also suggests to not use it, since it's deprecated. But the docs seem to be in conflict with observed behavior: document.bgColor is an empty string if the page has no CSS to change it. The alternatives suggested don't work either: everything I tried gives me either an empty string or "transparent", which is clearly wrong: I can not see the desktop beneath my browser, hence it is not transparent. (Incidentally, IE11 actually behaves like Mozilla's documentation says that Firefox does. Go figure.)
I want to create an html list element (<ul>) whose background color matches the background color of the document. Is this possible? (I suppose you might be tempted to ask: if I want it to match the background, isn't "transparent" what I want? No. I want it to cover up some other element. Why? Because I'm making one of those auto-suggest thingies.)
Edit: 2 people have wisely suggested that I add an example so it becomes clear what on earth I'm talking about. Based on the answers I've been receiving, these 2 people are absolutely right. I've added a link to a fiddle in the comments of one of the answers, and now I'm adding it here:
https://jsfiddle.net/ftgu97fj/5/
You could use CSS2 system colors - note that these are deprecated in CSS3 and appearance property is advised to use instead.
ul { background-color: Background; } /* this should be desktop background */
ul { background-color: Window; } /* this is browser background */
However, after 5+ years, the standards turned 180 degrees: the appearance was abandoned (except for none value) and system colors are back with different names, see Michael Alan's answer here.
EDIT: Jan Turoň has found a method of doing this using CSS2 System Colors; Please defer to his answer. Note that the system colors are deprecated and that window is the default background color.
Based on the answer in this post regarding background color of highlighted text, it seems that this is likely not possible; the relevant question is also a browser-specific choice of a very similar nature:
Kaiido:
I would say that you can't.
Both getComputedStyle(yourElement, '::selection').backgroundColor and getComputedStyle(yourElement, '::-moz-selection').backgroundColor will return transparent as default value and browser won't override os's default.
(Worth to be mentioned that if you set it to transparent, default os' value will be overriden).
I don't think browsers have access to os default preferences, and if they do, they probably won't let any website access it it so easily.
This question suggests using a canvas element to sample the pixel color, but this unfortunately does not seem to work; in Chrome, it will return 0,0,0,0 for the color of an unset pixel. It gives a potential solution using chrome.tabs, but this is only available to chrome extensions.
The only possibility I can think of would be to use something like HTML2Canvas to "screenshot" the page and sample an empty pixel there, but there is no guarantee this library will operate properly for an unset background.
Nowadays, with access to the system colours and other user preferences, we can simply do this:
ul { background-color: Canvas }
See: CSS Color Module § System Colors
If <ul> element is a direct descendant of <body> element you can use css inherit keyword
ul {
background-color: inherit;
}
Since comments are getting way too long on OPs post, here's what I'd suggest you try:
window.getComputedStyle(document.body)['backgroundColor'])
The usecase of your autosuggest displaying correctly on pages where no background-color has been set (such as empty page) should be covered by setting white as the default background color for your ul. It becomes alot more problematic if you want to take possible background-images into account as well.
Please also be aware that html can have a background-color as well, and body may be limited in size to not cover the whole viewport. See this pen:
http://codepen.io/connexo/pen/jrAxAZ
This also illustrates that your expectation to see your desktop behind your browser if the body were truly tranparent is wrong.
This will definitely solve the problem! check how the js function works
function getBackground(jqueryElement) {
// Is current element's background color set?
var color = jqueryElement.css("background-color");
if (color !== 'rgba(0, 0, 0, 0)') {
// if so then return that color
return color;
}
// if not: are you at the body element?
if (jqueryElement.is("body")) {
// return known 'false' value
return false;
} else {
// call getBackground with parent item
return getBackground(jqueryElement.parent());
}
}
$(function() {
alert(getBackground($("#target")));
document.getElementById("ul").style.backgroundColor = getBackground($("#target"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id= "ul" style="background-color: red">
<p id="target">I'd like to know that the background-color here is red</p>
</ul>
i kept the prompt for your better understanding
So I'm creating a theme plugin for a forum where users often enter text with custom coloring. This is implemented as an inline style on a span.
The forum by default has a dark color scheme so most of the text is light. If I create a theme with a light color scheme this text would be hard to see.
I thought of using a CSS5 color filter that targets text with inline colors:
.Comment span[style^=color] {
filter: hue-rotate(180deg) invert(100%);
-webkit-filter: hue-rotate(180deg) invert(100%);
}
By inverting and rotating the color spectrum this turns a light blue color into a dark blue and light red into dark red, preserving the hue but making it darker. This actually works but it has the side effect of also inverting the colors of images and other elements embedded in the text.
I thought of doing another color inversion on child elements but this leaves images looking like junk since apparently hue-rotate is not very accurate at all.
A solution would be to have the CSS only target the text node of the span and not any child elements but that does not seem possible? Unless I'm missing something I don't see any selectors for text nodes.
Is there something I can do in jQuery to perform this color inversion? I'd rather not have to destroy all the coloring on the page as that would upset the users.
this Solution only goes lighter does not solve the problem:
I mis-read the question... I tried to delete this because it did not solve the problem for light backgrounds but it still appeared.
This can be accomplished by making use of rgba
Tested and works:
$(window).load(function() {
var col = $('.Comment').css('color').replace(')', ', 0.20)').replace('rgb', 'rgba');
$('.Comment').css('color', col);
});
var col converts rgb to rgba allowing for color percentage
Here's a solution that uses the javascript library tinycolor. A pure CSS solution would be much preferred but it doesn't seem possible.
$.getScript('https://rawgit.com/bgrins/TinyColor/master/tinycolor.js').done( function() {
$('.Comment span[style^=color]').each(function() {
var color = tinycolor($(this).css('color')).toHsl();
color.l = 1 - color.l;
$(this).css({'color': tinycolor(color).toRgbString()});
});
});
I'm trying to create a simple theme system here. I have few elements with red background color. I also have a button that will change the elements background color to green.
I'm trying to code but I couldn't figure out how can I select and change the bg color of all red elements to green!
For example, I have 4 divs. Two of these have a red header, and when I click the button these headers background color must be changed to green. It's Ok here, but the problem is that the divs are dynamically generated, so do I have do loop all the page to find the red bg color? Could someone enlight me? =)
Thanks a lot! =)
I think the best solution would be to use different stylesheet for each theme and keep the current theme value in SESSION or COOKIE or just pass it as URL argument. But that would be a server side solution.
On Client side, you can just use different classes for each theme and toggle them on the button push event using .toggleClass()
$('.green').toggleClass('red green');
The easiest way to do this would be to have a specific CSS class for each background color you're using. ex:
.color-red{ background-color: #FF0000; }
.color-green{ background-color: #00FF00; }
Once you do that you can select on the CSS class as well as set the CSS class:
$('#button-togreen').click(function(){
$('.color-red').removeClass('color-red').addClass('color-green');
}
It's kind of a round-about way of doing it, however there is no easy way to select on a CSS attribute (to do that you'd have to select all elements of the page and then check each one of them for the background color attribute which would be scarily inefficient...)
I don't know what you mean by headers, but I think this should do what you want:
$('.myDivs').filter(function(index){
return $(this).css('color') == 'red';
}).css('color', 'green');
I have this page that does some funky database stuff that takes a couple seconds to process, and in the meantime I'd like to set a "wait" cursor so the user doesn't flip out and keep clicking the button. I've looked at the
document.body.style.cursor = "wait"
thing, the problem with this is that it only works when the mouse is over the body of the page (i.e. still shows normal pointer if it's over a button). How can I set it so that no matter where the mouse is on the page, it shows a wait icon?
A second part to this question is, once it's done it's thing, how do I set it back? If I set it back to "default", this seems to override any "hover" cursor changes I had set in my CSS (so it no longer becomes a hand when over a specified object, etc.).
EDIT: the first answer works nicely, except in IE it doesn't refresh the cursor (so you notice the change of cursor type) until you actually move the cursor. Any fixes?
What I suggest is two things:
a) Better write a CSS like
body.waiting * { cursor: wait; }
b) Use the JS to handle the body class
/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want
You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.
EDIT 2019: don't use jQuery for just this, use classList
The styling should be handled via CSS, as stated by W3C.com:
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. ... The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
As suggested by Tom Rogerro, add a line to your CSS file:
body.waiting * { cursor: wait; }
However, your script should not overwrite the entire list of class names. Tom suggested setting the class names via jQuery, but jQuery is unnecessary in this case. Simple Javascript can do this.
To add a class name 'waiting' to the document body:
document.body.classList.add('waiting');
To remove a class name 'waiting' from the document body:
document.body.classList.remove('waiting');
For your first problem, try using cursor: wait !important;.
For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.
If you are happy using JQuery then a quick way to solve this would be to use:
$('*').css('cursor','wait')
I don't know how elegant this is but it has been working for me,
Not an answer to the question, but a way of achieving what is wanted.
Make a div (see class below) visible when you are loading.
ensures no element is accessible and dimmed display indicates this.
you can add an animated gif to indicate something is going on instead of the cursor.
.loading{
position:fixed;
height:100%;
width:100%;
left:0;
top:0;
cursor:wait;
background:#000;
opacity:.5;
z-index:999}
Any elements that don't inherit the cursor by default (such as buttons) will need to set the cursor to inherit:
someButton.style.cursor = 'inherit';
To go back to the default for an element (and not break things like :hover with a forced cursor), set it to an empty string:
document.body.style.cursor = '';
I tried everything but finally this jquery worked, especially if you want wait cursor over all elements including buttons and links.
define at the top of angular .ts file
declare var $: any;
and then where ever you want wait cursor:
$('*').css('cursor','wait');
and remove wait:
$('*').css('cursor','auto');
To fully replace the CSS toggling behaviour, we can simply use this inline:
<img
src=https://cdn.sstatic.net/Img/unified/sprites.svg
onmouseover="this.style.cursor = 'crosshair'"
>
My problem is I have couple of divs in my page. All have header of similar color. Now if I have to change the color(for example background color) of all divs, I have to make changes as many divs I have. Is it not possible to just change or say write the color code at one place (like in a variable) and the then use that variable as color value in the embedded styles to all those divs. Something like javascript entities.
If you need variables in CSS, you might want to look at CSS pre-compilers (is this the correct term?), such as Sass, which does this Server-side and eases the pains for having many different color repeated across multiple rulesets.
Otherwise, when developing, try splitting your CSS files into individual components, such as typography.css, color.css etc. to help better organise them. You'll still want to combine them after development is complete for better performance, but doing this does help keep things neater and tidier.
Lastly, you can always define large rules like this:
#header, #footer, #nav, #sidebar {
color: orange; /* I like orange! */
}
Which would reduce redundancy somewhat. Using Javascript for styling and presentation should only be kept as a last resort; there are always tools available to keep your CSS tidy; you only need to use them.
u can write some css and jquery to achive this
.color1
{
color:red;
background-color:green;
}
.color2
{
color:blue;
background-color:orange;
}
now on some event u can change classes. for example intitially u have
<div class="header color1">SOME TEXT HERE</div>
<div class="header color1">another header</div>
u can change this with jquery or even with javascript :)
$("#somebutton").live("click", function(){
$(".header").removeClass('color1');
$(".header").addClass('color2');
});
this will change color of both headers at click of button with id somebutton
How about setting the same class on all divs and set all common colors in there? That way you'd only have to change the color for that class.
I would suggest using jQuery or another javascript library, to do this.
Assign a class to the divs you wish to alter, and then use the following code (when giving them a clas of 'header-div')
$('.header-div').('background-color','#FF0000');
this will change ALL elements with the class of 'header-div'
Jquery solution
define all the divs with a specific class like
<div class="changeable"></div>
Then use jquery to change the background
$(".change").click(function() {
$(".changeable").css("background","#000");
});