I'm trying to create a word cloud type output with only CSS. Basically, I have a div box and a X number of text elements which need to go inside the box. However, they need to be of different font size. For example, let's say I have this:
.box { display: flex; width: 40vw; height: 30vw; overflow: hidden; }
.text1 { font-size: 5vw; }
.text2 { font-size: 4vw; }
.text3 { font-size: 3.5vw; }
.text4 { font-size: 3vw; }
I can position the text elements inside the box but I have a few questions regarding the layout. My lack of thorough CSS knowledge prevents me from telling if this is possible at all with just CSS or not:
How can I avoid collision of the text elements?
How can I ensure they stay within the boundaries of the box?
I believe it's not possible to make Word Cloud using CSS only, you need to have Javascript function or lib like WordCloud2.js that handle element positioning.
Demo:
https://timdream.org/wordcloud/#wikipedia:Cloud
References:
https://github.com/timdream/wordcloud2.js
https://github.com/timdream/wordcloud
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I have created a calculator in create-react-app and I'm having an issue with the numbers flowing off the screen.
For example, when you type 11111111111111111111111111111111 the numbers will continue outside of the calculator output. I would like for the large numbers to shrink down and contain themselves within the space. How can this be achieved?
I have tried implementing https://github.com/kennethormandy/react-fittext as a dependency but it only appears to make my numbers smaller. The numbers still continue off the screen even with this implemented. I have included a current sandbox version of the project, so that you may see what I'm referring to. https://codesandbox.io/s/silly-haslett-8vf8s
You can find where I have used the above dependency in the output display component.
This is the CSS I use to style the calculator output
.output {
grid-column-start: span 4;
color: $white;
display: flex;
justify-content: flex-end;
align-items: center;
word-wrap: break-word;
}
#answer{
margin-right: 12px;
font-size: 5vh;
font-family: 'Lexend Tera', sans-serif;
}
and this is the component class in question.
import React from 'react';
import FitText from '#kennethormandy/react-fittext'
class OutputDisplay extends React.Component{
render(props){
return <p className='output'><span id='answer'><FitText compressor={0.1}>{this.props.placeThisOnScreen}</FitText></span></p>
}
}
export default OutputDisplay;
You can hide overflowed text and set text direction to rtl:
#answer {
overflow: hidden;
> div {
direction: rtl;
}
}
With breaking string:
#answer {
width: 100%;
display: block;
word-wrap: break-word;
white-space: normal;
}
You should use CSS word-wrap: normal and define the size of the calculator screen (output) window according to your needs.
I'm looking for a website, key-combination, or package which does this:
Is there an easy way to tidy up my css code, and put all the class properties together. I mean if I have code css like this:
body {
padding-top: 50px;
background-color: #499eb9;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
Is there a quick way to make it look like this:
body {
padding-top: 50px;
background-color: #499eb9;
margin-bottom: 60px;
}
This of course is in much longer css code. I have searched on google, but couldn't work out how to word this.
I want to position divs next to each other spaced equally and reposition them if the window size is changed. For that I think I need SASS. One time there may be 14 divs, other 10 divs in one class and I want them to be spaced equally depending on the count and the screen size. Can I get element count in SASS for one class?
Or you can do that with pure css and flex property
.equalSpaces {
overflow: hidden;
display: flex;
}
.equalSpaces p {
padding: 5px;
margin: 0;
background-color: #000;
border: 1px solid #999;
}
.equalSpaces div {
display: inline-block;
flex: 1; /* to make all blocks equal */
}
An example: http://jsfiddle.net/LbxyLmpg/
edit: #cimmannon suggestion display: inline-block;
You just need to use jQuery for this. Not AJAX or SASS. The reason is, AJAX is server side and SASS is just precompiled CSS, nothing more. So, you need to make it this way:
$(document).ready(function(){
$(".equalSpaces").each(function(){
totalDivs = $(this).find("div").length;
$(this).find("div").width(100/totalDivs + "%");
});
});
Fiddle: http://jsfiddle.net/praveenscience/h72horvz/
My excuses in advance, since this seems to be a problem concerning very basic understanding of CSS and maybe also Javascript.
What I want to do is this: imagine a div which contains a h3 and a p. On hovering on the div I would like the h3 and p to change their font-weight. So far I am using this code here to change the opacity and border on hovering over the div, but I really don't know how I can refer to the two elements inside the div. I'm really sorry, but I need someone to explain it to me in very simple terms.
For example, I think those elements inside the div are called children, but I'm not even sure about that... I'm really working with all that HTML/CSS/Java stuff for the first time and try to figure things out as I go along. The tutorial sites I found so far couldn't solve my problem, therefore this post.
More background information: I'm using the "smoothgallery" script by jondesign (Jonathan Schemoul) () and am trying to bend it to my will, but that is pretty difficult if you don't have any clue how it actually works. The site I implemented the script in can be found here.
Here comes the CSS part that changes the div on hover:
.jdGallery .gallerySelector .gallerySelectorInner div.hover{
border: 1px solid #89203B;
border-left: 0.8em solid #89203B;
background: url('../../images/teaserBox_bg.jpg') no-repeat;
background-size: 100% 100%;
filter:alpha(opacity=1);
-moz-opacity:1; /
-khtml-opacity: 1;
opacity: 1;
}
This entry in the CSS file changes the settings for e.g. the h3 inside that div,
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
You may also want to take a look at the .js file that makes these classes, it can be found here.
This is probably the most important part here:
createGalleryButtons: function () {
var galleryButtonWidth =
((this.galleryElement.offsetWidth - 30) / 2) - 14;
this.gallerySet.each(function(galleryItem, index){
var button = new Element('div').addClass('galleryButton').injectInside(
this.gallerySelectorInner
).addEvents({
'mouseover': function(myself){
myself.button.addClass('hover');
}.pass(galleryItem, this),
'mouseout': function(myself){
myself.button.removeClass('hover');
}.pass(galleryItem, this),
'click': function(myself, number){
this.changeGallery.pass(number,this)();
}.pass([galleryItem, index], this)
}).setStyle('width', galleryButtonWidth);
galleryItem.button = button;
var thumbnail = "";
if (this.options.showCarousel)
thumbnail = galleryItem.elements[0].thumbnail;
else
thumbnail = galleryItem.elements[0].image;
new Element('div').addClass('preview').setStyle(
'backgroundImage',
"url('" + thumbnail + "')"
).injectInside(button);
new Element('h3').set('html', galleryItem.title).injectInside(button);
new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
}, this);
new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
},
So my question here is, if it is possible at all to change the h3 and p settings by using the hover function on the main div?
Thanks in advance! Also for negative criticism, I don't really know if I did something wrong in the way I posted this question and if I can even ask it here.
You're making this way more complicated than it needs to be. No Javascript is required to do this. Let's say you've got the following:
<div class="container">
<h3>This is a header</h3>
<p>This is a paragraph</p>
</div>
So you've got a container, with a header and paragraph. Let's say you want to have the header normal weight, and the paragraph in red normally, with a padded box around the whole thing. Here are your styles:
.container { border: 1px solid black; padding: 10px; }
.container h3 { font-weight: normal; }
.container p { color: red; }
When you hover the mouse over the , you want the paragraph and header in bold and the box border to change to blue. Add this into your stylesheet (or <style> block) below the CSS above:
.container:hover { border-color: blue; }
.container:hover h3 { font-weight: bold; }
.container:hover p { font-weight: bold; }
Note that you can save a bit of space, and make it more concise by combining the <h3> and <p> styles into one line with a comma, since they're both the same. The whole thing would now look like this:
.container { border: 1px solid black; padding: 10px; }
.container h3 { font-weight: normal; }
.container p { color: red; }
.container:hover { border-color: blue; }
.container:hover h3, .container:hover p { font-weight: bold; }
Remember that the "C" in "CSS" stands for "cascading": styles cascade down through both hierarchies (that is, a parent element's style also applies to a child element, unless it's got default styles like margins or whatever), and down the style sheet - that means styles you define after others will override them if they apply to the same element.
The ":hover" selector in CSS can pretty much be used on anything, with very few exceptions. I use them regularly for Javascript-free drop-down menus. You can find more on the ":hover" CSS selector here: W3Schools CSS reference on ":hover". In fact, the W3Schools site is a generally great resource for brushing up your CSS.
because short answers what we always prefer to look for:
.classname :hover *