I'm having a document.body is null error in my javascript because I use:
$(window).width()
as value to assign to a variable in my
$(document).ready(function(){});
I would be very grateful to anyone who could help me with this.
Kind regards
edit: sorry if this all was unclear. I have a demo at: http://www.wpmonk.com/demo/hypowired
at first the theme will load but then becomes white (because of the error) but when you reload you can see the whole theme because then he knows the value for $(window).width()
I'm using this code to center the layout (not possible with css because the left needs to have a width aswell.)
function positioneerElement(){
$breedte = (document.body.clientWidth - 1124) / 2;
$('#bg_left').css({
'width': $breedte
});
$('.container').css({
'margin-left': $breedte
});
}
I call function positioneerElement() in the load function.
Sorry if this wasn't clear I though it wasn't necessary to put the demo here for this nor the code.
However I would like to thank the people who are trying to help!
I agree with outis - we need some more code.
That said:
Are you sure you're doing all your work inside the $(document).ready function?
Do you definitely have a correctly formed (and closed) body tag and valid xhtml?
Does this happen on all browsers?
One suggestion:
Does the problem persist if you put the positioneerElement function in the $(document).ready function as well? I'm wondering whether the browser evaluates document.body prior to the document loading.
$(document).ready(function() {
function positioneerElement(){
$breedte = (document.body.clientWidth - 1124) / 2;
$('#bg_left').css({
'width': $breedte
});
$('.container').css({
'margin-left': $breedte
});
// your other code, including
positioneerElement();
});
Make sure you only call $(window).width() after you have included the <body> tag (eg. in the ready callback), and/or use a Standards Mode doctype declaration. You should be doing that anyway: Quirks Mode sucks.
The issue is, to read the viewport size in Quirks Mode jQuery must look at document.body.clientWidth instead of document.documentElement.clientWidth. If you haven't started your <body> yet, there is not document.body node present.
You have to include jquery.js, and not jquery.min.js
It looks like some bug in it
This works for me
Well, just based on the information you have given me it might be that the body has not loaded properly yet. Please see here for more detials: http://www.coderanch.com/t/122834/HTML-JavaScript/document-body-null-or-not#606782
I would say more but I too agree with outis that you need to post some more code for us to debug.
Related
I've got a weird problem. I'm using Bootstrap for a website that has to be optimized for IE8. When i test the html prototype in a real IE8 (no IE emulation) the javascript seems to be executed before the website is rendered.
To prevent this I placed the javascript at the bottom of the body and the script is surrounded by a window load function.
Do i miss something? I don't want to use a SetTimeout.
A short js code example.
$(window).load(function() {
// for example a function that resets the sliders offset
function reset_slider() {
$('.slider-main').css({'margin-top': '0px'});
}
reset_slider();
}
All Browsers beside IE8 execute this script after the site is rendered.
Thanks in advance
Marcus
Set your js function to load after the page has.
window.onload = yourfunction
or you could use:
<body onload="yourfunction();">
I am pretty new in JQuery and I have the following problem.
My page have to be differently rendered if the browser have specific width (I need it to fix an issue on mobile devices that have a smaller screen)
So as first step I am trying to discover the browser window width (so if it is less to a specific value I consider that the page is showed into a smartphone and I fix my issue).
So I am trying to do something like this:
$(document).ready(function () {
var windowWidth = $(window).width();
alert(windowWidth);
}
I am trying into JSFiddle link
But it seems don't work because I don't see any output. Why? What is wrong? How can I correctly discover and print the browser windows width?
I think you are missing jquery also add this in your head tag.
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
You are missing ) add it at end of your code.
$(document).ready(function () {
var windowWidth = $(window).width();
alert(windowWidth);
});
Fiddle:Demo here
Hello AndreaNobili I have updated yourjsFiddle here
https://jsfiddle.net/ayjq1ke0/1/
Basically you didn't click your document ready function.
you just needed ); at the end of your code for it to work :) oohh Also in jsFiddle you need to select what plugin to load, on your jsFiddle you didn't have jQuery selected, so I have added it for ya
Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam
In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});
I have placed this inside of my jsp file:
<script>
jQuery( document ).ready(function() {
jQuery('#resrcTypesTree').height(jQuery('.secondColumn').innerHeight() - 10);
});
</script>
If I run this directly in Chrome's console, it works with no problems. If I load the page, the #resrcTypesTree id is set to 10px (a css default). I cannot figure this out as to why it appears to not be setting the height of the resrcTypesTree to the secondColumn's height. Is there something else that I am missing? I could put in a pause to check the page after a unit of time goes past, I just feel that is hacky.
The $ for jQuery is being overridden by another library in the project that is why I called jQuery instead of the '$'.
Can someone point me in the right direction please? Thank you in advance!
RR
Depending content you are targeting but as a simple fix, you should wait all content to be loaded:
jQuery(window).on('load',function () {
jQuery('#resrcTypesTree').height(jQuery('.secondColumn').innerHeight() - 10);
});
This ended up being an ajax issue. I had to write a mediator function since there are more than one ajax call being ran. 95% of the time the re-size works once put into the ajax script, however the 5% of the time, the secondary ajax call would get done first, causing the page not to re-size the gradient correctly.
I have a strange problem. I have a jQuery document.ready function executing some script on the page. When I was testing it through opening the file with firefox/opera it worked. When I uploaded it to the server (I tried both my home apache and my shared hosting) it only works once in 10 loads maybe.
What could be the problem?
Thanks beforehand
Edit:
Here is the code. It configures the correct size of side panels according to central panel.
<script type="text/javascript">
$(document).ready(function(){
// Get natural heights
var cHeight = $("#content").height();
var nHeight = $("#left").height() - $("#footer").height() - $("#header").height() - 10;
// Assign maximum height to all columns
$("#leftcontent").height(nHeight);
$("#rightcontent").height(nHeight);
$("#left").height(cHeight);
$("#right").height(cHeight);
});
</script>
Check that you have no JS syntax errors first (firebug or simply the error console).
If not have you considered just putting a simple alert in the ready function. If that still fails you know its something to do with the JQuery library itself (unlikely).
If you consistently get alerts you know its a problem with your own code. Further help with that will require sight of your code.