Lay out blocks on multiple columns [duplicate] - javascript

This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 7 years ago.
I think a screenshot and a little diagram will speak for themselves.
This is what I have:
And this is the result I want:
So basically I want to say a div can be this big and if it's bigger then cut it and put the rest in the next raw.
Any idea on how to do this simply?
Thank you

Use the flexbox in the following way:
flex-flow: column wrap;
This will set the flex-flow into columns, not rows(as in your example), they will align on the cross-axis. Wrap will mean that the elements are allowed to wrap and take up space on a second column.

According to the description and to the 'Spanish' column on your schema, you want a newspaper-like layout, with content that overflows on the next column.
CSS3 Column Module is useful for that, and is relatively well supported by browsers, providing you use it with prefixes.
In this fiddle, I have defined a lang block element. By setting a column-width to the langs, we allow the 'lang' to break on multiple columns.
CSS:
.lang {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
}

Related

How to deal with text overflow in fixed height container

I was just thinking, that is there a way to deal with text overflow with dynamic text in a fixed height layout?
I often see when I have to sitebuild for backend developers, that there is a fixed height container/layer (Like a card or thubnail) where you can't use the overflow: auto
css property becouse the design is not allowing it.
Let us assume that I would use ellipsis, but the text can be in 2 lines long.
I could use the :after or :before pseudo but what if the dots I created will be overflown on the text, or pushed out of the container?
If I use Javascript and maximalize the characters number, than it will break the world like this: Hello worl... .
Yeah sure, we can maximalize the characters in the backend side in each field, but sometimes it won't work properly in smaller devices (Tablet, mobile).
Here is a jsfiddle if I didn't tell in a good way, what I'm thinking about.
My question is, what is the best practice to solve this problem?
did you try line-clamp
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
look into this url for more help
Line Clampin’ (Truncating Multiple Line Text)

Jump to different sections of the page when theres a fixed navbar [duplicate]

This question already has answers here:
offsetting an html anchor to adjust for fixed header [duplicate]
(28 answers)
Closed 6 years ago.
So I have successfully gotten my page to jump to different sections on the page via buttons referencing the ID's like this
<button id="niftyBtn">Things</button></br>
<div id="nifty">Blah</div>
I have several of those and they all go to the correct portion of the page.
The problem is, there is a fixed nav that is included into the page that I can't change and the top of the sections are going behind that navbar instead of below it.
I have tried to use several different variations of a jquery solution I saw using .offset() but none of them have been effective. Any input is appreciated
Note: It behaves the exact same way when I use jQuery or javascript to jump the sections instead of href tags.
You don't need a javascript solution, something as simple as this will do:
h2:before,h3:before,h4:before {
content: " ";
display: block;
visibility: hidden;
margin-top: -7em;
height: 7em;
}
Granted, these are meant for headings, but you can substitute with a class, or IDs for the same effect. The measurements will have to be amended, of course.
BTW, why are you using <button> to wrap an <a>? That code should just be Things</br> and if you want it to look like a button, style it like a button.

Assign divs the same height (responsive)

I have several divs, that should have the same height, if the screen size is above a certain width.
I thought its a good idea to use a class .sameheight as selector to create a "global working function". Next I would assign another class, to pair the divs, that should have the same height, like so:
.sameheight-01
.sameheight-01
.sameheight-02
.sameheight-02
.sameheight-02
I have several issues, that prevent me from writing my own script, as I have not enough skills in javascript/jQuery:
How can I make it a responsive function, not just set the height once after loading (using window.resize)?
How can I target .sameheight and search for other classes, without writing the same line multiple times (.hasClass(sameheight-01).hasClass(sameheight-02), etc.)?
How can I make this scalable? (Imagen I have twenty groups with ten different media queries)
I have created a JS Fiddle Demo to illustrate my problem.
How far back do you have to support?
Because this could be solved using display:flex;
.row-sameheight {
display: flex;
display: -webkit-flex;
display: -moz-box;
width: 100%;
}
Here's a JS Fiddle
this you could achieve using CSS itself
#media (min-width:500px){
.sameheight {
min-height:100px;
}
}
or
if u want to do through js/jq, refer the modification of fiddle code
http://jsfiddle.net/qj3ntsjs/11/ or
http://jsfiddle.net/qj3ntsjs/17/

