I'm using d3.pack because I'm using bubble chart. However, I'm using it as a wordcloud. How can I make this use more of the width and don't make it that tall?
Here is a jsfiddle
In the code I have width: 600px; height: 1500px; on the #cloud element. This makes it kind of clumsy.
Otherwise, how can I make it so they never overlap each other? That could be an issue when making the screen smaller.
Thanks in advance
Related
I'm trying to align horizontally two images that are next to each other with different dynamic text under it. If you review the image I attached it's pretty clear what I'm trying to do. I don't think flexbox properties like flex-end or flex justify-content: space-between will work here. Thanks for your help in advance.
https://i.stack.imgur.com/QYCMh.jpg
enter image description here
So I figured out a solution. I used calc() to achieve the results
position: absolute;
width: calc(100% - 50px);
margin-top: calc(112.1% - 980px / 25);
This calc keeps the image stuck to the image next to it. Not sure what the unit numbers mean, I basically fiddled with the units until I got the results I wanted.
Heres the result https://gifyu.com/image/vnPX
This seems like it would be an easy thing to figure out, but I can't seem to find what I'm looking for.
I want to animate the width of a div from right to left. It seems that this works left to right by default.
TweenMax.from($("#hero-container"),0.5,{width:0});
I tried to change the origin of the div, but that didn't seem to make a difference.
You need to align #hero-container to the right edge of whatever container it's in, and then animate the width.
I prefer using flexbox, but you can use position: absolute; right: 0; too if that tickles your fancy - But that presents a whole new level of problems, as it removes your element from the document flow.
Quick example using flexbox: https://codepen.io/jeppeolesen/pen/VyKebx
I'm trying to make modifications to layout of TrackMix app as shown in Creating Your First Mac App.
I wanted the "Mute" button to take 160px or less. The equivalent CSS rule would be width: 100%; max-width: 160px; margin: 0 auto;. I'm not sure how to achieve this in Interface Builder or in code. Here's what I have so far
While 71 pixels is indeed less than 160px. Is there a way to make the button take all available space?
This is working for me:
I have also added a center constraint + leading and tailing edge constraint to parent container. I've set the leading/tailing constraint priority to 250 because they need to be breakable.
I have looked for an animation that moves image forward, at the same time flips and grows, to give the impression of walking forward. I tried creating this in photoshop, which works, but I couldn't resolve the problem of the space it takes up, disrupting other more important items on the page. I have tried adapting the 'rocket' from http://www.the-art-of-web.com/css/css-animation/ but don't know enough to add the flip I will add image to show what i am trying to do. - ok it seems I dont have enough reputation to post images, but i dont know how to get reputation!! Images would appear consecutively left to right.
This is not the image I will be using but demonstrates what I need. The one I will be using is copyright. All except the front center image is the same image (when I use my original there will be four different images center front).
Any help would be greatly appreciated.
setTimeout(function() {
var thething = document.querySelector('.thething');
thething.style.transform = 'perspective(500px) rotateY(80deg) translateX(-500px)';
}, 1000);
.thething {
background-color: red;
transition: transform 5s;
transform: perspective(500px) rotateY(80deg);
height: 200px;
width: 500px;
margin-top: 100px;
}
<div class="thething"></div>
This is generally what it might take to do the animation; I know it's not quite as involved as what you described in your comment, but largely it would involve a lot of grunt work and changing the numbers around. Let me know if there's anything critical here that you'd have trouble theorizing a way to do it.
I have some fairly complex stacking arrangements going on in a site I'm working on. With a background image on a div being a gradient that overlays an image within it with a lower zindex. Like this:
So, this works fine at larger widths. When the width is smaller the image appears over the gradient background, like this:
Something's happening and I can't figure out what. I'm using twitter Bootstrap 2.3.0 as a framework. Link: http://www.osullivans-pubs.com/draft
EDIT: I'm pretty sure the problem is something to do with having a negative z-index on the image (#back img). But having the z-index at zero means the image appears above the gradient...
UPDATE: I worked it out. It's not really possible to have an element with a background image overlap a child element. So I created an absolutely positioned element before (and seperate from) the container and applied the appropriate zindex to that. That fixed it.
you have to add a z-index in liquid-slider.css file below is the code...
.liquid-slider-wrapper {
margin: 0 auto;
clear: both;
overflow: auto;
position: relative;
width: 1110px !important;
z-index: 20;
}