I am trying to implement the following example
http://bl.ocks.org/mbostock/4566102
For large graphs, I just want the graph to not get cut-off and allow scrolling, once user drags it outside the current border.
I tried adding the overflow:scroll property to the svg element, but that doesn't seem to work.
I am new at this javascript/d3.js programming and would be glad if someone can point out the error or just guide me in the right direction.
What about making the svg large enough, but wrapping it into a smalle div with overflow: auto?
html
<div class="outer">
<div class="inner">
<svg></svg>
</div>
</div>
css:
.outer {
width: 400px;
height: 300px;
overflow: auto;
}
.inner {
width: 800px;
height: 600px;
}
svg {
display: block;
width: 100%;
height: 100%;
}
Demo
You can drag the red circle out of the visible area.
I'm afraid this will not be possible without javascript intervention. The svg root element must have a defined width and height, and it won't adapt at any extent to its contents.
If you are going for google, your question is more about svg than about d3.
I think the only possibility is to use javascript, in order to increase the sizes of svg when one object goes behind it. In this way, though, i can't figure out how to make it work for the left side, it becomes complicated.
I think it's better to tackle the problem with the solutions that d3 can offer you, like the zoom behaviour suggested above. And generally if you are new in this field i can suggest you to think the interaction before going for the implementation, picking examples from the d3 gallery in order to better understand what you really want.
Related
I am trying to optimize the scrolling of my web app. I have data tables with tons of data, and scrolling gets pretty bad. I added will-change: transform to the data table but it broke my table headers that are position: fixed (I make them fixed to allow them to scroll with the viewport). The elements don't move with the viewport at all, they just stay stuck in the flow of the document.
But by chance I discovered that if I use will-change:opacity instead, my fixed headers are fine. Can someone explain this behavior? I haven't been able to find any documentation that says they should act differently.
Here is a code pen with an example of what I am talking about. Toggle between the values, and scroll in blue div.
https://codepen.io/bkfarns/pen/aLYgrN
Here is the basic code from the pen too:
html:
<div class="container">
<div class="fixed">should be position: fixed</div>
<div class="too-tall">div that is too tall</div>
</div>
css:
.container {
margin-left: 100px;
background-color: blue;
width:400px;
height:300px;
overflow: auto;
will-change: transform;//changing this to opacity fixes the issue
}
.fixed {
background-color: grey;
position: fixed;
margin-left: 150px;
margin-top: 100px;
}
.too-tall {
background-color: red;
width: 90px;
height: 600px;
}
The whole point of will-change is to make all possible changes that browser would have to apply when the specified property will change in advance, reducing the time needed for the change itself. Effectively it means that by specifying will-change:transform you make the element transformed (though visually it stays in the same position), and descendants of the transformed elements can't be fixed per the CSS Transforms spec. Opacity doesn't have such effect, so will-change:opacity doesn't break fixed positioning.
Also, will-change per se doesn't have any "optimization magic", it only optimizes the changes of the specified properties. Some properties force the elements to the composite layers that theoretically can be processed by the GPU more efficiently, but if there is too many such elements it may have the opposite effect. For optimizing scrolling, probably other strategies would be more efficient.
I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.
All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.
I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.
Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE
you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/
Disclaimer: The following code is using the rubuxa plugin for JS sortables.
Javascript:
function qs(expr){return document.querySelector(expr)}
var container = qs('.ITEST');
var sort = Sortable.create(container, {
animation: 350,
draggable: ".draggable",
});
CSS:
.draggable{
color: #fff;
margin: 1px;
float: left;
display: inline-block;
}
.ITEST{
width:425px;
height:400px;
margin:auto;
border:1px solid grey
}
http://jsfiddle.net/g8o0upLq/9/
The problem lies when dragging the red squares, they move correctly, but they do not stack vertically ontop of each other but horizontally. This creates unwanted extra white space underneath. I have tried to set the same height for all divs, but with no luck.
i just saw your post through Rubaxa's Github.
Anyways, there is no way you can achieve this with pure CSS. Even with Flexbox i can't think of a way you can do this.
For accomplish this behaviour you need some way of javascript to calculate absolute positioning.
The Library http://packery.metafizzy.co/ does a good job for this. It uses 'jQuery UI draggable' or 'Draggabilly' which uses absolute positioning.
The downside, i don't think there is a way to make this happen with Rubaxa's Sortable...
I have three (but the problem is applicable to any amount) divs that have a percentage width and scale with the size of their container but have a minimum width where they will move down in the container. Here is an example of the current scenari:
div {
float: left;
width: 33%;
min-width: 300px;
height: 300px;
margin-right: 2px;
}
<div style="background: red"></div>
<div style="background: green"></div>
<div style="background: blue"></div>
http://jsfiddle.net/ULLBr/
I was wondering if it was possible for the remaining elements to scale then to take up the remaining whitespace on the 'row'?
I know this could be achieved in javascript but a pure CSS solution would be much appreciated, however if that is not possible what would be the best way to approach it in javascript?
Ideally either solution should be able to handle n divs.
Thank you.
I would suggest you take a look at flex box.
I have created a jsfiddle here which I think is what you are trying to achieve.
Also worth looking at and where I adapted it from is css tricks great site.
on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.