We Keep Coding

Removing extra space in html page

I am currently implementing a tool for a project, and I am having some difficulties to remove some extra space at the bottom of the main container.
Basically, the container that contains the drawings-list and the map, resizes itself on window resize event. The bottom bar is fixed, so it does not affect anything.
$(window).on('resize', function () {
resize();
});
function resize() {
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
}
When the page is first loaded, it renders properly. Then when shrinking it, we can see a space that seems to be equal to the difference between the original page height and the current one.
Changing the size of the html and body element does NOT fix the issue.
Using the Google Chrome Dev tool, I am not able to select that grey background.
Changing margin-bottom to a negative value on the main container does not remove that space either.
Any clue on how to get this space removed?
Thanks

Sure you don't have an element inside that extends beyond the body with a min-height set on it. This would push the sticky footer down when the body shrinks below that min-height creating the extra space?
Look for all elements with a min-height and try shrinking them.

When the page is first loaded, it renders properly. Then when
shrinking it, we can see a space that seems to be equal to the
difference between the original page height and the current one.
May problem is: resizing the page so try that:
$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
});

jQuery element height calculation behaving unexpectedly

New to playing with jQuery and javascript (and stackOverflow). My project is basically a scrolling page with linked divs.
For aesthetic reasons, I wold like to have each div fill the size of window and I decided that jQuery would be an easy way to do this. The basic structure is this:
IF the div is shorter than the window
THEN grow to the size of the window.
ELSE use an auto height
I can get a single div to behave this way, the problem is I am applying this to a class and the other objects do not seem to want to behave in the same manner. Here is a fiddle (first time making a fiddle so if the link is not working let me know -
http://jsfiddle.net/ksaiyo/VBMVQ/3/
This fiddle shows the exact opposite:
http://jsfiddle.net/ksaiyo/6YYFU/1/
My script is here, but the fiddle seems to show the effect well enough. The heights stay at the auto height. (I have a fixed navigation header and unelegantly used padding on top so the linked elements in the page line up correctly - thus the extraneous variables)
$(document).ready(function() {
var divHeight = $( ".content" ).height();
var winHeight = $( window ).height();
var headerHeight = $( "header" ).height();
var viewHeight = winHeight - headerHeight
var newHeight = winHeight + headerHeight;
if (divHeight <= viewHeight ) {
$( ".content" ).height(newHeight);
};
)}
I have searched around and I can't seem to nail down the exact reason to why this is occurring. I tried to use an else statement in conjunction, but then everything including the small elements adopt the auto height. (I tried it in the fiddle as well)
Thanks in advance for your help.

How to fix too long css dropdown in Foundation 4 top bar?

I'm trying to fix a web page using the Foundation 4 framework. The page has a css dropdown menu that's taller than the height of the screen. Items that don't fit on the screen are inaccessible, see the menu Baggers | Paris on this simplified demo page:
http://janosgyerik.github.io/BrownBagLunch/dropdown-issue.html
It would be great to make the dropdown menu scrolling, for example as demonstrated on this page:
http://css-tricks.com/examples/LongDropdowns/
and explained on this page:
http://css-tricks.com/long-dropdowns-solution/
I copied the code from the explanation, but I'm not a CSS wiz, and I've been struggling to adopt that code to my demo page above. Can somebody help me out here? I'm open to other kind of solutions too, doesn't have to be this particular trick.
UPDATE
Inspired by #topless' answer, I solved it like this:
function fixDropdown() {
var maxheight = $(window).height() - $('nav.top-bar').height();
var dropdown = $('ul.dropdown ul.dropdown');
dropdown.css({ 'max-height': maxheight, 'overflow-y': 'auto' });
}
$(window).on('load', fixDropdown);
$(window).on('resize', fixDropdown);

I don't see any other solution than scrolling when the height is greater than the size of the browser window. With css I would do it like this. If you don't want the options to reach the bottom of the page you can define a max-height property.
ul {
max-height: 300px;
overflow-y: scroll;
}
And to achieve the effect you posted for the long drop downs, you can follow the instructions
from the same guy from css-tricks.

I'm using foundation 5 and I've implemented a slightly different approach. Instead listen to the window resize, I prefer to listen to the dropdown opened event.
I have a navbar and a container with content, I add a padding to the container to compensate the cutted dropdown height.
$('body').on('opened.fndtn.dropdown', '[data-dropdown-content]', function() {
var dropdownPosition = $(this).offset();
var dropdownHeight = $(this).outerHeight(true);
var containerHeight = $('#main').outerHeight(); // my container is #main, what is yours?
var missingPadding = dropdownPosition.top + dropdownHeight - containerHeight - $('nav.top-bar').height();
$('#main').css('padding-bottom', missingPadding + 'px');
}

Script's function works correctly on resize but not on document.ready

I have a function that corrects and adapts the size (and vertical alignment) of three fluid columns with text and images.
The script, while not polished/efficient yet, works exactly as expected but sometimes(?) fails at the beginning.
The functions is the following:
var resetHeight = function(){
var maxHeight = 0;
$(".same-height-col").height("auto").each(function(){
maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight + 25);
var maxTextSize = 0;
var tempHeight;
$(".same-height-col").each(function(){
tempHeight = $(this).find(".links-text").height();
maxTextSize = tempHeight > maxTextSize ? tempHeight : maxTextSize;
});
var topMargin;
$(".same-height-col").each(function(){
topMargin = (maxTextSize - $(this).find(".links-text").height()) + 25;
$(this).find(".links-image").css("margin-top",topMargin);
});
}
The I call it twice:
$(document).ready(function() {
resetHeight();
$(window).resize(function() {
resetHeight();
});
});
The problem is that many times when I load the page, I see this:
That doesn't happen consistently, but it does happen pretty often, but as soon as I resize the window the script works exactly as expected:
So where could the mistake be?
The script is called for sure even at the beginning, if I put an alert in the function, and just load the page (with no resize), the alert pops up.

When you calculate the maxHeight value, you reset all the inline heights that were set in the previous resetHeight call by doing $(".same-height-col").height("auto"). However, you don't reset the margin-top properties that were added to the links-image elements.
This means that the second time that resetHeight is called (and all subsequent times), the maxHeight calculations will be different. To make sure the results are the same each time, you need to reset the margin-top property on the links-image elements before doing the calculation.
$(".same-height-col .links-image").css("margin-top","");
$(".same-height-col").height("auto").each(function(){
maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight + 25);
You may also want to make that height maxHeight+50 rather than maxHeight+25 if you think the result of the layout after the resize looked better than the intial layout on load.

As i understand your issue, you should set attribute width and height of images and use the document ready handler:
HTML for all images in .links-image DIVs: {width/height/alt attributes should always be specified for image when possible}
<div class="links-image" style="margin-top: 53px;">
<img src="img/list.png" width="210" height="92" alt="">
</div>
JS code:
$(document).ready(function() {
$(window).resize(resetHeight).trigger('resize');
});

I’m starting with the premise that you want the box content components — the title, the subtitle, and the image — vertically aligned across all the three boxes. If this is not true, just ignore this answer.
While I can’t spot the issue in the code at hand, I would try to approach it another way, without JS: clearfix the columns and fix the height of the components: let’s say I expect titles to be one line of text, subtitles three lines, and images are already fixed-height.
The fixed height will give you vertical alignment, and the clearfix will take care of the column height.

Responsive swipe gallery

I'm working on a snippet for a swipe gallery for mobile.
You can see it here http://codepen.io/piatra/full/Edtlq
[].forEach.call(slides, function(s){
s.style.width = mainContainer.offsetWidth + 'px';
});
My problem: Because the content is made up of multiple panels they need to be on the same line to the right. The size of a panel should be 100% of the screen so you only see one panel at a time. But i cannot set the size of the panel in css to 100% because that would push each panel on its own row.
Currently I am solving this in JS, ontouchstart I get the size of the main parent and set each slide to that width but I don't like this solution because when switching for landscape to portrait you have to touch the gallery for it to update, and even if I add an event lister to the change its still not a pretty solution.
Can I achieve this effect in CSS only? A gallery of panels on the same row with the width variable based on the parent ?
PS : Chrome dev tools > Emulate touch events
PPS :
Wrote down a simplified version http://codepen.io/piatra/pen/usaHo
Any improvement to this version is very much welcomed :)
A nice example is http://csscience.com/responsiveslidercss3/ but when adding a new panel you have to edit the CSS

I think this cant be done with pure css, especially since you want it to be easyly maintainable without need to change css when adding more panes.
One solution would be to use jquery to count the panes, then set the wrappe width and panes width accordingly to achieve the desired effect:
http://jsbin.com/idufaj/6/edit
You can add as many panes as you like, and the effect will allways presist.
$(document).ready(function() {
var panes = $(".pane").length;
var width = panes * 100 + "%";
var panewidth = 100/panes + "%";
$("body").css({ width : width });
$(".pane").css({width: panewidth });
});
In this example i use body as the wrapper, but it can be any element. In this case, as there are 3 panes the body width is set to 300% and the panes width is set to 33.3%. If you add another pane the body width will be 400%, and the pane width will be 25% and so on.