What script error below?
var color = ["black","gray","silver","white","yellow","orange","red","brown","pink","purple","blue","aqua","green","lime","olive","navy","teal"];
for(a=0; a<color.length; a++){
document.write("<li><a href='#' class='color' id='"+color[a]+"'></a></li>");
the problem, in a box does not appear the color.
How to bring out the color in the boxes?
Related
I have create one div, inside that there are some css applied (through the css file). Now I want to print that particular div from the whole page. The problem which I'm facing that all the css classes are applied in print dialog but background color is not applied.
Here is my code block of print button which opens a default print dialog:
$("#btnPrint").click(function () {
var contents = $("#Call").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>Call</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="../css/abc.css" rel="stylesheet" type="text/css">');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);});
Here is the my div on page:
Here is the print dialog which shows the preview of the div:
Please help me to apply background print dialog.
Thanks
Option 1:-
If you dont mind about browser compatibility then use
-webkit-print-color-adjust: exact;
this will work only in chrome
Option 2:-
To make it printable(with image and colors) in all browsers you have to make the whole printing elements without background image and background colors.
Instead of them use image tag and border colors with #media print (read more)
Manual Options:-
you have to manually check the print background (Chrome : "background graphics", Firefox : "Print Background") while printing. this will display both background colors and background images. we can not control printing through code if you concern about browser compatibility.
Chrome:-
Firefox:-
[
for chrome and safari you can force printing background color by -webkit-print-color-adjust property rule, for example
body {
-webkit-print-color-adjust: exact;
}
read more about it here
I am a beginner in html. I have an image that has to be displayed on the overlay,when a button is pressed. Th problem is the image doesnot appear on the overlay for the first time. It appers only from the second time and then it works properly. If I refresh my page and do it again the image does not appear. The removing part has no error. So i did not include that part of the code.
var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");
function ShowOverlay() {
$("<div id='overlay'> <img src='Images/ajax.gif'/> </div>").appendTo('body');
$('#overlay').show();
Is it possible to add the image below _overlay.css("background", "#000").css("opacity", "1"); _ ?
I'm not sure this is possible, but i was wondering if it is possible to set a background color for text only, & not the span/div/P tags that contain the text.
EG
This text here...
each character of "this" will be a black background with white text, the 'space' will have the blue background the word "text" will be a black background with white text etc....
Something like what deaf people see on some TV shows - captions...
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
From what i have gathered / googled, I can set a background for an entire 'container' but not just for "text" in the container.
example: How do I set background color of text only in CSS?
The above sets the whole h1 tag as a green background.
PS - i'm only using 'green' as an example - but i've got other colours in mind, or even pictures as the background. but i want the text content to be visible..
PS, if the above can be done, is it also possible to 'opaque' the text-background ? so the actual / main background is partially visible, but keep the text "solid".
Ive used opaque, but it makes the foreground text opaque (not kept as solid).
This is the solution I found using JavaScript. It is definitely not only CSS, but it's as far as I could get it with minimal code:
Note: check the updated JSFiddles below! http://jsfiddle.net/fq4ez69t/1/
It finds all spaces in your "p" tags (i.e. change this to whatever you need) and substitutes them with a span with class .space so that you can style it in your CSS.
Here's the JS:
var str = document.getElementsByTagName("p")[0].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
document.getElementsByTagName("p")[0].innerHTML = newstring;
Update #1
Just thought of this. Maybe change the getElementsByTagName("p")[0].innerHTML; to something like document.getElementsByClassName('shaded')[i]; and use this class on whatever text you want to look like that. This is done using a for loop like so:
http://jsfiddle.net/fq4ez69t/2/
Just add the class shaded to the text element you want to look like the image above and voila!
var shadedtextblocks = document.getElementsByClassName("shaded");
for(var i = 0; i < shadedtextblocks.length; i++)
{
var str = shadedtextblocks[i].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
shadedtextblocks[i].innerHTML = newstring;
}
Update #2 - Works with background images now.
http://jsfiddle.net/37s7ex2j/
Here's an updated version that works for p and h1 tags and uses jQuery. It won't print backgrounds on top of your background image. It looks much better, but the script is a bit slower. Here's the result:
$('.shadedtext').each(function(){
//FOR P ELEMENTS
var text = $.trim($('p').text()),
word = text.split(' '),
str = "";
$.each( word, function( key, value ) {
if(key != 0) { str += " "; }
str += "<span class='shade'>" + value + "</span>";
});
$('p').html(str);
});
Choosing text in a container
In short: No you can not set the background of only the text in a div, or spesialy choose each color for each word.
What you can do is set the text of each container ofc:
<div class="class"></div>
.class {
//background, can also use rgba(0,0,0,0.5) <- semi transparent black.
background-color: white;
}
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
Keeping your text inside inline-block elements will keep the selection to some what text only.
Example:
p {
background-color: rgba(5, 5, 5, 0.5);
color: white;
}
p.inline {
display: inline-block;
}
Inline
<p>Lorem ipsum dolar si amet</p>
Inline-block
<br>
<p class="inline">Lorem ipsum dolar si amet</p>
If you want something like subtitles on TV, you can add a text-shadow on your text:
.myTextClassSelector{
text-shadow: green 1px 1px, green -1px 1px, green -1px -1px, green 1px -1px;
}
<div>
<p class="myTextClassSelector">This text here</p>
And this other text here.
</div>
I'm trying to use the CSS mix-blend-mode to make this text dodge over the background image but the css only seems to work on the div's background. I've seen it work on text before so why isn't it working here?
#draggable { mix-blend-mode: color-dodge; }
Demo: http://codepen.io/anon/pen/YyJGzo
The settings that you are using (text color and blend mode) are not noticeable
From the w3c page
10.1.8. color-burn blend mode
Darkens the backdrop color to reflect the source color. Painting with
white produces no change.
if(Cb == 1)
B(Cb, Cs) = 1
else if(Cs == 0)
B(Cb, Cs) = 0
else
B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)
Where Cb == 1 means white in the backdrop (the text in your case), and B(Cb, Cs) = 1 means that the resulting color stays white. (Without any contribution from the background)
Try
#draggable{
color: green;
mix-blend-mode: screen;
}
or
#draggable{
color: grey;
}
demo codepen with grey text
for instance
I have a textbox in my function which I have disabled with field.disabled=true.
Now I want the color in black instead of grey
I have written a function, inside the function I have disabled the field and by default it's in the color grey, I want that color as black field.disabled = true
I have tried, field.style.color="black"; but that did not seem to work.
I have tried field.style.color="black"; this also doesn't seem to work.
I have received the value in a variable(field) and I have disabled the text box value. My problem is that it is looking properly, so I need that color as black.
use readonly instead of disabled then style them as you want. Check here for more info Changing font colour in Textboxes in IE which are disabled
You can do as follows
<style type="text/css">
.disableinputColor
{
color:black;
}
</style>
<script type="text/javascript">
function changeColor()
{
var el = document.getElementById('YourDisabledTextId');
el.className = "disableinputColor";
}
</script>
I think you disabled the textbox using javascript (dynamically) so better to change color of textbox from javascript
Hope it Helps..