Develop Reference

Add two "document.getElementById" to calculate how much to offsetTop

I'm looking at https://www.w3schools.com/howto/howto_js_navbar_sticky.asp for implementing a sticky navigation bar for my website, but unlike the example on that page, my site has two "navbar" divs - one on top of the other. I want to have the bottom bar become sticky once it reaches the top of the page, but when I implement according to the tutorial, it doesn't become sticky until For the purpose of this question, label one "logobar" and the other "navbar".
How can I add the heights of both bars to calculate the offsetTop to use in the w3schools' var sticky = *calculatedvalue*.offsetTop; statement?
In addition to this, in the tutorial, there's a .sticky + .content padding-top set at 60px, which is static. In my case, both of my "logobar" and "navbar" are wrapped in a div wrapped by the , and the following "content" is the blog "main" at the same level as the . So how would I add a padding that is a calculate of the entire so that my sticky navbar doesn't go off-screen and then rubber-band to its sticky position? So that it's dynamic if the total header height changes on a device of different screen width.

How to set two divs side-by-side with the same height?

I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.

Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.

divs are block elements. you can set display:inline-block; to make them align side by side.

Skrollr Body is not tall enough to show all content

Assuming window height is 768px and content height be 1080px and
:
when I scroll to bottom, since winHeight < contentHeight, part of content is not shown. What can I do for this?

I had the same issue on one of my pages. Since overflow is set to overflow: hidden from the tutorial I was following I had to set overflow: visible for a couple specific sections so that all of the content would be visible.
Here's a jsfiddle: https://jsfiddle.net/Luw54j8x/
There is probably a bit of extra code in the CSS/js, but the important thing to pay attention to is the last few lines of the CSS. Remove the comment tags to see all of the content visible after scrolling.

Calculating exact window height using jQuery

So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?

This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;

Adding undetermined white space above a bootstrap 3 affix/scrollspy

If you check out this link, you will see that as you scroll down, the navigation has both affix and scrollspy functionality (From bootstrap 3)
http://codepen.io/datanity/pen/thnua
However, if you add white space at the top, the affix/scrollspy occurs in the wrong location. For example, this is with 800px of white space ontop.
http://codepen.io/datanity/pen/haKzg
Now of course here, you can adjust the affix/scrollspy code so that way it works with the 800px height ontop but, my problem is that I have no idea what space I will have on top. Sometimes it will be 2000px other times only 300px. Also, there is no way for me to know the id/class of the divs that appear ontop. Sometimes it will be 10 divs, sometimes 0, and they will always have different id/classes.
Is there a way that the affix and scrollspy can be triggered relative to the container it is in, and not a fixed px location from the top of the body?
Thanks for any help!
Tim

adding this to the top of the js fixed the issue. With this method, it does not matter how much white space or how many divs you have ontop. Your bootstrap scrollspy and affix will always be in the correct place!
$('#mynav').affix({
offset: {
top: $('#mynav').offset().top
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
});

Add an ID to the section element (located at the top of the HTML page). I'm assuming this is the element that you're concerned about changing heights.
<section id="top-section" style="height:800px;">
</section>
Then add these lines to your JS file:
var $h = $("#top-section").height() + 280;
$("#mynav").attr("data-offset-top", $h);
This queries the rendered height of the section element, and then fixes your sidebar response height accordingly.
If you will also have an unknown amount of sections, then you should wrap the code that creates the sections in a div element. For instance, if you're using PHP to build the section area of your webpage, you should do something like this:
<div id="section-wrapper">
<?php echo "Whatever code you have here" ?>
</div>