We Keep Coding

jQuery - Load content to div without flashing?

I load content (from a php file that get lists from database) to a div. It has a 10 seconds loop. So on every 10 seconds, it checks the file and load content to div to show new lists if added. However, on every run, the div content flashes (appear and disappear). It seems so unprofessional.
setInterval(function(){
$("#messageshere").empty();
$("#messageshere").load("msgs.php");
}, 10000);
My question is, is there smarter way for doing the same thing, but without flashing ?

Use a callback to show your message and empty your div only when you have your response. like this:
$('#messageshere').load('msgs.php', function(data) {
$(this).empty() // also unnecessary
$(this).html(data);
});

Multiple function load on ajax scroll

So, I have the following js for infinite ajax scroll
jQuery.ias().on('rendered', function(items) {
SOME_FUCNTION();
alert("Some_function!");
});
SOME_FUCNTION()
{
jQuery('.button').click(function() {
alert('You just clicked the button');
});
}
Now, it shows 10 posts every infinite scroll load.
However, I realized that every time it loads a new set of items, it runs the function again on the whole page and the function "accumulates" (I get the alert every time a new set is loaded).
EDIT
For example, the first div container at the top of the page has a button, which shows an alert("You just clicked the button") when clicked.
Now, let say the infinite ajax scroll loaded 3 times (so, total 30 posts so far).
Then, when I click the same first button, now it shows the alert three times as if the function was accumulated three times.
How do I fix this? Any suggestions?

div scrolls to top after refresh need to stop auto scroll to the top

I am trying to get a div that refreshes every 2 seconds to stop scrolling back to the top after the 2 second refresh I have PHP code and javascript. The Javascript I am using is:
function at_Ticket_scrollBottom()
{
var objDiv = document.getElementById("cartTicket");
objDiv.scrollTop = objDiv.scrollHeight;
}
function at_Tabs_Update()
{
if(div_WPOSVar_IsVisible())
{
//calling setTimeout without clearing any existing timeout can add multiple calls.
//IE the normal 2 second sequence, then call at_Tabs_Update two more times, and
// now we have 3 timeouts set to call at_Tabs again, etc.
//This wouldn't be an issue except that we call at_Tabs_Update directly to cause
// immediate refresh from many places.
//So clear the handle everytime to get rid of the last one we set.
clearTimeout(at_Tabs_Timer);
at_Tabs_Timer=setTimeout("at_Tabs_Update()", 2*1000); //every 2 seconds
return;
}
}
So after the refresh if I scroll down to the bottom of the ticket it jumps back to the top after the next refresh so I can never get to the bottom and select an item and edit it before the refresh how do I stop the auto scroll back to the top.

from the scars infos I can gather here I think your best bet would be to save your current scroll position before you refresh and after the ajax call scroll to that saved position.
use jQuerys .scrollTop() function for both reading and setting the scroll.
some pseudo code for illustration:
at ajax refresh function
var curPos $(element).scrollTop();
... do ajax call ..
ajax callback: $(element).scrollTop(curPos);

Synchronous Blocking Animation Slider Function in jQuery?

Possibly this has been discussed a zillion times and I'm over thinking this, but...
How does one create a 'blocking' jQuery animation?
I have a page which has a 'special' slider animation that executes the first time a user visits the site. But there is a 'normal' slider animation that fires every time the user visits the same page. Since both animations fire with document.ready() they both occur at the same time. What I -want- is for the first animation to fire and then when the user clicks a button to close the window -then- the second animation fires.
//pseudocode
jQuery( init );
function init() {
if(firstVisit) {
Animation1(); //Special. Only shows 1st visit to site
Animation2();
} else {
Animation2();
}
}
}();
Here's the site: http://jchmusic.com
I guess I can re-write the code for -both- so that the second one explicitly starts only when the user clicks the 'close' button on the first animation, but to -me- it would look much cleaner if I could just make the code on the first animation 'blocking'... ie. the second animation doesn't start until the first animation returns. I messed about with SetTimeOut and various 'loops' and all it does is hang the browser... I'm sure this has been mulled over many times.
Any ideas?

Form buttons over-writing timeout events in javascript

I'm developing a javascript based application and have continued to run into an issue that seems like a producer/consumer problem (it happens in both IE and firefox).
:Program Description:
There are two divs (A and B) in the page. A function is scheduled with timeouts to flip between the two divs every N seconds.
divs B has a form in it with buttons. the buttons have an on click call back set to them - the call back resets (refreshes) the form.
:Implementation Bug/Problem:
When div B displays and a user clicks on the buttons multiple times, the function (scheduled by a timeout) to flip the two divs never seems to execute. If it does execute, the display content is shown so quickly, it's as if the timeout was never called.
I've tried using a globally scoped state variable to control when button presses should be shut off, but that does not seem to work. Any advice or recommendations is welcome! Thanks!
Example
Imagine a 2 second window between each, the following diagram explains how it works with no onclick mouse events:
seconds 0 2 4 6
+----+----+----+
divs A B A B
NOTE: the top row are the 2 second intervals, the bottom row are the div flip events
with mouse on click events it should do something like this (A is scheduled to happen exactly at 4 seconds):
seconds 0 2 4 6
+----+----+----+
divs A BBBBBA B
what it currently does:
seconds 0 2 4 6....
+----+----+----+....
divs A BBBBBBBBBBB....
the scheduled A event never happens.

I think you missed to use clearTimeout or probably you are clearing the timer and not scheduling it back.
I quickly tried to simulate what you described. I am not sure if this is what you want, but check my
Old DEMO here (buggy when clicked multiple times, see the below link)
I am using setTimeout to call the function. Try using setInterval, which will be executed every n secs.
Edit: I fixed a bug which I missed in my previous demo, Please see the below link and let me know if it is close to what you want.
DEMO