Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to use https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows java script plugin to achieve equal row heights on my article rows of responsive grid on http://www.snapchamp.com. The plug-in is rendering some pages ok but in some cases it's messing the margins between element like below:
Plugin fails when I zoom the browser window and also when I turn the orientation of ipad or mobile devices. In mobile even with single element grid the margin go messy.
So my question are:
1) Is there a better js plug-in that achieves better results?like http://brm.io/jquery-match-height/ or something else that you used in past.
2) What is order of page css rendering and javascript execution? What can be reason for such grid margin issues?
3) I tried searching for zoom events on browser and answers were almost 3-5 years old. Wonder if we have any new event that notifies javascript of zoom event on browser.
I put together this simple bit of js/jQuery for you to perhaps use as a solution.
The fiddle.
jQuery(document).ready(function(){
//Find max height:
var maxH = 0;
var containers = jQuery("div.container");
var i = 0;
containers.each(function() {
var h = jQuery(this).height();
if(h > maxH)
maxH = h;
i += 1;
if(i == containers.length)
updateContainerHeight();
});
function updateContainerHeight()
{
if(typeof maxH == 'undefined' || typeof maxH == 'null')
return;
containers.css({'height': maxH + 'px'});
}
});
What it does is iterate through all of the container elements, measure them, and if the current element is higher than the previously highest element, it replaces the maxH variable. Once all containers have been reviewed, a function is fired to change all element heights to the highest.
This shouldn't affect your responsive as it doesn't care about width or how many units are in a row. A more sophisticated solution would only compare those in a single row, and you can check that by seeing how wide the parent element and how wide the containers are, then divide to determine in the current responsive layout how many columns are desired for each row and adjust from there.
I hope this helps give you some direction.
I realized that most solution dealing with javascripts involved changes with heights. If you look at the dom on site, you will realize that under article we had another element named entry. I was trying to make article of equal height but after reviewing code I realized I could even make a child element of same height. I switched from article to entry and my problem resolved to certain extent. Then once in a while re-sizing I was again getting margin squishing problem. After some time realization came that my theme is using masonry plugin and may be that is causing problem/conflict. I removed masonry and site looks better. Still need to test fully on different devices and different scenarios to test if site works.
Want to take this opportunity to Thanks #practically for effort and help provided. His solution provided also will work but will provide highest height to all elements across rows. The plugin ( https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows) works on rows wise height but is little slow to update the site and cause a bit of flicker.
Related
I've a requirement where I have 3 panels(Chats, Groups, Channels) in the left side panel and I need to adjust their heights based on the resolutions and also the items in that panels.
I will make api calls and get the items for that panels and bind them through angular bindings.
Please check the JSFiddle I've prepared for a clear understanding.In this, I've also wrote some additional media queries and adjusted the max-heights for the resolutions.
Now, My actual requirement is :
1) If there are no items at all in all the 3 panels, then all panels should collapse which is already working.
2) If all the 3 panels has items more than its size, then scroll should appear as the output screen which is already working.
3) If only one panel has items, then it should automatically expand its size like shown in the image in the
and same should apply to other panels as well.
4) Finally, if only few items are available in the 2 panels and more items are present in the 3rd panel, then it should show in the following way.
Actually, I thought of writing some jquery after the api calls based on the items count but that's kind of getting hard because I need to check the resolutions as well and also the items count in all the panels.
Is there any css way of achieving this?
at least, is there any article or something where I can follow and do this?
is jquery, the only way of doing this?
You could standardise it at 33.33333vh height then modify it using jQuery after the fact. It could get a little complex depending on how many exceptions you want to cater for but this unit will take care of the resolution differences and is supported by modern browsers.
In your jQuery you could work out the number of items in each panel as a percentage of the total and give each panel an appropriate height in vh - the label.
$(function() {
var totalNumItems = $('.panel div').length;
$('.panel').each(function() {
setPanelHeight($(this));
});
function setPanelHeight(panel) {
var numItems = panel.find('div').length,
heightPercentage = (numItems / totalNumItems) * 100;
/* calc -1.5em takes the label height into account */
panel.css('height', 'calc(' + heightPercentage + 'vh - 1.5em)');
panel.niceScroll();
}
});
If there were no items in a panel, it would calculate its vh as 0 and as such collapse it.
Edit: jsfiddle: https://jsfiddle.net/mattBBP/8vvcub3c/
This doesn't quite work because the area it's being displayed is not 100% of the viewport but this could be modified/offset / would not be a problem out of the fiddle.
This is my first SO question, so please forgive any question faux-pas!
I have two containers on my HTML DOM that float:left. Each has content that must be perfectly aligned with the other. The left container (A) has overflow-y:hidden while the right container (B) has overflow-y:scroll. I use an onscroll callback to set the scroll position of container A like such:
A.scrollTop = B.scrollTop;
This works great in 99% of use-cases... until a client zooms below 100%. When zoom is below this level, rows in one container are sometimes 1 pixel off from those in the other. My first guess is that this is a rounding issue, but I can't figure out where I can find values that I could use to build an algorithm to predict when & how the error will occur. In addition, both containers have exactly the same height, and their content is of identical height as well, so I'd expect any rounding errors to be the same for each of them!
I've created a jsFiddle demonstrating the behavior here. (I've used divs in this example, but other elements exhibit the same behavior) (I'm testing in chrome)
Can anyone explain why these two containers exhibit different behaviors when setting scrollTop to the same value? Also, given that browser-zoom detection is difficult at best
(discussion here) does anyone know an efficient way to identify and correct for this issue?
Looks like scaling problem, not sure.
Forcing scrollTop might help.
JSFiddle demo here.
$('#b').on('scroll', function () {
var top = $(this).scrollTop();
if (top != $('#a').scrollTop()) {
$('#a').scrollTop(top);
$(this).scrollTop(top);
}
});
Update: I just revisited this question to see if there were any changes in Chrome's handling of this datapoint... lo and behold, Chrome now returns a floating point value for scrollTop!
Problem solved!
From a very long time I am thinking of asking this. But was not sure if I should ask this question. I have been very lost seeing the behaviour of html elements with normal flow. It is sometimes very difficult to control them. Specially when I am using server side coding as well to create dynamic content. Sometimes, I take more time to understand what going on with these elements that I take to code server side or javascript. For me its very difficult to understand how a change will affect some other element.
So, I have thought of using absolute and relative positioning for elements and placing them based upon calculation of innerWidth and innerHeight of the window which will also make it responsive. I feel I wil have more control like that.
On window resize I can again position the element to make it dynamic with window resize.
Just like the code below,
window.onload = function()
{
document.getElementById("gamectrl").style.position = "absolute";
document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px";
document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px";
}
window.onresize = function()
{
document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px";
document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px";
}
Do you think it is the right way to position html elements? I am very comfortable with this. But I am not sure if this is the right way to do it.
Please share if you have any experience on this. I am very confused about which approach to use. I dont understand the normal flow of html elements properly as I could not find any good resources which discuss them in depth. So, if you know any good resource to learn about normal document flow(in-depth) then do share as well.
I would not use javascript to just reposition an element giving the example you've shown. In your example I would stick to using CSS. If you're concerned about the browser/device resizing then you need to look into using #media queries. If you need to have your elements a certain distance away from the edge of the window or another element you can set the element's margin with percentage values (ex. margin-top: 10%;). Below are some references to positioning with CSS as well as #media queries.
Media Queries: http://css-tricks.com/css-media-queries/ Media
Queries: http://www.w3schools.com/css/css_mediatypes.asp CSS
Positioning: http://alistapart.com/article/css-positioning-101 CSS
Positioning: http://www.w3schools.com/css/css_positioning.asp
I have a layout of boxes that are all floated left and when you click on their headings, they slide open revealing content. The issue is that the way floats work, when you click to expand one of them, it messes with the row underneath.
http://jsfiddle.net/FCCye/ <-- click on one of the headings to see the issue.
I've solved this by separating them into columns like so:
http://jsfiddle.net/caW4M/
That works fine, however, the layout needs to be responsive, so when the window is 480 or lower, it needs to be 1 column. Between 480 and 768 it needs to be 2 columns. Anything above 768, 3 columns. (obviously, the jsfiddles don't show the breakpoints I have set up.)
This is the code I've come up with to solve this, however it is not working at all. I was wondering if someone could tell me what I'm doing wrong.
// Create all three portfolio columns
var one = $('<div/>').addClass('column').addClass('one');
var two = $('<div/>').addClass('column').addClass('two');
var three = $('<div/>').addClass('column').addClass('three');
// Store all portfolio elements into variables once they're in columns
var colElems = $('.column .project');
// Now append the columns
var winWidth = $(window).width();
if ( winWidth > 480 && winWidth <= 768 ) {
// Remove everything from columns and delete existing columns
$(colElems).appendTo('#portfolio .content');
$('#portfolio .content').remove(one,two,three);
// Store portfolio elements into variables for safe-keeping
var c1Elems = $('.project:nth-child(2n+1)');
var c2Elems = $('.project:nth-child(2n+2)');
// Perform appends into portfolio columns
c1Elems.appendTo(one);
c2Elems.appendTo(two);
// Append portfolio elements to columns
$('#portfolio .content').append(one,two);
}else{
// Remove everything from columns and delete existing columns
$(colElems).appendTo('#portfolio .content');
$('#portfolio .content').remove(one,two,three);
// Store portfolio elements into variables for safe-keeping
var c1Elems = $('.project:nth-child(3n+1)');
var c2Elems = $('.project:nth-child(3n+2)');
var c3Elems = $('.project:nth-child(3n+3)');
// Perform appends into portfolio columns
c1Elems.appendTo(one);
c2Elems.appendTo(two);
c3Elems.appendTo(three);
$('#portfolio .content').append(one,two,three);
}
So, what I'm trying to do is append the normal 3 columns when it's not between 480 and 768 (because on mobile size, the columns would stack on top of each other anyway) and when between 480 and 768, only append two columns. So my thought is that at the different sizes, I would have to pull all of the boxes out of the columns, delete the columns, and reappend the columns in different numbers based on the window width. This has proved to be a failed attempt, so if anyone can explain to me what I'm doing wrong I would be very appreciative!
Thanks!
Not an answer to your question, but if you will follow the advice then your question will no longer be of interest. ;-)
First of all why don't you use CSS3 Media Queries for your different layouts? That is what they are for.
Secondly it is "bad practice" to use pixel values (or any other kind of absolute units) for defining breakpoints, even if a lot of authors actually do! It is best to only use relative units like 'em'.
The new Flexbox module could also be an option for you, depending on the supported Browser versions (especially IE 8).
And why don't you let the expanded box not simply overlap the other content by using 'position: absolute'?
Well, doing things with Javascript which should be done with pure CSS isn't a good idea. What happens, when JS is deactivated? And also from a performance point of view, on resizing the viewport ... - all bad.
So my advice would be to completely rethink your approach.
Please take a look at this jsFiddle and press the only button to fill the list up. As you can see DIV elements inside the list are resized to fill the parent contained. This code does exactly what I want to do, but I think the way I implement this is too complex for such a seemingly simple task. Here is the code for the algorithm to assign height to inner elements:
fill = function() {
//Loop through all elements once to get total weight
var totalWeight = 0;
var totalHeight = $("#container").height() - 15; //need a little extra empty space at the buttom
$(".list").each(function(i) {
totalWeight += parseInt($(this).attr('weight'));
totalHeight -= parseInt($(this).css('margin'));
});
//Loop though the element a second time to set the relative height
$(".list").each(function(i) {
var element = $(this);
element.css("height", (element.attr("weight") / totalWeight) * totalHeight);
});
}
My question is, is the best we can do? Are there any other - hopefully faster or more elegant -- ways to achieve this functionality with reasonable cross-browser compatibility? I need to support newer Firefox, Chrome, and Safari only. I was reading about flex-box here and looking at its promising specs, but it does not look like flex-box can do weighted flexible layout consistently across browsers. If I am wrong, please show me a simple example of how this could be achieved.
This type of weighted flexible linear layout is not uncommon, for example it is available in Android SDK as one of the layout options. What is the recommended way to resize elements to fill their parent container, relative to a weight value assigned to them? A pure CSS solution would be wonderful, if at all possible.
Just a quick look over it, after about 30 mins googling. I may do a demo but don't really hav much time.
Have you looked here
html5rocks
coding.smashmag...
tutsplus
umarr
w3c
benfrain
There are some good examples on the 6th one
edit:
I was looking thought the firefox developer section on their website and found
developer.mozilla...
I also found another example with a download!!
github..
this might give you some direction for firefox and the rest should be in the other links I have provided