Mixing
My function to set margin is not working consistently
I am trying to set a div just under my header, which has a position of "fixed". I am using a function to find the "clientHeight" of the header, add a few pixels and set the "marginTop to the div. Every few times I load the page or reload the page, the image isn't always in the desired position. I am relatively new to using js to make a responsive site. Only started coding a couple of months ago.
I tried setting the div ("#page") to absolute and using the "top" style attribute. That really didn't work.
I tried using relative too but that was much the same as my initial attempt.
Also I have only tested this in Chrome and Firefox (Latest versions).
Works fine in this fiddle, but not when I run it in the actual browser.
Below is the function in question.
function bodyMarginTop () {
const header = document.querySelector("header");
const page = document.getElementById("page");
page.style.marginTop = (header.clientHeight + 8) + "px";
}
https://jsfiddle.net/Cpt_Crooked/yf8xj3s0/2/
Expected result:
- I want the white div to appear 8pxs under the header no matter the view port width, how many times the page is loaded, or which browser is being used.
Actual result:
Chrome: Page loads correctly roughly 70% of the time. Sometimes it appears
too high on the page sometimes too low.Firefox: Same as Chrome only much less consistent as it only loads correctly roughly 10% of the time.
javascript css
asked Jan 1 at 23:13
AndreAndre
193
add a comment |
I am trying to set a div just under my header, which has a position of "fixed". I am using a function to find the "clientHeight" of the header, add a few pixels and set the "marginTop to the div. Every few times I load the page or reload the page, the image isn't always in the desired position. I am relatively new to using js to make a responsive site. Only started coding a couple of months ago.
I tried setting the div ("#page") to absolute and using the "top" style attribute. That really didn't work.
I tried using relative too but that was much the same as my initial attempt.
Also I have only tested this in Chrome and Firefox (Latest versions).
Works fine in this fiddle, but not when I run it in the actual browser.
Below is the function in question.
function bodyMarginTop () {
const header = document.querySelector("header");
const page = document.getElementById("page");
page.style.marginTop = (header.clientHeight + 8) + "px";
}
https://jsfiddle.net/Cpt_Crooked/yf8xj3s0/2/
Expected result:
- I want the white div to appear 8pxs under the header no matter the view port width, how many times the page is loaded, or which browser is being used.
Actual result:
Chrome: Page loads correctly roughly 70% of the time. Sometimes it appears
too high on the page sometimes too low.Firefox: Same as Chrome only much less consistent as it only loads correctly roughly 10% of the time.
javascript css
asked Jan 1 at 23:13
AndreAndre
193
1
PS, would be nice you used*{margin:0;padding:0;box-sizing:border-box;}or browse the internet for CSS resets - to get a clue
– Roko C. Buljan
Jan 1 at 23:24
1
@RokoC.Buljan Deleted my comment as I missed the "Works fine in this fiddle, but not when I run it in the actual browser." part :) (I was testing on the fiddle)
– Jeto
Jan 1 at 23:25
1
Also, I think you're using JS in vain. All the above can be done using CSS only... Your page is strange, and by using JS instead of CSS to control positions you'll make it additionally jumpy and flashy, since JS triggers once the elements are flowed and painted.
– Roko C. Buljan
Jan 1 at 23:25
@RokoC.Buljan Thanks so much for the response. I only started coding 4 months ago and trying to teach myself. I think I might have gone through things a little too quickly and missed a few things. The reason I used JS, is so that regardless of the device's width, and whether the window is resized, the div would remain a set distance from the header (8px in this case.) I have no idea how I would manage that with just CSS.
– Andre
Jan 2 at 1:06
Also I did add a cdn link to normalize. That would take care of all the default margins and padding, I assume?
– Andre
Jan 2 at 1:09
add a comment |
I am trying to set a div just under my header, which has a position of "fixed". I am using a function to find the "clientHeight" of the header, add a few pixels and set the "marginTop to the div. Every few times I load the page or reload the page, the image isn't always in the desired position. I am relatively new to using js to make a responsive site. Only started coding a couple of months ago.
I tried setting the div ("#page") to absolute and using the "top" style attribute. That really didn't work.
I tried using relative too but that was much the same as my initial attempt.
Also I have only tested this in Chrome and Firefox (Latest versions).
Works fine in this fiddle, but not when I run it in the actual browser.
Below is the function in question.
function bodyMarginTop () {
const header = document.querySelector("header");
const page = document.getElementById("page");
page.style.marginTop = (header.clientHeight + 8) + "px";
}
https://jsfiddle.net/Cpt_Crooked/yf8xj3s0/2/
Expected result:
- I want the white div to appear 8pxs under the header no matter the view port width, how many times the page is loaded, or which browser is being used.
Actual result:
Chrome: Page loads correctly roughly 70% of the time. Sometimes it appears
too high on the page sometimes too low.Firefox: Same as Chrome only much less consistent as it only loads correctly roughly 10% of the time.
javascript css
asked Jan 1 at 23:13
AndreAndre
193
I am trying to set a div just under my header, which has a position of "fixed". I am using a function to find the "clientHeight" of the header, add a few pixels and set the "marginTop to the div. Every few times I load the page or reload the page, the image isn't always in the desired position. I am relatively new to using js to make a responsive site. Only started coding a couple of months ago.
I tried setting the div ("#page") to absolute and using the "top" style attribute. That really didn't work.
I tried using relative too but that was much the same as my initial attempt.
Also I have only tested this in Chrome and Firefox (Latest versions).
Works fine in this fiddle, but not when I run it in the actual browser.
Below is the function in question.
function bodyMarginTop () {
const header = document.querySelector("header");
const page = document.getElementById("page");
page.style.marginTop = (header.clientHeight + 8) + "px";
}
https://jsfiddle.net/Cpt_Crooked/yf8xj3s0/2/
Expected result:
- I want the white div to appear 8pxs under the header no matter the view port width, how many times the page is loaded, or which browser is being used.
Actual result:
Chrome: Page loads correctly roughly 70% of the time. Sometimes it appears
too high on the page sometimes too low.Firefox: Same as Chrome only much less consistent as it only loads correctly roughly 10% of the time.
javascript css
javascript css
asked Jan 1 at 23:13
AndreAndre
193
asked Jan 1 at 23:13
AndreAndre
193
asked Jan 1 at 23:13
AndreAndre
193
asked Jan 1 at 23:13
AndreAndre
193
asked Jan 1 at 23:13
AndreAndre
193
193
1
PS, would be nice you used*{margin:0;padding:0;box-sizing:border-box;}or browse the internet for CSS resets - to get a clue
– Roko C. Buljan
Jan 1 at 23:24
1
@RokoC.Buljan Deleted my comment as I missed the "Works fine in this fiddle, but not when I run it in the actual browser." part :) (I was testing on the fiddle)
– Jeto
Jan 1 at 23:25
1
Also, I think you're using JS in vain. All the above can be done using CSS only... Your page is strange, and by using JS instead of CSS to control positions you'll make it additionally jumpy and flashy, since JS triggers once the elements are flowed and painted.
– Roko C. Buljan
Jan 1 at 23:25
@RokoC.Buljan Thanks so much for the response. I only started coding 4 months ago and trying to teach myself. I think I might have gone through things a little too quickly and missed a few things. The reason I used JS, is so that regardless of the device's width, and whether the window is resized, the div would remain a set distance from the header (8px in this case.) I have no idea how I would manage that with just CSS.
– Andre
Jan 2 at 1:06
Also I did add a cdn link to normalize. That would take care of all the default margins and padding, I assume?
– Andre
Jan 2 at 1:09
add a comment |
1
PS, would be nice you used*{margin:0;padding:0;box-sizing:border-box;}or browse the internet for CSS resets - to get a clue
– Roko C. Buljan
Jan 1 at 23:24
1
@RokoC.Buljan Deleted my comment as I missed the "Works fine in this fiddle, but not when I run it in the actual browser." part :) (I was testing on the fiddle)
– Jeto
Jan 1 at 23:25
1
Also, I think you're using JS in vain. All the above can be done using CSS only... Your page is strange, and by using JS instead of CSS to control positions you'll make it additionally jumpy and flashy, since JS triggers once the elements are flowed and painted.
– Roko C. Buljan
Jan 1 at 23:25
@RokoC.Buljan Thanks so much for the response. I only started coding 4 months ago and trying to teach myself. I think I might have gone through things a little too quickly and missed a few things. The reason I used JS, is so that regardless of the device's width, and whether the window is resized, the div would remain a set distance from the header (8px in this case.) I have no idea how I would manage that with just CSS.
– Andre
Jan 2 at 1:06
Also I did add a cdn link to normalize. That would take care of all the default margins and padding, I assume?
– Andre
Jan 2 at 1:09
1
1
PS, would be nice you used
*{margin:0;padding:0;box-sizing:border-box;} or browse the internet for CSS resets - to get a clue– Roko C. Buljan
Jan 1 at 23:24
PS, would be nice you used
*{margin:0;padding:0;box-sizing:border-box;} or browse the internet for CSS resets - to get a clue– Roko C. Buljan
Jan 1 at 23:24
1
1
@RokoC.Buljan Deleted my comment as I missed the "Works fine in this fiddle, but not when I run it in the actual browser." part :) (I was testing on the fiddle)
– Jeto
Jan 1 at 23:25
@RokoC.Buljan Deleted my comment as I missed the "Works fine in this fiddle, but not when I run it in the actual browser." part :) (I was testing on the fiddle)
– Jeto
Jan 1 at 23:25
1
1
Also, I think you're using JS in vain. All the above can be done using CSS only... Your page is strange, and by using JS instead of CSS to control positions you'll make it additionally jumpy and flashy, since JS triggers once the elements are flowed and painted.
– Roko C. Buljan
Jan 1 at 23:25
Also, I think you're using JS in vain. All the above can be done using CSS only... Your page is strange, and by using JS instead of CSS to control positions you'll make it additionally jumpy and flashy, since JS triggers once the elements are flowed and painted.
– Roko C. Buljan
Jan 1 at 23:25
@RokoC.Buljan Thanks so much for the response. I only started coding 4 months ago and trying to teach myself. I think I might have gone through things a little too quickly and missed a few things. The reason I used JS, is so that regardless of the device's width, and whether the window is resized, the div would remain a set distance from the header (8px in this case.) I have no idea how I would manage that with just CSS.
– Andre
Jan 2 at 1:06
@RokoC.Buljan Thanks so much for the response. I only started coding 4 months ago and trying to teach myself. I think I might have gone through things a little too quickly and missed a few things. The reason I used JS, is so that regardless of the device's width, and whether the window is resized, the div would remain a set distance from the header (8px in this case.) I have no idea how I would manage that with just CSS.
– Andre
Jan 2 at 1:06
Also I did add a cdn link to normalize. That would take care of all the default margins and padding, I assume?
– Andre
Jan 2 at 1:09
Also I did add a cdn link to normalize. That would take care of all the default margins and padding, I assume?
– Andre
Jan 2 at 1:09
add a comment |
2 Answers
2
active
oldest
votes
Make sure the function is called after all elements are loaded on the page by adding a load event to the window object like so:
window.addEventListener("load", bodyMarginTop);
answered Jan 2 at 10:38
SheedoSheedo
462310
1
This is great as it loads all content before the function is run. Thanks @Sheedo.
– Andre
Jan 2 at 15:28
add a comment |
Load the DOM before running JS on the elements.
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
bodyMarginTop();
}
}
answered Jan 2 at 10:46
RishabhRishabh
792616
Thank you @Rishabh. With my limited experience, I will definitely use this if I need to do more than one thing on the loading of the page. One thing I will change though is the readystate from "interactive" to "complete".
– Andre
Jan 2 at 15:33
If you use 'complete' or 'load' then the function will wait for all the resources to load first including images and external scripts. This won't provide a very good user experience because you may find a screen flicker/readjustment after loading of resources. Ideal way is to use 'interactive' because DOM loading time will be very less compared to all the resources.
– Rishabh
Jan 3 at 10:47
I will definitely keep that in mind. Seems I have a fair amount of reading to do ;)
– Andre
Jan 4 at 9:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999667%2fmy-function-to-set-margin-is-not-working-consistently%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Make sure the function is called after all elements are loaded on the page by adding a load event to the window object like so:
window.addEventListener("load", bodyMarginTop);
answered Jan 2 at 10:38
SheedoSheedo
462310
1
This is great as it loads all content before the function is run. Thanks @Sheedo.
– Andre
Jan 2 at 15:28
add a comment |
Make sure the function is called after all elements are loaded on the page by adding a load event to the window object like so:
window.addEventListener("load", bodyMarginTop);
answered Jan 2 at 10:38
SheedoSheedo
462310
1
This is great as it loads all content before the function is run. Thanks @Sheedo.
– Andre
Jan 2 at 15:28
add a comment |
Make sure the function is called after all elements are loaded on the page by adding a load event to the window object like so:
window.addEventListener("load", bodyMarginTop);
answered Jan 2 at 10:38
SheedoSheedo
462310
Make sure the function is called after all elements are loaded on the page by adding a load event to the window object like so:
window.addEventListener("load", bodyMarginTop);
answered Jan 2 at 10:38
SheedoSheedo
462310
answered Jan 2 at 10:38
SheedoSheedo
462310
answered Jan 2 at 10:38
SheedoSheedo
462310
answered Jan 2 at 10:38
SheedoSheedo
462310
462310
1
This is great as it loads all content before the function is run. Thanks @Sheedo.
– Andre
Jan 2 at 15:28
add a comment |
1
This is great as it loads all content before the function is run. Thanks @Sheedo.
– Andre
Jan 2 at 15:28
1
1
This is great as it loads all content before the function is run. Thanks @Sheedo.
– Andre
Jan 2 at 15:28
This is great as it loads all content before the function is run. Thanks @Sheedo.
– Andre
Jan 2 at 15:28
add a comment |
Load the DOM before running JS on the elements.
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
bodyMarginTop();
}
}
answered Jan 2 at 10:46
RishabhRishabh
792616
Thank you @Rishabh. With my limited experience, I will definitely use this if I need to do more than one thing on the loading of the page. One thing I will change though is the readystate from "interactive" to "complete".
– Andre
Jan 2 at 15:33
If you use 'complete' or 'load' then the function will wait for all the resources to load first including images and external scripts. This won't provide a very good user experience because you may find a screen flicker/readjustment after loading of resources. Ideal way is to use 'interactive' because DOM loading time will be very less compared to all the resources.
– Rishabh
Jan 3 at 10:47
I will definitely keep that in mind. Seems I have a fair amount of reading to do ;)
– Andre
Jan 4 at 9:52
add a comment |
Load the DOM before running JS on the elements.
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
bodyMarginTop();
}
}
answered Jan 2 at 10:46
RishabhRishabh
792616
Thank you @Rishabh. With my limited experience, I will definitely use this if I need to do more than one thing on the loading of the page. One thing I will change though is the readystate from "interactive" to "complete".
– Andre
Jan 2 at 15:33
If you use 'complete' or 'load' then the function will wait for all the resources to load first including images and external scripts. This won't provide a very good user experience because you may find a screen flicker/readjustment after loading of resources. Ideal way is to use 'interactive' because DOM loading time will be very less compared to all the resources.
– Rishabh
Jan 3 at 10:47
I will definitely keep that in mind. Seems I have a fair amount of reading to do ;)
– Andre
Jan 4 at 9:52
add a comment |
Load the DOM before running JS on the elements.
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
bodyMarginTop();
}
}
answered Jan 2 at 10:46
RishabhRishabh
792616
Load the DOM before running JS on the elements.
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
bodyMarginTop();
}
}
answered Jan 2 at 10:46
RishabhRishabh
792616
answered Jan 2 at 10:46
RishabhRishabh
792616
answered Jan 2 at 10:46
RishabhRishabh
792616
answered Jan 2 at 10:46
RishabhRishabh
792616
792616
Thank you @Rishabh. With my limited experience, I will definitely use this if I need to do more than one thing on the loading of the page. One thing I will change though is the readystate from "interactive" to "complete".
– Andre
Jan 2 at 15:33
If you use 'complete' or 'load' then the function will wait for all the resources to load first including images and external scripts. This won't provide a very good user experience because you may find a screen flicker/readjustment after loading of resources. Ideal way is to use 'interactive' because DOM loading time will be very less compared to all the resources.
– Rishabh
Jan 3 at 10:47
I will definitely keep that in mind. Seems I have a fair amount of reading to do ;)
– Andre
Jan 4 at 9:52
add a comment |
Thank you @Rishabh. With my limited experience, I will definitely use this if I need to do more than one thing on the loading of the page. One thing I will change though is the readystate from "interactive" to "complete".
– Andre
Jan 2 at 15:33
If you use 'complete' or 'load' then the function will wait for all the resources to load first including images and external scripts. This won't provide a very good user experience because you may find a screen flicker/readjustment after loading of resources. Ideal way is to use 'interactive' because DOM loading time will be very less compared to all the resources.
– Rishabh
Jan 3 at 10:47
I will definitely keep that in mind. Seems I have a fair amount of reading to do ;)
– Andre
Jan 4 at 9:52
Thank you @Rishabh. With my limited experience, I will definitely use this if I need to do more than one thing on the loading of the page. One thing I will change though is the readystate from "interactive" to "complete".
– Andre
Jan 2 at 15:33
Thank you @Rishabh. With my limited experience, I will definitely use this if I need to do more than one thing on the loading of the page. One thing I will change though is the readystate from "interactive" to "complete".
– Andre
Jan 2 at 15:33
If you use 'complete' or 'load' then the function will wait for all the resources to load first including images and external scripts. This won't provide a very good user experience because you may find a screen flicker/readjustment after loading of resources. Ideal way is to use 'interactive' because DOM loading time will be very less compared to all the resources.
– Rishabh
Jan 3 at 10:47
If you use 'complete' or 'load' then the function will wait for all the resources to load first including images and external scripts. This won't provide a very good user experience because you may find a screen flicker/readjustment after loading of resources. Ideal way is to use 'interactive' because DOM loading time will be very less compared to all the resources.
– Rishabh
Jan 3 at 10:47
I will definitely keep that in mind. Seems I have a fair amount of reading to do ;)
– Andre
Jan 4 at 9:52
I will definitely keep that in mind. Seems I have a fair amount of reading to do ;)
– Andre
Jan 4 at 9:52
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999667%2fmy-function-to-set-margin-is-not-working-consistently%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
PS, would be nice you used
*{margin:0;padding:0;box-sizing:border-box;}or browse the internet for CSS resets - to get a clue– Roko C. Buljan
Jan 1 at 23:24
1
@RokoC.Buljan Deleted my comment as I missed the "Works fine in this fiddle, but not when I run it in the actual browser." part :) (I was testing on the fiddle)
– Jeto
Jan 1 at 23:25
1
Also, I think you're using JS in vain. All the above can be done using CSS only... Your page is strange, and by using JS instead of CSS to control positions you'll make it additionally jumpy and flashy, since JS triggers once the elements are flowed and painted.
– Roko C. Buljan
Jan 1 at 23:25
@RokoC.Buljan Thanks so much for the response. I only started coding 4 months ago and trying to teach myself. I think I might have gone through things a little too quickly and missed a few things. The reason I used JS, is so that regardless of the device's width, and whether the window is resized, the div would remain a set distance from the header (8px in this case.) I have no idea how I would manage that with just CSS.
– Andre
Jan 2 at 1:06
Also I did add a cdn link to normalize. That would take care of all the default margins and padding, I assume?
– Andre
Jan 2 at 1:09