How to run a javascript function when a page dynamically loads content - javascript

I am currently writing some Javascript code that adds some tags across text in an HTML file after the page loads. I use the
window.onload
method for achieving this.
However, I am facing an issue in pages like google plus, where you get more content as you scroll down. Is there a way of calling my JS function when such a page adds more content?
Thanks
Akshay

There are several ways how to get this working. You can either use jquery like this:
$('#mydiv').bind("DOMSubtreeModified",function(){
// your code goes here
alert('changed');
});
Note that this is not supported in IE8( and below).
Or you can run loop and continuously fire the desired code:
var interval = setInterval(function() {
// your code goes here
}, 1000);
Fiddle: http://jsfiddle.net/8RF5r/5/

Related

Listen to mousemove only after document loads

I'm trying to use a script called Socialite in my Wordpress site to make social share buttons appear only after the user has moved his/her mouse AND the document already loaded.
I can't get it to work together. My current script, that does work, is:
jQuery(document).one("mousemove", function() {
var social_container = jQuery('.social_buttons');
Socialite.load(social_container);
});
But how do I connect the document load part?
Thanks
Have you tried to put your code into
jQuery(document).ready(function(){/* your code goes here*/});
?
For starters you have a small typo in the first line
jQuery(document).one("mousemove", function() {
You're calling .one("mous...
It should be .on("mous...
Next considerations is that the document ready statement below will happen before images etc have loaded
$(document).ready(function(){
// your code goes here.....
});
using a window load statement like below waits until everything i.e.images have loaded in full
$(window).load(function(){
// code here.....
});
I'm not sure what would suit your needs best as I have no experience with Socialite but hopefully this will give you the answers you need.

Javascript event handler (mouseover) not firing

I have a homepage that dynamically writes javascript in order to handle the mouseover of potential user choices. However, the .bind("mouseover",function()) does not seem to be working.
The PHP produces a script like this:
<script type="text/javascript">
function setPreview(art, title, rt, excerpt) {
$("#boxPreview").attr("src", art);
$("#selectedTitle").text(title);
$("#runningTime").text(rt);
$("#excerpt").text(excerpt);
}
$(document).ready(function() {
$("#tb0").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb1").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb2").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb3").bind("mouseover",setPreview(url,title,running time,excerpt));
</script>
However, it seems that the mouseover event never fires. Instead, it seems that when the page is fully loaded, setPreview is run for the very last element (#tb3).
I have no idea what I'm doing wrong. If you would like to see the page in action for yourself, you can view it here.
You may try writing the same code like this
$("#tb0").bind("mouseover" , function(){
setPreview(url,title,running time,excerpt);
});
This may solve your issue. Because i've got same issue before but it was fixed writing this way.

editing a Div that is around an iframe via jquery from within said iframe

I'm sure this sounds a little odd, but here's the background...
We utilize a company that loads their chat program, so we can support our customers, into our page. This is done via javascript and jquery, and creates a structure like this:
<div id="myid" style="...; right: 0px;..."><div><iframe></iframe></div></div>
There's a WHOLE lot more to that, but those are the important parts. Now the tool allows us to put custom scripting, which will be placed in the iframe. My goal is to just remove the "right: 0px", which I have done via the below code, but I don't want to put that code on every page that this tool integrates with. I would like to load it into the tool, and have it run when the iframe and divs are created.
working code on parent:
$(document).ready(function() {
function checkPos() {
$('#myId').each(function() {
var oldstyle = $('#myId').attr('style');
var newstyle = oldstyle.replace(' right: 0px;','');
$('#myId').attr('style', newstyle);
});
setTimeout(checkPos, 100);
};
$(document).ready(function() {
setTimeout(checkPos, 100);
});
});
Once placed in the code include method they provide, I have trouble having it wait until the div tag actually has the "right: 0px;" in its style tag. the only thing I need to run is the three lines in the $('#myId').each(function()
Basically, I need help with having the script in the iframe target the div that the iframe is nested in.
Assuming that whatever tool your using actually lets you pass in a custom script to the content rendered in the iframe (seems fishy to me), a better way of modifying the style in jquery is to use the css function:
$('#myId').css('right', '0px');
Notice I removed the $.each function as well. You are targeting an element with an id, so there isn't any need to iterate.
Edit:
Anyways, back to the problem of delaying execution to when the target, #myId, actually exists. If they are really injecting your javascript into their page (again, seems fishy), then attaching the above code to the $(document).ready() event should do the trick, as long as this listener is attached to their document.
If all else fails, try to use the waitUntilExists plugin, here:
Source:
https://gist.github.com/buu700/4200601
Relevant question:
How to wait until an element exists?

Infinite Scroll + Swipe.js

Background:
I'm making a portfolio site utilising both Swipe.js and Infinite Ajax Scroll (JQ).
Problem:
When the content from extra pages is loaded into the current page, it is not processed by the already-loaded Swipe.js script. This means that the new content doesn't have it's mark-up changed (needed for the swipe functionality to work).
I think I need to get the Swipe.js script to fire after each page re-load. Would that fix it? Please explain this to me like I'm an 8yr old. JS is not a strong suit...
Demo:
http://hatchcreative.co.nz/tomo
You can see that as the page loads new content, the buttons on either side of the sliders no longer work.
Yes you're right, after the images are loaded you have to create a new Swipe instance on these new elements (as they weren't there at the beginning, when the page was loaded).
Based on the docs of infinite scroll you can use onRenderComplete.
So you had your jQuery.ias constructor like this:
jQuery.ias({
// ... your settings...
onRenderComplete: function(items) {
$(items).each(function(index, element) {
new Swipe(element);
});
}
});
This should work this way somehow, but I am not exactly sure; I haven't worked with these libraries yet.
Edit:
After some more inspection of your code, I saw you had some inline click handler like: onclick='two.prev();return false;'.
You need to remove this and add your onclick handle in the same onRenderComplete function.
onRenderComplete: function(items) {
var swipe;
$(items).each(function(index, element) {
swipe = new Swipe(element);
});
// find tags with the class 'forward' inside the current element and add the handler
$(element).find('.forward').on('click', function() {
swipe.next();
});
// ... also for previous
}
By the way: Usually you should provide a jsFiddle with your important code parts, so it's easier for us to get the problem, and the question is not getting obsolote when the linked page changes.

using javascript setTimeout to see if div has loaded

I'm loading remote data using dynamic script tags and JSON. the remote page that I'm displaying on my website has a div in it that I use to load content into.
The problem is the javascript functions do not see the div as the page loads because it is remote data. If I set a timeout of about 300, it usually works and my javascript can see the div. But sometimes it takes longer and it breaks the javascript.
I'm tring this:
function load_content() {
if (document.getElementById('remote_div') == null) {
setTimeout('load_content()', 300);
} else {
document.getElementById('remote_div').innerHTML = 'Content goes here'
}
}
but it just doesn't work. What am I doing wrong?
You may want to do this using setInterval. Something like:
var intrval = setInterval( function(){
if(document.getElementById('remote_div')) {
load_content();
clearInterval(intrval);
}, 50);
function load_content() {
//loading content here
}
This way you don't have to estimate the loading time. load_content is executed when div#remote_div can be found in the DOM tree.
Edited based on comments, forgot to assign the interval, so it wouldn't ever clear indeed.
Are you using iframe?
If so, try
document.getElementById('YOUR_IFRAME_ID').contentWindow.document.getElementById('remote_div')

Categories

Resources