Using floats within a grid at variable heights - javascript

I have the following grid and each red block is a div. As you can see, the longest div is pushing the bottom two divslower, creating unwanted space.
Here is how I would like to have it, so the space is tighter and not broken by the longest div:
Is there a CSS solution to this, or an alternative to Masonry / Isotope?

There is no way to accomplish what you want using floats. You can however use:
div{
position:absolute;
}
This will achieve what you want because it will allow you to position each box exactly where you want, down to the pixel. Be aware that this will remove each div from the document flow. For that reason and a few others, I recommend constraining the divs within some sort of container that is set to:
position: relative;
This will limit the scope of the absolute positioning.

Related

How to fix element with jQuery or css at the bottom of the parent

In my example I need to fix button .lot-item .bid-now to the bottom of .lot-item as in jsFiddle example bellow. I know most popular way is to make position: relative then of the child element position: absolute then bottom 0. But in this case all my items will loose weight property and will be ugly. Because my buttons most wide elements in the parent element. Also I am not able to make fixed wide weight for .lot-item. If there are any different solution for my case? jQuery solution is will be good one too
https://jsfiddle.net/z7Lgme5s/
I passed columns to FlexBox, and the results change, I send you the same code in fiddle
The parents .lots are passed to display: flex and flex-wrap: wrap to fall in another line
[https://jsfiddle.net/r0bin/0m13h5fk/1/][1]

How to display only the first few lines of a div (clamping)?

I have a list of divs in which I display the preview of longer documents. The documents use varying font styles. So I don't have a constant line height. Here is an example: http://jsfiddle.net/z56vn/
I need to only show the first few lines of each document. We've determined that 300px is about right. If I simply set a max-height of 300px to the divs, then depending on text properties (size, padding, margin) the bottom of last line gets clipped.
How can I set a max-height for each block that will be close to 300px but that will not cause clipping?
The solution can use CSS, Javascript and jQuery.
Those two questions are similar but their solutions assume a constant line height.
Show first 3 lines in html paragraph
Show first line of a paragraph
The algorithm to calculate all the factors perfectly using only javascript would be too complex.
With css3 there is line-clamp
But this works only on modern browsers.
p{
margin:20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
DEMO
http://jsfiddle.net/MM29r/
this allows you to set the number of lines you want to display before adding the 3 dots.
now you want 300px... so:
var p=document.getElementsByTagName('p')[0],
lineheight=parseInt(window.getComputedStyle(p).getPropertyValue("line-height"));
var lines=Math.floor(300/lineheight);
p.style['-webkit-line-clamp']=lines;
so this gives you an element that is 300px or less
DEMOS
http://jsfiddle.net/MM29r/1/
http://jsfiddle.net/MM29r/2/
NEEDED VALUES: line-height
Now if you want to make the box exactly 300px height just add margins or paddings to the paragraphs.But that depends on your preferences.
if you have some questions just ask.
Note
every js function that adds 3 dots at the end by calculating the words would be to resources intensive to apply in a real world website.
a better approach would be to calculate every paragraph one time and add the clamped result to a db or store it in the static website.
but then again every browser displays fonts in a different way.
EDIT
Here is a different way to display partial content.
Using max-height & -webkit-column-count
https://stackoverflow.com/a/20691677/2450730
DEMO
http://jsfiddle.net/HNF3d/10/
the support is slightly higher than line-clamp and you are abe to display the whole content.
EDIT2
Fading image at the bottom.
p{
width:300px;
max-height:300px;
overflow:hidden;
}
p:before{
content:"";
display:block;
position:absolute;
margin-top:240px;
background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
height:60px;
width:300px;
}
http://jsfiddle.net/MM29r/9/
EDIT3
fading image old browsers (use real images links, not base64)
http://jsfiddle.net/MM29r/13/
One alternative is to use the dotdotdot jQuery plugin.
Its used like
$("div.text_element").dotdotdot({
ellipsis : "...",
wrap : "word"
});
This way, you can just concern yourself with the div dimensions rather than line height or other CSS attributes. Also, it allows you to trigger events to show and hide the hidden text.
You should look for line clamping techniques
A list of them can be found here http://css-tricks.com/line-clampin/
As you can see the above link explains various methods to achieve line clamping, but only one of them is truly a cross browser solution. There seems to be a javascript library that solves this problem exactly, and it works even if you use various font sizes or styles
Clamp.js [ https://github.com/josephschmitt/Clamp.js ]
Here is an example
var paragraph = document.getElementById("myParagraphId");
$clamp(paragraph, {clamp: 3});
You could definitely use Clamp.js, which is a JavaScript plugin created by Joseph Schmitt. The minified version of the code can be found here.
You could then use it like this:
var elem = document.getElementsByTagName("div");
for(var z=0;z < elem.length; z++){
$clams(elem[z], {clamp: '300px'});
}
Alternatively, you could use getElementsByClassName if not all your <div>s needed clamping.
Here what I would do in this case;
First we have to get the div and find out the line-height so I am assuming you got your div as jQuery object.
var $divToClamp = $("#");
var $cloneDiv = $divToClamp.clone();
$divToClamp.insertAfter($cloneDiv.html("A"));
// created a new div as same place with the div to get same css, from parents, class etc.
// i don t know how jQuery handles the ids you must check that
var lineHeightToClamp = $cloneDiv.height() * 3;
$cloneDiv.remove();
// remove the clone we are done with it this does not work create clone div as fixed position back of the actual div and visibility hidden (not display:none)
//now we now the line-height for 3 lines set the css
$divToClamp.css({
overflow : "hidden",
lineHeight: lineHeightToClamp
});
some thing similar to this should fix you case but there might be some exceptions like margin of the div i am not sure $cloneDiv.height() includes them or not.
also if there is another element (like span) in your div with different css that will also change the situation.
Hope this helps.

HTML div with absolute position tries to wrap the text. Can I avoid it, without using white space

I have a set of divs with position = absolute, and they can be positioned across the screen.
If the content of any div doesn't fit on the screen, the browser wraps the text into multiple lines and attempt to fit inside the window.
However, I dont want the browser to do that, It should instead hide the content.
http://jsbin.com/welcome/35835/edit/
Edit:
you may think of it as a div on a page with absolute positioning. and
1) the user can drag the div around
2) user can manually change the width of the div( there is a stretch box widget, which the user can use)..
So the problem is when the user is dragging the div around near the edges of the screen, the text should hide and not wrap if it goes out of the window. Hope this explains better
As shown in the example, block 2 shown is what I want.
So, lets say the width of the div is 100px, and the left position of the CSS style is (screen width - 50), then the rest of the text should hide.
Solution 1: white-space:nowrap. Cant use this, since this is a flexible width UI where user can change the width of the div if they want.
Solution 2: If I set the width of the div, explicitly to a number, it works fine.
But not a optimal solution, as then here I will always have to calculate the width for all divs at the time of rendering.
Is there a more optimal solution, which can make the browser not try to fit the text into the screen.
Hard to tell what you're asking. But I think you can use
{
height: 1.2em;
overflow: hidden;
}
To hide the content that is longer than the one line you support
http://jsfiddle.net/MXXDC/2/
If you put them all inside a huge (e.g. 5k px * 5k px absolute positioned div you should see the expected effect: http://jsbin.com/welcome/35862/edit
Is this what you want? (second item)
I wrapped the inner text in a very long div and applied overflow:hidden to it's parent.
I am not sure the exact use case of the widget so I am not 100% sure on what it can have and not have. I have an idea, maybe it will be useful - setting width to a % might help, something like this
.block2{
left: 50%;
top: 100px;
width: 100%;
}
you can set this in the css to avoid calculation with js, but like I said I am not sure of how this is used so this might not work but it might give you some ideas

HTML/CSS/JS - Adaptable grid layout?

I have some (unknown height) elements that adjust themselves horizontally with float: left;, but if one of those elements is taller, there is a space over the one in the next row. I'd like to move that element to the empty space over it. Here's a picture of the problem:
Is it possible to do this without JavaScript? Either way, how can I do this?
In CSS without JS:
you could have "Fotos" vertically aligned relative to "Contato" with display: inline-block (whitespace is a bit annoying and there's an equivalent for IE6/7 if needed)
you could have blocks of equal heights on each "line" either with faux-columns or CSS table layout (unrelated to unsemantic HTML table layout with table, tr and td elements. Here it's layout with the elements of your choice)
if you want to stack as much blocks as possible, then you'll have to create 2 columns, float them and stuff them with your blocks. This would change their order in your HTML code as they'd be written from top to bottom and then left to right ("Fotos" would come right after "Home" in the HTML code)
Just use javascript! jquery masonry was made for this!
http://masonry.desandro.com/

How to implement a vertical slide controller in a height limited div with many objects

I'm nearly 2 months old in studying HTML, JavaScript and jQuery. I've done a few things but never figured out how to implement a DIV (or anything you may suggest) to emulate a viewport which would display text, textarea, buttons, anchors etc all of which simply cannot fit or be seen within the size of the viewport. Therefore the use of the vertical scroll. No need for horizontal scrolling, though. I can format the objects not to exceed the horizontal view. I thought of using a div inside another div, but the objects inside the INNER DIV just bleed through and show up on the bottom of the site!
Is there some magical panel in jQuery created for that purpose?
TIA
Dennis
If you have a containing div such as <div id="container">, you can add the following properties to it to get it's content to scroll vertically:
div#container {
overflow-y: auto;
height: 100px;
}
This CSS will show a vertical scroll bar if the div's content exceeds it's height. The only caveat with this solution is you must set a height on the div.
Here's an example.

Categories