I am making a timeline website for a friend so i need to add a vertical line down the center of the page. The problem is the vertical line only has a height of about 600px instead of using the whole length of the page. I have height set to 100% so I'm really confused why it's not working correctly. Here is the css I am using.
.blog::before{
content: "";
background-color: #333;
width: 2px;
position: absolute;
height: 100%;
top: 0;
bottom: 0;
right: 50%;
z-index: -1;
}
I am afraid setting height 100% with absolute position will only reserve the height as of the document height not whole page height. To set 100% height as of the whole page, you need to use position fixed. But still afraid that will solve your problem. As positioning with fixed may need some more effort for your layout.
Related
A question of two parts:
End goal is something like this, ala graph DB visualisers - but in html / css/sass
Part 1: How to position x number of circles around a circle so the edges touch (or prefereably, with a little whitespace).
For example, this is what i'm going for given 3, 6 and 7 circles.
I'm trying to get it working using SASS, however if there's a library or something that does what I'm after i'd rather use that - i'm just struggling to formulate the search phrase.
I'm using the trig functions from here, and stole the circle arrangement from here.
CODEPEN of what I've got so far.
I'm bad at maths, but some friends gave me the fomula you'll find below that should work out the distance to the outer circle center. $distance: tan((180-($angle))/2) * $radius;. However its not doing as i expect - given 6 circles, with a diameter of 100 I'd expect an output of 100, but i'm getting 86.602...
Here's the sass - probably easier to look in the codepen though.
#function strip-unit($number) {
#if type-of($number) == 'number' and not unitless($number) {
#return $number / ($number * 0 + 1);
}
#return $number;
}
#mixin on-circle($item-count, $circle-size, $item-size, $break-at) {
position: relative;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none;
>* {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -($item-size / 2);
$angle: (360 / $break-at);
$rot: 0;
$prevLayer: 0;
#for $i from 1 through $item-count {
$layer: ceil($i/ $break-at);
$layerMinusOne: $layer - 1;
// MoveX figured out by aligning stuff by eye
// item-count 3 4 5 6 7 8 9 10 ...12 13 14...20
// moveX (%) 57 70 85 100 115 130 145 160 192 207 225 315
$item-radius: strip-unit($item-size) / 2;
// !! This is where i'm having trouble
$distance: tan((180-($angle * 1deg))/2) * $item-radius;
#debug "tan((180-#{$angle})/2) * #{$item-radius} = #{$distance}";
$moveX: ( $distance / strip-unit($item-size)) * 100 * 1%;
#debug "moveX: #{$moveX}";
#if $layer != $prevLayer {
$prevLayer: $layer;
$rot: $rot + $angle/2;
}
&:nth-of-type(#{$i}) {
transform:
// !! This is where the 'percent of circle diameter' measurements come in, translateX uses the size of the element being transformed when % is used.
rotate($rot * 1deg) translateX($moveX * $layer) rotate($rot * -1deg);
}
$rot: $rot+$angle;
}
}
}
$numOfCircles: 3; // <- Change me in the codepen
.circle-container {
#include on-circle($item-count: 28, $circle-size: 200px, $item-size: 50px,
$break-at: $numOfCircles);
margin: 5em auto 5em;
border: solid 5px red;
.around-a-circle {
text-align: center;
border-radius: 50%;
border: solid 1px #118be1;
}
}
Part 2: The extra layers.
My end goal as seen above is to display x number of circular elements in rings, where the inner most ring is made up of y elements and bubbles out from there.
As i said i'd rather use a library, but i couldn't find anything that does what i want. I was going to use the inner ring as a starting point and each alternating layer, rotate an extra bit and place the element nestled between the previous rings elements, but again i'm struggling with the dimensions, and how much to offset by.
$layer: ceil($i/ $break-at);
...
#if $layer != $prevLayer {
$prevLayer: $layer;
$rot: $rot + $angle/2;
}
The above code does that, mostly, however the spacings aren't optimised and the whitespace is too much compared to my end goal photo.
The distance needs to be between center of circle 1 and center of circle 2 and half that is your radius for all the circles.
I don't know sass so here is a working JS version as proof that this works.
https://jsfiddle.net/hk5spy20/
If you change line 32-33 from
var x1 = pointXY[0].x;
var y1 = pointXY[0].y;
to
var x1 = xPos;
var y1 = yPos;
You will replicate what you are currently doing which results in overlapping circles.
***** Added *****
The way you have the 2nd, 3rd, 4th level bubbles working will become gappy as you expand out because of the radius of the circle increases in size.
It won't work this way.
I have something but require work but I have this so far... https://jsfiddle.net/hd7qp06b/2/
I think for each row you will need two different set of formulas to get this working perfectly, the second row works, the 3rd row doesn't which is where a new formula is required. Will come back to this.
This seems to work: https://jsfiddle.net/eo170zsu/
You have to keep a track of pair adjacent bubbles and attachBubble next to it. If you put the co-ordinate of bubble 9 and 15 on the stack, it'll place new bubble perfectly next to it. However, you can't put bubble 9 and 16 on stack as well because this would cause an overlap. There is a sequence of pairs that are safe and probably be consistent for certain levels, I suspect odd / even levels has different rules for pairing.
Actually, thinking about it, just pair 9,15 and 9,16 process each one and if there is an overlap between two circles on screen, throw it away and try next pair.
I wanted to draw three gradients on top of the other on a HTML5 Canvas. But it wasn't not producing the desired effect. So I dug into the thing a little bit, and found out that rgba(0, 0, 0, 0) was not completely transparent when used in canvas gradient. Rather it was producing an unexpected blackish tone.
In CSS, it works fine though.
How can I have the same effect as it works in CSS? (see attached screenshot please)
CSS properties:
background: linear-gradient(rgba(0, 0, 0, 0), rgb(255, 0, 0));
Canvas properties:
var grad = ctx.createLinearGradient(0, 0, 0, height);
grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
grad.addColorStop(1, 'rgb(255, 0, 0)');
Indeed the algorithms seem to be different.
Not quite sure why, but I'd say that CSS doesn't consider rgba(0,0,0,0) as transparent black pixel like canvas does, but instead just as transparent.
The 2D canvas will composite straight from all the 4 RGBA channels values, until the ones of the next stop, while CSS one seems to comprehend transparent as a particular case.
To get the same result as CSS on a canvas, you'd have to set your first transparent stop to the next one, by only changing the alpha value:
var ctx = c.getContext('2d'),
grad = ctx.createLinearGradient(0,0,0,150);
grad.addColorStop(0, 'rgba(255,0,0,0)'); // transparent red
grad.addColorStop(1, 'rgba(255,0,0)');
ctx.fillStyle = grad;
ctx.fillRect(0,0,300,150);
#html{
background: linear-gradient(rgba(0, 0, 0, 0), rgb(255, 0, 0));
height: 150px;
width: 300px;
display: inline-block;
}
<div id="html"></div>
<canvas id="c"></canvas>
NVD3's interactive layer has circles/points that highlight a point in the line of a linechart when your mouse hovers over the chart. Is there a way to change the size of that circle? My aim is to make it smaller.
Here are the circles I'm talking about.
By Increasing the stroke-width in css.
.nv-scatter .nv-groups .nv-point.hover, .nvd3 .nv-groups
.nv-point.hover {
stroke-width: 14px; //(7px -> 14 px)
fill-opacity: .5 !important;
stroke-opacity: .5 !important;
}
I have a responsive chart, but i want the height to be fixed and only width size should change with change in screen size. Is there a way to do that?
height = 200px;
d3.select(divId).selectAll("svg")
.datum(cData)
.transition().duration(500)
.call(chart).attr("width", width).attr("height", height).attr("viewBox", "0 0 " + width + " " + height);
Just set the width to a percentage value!
Let's say you want the width of the chart to always be 50% of the viewable area...you'd set html to width: 100%, and #chart (or whatever) to width: 50%.
Jssor i great! - But when i included the banner in my code through my DNN7 CMS, the captions doesn't animate, even though the slides change as expected - i wrote:
<div class="container" style="padding:0px !important">
<div id="slider1_container" style="display: none; position: relative; margin: 0 0; width: 1100px; height: 300px; overflow: hidden;">
<div style="cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1100px; height: 300px;" u="slides">
<div><img src="/portals/0/designelementer/headlines/agHeader6.jpg" u="image" />
<div style="position:absolute;" t="ZM" u="caption">Bliv medlem</div>
</div>
<div><img src="/portals/0/designelementer/headlines/agHeader1.jpg" u="image" /></div></div></div></div>
You can see the page here: Link
(Beware, it's in danish)
Anybody got a hint for me? What am I doing wrong?
Please move $CaptionSliderOptions out from $BulletNavigatorOptions.
replace
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1, //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
$Scale: false, //Scales bullets navigator or not while slider scale
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
}
with
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1, //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
$Scale: false //Scales bullets navigator or not while slider scale
},
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}