JQuery not running correctly on document.ready(); - javascript

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.

Related

Image slideshow at onload not working properly

I know this question has been asked before a lot but I checked most of those and didn't find solution to my problem so I'm asking here again.
So, question is:
I'm working on a cinema website project.
I added a few pictures as slide show in my home page but for some reason, slideshow is not working properly. It has some glitch in it like sometimes order is not correct and sometimes all pictures try to come up at one time or they change super fast etc.
I guessed maybe it's bcz somehow when I reload the website, the previous onlaod also keeps on working so it's like there are 2 slideshows going on or something like that, so from other solutions I guess I have to put onload=null somewhere maybe but I can't figure it out exactly.
Any help would be really appreciated.
This is my html code for slideshow:
<div class="bg-movies" style="top: 65%;">
<img src='images/slideshow/war.jpg' width='1000' height='300'
onload="setSlide();"/>
</div>
And this is my javascript code:
<script language='javascript'>
<!--
var toprated=new Array('sarkar.jpg','hajwala.jpg','96.jpg','war.jpg');
var pos=0,x;
document.images[1].src='images/slideshow/'+toprated[0];
function setSlide(){
x=setInterval('chgPic()',2000);
}
function chgPic(){
pos=(++pos)%toprated.length;
document.images[1].src="images/slideshow/"+toprated[pos];
}
-->
</script>
Your problem is recursion. You are calling the setSlide() method once your image is loaded. This will set up the interval to call the chgPic(), but when the chgPic() method is called and it updates the image src, the onload event on the img tag will be executed again (because an image has been loaded). Therefore setSlide() will be called again which will set up another interval to call the chgPic() method. And on and on etc. I'm surprised your browser hasn't crashed.
What you should do is set up the interval (i.e. call the setSlide() method) once the page has loaded, or even better yet, use jQuery's document ready if you're using jQuery:
$( document ).ready(function()
{
}
And call your setSlide() method in here.
Although, I wouldn't recommend doing it the way you are. You can use some simple jQuery and CSS to get this to work. Take a look at this link.

IE8 seems to execute js before css is rendered

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();">

start script as soon as the page opens

I have a jquery script that changes an element to fixed when the page is scrolled.
The problem is that the script won't work until the page is fully loaded, and it can take some time
Is there a way to start the script as soon as the user enters the page, without having to wait until it finishes loading ?
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var menuOffset = $('#ribbonmenu')[0].offsetTop;
$(document).bind('ready scroll', function() {
var docScroll = $(document).scrollTop();
if (docScroll >= menuOffset) {
$('#ribbonmenu').addClass('fixed');
} else {
$('#ribbonmenu').removeClass('fixed');
}
});
});//]]>
</script>
Yeah, put it outside:
$(window).load(function() {
That will answer your question about wanting your script to run instantly, however there are issues beyond just moving it outside the load function.
As Marc B said, your script which calls upon an HTML element will not run if it is outside your load function because for a very, very, small time period the HTML hasn't loaded and your script will not see your HTML.
This will cause an error thus making your script not work as intended. Therefore you should keep it inside the load function and instead look for alternative ways to speed up your server/script.
Rather than using $(window).load(
you could try using $( document ).ready(.
It will load sooner, but as others have mentioned, there isn't a way to get it to load instantaneously and still work. This is because future elements will not have loaded yet.

Prevent inline scripts loading until Jquery has been loaded

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.)
});

document.ready not executing on every load

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.

Categories

Resources