We Keep Coding

Trying to refresh div inside Iframe

I have a section of my site im working on where i have a certain div, the div "comments" needs to be checked for blank comments being posted and remove them, it works fine the first time but after the div is refreshed it stops working. I'm trying to get this script to reload every second along with the div so the results stay consistent. Here are my 2 scripts:
<script type="text/javascript">
function doRefresh(){
$("#comments").load("comment.txt");
}
$(function() {
setInterval(doRefresh, 1000);
});
</script>
<script>
setTimeout(refreshData, 1000);
function parent()
{ $(".comment_name:empty").parent().hide()};
refreshData();
</script>

For future reference you should have a look into websockets. This will enable you to have data refresh as it is entered from one browser to another and will always keep it up to date without refreshing.
Here is a reference for you to get started. https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
It is a starting point and will help you a lot in future for dynamic content on multiple end points.

jquery linking to div id after page load - but page continues to load after animate

The overall goal of this task is to animate scroll the user to a certain div lower down on the page, depending on whatever #hashName is appended to url.
The html I am working with does not have the correct div id added, so I am adding that via javascript on document ready. Once the div id is added, then I have script that determines the hash passed in, then pass the user to the hash. This following code works:
jQuery(document).ready(function($){
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({scrollTop: $(window.location.hash).offset().top}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
I am calling jQuery etc in the code so I can use this in WordPress.
This code works fine. My problem is, this script fires while the page is loading. And the page keeps loading. And as a result, the page focus goes back to the top of the page!
I was thinking of wrapping the animate to hash code inside $(window).on('load', function(){}); but this does not seem to work. Note my existing animate callback trying to keep user focused - but this is not sticking. Page still loads. Page takes a loooooooong time to load, so I am fighting against this.
So at this point I have hit a brick wall. I am reaching out to those smarter than me in javascript and jQuery to see what I have to do here. Any help would be greatly appreciated.

jquery(document).ready() will fire as soon as the DOM is ready so this is actually working as expected by the looks of things as the DOM isn't the same thing as the document itself.
If you need to wait for external content like web-fonts, images, videos etc you should use the window.load() event
jquery(window).load(function() {
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
Have a look through the documentation for DOM here.

Alternative to jquery $(document).ready(handler) when using javascript page transitions

In a simple plugin for my wordpress site, I wrote code that sets up click events as follows:
$(document).ready(function() {
$("#myButton").click(function() {
//do stuff
});
});
This code works as expected when I load the relevant page directly. However, the way users are expected to access the page is through a link in the theme header. I am not really sure how page transitions in the theme work, but the end effect is that whenever a link is clicked, some animation happens, the page fades out, and the new page fades in. The problem is that $(document).ready() does not fire when the new page fades in, so the click handlers do not function.
How can I change the code so that the click handlers are registered at the time the new page fades in?
If it's necessary to see how the theme works, I am using the Bridge Theme. A demo version of the theme is available here.
UPDATE:
After playing with the theme page transitions a bit, I am suspecting that the theme is using ajax to get the new page content, fading out old page content, fading in new page content, then "artificially" modifying the url to show the new pages url.

If you bind your click event to the document it will apply to elements which are loaded or created after the document has loaded.
This can be done like so:
$(document).on('click', '#myButton', function() { /* ... */ });

you can use one of these methods:
The DOM way
window.onload = function() { // do stuff with the DOM }
The direct jQuery translation
$(document).ready(function() { // do stuff with the DOM });
The jQuery way
$(function() { // do stuff with the DOM });

jQuery delay and javascript settimeout won't work with facebook button

I'm using socialite.js to put social buttoms on my page, social buttons are inside div id="social". Div is initially hidden (display: none;).
I'm calling Socialite.load($('#social'));
and nextly want to show this div after some delay,
I tried:
$('#social').delay(4000).fadeIn(400);
and:
timeoutID = setTimeout(function(){ $('#social').fadeIn(400)}, 3000);
It doesn't matter which method I would like to use, IE and FF shows only g+ and twitter buttons, but FB button is missing, Chrome shows all three buttons.
Except without timeout:
$('#social').fadeIn(400);
this works great in every browser.
Any idea, please?

Facebook button won't load if the container div is hidden.
Try this:
Set opacity to 0.0 and after fb button is loaded, change it to 1.0 and then hide div.
Now You can show or hide it whenever you want.
timeoutID = setTimeout(function(){
$('#social').css("display", "none");
$('#social').css("opacity", "1.0");
$('#social').fadeIn(500)
}, 3000);

Is the Facebook button loaded onto the page but just not visible? Like, maybe it's overflowing out of the div?
Have you checked the developer console in IE and FF to see if there are any errors occurring that aren't occurring in Chrome? If the button's not loading on the page at all, that could mean that the JavaScript is stopping before it reaches the point in the code where the FB button is rendered.

Jquery Ajax loading the whole page except a certain div

I am writing an app that has an audio player at the footer. each Time i click on a link whole page itself loads thus the audio player is being restarted, my question How would you reload the whole page except a certain div?

I believe that is not possible. Maybe change your approach. Reload only specific areas you want to refresh. In fact, these areas may be included in a single (and possibly big) div tag. Then you can just update that div using jQuery ajax. For that, load is the way to go:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
Edit:
Here is a more specific example using links (just wrote it off of my head):
<script type="text/javascript">
$(function(){
$("#myLink").click(function(event){
$("#updateThisDiv").load($this.attr('href'), function(){
alert('div updated!');
});
return false; // or event.preventDefault();
});
});
</script>
And your link would look like this:
<a href='pathTo/Page' id='myLink'>Link text</a>
...
<div id="updateThisDiv"></div>

So you are using jQuery ajax. Even you reload whole div by ajax, the audio object remains same. So you can again generate your audio progress with the help of the object.
EDIT:
Just suggestion if you are reloading your page.
First save the currentTime of your audio object on your session or even database using ajax. And when user load that audio, start with that currentTime.
you can do this something like this:
yourAudioObject.addEventListener(
'timeupdate',
function() {
$.ajax ({
type:'get',
url:'your/path/?currenttime='+yourAudioObject.currentTime,
......