I've been playing around with Javascript to modify the background and theme of my page, http://www.gfcf14greendream.com/, so that it displays a different background in each season, and that works. Now since everything was green before (I am such a freak), I've been experimenting to change the font color of div tags to a readable color depending on the background (for now I'm using a purple on the summer background, rgb(128, 0, 128) but if anyone thinks there is a better color let me know), and it has worked, using these lines:
var divs = window.parent.document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].style.color = "rgb(128, 0, 128)";
}
It does work, for these pages that I changed (I haven't changed all since I'm still testing) http://www.gfcf14greendream.com/smssender.html , http://www.gfcf14greendream.com/employmentassistant.html . But while it seems like it works for this page, http://www.gfcf14greendream.com/programs.html , the divs that are inside the table are unaffected (like this div:)
<td align="center">
<div style="text-align: center; color:#00FF00; font-size: 15px">
<font color="#00FF00">December 16th, 2012</font>
</div>
</td>
So why is it the divs within a <table> tag are not recognized? Should I deem tables as obsolete (someone told me they're evil) and try to format one with divs using CSS?
at the moment this isn't working because of the <font> tag. The divs style is being affected, however the font tag within is not allowing you to see the changes. Remove the font tag and you should see something.
With that said, you shouldn't be using the <font> tag at all. W3 tells us HTML5 classifies it as a non-conforming feature, and "... really, don't use it."
You should really avoid the font tags, as Jan Dvorak pointed out. But even with them, it can be solved with just CSS:
div, div font {
color: rgb(128, 0, 128) !important;
}
I'd also add a season class to the body (as in <body class="summer">), so I can create multiple styles according to the season:
.summer div, .summer div font { color: rgb(128, 0, 128) !important; }
.winter div, .winter div font { color: rgb(0, 0, 255) !important; }
That's because these divs have 'style' attributes, and they override properties you assign with JS. However, it's better to use CSS instead of such magic, just as #bfavaretto said :)
upd. I wasn't correct at all, thing is font tags have 'style' attributes, and these override property you assign to their parent, div.
the color of div is modified, but the text is not,this because your text is actually in "font" tag
I see your pages are referencing jquery, try to use this:
$('div,div>font').css('color','rgb(128,0,128)')
Related
I am using a js library (mermaid) to generate svg on a web page. I need to dynamically apply styling to parts of the svg as the user activates various commands using keyboard shortcuts, Particularly, I need to highlight the element in the svg that is currently designated as the selected one in the logical model. Looking at other questions on dynamically styling svg deal with inlined static svg, so they probably don't apply to my case and none of the methods I tried so far have worked.
The style I am trying to apply is
border-radius : 2rem; box-shadow : 0 0 3rem red;
when applied to regular html, this gives the element a glowing red border.
First thing I've tried was to include this as a class in a element in like this :
<style>
.highlight {
border-radius : 2rem;
box-shadow : 0 0 3rem red;
}
</style>
Adding the class to a regular html element 's class list like an , , or , would produce the desired styling. However when I would programmatically get a element and add the class to its class list, then it would remain without the glowing border. Inspecting the svg using chrome developer tools revealed that the relevant class has been added to the element's class list. Using the same method was successful for regular html. For reference here is the method I used to add the class:
graphicDiv.querySelector(selector).classList.add('highlight')
This having failed, I thought maybe the svg had some styling inside its internal element that overrode my styling, so I added !important to my styles so they would have highest precedence. This still failed to work, so next I tried to set the style property for the element, which should have the highest precedence like this:
graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')
This still failed to produce any difference in the styling of the svg. Inspecting the element in chrome dev tools revealed the style attribute was indeed set.
I also tried adding my style definition to the svg's own element, by getting it after the svg is generated, and appending my class style definition to its text content. It would still not work.
Finally, I thought those css properties might not be supported by , so I changed them to background-color: green; instead, since I think I saw in an article on styling svg with css that this css prop was used on an . This didn't work. I tried applying to a element in the svg. Didn't work either.
I am completely baffled why none of this is working. I would massively appreciate if anyone could help me understand how I could dynamically change the styling of svg elements!
While normal CSS attributes can be given to SVG elements, most do nothing as SVG elements by definition adhere to a different set of styling rules.
A simple example is that in normal CSS you might set left: 25px but for SVG you would need to set x: 25.
For the styling you want, border radius is usually achieved with stroke-width. For background colour just use fill. As for a shadow, it may be a little more complex but you should have a look at feDropShadow.
Besides that, applying those styles with css rules should be roughly the same.
I hope that's at least some help.
i want to edit the font style of youtube videos
i saw in inspect mode of youtube.com that a span tag with ytp-caption-segment wrappes the text file of subtitle.so i use below code to capture this element:
var subtitle=document.getElementsByClassName('ytp-caption-segment');
but it always returns undefined,so i can not get the other attributes of it?
what can i do?
i think the reason is subtitle appears 1 sec after starting of video,so the visibility or display of it maybe none.any idea?
The span.ytp-caption-segment element is not a persistent part of the video player, it exists in the DOM only when you see a line of subtitle displayed. When the subtitle disappears, the element is removed from the DOM and it's created again with the next subtitle line.
So basically you have two strategies:
1. Insert a CSS rule for .ytp-caption-segment
This is the simplest way but unfortunately this won't work perfectly in this case because Youtube generates a lot of inline style rules into ytp-caption-element, and that cannot be overwritten from CSS.
These are the inline styles used by Youtube (at least for currently):
display: inline-block;
white-space: pre-wrap;
background: rgba(8, 8, 8, 0.75);
font-size: 20.7556px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
font-family: "YouTube Noto", Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif;
These are mostly the parameters you can set in Youtube UI (subtitle options).
CSS still can be used in limited ways, depending on your goal. For example if you want to make bigger fonts, you can use 'transform: scale(2);' instead of the font-size (the transform property is not overwritten with inline CSS).
2. Rewrite the .ytp-caption-segment element
If you want full control, you have to delete the style attribute from ytp-caption-segment or rewrite with your own style. This is not trivial, I describe the main steps:
Insert a CSS rule which hides the subtitle so when a new line is created by the player, it won't appear immediately on the screen. (This could be done with transform or opacity rules.)
Listen for any new lines! (Using a MutationObserver is the preferred way, but a 100msec polling will work also as an easy hack.)
When you got the line, rewrite it's style attribute to your preferred style.
Don't forget to override the CSS rule from point 1. used for hiding the new line! It's easy, as you rewrite the style attribute anyway.
I can create a code snippet for this if you clarify exactly what do you want to change on the subtitle.
I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)
There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).
For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices
<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/
NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.
This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.
I want to loop and add several multicolored spans to a div container. To do this efficiently, I simply alter the css, instead of adding a new color class to the element:
var colorEn = ["RoyalBlue", "LawnGreen", "red", "orange", "yellow", "black", "white", "MediumOrchid"];
for ( i = 0; i < colorEn.length; i++ ) {
var $span = $('<span />').attr('class', 'coloratorSquare');
$span.css({background : colorEn[i]});
$("#colorator").append($span);
}
Generating, for example:
<span class="coloratorSquare active" style="background: rgb(65, 105, 225);"></span>
Then, when I select (click) a certain span, it will change color to Silver show it has been selected, and set all other sibling spans back to their original colors. Here's a snippet:
$(this).addClass("active").siblings().removeClass("active");
The problem is, if I alter the css of the span elements ($span.css(...)), it doesn't apply the CSS changes on add/remove class. But if I comment out changing the css of the span, the multiple colors aren't added, but the active class add/removal of selected/deselected span changes colors as expected:
// $span.css({background : colorEn[i]});
CSS:
.active {
background-color: Silver;
color: black;
}
I would simply not alter .css of a span at all, but don't think it makes sense to add classes to each span during generation, and have to add CSS class rules for each color to replicate that .css functionality.
My question: How can I add multiple different css rules (ex: multicolors) to randomly generated elements without a) having to generate all those rules manually in the CSS file, and b) altering the .css with jQuery such that it causes problems with adding/removing CSS class rules.
Sorry if this is unclear.
Thanks!
You could use !important on the silver color to have it override the locally set attributes of your elements, but that technique is frowned upon.
My recommendation is to consider the circumstances; if this is not throwaway code, then it usually makes better sense to set classes on the elements instead of directly manipulating their style attribute. If it's something you need for a mockup then by all means slap !important on it and move on.
so I've been toying with this calendar-ish thingy for a bit:
Grid of divs (mimicking a table)
Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements
Icons change colour depending on colour of cell hovered and that of its previous sibling (cell's colour class is applied to the icon).
Stripped down fiddle: http://jsfiddle.net/e9PkA/1/
This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have).
IE8 notices the change of classNames and updates the divs' colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.:
.wbscal_icon_arrival:before {
width: 12px;
height: 4px;
left: -8px;
top: 6px;
background-color: silver;
}
.wbscal_icon_arrival.wbscal_full:before {
background-color: #ff0000 !important;
}
In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown.
In another version it would update everytime I'd move the mouse out of the "table" div, but not if the tooltip is hidden when hovering a "cell" div border.
I've tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it's not your average repaint problem.
Is there a JS hack that fixes this and forces :before/:after to update?
Been trying to figure out the same thing. Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content. So I've modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I've added width:0 and overflow:hidden to the pseudo elements and then added content:"x" to each colour option where x is an incrementing number of spaces.
It works for me; hope it helps you!
Adding content:"x" to each declaration of the psuedo-elements and incrementing the number of spaces for each different state of the element DEFINITELY FIX the issue.
Basically, the idea is to tell IE8 that the content is slightly different in each state, so redraw the content for each state. So, if the content is the same, we 'fake' it with empty spaces. BRILLIANT!!
#lnrbob really nice answer!!
i had the problem that i used the before and after pseudos of a checkbox input, which are using some parent attributes for displaying their content (due to being easily able to implement translation there).
so they look like:
input:before {
content: "" attr(data-on) "";
}
input:after {
content: "" attr(data-off) "";
}
and the markup looks like this:
<div class="switch off" data-on="It is ON" data-off="It is OFF">
<input id="switch" name="switch" type="checkbox" class="off">
</div>
and the modification i do in jquery looks like this:
var mSwitch = $('div.switch'),
on = $.trim(mSwitch.attr('data-on')),
off = $.trim(mSwitch.attr('data-off'));
// remove any spaces due to trim
mSwitch .attr('data-on', on);
// add a space
mSwitch .attr('data-on', on + ' ');
mSwitch .attr('data-off', off);
mSwitch .attr('data-off', off + ' ');
and i call this modification after setting/removing classes to change the style of the "checkbox" which is rather a switch button in this case :D
so this way you do not get a stackoverflow from too much space characters if some hardcore testers auto click the input for an infinite time ;)
like that:
<div class="switch on" data-on="ON" data-off="OFF ">
Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content, so you can modify like below:
.wbscal_icon_arrival:before {
width: 12px;
height: 4px;
left: -8px;
top: 6px;
background-color: silver;
content: '';
}
.active .wbscal_icon_arrival:before {
background-color: gold;
content: ' ';
}
I am having a similar issue in IE11 and Edge right now.
on hover, I try to change Content from 'v' to 'V'.
=> Doesnt work on any microsoft browser.
However, if I change the letter to something else ('w'/'W') or two letters('vV'), the icon changes. Yay Microsoft.