I want to add same alpha value to all the div's in my web page. These div's are of different background colors, and i don't want to set value in 'rgba' because i may want to revert.
Something like this:
div{
background-color: rgba( , , ,0.8);
}
well this is not working, any ideas?
You can apply opacity to divs but elements inside it (another div or paragraph tag, anything) will be same opacity unless been defined otherwise. If you think you can have rgba(null,null,null, 0.4); Good luck doing that!
If you need to apply to all DIV elements then this should work for you and it's browser compatible as well.
div {
zoom: 1;
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-moz-opacity:0.6;
-khtml-opacity: 0.6;
}
Hope this will be useful:
var alpha = 0.4;
$("button").click(function () {
$div_array=$("div");
for(var i=0; i<$div_array.length; i++)
{
var val_array = $("div").eq(i).css('background-color').match(/^rgb\((\d+), (\d+), (\d+)\)/);
$("div").eq(i).css('background-color', "rgba(" + val_array[1] + ", " + val_array[2] + ", " + val_array[3] + ", "+ alpha +")");
console.log($("div").eq(i).css('background-color'));
}
});
Check this Fiddle.
Related
If I set the font like so on a label:
<label id="lblrptgenprogress" class="invisible redfont">Report generation list is being constructed...</label>
...it works (I see the text in red after I remove the "invisible" class).
However, if I try to set the color like so in another label:
<label id="testsettingproduceusage" class="midnightbluefont"></label>
...with no text in the label to begin with, but adding it dynamically later, it doesn't work - the dynamically added text remains the default black. Why? How can I get it to respect the assigned class?
I give the label some text in an AJAX call this way:
. . .
success: function (returneddata) {
var nextgendate = returneddata.testsettings.NextGenDate;
var nextfromdate = returneddata.testsettings.NextFromDate;
var nexttodate = returneddata.testsettings.NextToDate;
var verbiage = 'If you save the current configuration, the Produce Usage report would next be sent on ' +
nextgendate +
' and emailed to ' +
addressees +
'; the report would cover data from ' +
nextfromdate +
' to ' +
nexttodate;
$("#testsettingproduceusage").append(verbiage);
document.body.style.cursor = 'pointer';
},
. . .
The CSS is:
.redfont {
color: red;
}
.midnightbluefont {
color: midnightblue;
}
UPDATE
Specificity it is, as can be seen by the comments:
.midnightbluefont {
/*color: midnightblue;*/ <= doesnt' work
/*color: #191970;*/ <= doesn't work
/*color: #191970 !important;*/ <= works
color: midnightblue !important; <= works
}
The brute force way to work it is either this:
.midnightbluefont {
color: midnightblue !important;
}
...or this:
.midnightbluefont {
color: #191970 !important;
}
I have a KPI dashboard with a lot of small charts. One type of chart is in fact a HTML table. It is displayed in a DIV.
<div style="width:400px; height:250px;overflow:hidden">
<table>
<tr><th>Col1</th><th>Col2</th></tr>
<tr><td>Row1</td><td>Row2</td></tr>
</table>
<div>
Currently, I hide the overflow. I would like to make the table 'fit' the div.
How can I make this table to fit/scale down to the DIV if it would become too big to diplay? Ideally, the text would also shrink.
This CSS will make your table have the same height/width as the container you are using. Borders/background are only added for visualising what happens.
Shrinking the text will however be far more challenging. There is probably no way without using javascript to achieve that. And even if you did, content might end up being unreadable because of a too small font-size.
I managed to come up with some javascript/jquery code to change the font-size until the table fits the div or the font-size reaches 5px (= unreadable). Of coarse you will need to edit some of it yourself (because it would apply on all tables if you don't change the selectors to id's)
[JSFiddle]
table{
width: 100%;
background-color: red;
}
th, td{
width: 50%;
border: blue solid 1px;
}
Jquery / Javascript
$(document).ready(function () {
var HeightDiv = $("div").height();
var HeightTable = $("table").height();
if (HeightTable > HeightDiv) {
var FontSizeTable = parseInt($("table").css("font-size"), 10);
while (HeightTable > HeightDiv && FontSizeTable > 5) {
FontSizeTable--;
$("table").css("font-size", FontSizeTable);
HeightTable = $("table").height();
}
}
});
Here is what I use currently, it is embedded in a project (see for example the classes), but feel free to use it as inspiration.
scaleTable = function (markupId) {
//This hacky stuff is used because the table is invisible in IE.
function realWidth(obj){
var clone = obj.clone();
clone.css("visibility","hidden");
$('body').append(clone);
var width = clone.outerWidth();
clone.remove();
return width;
}
function realHeight(obj){
var clone = obj.clone();
clone.css("visibility","hidden");
$('body').append(clone);
var height = clone.outerHeight();
clone.remove();
return height;
}
var table = $("#"+markupId+" table:first-of-type");
var tablecontainer = $("#"+markupId).parents( ".scalabletablecontainer" );
var scalex = tablecontainer.innerWidth() / realWidth(table);
var scaley = tablecontainer.innerHeight() / realHeight(table);
var scale = Math.min(scalex, scaley);
if (scale<1.0) {
var fontsize = 12.0 * scale;
var padding = 5.0 * scale;
$("#"+markupId+" table tbody").css("font-size", fontsize + "px");
$("#"+markupId+" table tbody TD").css("padding",padding + "px");
$("#"+markupId+" table TH").css("padding",padding + "px");
}
};
Get table and div dimensions as shown in the previous comments. Then apply css
transfrom:scale(factorX, factorY)
to the table.
I'm trying to auto-number each line that will be generated while displaying a
<p> element.
Perhaps using counters in CSS?
I'm looking for something along the lines of p:first-line, except for every line of the <p> element
something like:
p:each-line {
counter-increment line_num;
}
p:each-line:before {
counter(line_num) " " ACTUAL-LINE;
}
Can I do this with simple CSS code? How else could I achieve this?
I have an element called message, and I don't know in advance how many lines
of actual text will be formatted using that element style. If I change the
max-width for example and that forces more/fewer lines, I'd like this to automatically
number correctly the actual lines in the element.
/* set up the speech bubbles */
p.message {
position:relative;
padding:5px 10px;
border:2px solid rgb(74,77,82);
border:2px solid rgba(74,77,82,.5);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
max-width: 70%;
}
Such a task is a little much for CSS alone to handle. It isn't too hard in javascript.
It sounded like a nice little distraction so I played around a bit in jsfiddle. Perhaps this will help even though it's not pure css and uses some jquery.
http://jsfiddle.net/rSFUB/2/
Notice that I wrapped the <p> text in a div and added a line number div within that absolutely positioned. The javascript is:
$(document).ready(function () {
$(".message").each(function () {
var self = $(this);
var numbering = self.find(".lineNumbering").first();
var messageText = self.find("p").first();
var lineHeight = numbering.text("...").height();
var lines = messageText.height() / lineHeight;
var lineNumberingHtml = "";
for(var i = 1; i <= lines; i++) {
lineNumberingHtml = "" + lineNumberingHtml + i + "<br />";
}
numbering.html(lineNumberingHtml);
});
});
I tested in IE10, Chrome, and Firefox. The only difference between this code in the various versions is the padding on the .lineNumber div in order for it to line up with the text. Note this assumes that the line number div text and the paragraph is the same line-height.
I wish to do the following within div tags:
The words will be coloured differently using spans.
I will be given some text in a text box and via JavaScript I will need to dynamically update to div to show something like the above.
What is the best way to do this?
Will it involve a monospaced font?
Will it involve writing "hidden" text?
I wish to do entire paragraphs in this manner.
This might seem weird but the research I'm doing requires me present certain words from a given text with multiple colours and I think this might be a nice way of conveying this information.
Updating the text in the text box will update the following variables, and in turn I will need to convert these two variables into something like the image above.
text = "I am under the text above me and there is lots more text to come./n I am even moving onto a new line since I have more text"
color_per_word_position = {0:green, 1: red, 2: cyan, 4: yellow, 5: red, ...}
You will have to use a monospaced font for this.*
I basically see two options: 1. use whitespace 2. margins.
Option 1
Your text will look like
I•am•under•the•text•above
••am•under•••••text•above
where • denotes a space character. Pretty straight-forward in terms of CSS, since you don't have to worry about the spacing. The browser does it all for you. Example: http://jsfiddle.net/PYXdr/
*well, it may be possible with any font, using a lot of JS, but I guess it's not worth it.
Option 2
Since you probably don't want whitespace in between your spans, you may prefer this:
I•am•under•the•text•above
am•under text•above
Now, the spacing needs to be taken care of manually. Each span should get a margin-left that pushes it to the desired position. But before we can do that, we need to know the width of one character (using JS, since CSS does not provide that). Okay, pretty easy:
var el = document.createElement('pre');
el.style.display = 'inline-block';
el.innerHTML = ' ';
document.body.appendChild(el);
var width = parseFloat(getComputedStyle(el).width);
document.body.removeChild(el);
Now let's go ahead and move the spans:
span1.style.marginLeft = (2 * width) + 'px';
span2.style.marginLeft = (5 * width) + 'px';
Example: http://jsfiddle.net/JC3Sc/
Putting it all together
Now here's a basic example of how this might work:
var text = "I am under the text above me and there is lots more text to come.\nI am even moving onto a new line since I have more text"
var highlightBorders = [[2, 3, 4, 6], [6, 7]]; // YOUR TASK: implement the logic to display the following lines
var color_per_word_position = {0:'lime', 1: 'red', 2: 'cyan', 3:'orange', 4: 'yellow', 5: 'red'}
/* generate CSS */
var style = document.createElement('style');
for (var i in color_per_word_position) {
style.innerHTML += '.hl' + i + '{background:' + color_per_word_position[i] + '}';
}
document.head.appendChild(style);
/* generating the text */
text = text.split('\n');
var pre = document.createElement('pre');
text.forEach(function (line, i) {
var div = document.createElement('div');
var words = line.split(' ');
var result = [];
highlightBorders[i].forEach(function (len, j) {
var span = document.createElement('span');
span.innerHTML = words.splice(0, len).join(' ');
span.className = 'hl' + j;
if (j) {
span.style.marginLeft = width + 'px' // YOUR TASK: implement the logic
}
div.appendChild(span);
});
pre.appendChild(div);
});
document.body.appendChild(pre);
This is not a complete solution, since a) I don't really see which parts exactly you want to highlight and b) I don't want to spoil all the fun. But you get the idea.
Example: http://jsfiddle.net/tNyqL/
Using padding this is possible but also have absolute control by assigning text to a selector such as "p" for the class: fiddle http://jsfiddle.net/3NDs3/1/
.one {
width:200px;
}
.one p {
font: normal 14px Futura, sans-serif;
text-align:left;
padding-left:130px;
}
.two {
width:200px;
}
.two p {
text-align:center;
font: normal 14px Futura, sans-serif;
}
.three {
width:200px
}
.three p {
text-align:left;
font: normal 14px Futura, sans-serif;
padding-left:35px;
}
<div class="one">
<p>above me</p>
</div>
<div class="two">
<p>i am under the text above me</p>
</div>
<div class="three">
<p>under</p>
</div>
I have a webpage with 6 small images and 1 big images in the center (which is really 6 layers, each contains 1 images), just like this: http://jsbin.com/onujiq/1/; I've set the z-index property of all center images to (-1). What I'm trying to do is when I hover over 1 of the 6 small images, the respectively image will appear as the big images in the center (by change the respectively center image's z-index to 5 - for example) ; but no matter how I try, It's doesn't work as what I want. Please help me with this (I only use CSS); thank you in advance !
PS: another confusing problem when i test about hover is when I use this code:
#img3:hover + #img4{
opacity: 0.2;
}
it does work, but when i use this:
#img3:hover + #img5{
opacity: 0.2;
}
it doesn't ! I still dont' know what is the big different between #img4 & #img5 ??
http://jsfiddle.net/yy9Rr/
Your solution was close, but you need to change it from
#img3:hover + #img4{
opacity: 0.2;
}
to use the ~, to give something like
#img3:hover ~ #imgCenter3 {
z-index: 10;
}
a + b says any b element immediately following element a
a ~ b says any b element that is a following sibling of a, not necessarily immediately adjacent.
Try using JavaScript:
document.getElementById("img3").onmouseover = function() {
document.getElementById("img4").style.opacity = ".2";
document.getElementById("img5").style.opacity = ".2";
}