I have a wordpress theme, which has a dynamic element, sized by javascrip(jquery)t on loading of the post (single post, not listing page)
so:
<div class='some-div'>
<div class='content'>
<?php /* code to load posts */ ?>
</div>
At the moment I get the height of div.content with javascript and apply that height to another div.some-div
The problem is on slow connections the height calculations are done before the content has loaded
So, what I need is to run a javascript function ONLY once the post has finished loading
At the moment Im delaying the function, have the script at the footer, and use the 'defer' attribute, but I still happens
any ideas?
Why don't you try to save first the content of that div into a variable like
var my_js_var = <?php echo $content ?> ;
Then just say with a function to call the resize div function ONLY when the content stored into your div is equal to your 'my_js_var'
//Would be something like:
var my_content = <?php echo $content ?> ; //Downloading the content
//Timer to constantly check if the div is loaded correctly
var timer = window.setTimeout('refresh()',100)
function refresh () {
//if the content of your div is equal to 'my_content' variable
//then call the resize function of the div
//finally clear the timeout [clearTimeout(timer)]
}
Didn't test it out
Tell me if it works..
Best regards
You may run your calculations in the onload event to make sure that the images, texts etc. in your post has finished loading.
<body onload="YourCalculationFunctionHere">
Don't use the .ready() method of jquery for your calculations bacause it will run after the DOM was loaded not after the page(inc images, texts etc.) was loaded.
http://www.w3schools.com/jsref/event_onload.asp
Just to answer incase anyone has the same issue.
I was running the function before the dom had loaded, a simple mistake easily solved.
use
$(function(){
// code here
});
as a short hand for $(document).ready
Related
I'm working to modify some content which is dynamically loaded via another script(let's call is script #1) onto my site. Script #1 loads some markup and content and I've been using the setTimeout() function to call my script (Script #2) using a delay of a few seconds, in order to wait to be sure that Script #1 has executed and the content is present in the DOM.
My issue is that Script#1 has different loading times, based on the server load and can be slow or fast depending on these factors, and right now, playing it safe with setTimeout() I'm often left with a second or two where my scripts are still waiting to be fired and Script #1 has already loaded the content.
How can I execute my script as soon as Script#1 successfully loads it's dynamic content?
I've found this post which does seem to address the same issue but using the setInterval function as #Matt Ball has laid out there doesn't work at all for some reason. I'm using the code below where 'div.enrollment' is meant to find in the DOM which is dynamically loaded and execute..
jQuery(window).load(function ($)
{
var i = setInterval(function ()
{
if ($('div.enrollment').length)
{
clearInterval(i);
// safe to execute your code here
console.log("It's Loaded");
}
}, 100);
});
Any help on guidance on this would be greatly appreciated! Thanks for your time.
It seems that the healcode.js is doing a lot of stuff. There is a whole lot of markup added to the <healcode-widget> tag.
I would try to add another tag with an id inside and test for its existence:
<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>
Test in an interval for the existence of healCodeLoading inside <healcode-widget>: (Assuming jQuery)
var healCodeLoadingInterval = setInterval(function(){
var healCodeLoading = jQuery('healcode-widget #healCodeLoading');
if (healCodeLoading.length == 0) {
clearInterval(healCodeLoadingInterval);
// Everything should be loaded now, so you can do something here
}
}, 100);
healcode.js should replace everything inside <healcode-widget></healcode-widget> during init. So, if your <div>-element is no longer inside, the widget has loaded and initialized.
Hope that helps.
If you just want to load some markup and content and then run some script afterwards, you can use jQuery. You should use something like the following in script#1 to run a function in script#2
$.get( "ajax/test.html", function( data ) {
// Now you can do something with your data and run other script.
console.log("It's Loaded");
});
The function is called, after ajax/test.html is loaded.
Hope that helps
I am trying to display a div message when the page loads using fadein and fadeout after 3 secs but my code does not seem to work, any help please? what am I doing wrong?
HTML
<div id="message" class="jumbotron" style="display:none;">
<p><?php echo $m; ?></p>
</div>
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});
Your code works for me (Here's a fiddle). The issue is either that you haven't included a valid link to the jQuery library, or there is an error that occurs before it gets to the below code that causes it to stop executing.
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});
Are you writing this script on the same page as the div element or does this lies in an external page?
If on external page then try checking if the control even passes to this page or not by simply putting an alert box or not.
If this script is on the same page, then make sure you write this script after the element you defined as if you have written this on the top or before the #message div then the script would run before it even gets loaded on page and you would not see any difference.
Just fade in the message on page load and then set a timeout in order to fade out after 3 seconds
Check the DEMO
EDIT
$('#message').fadeIn()
.queue(function() {
setTimeout(function() {
$('#message').fadeOut();
}, 3000);
$(this).dequeue();
});
$('div#message').fadeIn(3000,function()
{
$(this).delay(3000);
$(this).fadeOut(200);
});
Hope this will work for you.
I'm trying to do a .show() on page load, however, the div is not yet loaded
It looks like jquery is running before a certain div has been created.
Wondering how can I solve this ?
my code consists of the following:
<script>
function choose_category(category_id)
{
$('#' + category_id).show(); // this is the part which doesn't work, as on page load the div mentioned later is not yet available.
}
</script>
<script>
function load()
{
choose_category('<?php echo $model->category_id->__toString(); ?>');
}
</script>
<img onload="load();" src="http://media.sociopal.com/ires/images/homepage/status-socio-icon.png" alt="" width="0" height="0" style="display:none;"></img>
The html embeds php code which runs a loop and generates (among other divs) the following div:
<div id='thecategoryid!!' onclick='choose_category("51d552eb2c8751766000016d");return false;' class = 'settings_menu_item'>
<p class='settings_menu_item_text'>Design Channels<i class='icon-chevron-right right'></i></p>
</div>
However, as mentioned, when the page loads (only when the page loads) the .show() does nothing because it looks like the div is not yet created.
If I debug this in chrome and go step-by-step, there is no problem (the div is created on time and the .show() works fine)
Will appreciate your help.
I can see no error in the code you have posted.
It might be that your assumption of what $.show() does is wrong.
$.show simply removes any occurences of "display: hidden;" in the inline styling of the selected element/node.
<div style="color:red; display:none;">
would become
<div style="color:red;">
http://api.jquery.com/show/
Instead of using that inline onload stuff, try this giving your image an id (we'll use img here.
Since you are calling choose_category with an inline click event listener, do not place that function inside $(document).ready as it won't be able to be accessed.
Then, use the following JavaScript:
$(document).ready(function(){
var img = $("#img");
img.load(function(){
load();
});
if (img[0].complete)
img.load();
});
What this is doing:
When the doc is ready, get the image. Attach a load event listener. If the image has already loaded by the time we got here (especially with caches), trigger a load event anyway.
Also note that you shouldn't put special put exclamation points in your id.
I have the following problem: on a customer's homepage the navibar is loaded by javascript, but I need to change some URL's on it. If I just start my script on $(document).ready() it runs before the customers script and has no effect. I only can use setTimeout for my function to wait until the other script is ready, but it's not good or safe at all. I can't change anything on the website, only add a javascript - is there a way to time it after the other one?
You can use repeated setTimeout, in order to check if menu is accessible.
function check_menu(){
if(document.getElementById('my_menu')==null){
setTimeout('check_menu()',500);
} else {
//do some stuff
}
}
If you have information about the menu like the id or class, use the onLoad() jQuery method on the element. For example if the code is loading asynchronously, and you add the onload to one of the last elements it should fire after the content has finished.
$.post('AsyncCodeLoad.php', function(data) {
$('#lastElementToLoad').onLoad(RunMyFunction);
});
Or if you have no chance to insert your code into the async loading just add to the bottom of the </body>:
$('#lastElementToLoad').onLoad(RunMyFunction);
Just a thought.
Yes, add your script at the bottom of the <body /> tag to ensure it does not run until all other scripts have run. This will only work however if your customer is loading the nav links synchronously.
If the nav is being loaded asynchronously, use JS's setInterval to repeatedly check the contents of the nav for links. When you determine the links have been added, cancel your interval check and call your script's logic entry point.
Cheers
Fiddle: http://jsfiddle.net/iambriansreed/xSzjA/
JavaScript
var
menu_fix = function(){
var menu = $('#menu');
if(menu.length == 0) return;
clearInterval(menu_fix_int);
$('a', menu).text('Google Search').attr('href','http://google.com');
},
menu_fix_int = setInterval(menu_fix, 100);
HTML
<div id="menu">Bing Search</div>
Just looking for a way to refresh the content of a DIV tag once. For example, lets say your markup is:
<body>
<div id="RefreshOnce">
<?php include('loading.php') ?>
</div>
</body>
I know how to update the content of that DIV tag using a Javascript with ajax to refresh it multiple times to say another file called content.php. I can't seem to figure out how to just make it refresh one time.
The function is basic: div loads a loader page with cool loading image, then waits 2 seconds and loads the actual content once.
First, load the div content from one resource and then reload it from another resource, after some time.
<script type="text/javascript">
$(function() {
$('#fooDiv').load( 'a.html' );
setTimeout( reloadDiv, 5000 );
});
function reloadDiv() {
$('#fooDiv').load( 'b.html' );
}
</script>
Use these two javascript functions:
setTimeout() - executes a code some time in the future
clearTimeout() - cancels the setTimeout()
You can lookup examples here: http://www.w3schools.com/js/js_timing.asp
You just place an AJAX request in your function, and clear the timeout just after. Job done:=)