I am trying to generate gutters which span 1/5 of 4 a column span. The global setup is:
$page-width: 1080px;
$susy: (
columns: 12,
math: fluid,
gutter-position: inside,
gutters: 1/4.5, // will be overriden; I think ...
global-box-sizing: border-box,
use-custom: (rem: true),
container: $page-width
);
Followed by this selector:
.mosaic {
// Setting gutters of 4 * 1/5 single column width,
// to be distributed 2/5 left, 2/5 right
#include gallery(4 of 12 4/5);
}
The generated CSS for .mosaic is:
.mosaic {
width: 33.33333%;
float: left;
padding-left: 1.85185%; // Expected/wanted: 3.333...%
padding-right: 1.85185%; // dito
}
I did expect the padding at each side to be 4/5 / 12 (columns) / 2 (sides) = 1/30 = 3.333...% which would result in a gutter of 1/5 (1/10 on each side) of the column span's total width.
How do I achieve the expected result?
How are the padding values (1.85...%) calculated?
Why do they not match what I expect?
This is how Susy does the math:
Each column is 1 column-unit wide, plus 4/5 column-units of gutter. Total: 1.8
There are 12 columns. Total: 21.6
Each gutter is calculated as .8/21.6 (target/context). Total: .037037037
That gutter is divided in half & converted to a percentage. Final: 1.8518518%
The difference is that gutters are considered part of the total context. They add to the width of each column, rather than being subtracted from it.
Related
If I have four colours (A, B, C & D) on four points on a line and I want to fill with a gradient that blends nicely between the four colours how would I calculate the colour of the point E?
and A is starting point and D is ending point, before starting point and after ending point fill starting colour and end colour. inside line need to blend colour according to the distance and angle.
The closer E is to any of the other points, the strong that colour should affect the result.
I need like this one.
Any idea how to do that? Speed and simplicity is preferred to accuracy.
Well, in simple terms, take point ß that is halfway between A and B. Assuming the use of RGB colors, if A is red rgb(255, 0, 0) and B is yellow rgb(255, 255, 0), then ß's color will be halfway between these: rgb(255, 128, 0), that is, orange.
As you can see this can be calculated by using a weighted average per color channel - weighted by how close your point is to A and B.
Here's a code example you can run right here:
const slider = document.getElementById("range")
const between = document.getElementById("between")
slider.addEventListener("input", ev => {
const distFromA = ev.target.value
const G = distFromA / 3.92
// Not calculating R and B values, as these don't change in this specific example
const R = 255
const B = 0
between.style.background = `rgb(${R}, ${G}, ${B})`
})
#A { background: red; color: white; }
#B { background: yellow; }
#between { background: gainsboro; }
#between, #A, #B { display: inline-block; width: 50px; height: 50px; }
<aside id=A>A</aside>
<aside id=between>ß</aside>
<aside id=B>B</aside>
<nav><input type=range min=0 max=1000 id=range /></nav>
Do this for each pixel and you get a gradient 👍
I want to create a fixed non-flexible very damn static grid of 1200px.
So I figured out, I need 90px for column-width, 12 columnts, 10px of gutter and 1200px of max-width.
Well.. the following are my settings and it gives me an error "invalid null opearation: 11 times null "
$susy: (
flow: ltr,
math: static,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 12,
gutters: 10px,
column-width: 90px,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: show,
color: rgba(#66f, .25),
output: overlay,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
style.scss>
#import "grids";
body{
#include container($susy);
max-width: 1200px;
border: solid thin red;
height:10px;
}
You need to specify gutters proportionally to your columns.
In this case:
gutters: 1/9,
The end result (being your columns 90px) would be gutters 10px wide. You can specify your gutters width in pixels by expressing it as a proportion.
As per the docs, you can speficy gutter width in pixels, by putting the column width as well. E.g.:
gutters: 10px/90px
Alhtough the result is exactly the same. And if you put in a value that doesn't match with your column width, you won't get the pixel width you say, but the appropriate fraction.
So having:
column-width: 100px,
gutters: 10px/50px,
will leave you with 20px wide gutters. Because of math. :)
Pen showing it working here.
And finally, your layout is 1190px wide and not 1200px because:
12 columns * 90px = 1080px
11 gutters * 10px = 110px.
1180px + 110px = 1190px.
The colors in this table is all not transparent. I guess the value for the A is set to FF.
What is the code for transparency?
For example this color FFF0F8FF (AliceBlue), to a transparent code such as ??F0F8FF ?
Here is the table of % to hex values:
Example: For 85% white, you would use #D9FFFFFF.
Here 85% = "D9" & White = "FFFFFF"
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
How is it calculated?
FF is number written in hex mode. That number represent 255 in decimal. For example, if you want 42% to calculate you need to find 42% of numbeer 255 and convert that number to hex. 255 * 0.42 ~= 107 107 to hex is "6B
– maleta
Transparency is controlled by the alpha channel (AA in #AARRGGBB). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.
To get a fully transparent color set the alpha to zero. RR, GG and BB are irrelevant in this case because no color will be visible. This means #00FFFFFF ("transparent White") is the same color as #00F0F8FF ("transparent AliceBlue").
To keep it simple one chooses black (#00000000) or white (#00FFFFFF) if the color does not matter.
In the table you linked to you'll find Transparent defined as #00FFFFFF.
Adding to the other answers and doing nothing more of what #Maleta explained in a comment on https://stackoverflow.com/a/28481374/1626594, doing alpha*255 then round then to hex. Here's a quick converter http://jsfiddle.net/8ajxdLap/4/
function rgb2hex(rgb) {
var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?((?:[0-9]*[.])?[0-9]+)[\s+]?\)/i);
if (rgbm && rgbm.length === 5) {
return "#" +
('0' + Math.round(parseFloat(rgbm[4], 10) * 255).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
} else {
var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
if (rgbm && rgbm.length === 4) {
return "#" +
("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
} else {
return "cant parse that";
}
}
}
$('button').click(function() {
var hex = rgb2hex($('#in_tb').val());
$('#in_tb_result').html(hex);
});
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Convert RGB/RGBA to hex #RRGGBB/#AARRGGBB:<br>
<br>
<input id="in_tb" type="text" value="rgba(200, 90, 34, 0.75)"> <button>Convert</button><br>
<br> Result: <span id="in_tb_result"></span>
BE AWARE 👇🏼
In HTML/CSS (browser code) the format is #RRGGBBAA with the alpha channel as last two hexadecimal digits.
Just use this:
android:background="#00FFFFFF"
it will do your work.
If you have your hex value, and your just wondering what the value for the alpha would be, this snippet may help:
const alphaToHex = (alpha => {
if (alpha > 1 || alpha < 0 || isNaN(alpha)) {
throw new Error('The argument must be a number between 0 and 1');
}
return Math.ceil(255 * alpha).toString(16).toUpperCase();
})
console.log(alphaToHex(0.45));
Just came across this and the short code for transparency is simply #00000000.
The standard hex color code has six characters eg #000000 - black, and the hex color code with more than six characters(likely 8 characters eg #82bc00 - green) exceeds the standard amount making the other two last characters define the transparency level.
so if you need to attain absolute transparency you can add 00 to any hex color but for uniformity you can just use #00000000
.green{
background: #82bc00 /*actual green*/
}
.subgreen{
background: #82bc0070 /*green with little transparency*/
}
.greenparency{
background: #82bc0040 /*green with much transparency*/
}
.transparency{
background: #82bc0000 /*full transparency over green*/
}
<div class="green"> green background color </div>
<div class="subgreen"> green background color </div>
<div class="greenparency"> green background color </div>
<div class="transparency"> green background color </div>
I'm working a display where I don't know where the end point is (100% is an evolving figure... graph will update via ajax). The data is going to a mix of completed records against an estimated count where it will complete.
As time goes on, the counts go up and the estimated completion point becomes tighter.
not sure that image ^ is working... (most things are blocked here, sorry)
ascii example as a horiz bar:
[///////40%////// ******SPACE*******/////20%//////]
I've tried using data like
var rawData = [
[40, 0],
[-20, 0],
];
to show 40% done and 20% as potential end point range. but that doesn't work. at all
var rawData = [
[40, 0],
[20, 0],
];
shows as 60% in stacked format which is not what I want.
Can I have 2 bars on the same 'row' that are stacked, but not stacked from the same axis?
As far as I know there is no way to stack a single series against itself. With that said here's my 5 min attempt to replicate your image:
As #DNS had suggested, I used a transparent middle series to space the complete/estimated bars. To keep it easier to track where the points belong, I added each bar as it's own series.
Fiddle is here.
var data = [];
// 10 passes
data.push({data:[[40,2]], color: 'green'});
data.push({data:[[40,2]], color: 'transparent'});
data.push({data:[[20,2]], color: 'silver'});
// 100 passes
data.push({data:[[50,1]], color: 'green'});
data.push({data:[[20,1]], color: 'transparent'});
data.push({data:[[30,1]], color: 'silver'});
// 1000 passes
data.push({data:[[70,0]], color: 'green'});
data.push({data:[[20,0]], color: 'transparent'});
data.push({data:[[10,0]], color: 'silver'});
$.plot($("#placeholder"), data, {
series: {
stack: true,
lines: { show:false },
bars: { show: true, horizontal:true, barWidth: 0.6 }
},
xaxis: {min: 0, max: 100, ticks: [[0, '<span style="color: green">Completed<br/>0%</span>'],[100, '<span style="color: gray">Estimated End Point<br/>100%</span>']]},
legend: {show: false},
yaxis: {tickColor: 'transparent',position: 'right',
ticks: [[0.25,'as of 1000 passes'],
[1.25,'as of 100 passes'],
[2.25,'as of 10 passes']]}
});
Create 3 bars instead of 2, with the middle bar filling the remaining space up to 100. Use series objects, so you can assign the middle one an 'empty' color, like white.
So with your example above, where you have 40 and 20, your middle bar would have a value of 100 - 40 - 20 = 40.
I have a JavaFX 2 table that is displaying contact details for people, lets imagine there are three columns: first name, last name and email address. When my application starts it populates the table with several rows of data about the people already in the system.
The problem is that the column widths are all the same. Most of the time the first and last name is displayed in full but the email address is getting clipped. The user can double click the divider in the header to resize the column but that will become tedious quickly.
Once the table has been pre-populated I would like to programatically resize all the columns to display the data they contain but I can't figure out how to achieve this. I can see that I can call col.setPrefWidth(x) but that doesn't really help as I would have to guess the width.
If your total number of columns are pre-known. You can distribute the column widths among the tableview's width:
nameCol.prefWidthProperty().bind(personTable.widthProperty().divide(4)); // w * 1/4
surnameCol.prefWidthProperty().bind(personTable.widthProperty().divide(2)); // w * 1/2
emailCol.prefWidthProperty().bind(personTable.widthProperty().divide(4)); // w * 1/4
In this code, the width proportions of columns are kept in sync when the tableview is resized, so you don't need to do it manually. Also the surnameCol takes the half space of the tableview's width.
This works for me in JavaFX 8
table.setColumnResizePolicy( TableView.CONSTRAINED_RESIZE_POLICY );
col1.setMaxWidth( 1f * Integer.MAX_VALUE * 50 ); // 50% width
col2.setMaxWidth( 1f * Integer.MAX_VALUE * 30 ); // 30% width
col3.setMaxWidth( 1f * Integer.MAX_VALUE * 20 ); // 20% width
In the other examples you have the problem, the vertical scrollbar width is ignored.
As I use SceneBuider, I just define the MinWidth, and MaxWidth to some columns and to the main column I just define the PrefWidth to "USE_COMPUTED_SIZE"
After 3 years, finally I found the solution, javafx column in tableview auto fit size
import com.sun.javafx.scene.control.skin.TableViewSkin;
import javafx.scene.control.Skin;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
public class GUIUtils {
private static Method columnToFitMethod;
static {
try {
columnToFitMethod = TableViewSkin.class.getDeclaredMethod("resizeColumnToFitContent", TableColumn.class, int.class);
columnToFitMethod.setAccessible(true);
} catch (NoSuchMethodException e) {
e.printStackTrace();
}
}
public static void autoFitTable(TableView tableView) {
tableView.getItems().addListener(new ListChangeListener<Object>() {
#Override
public void onChanged(Change<?> c) {
for (Object column : tableView.getColumns()) {
try {
columnToFitMethod.invoke(tableView.getSkin(), column, -1);
} catch (IllegalAccessException | InvocationTargetException e) {
e.printStackTrace();
}
}
}
});
}
}
If you had 4 columns and only last column needed to expand to fill the rest of the table width and the other columns remained the size I set in Scene Builder.
double width = col1.widthProperty().get();
width += col2.widthProperty().get();
width += col3.widthProperty().get();
col4.prefWidthProperty().bind(table.widthProperty().subtract(width));
Or if you had 2 columns that needed to expand then.
double width = col1.widthProperty().get();
width += col3.widthProperty().get();
col2.prefWidthProperty().bind(table.widthProperty().subtract(width).divide(2));
col4.prefWidthProperty().bind(table.widthProperty().subtract(width).divide(2));
Also, a very simple trick based on an AnchorPane will be a good solution.
We gonna wrap the TableView into a AnchorPane but also we gonna anchor the left and right side of the TableView like this:
AnchorPane wrapper = new AnchorPane();
AnchorPane.setRightAnchor(table, 10.0);
AnchorPane.setLeftAnchor(table, 10.0);
wrapper.getChildren().add(table);
This simple code will stretch the TableView in both directions (right and left) also, it will adjust whenever the scrollbar is added.
You can get an idea of how this works watching this animated gif.
Now you can resize the columns, adding these lines:
fnColumn.setMaxWidth( 1f * Integer.MAX_VALUE * 30 ); // 30% width
lnColumn.setMaxWidth( 1f * Integer.MAX_VALUE * 40 ); // 40% width
emColumn.setMaxWidth( 1f * Integer.MAX_VALUE * 30 ); // 30% width
my idea.
table.getColumns().add(new TableColumn<>("Num") {
{
// 15%
prefWidthProperty().bind(table.widthProperty().multiply(0.15));
}
});
table.getColumns().add(new TableColumn<>("Filename") {{
// 20%
prefWidthProperty().bind(table.widthProperty().multiply(.2));
}});
table.getColumns().add(new TableColumn<>("Path") {{
// 50%
prefWidthProperty().bind(table.widthProperty().multiply(.5));
}});
table.getColumns().add(new TableColumn<>("Status") {
{
// 15%
prefWidthProperty().bind(table.widthProperty().multiply(.15));
}
});