Dynamic widths for breadcrumbs

I'm kinda stuck here and I'm looking for some ideas. I have a breadcrumb system which uses :before and :after tags for the arrows.
The maximum width for all the breadcrumbs put together is 735px as that is the size of the container element.
Now; I need to restrict the length of each breadcrumb to stop them overflowing and to ensure that they all stay on one line. To do this, I will need to set a maximum width on the breadcrumb. However the max-width will depend on the number of breadcrumbs which are currently visible.
I know that the easiest way would be to count the number of breadcrumbs present and set a fixed position by dividing the container width by the number of breadcrumbs, but this is not what I want - It would mean that breadcrumbs with a shorter title have a large gap, like below.
So I need to specify a max-width, but the max-width will depend on the width of the other breadcrumbs.
For example, if all the breadcrumbs have a fairly long title, the max-width will need to be small enough to allow all breadcrumbs to fit in the container.
But if, say, five of the breadcrumbs have very short titles (ie 4 characters) and the fifth one has a longer title, I would want the max-width to allow all the text on the last breadcrumb to be displayed, but still ensuring that the breadcrumbs still fit inside the container.
Sorry if this is too confusing. Here's a jsFiddle of my breadcrumbs so you can understand how they're structured. If you need any more information please let me know.
http://jsfiddle.net/5CLYt/
The second example in the jsFiddle shows how the max-width needs to be dependant on the width of the other breadcrumbs, and not just the number of the breadcrumbs displayed.
Beside the answer of #JAYBEkster, you could consider using flexbox.
Here is a great resource: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've updated your fidle: http://jsfiddle.net/NicoO/5CLYt/1/
/*
COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#container {
display: flex;
justify-content: space-around;
list-style: none outside none;
margin: 0;
padding: 0;
}
I know this is not what you want, since the space between the items is growing and not the items it self. But maybe it' the right direction.
Maybe keep this question updated.
Update 2: flexbox is awesome.
It works with firefox: http://jsfiddle.net/NicoO/5CLYt/3/
All you needed to do was:
.breadcrumbButton
{
flex: 1 1 auto;
}
You should add display:table for your container; add display:table-cell for each child and remove floating;

CSS3 multi-column layout and Image span

Can we have an image which spans over multiple columns which is created using CSS3 multicolumn property in an Html page. Here is my column layout style
div#column {
margin-left:20px;
-moz-column-width: 250px;
-moz-column-gap: 20px;
-webkit-column-width: 250px;
-webkit-column-gap: 20px;
height: 850px;
}
I need to place an image within this column layout which spans over atleast 2 or 3 columns.
Theoretically there is column-span, however it doesn't seem to be supported by any browser currently.
You could try with position:absolute as Simon suggests, but I doubt you will can satisfactory results and I don't think there is any other reasonable workaround.
Maybe there are JavaScript libraries that can do it...
Add a width on your div and add this style
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
See reference: >>
I asked #Krishna to post this question since our other SO question/answer session Increase font size with JavaScript around fixed floated images in CSS columns was getting off-topic, i.e. it was solved and this image spanning multiple columns warranted a new question.
So, my thoughts so far...
column-span is working in Webkit (Chrome12) for me. Check out the quirksmode demo page. However, the bad news is that it doesn't help solve this problem as the image that needs to span multiple columns still gets clipped at the column-width, so I don't think it is the solution.
For now I think the only solution is to do the columns yourself in JavaScript, or maybe try and use/modify the jQuery columnizer plugin.
Oh and I just found this other question CSS3 Columns and Images which basically agrees that it is impossible without JavaScript.
There is already have a lot of JavaScript for your font increase/decrease (different question, see my fiddle) so it would have been great if CSS supported this natively. All we want is big Yoda to spill over into the second column :-)
So I think that the only solution currently is:
For each image that is greater then the width of a column, work out how much into the next column it would be (including the column-gap)
Add a spacer floating <div> in the next where the image needs to overlap to, so that the words correctly continue to flow around and below the image
Absolutely position a copy of the image over the top.
I just hope you don't want images that span more than 2 columns otherwise it's going to complicate an already complex solution!
Use position:absolute, like this:
#image {
position:absolute;
top:300px; //distance from top
left:200px; //distance from left
width:600px; //image width
height:400px; //image height
}

Categories

Resources