We Keep Coding

Flickering Issue while binding data to Knockout View

I am developing an chat application with KO. While binding the chat conversation, the browser is hanging till binding and the favicon, browser Refresh and cursor buttons are blinking for every message binding.
I've tried like making visible false by default and making visible after binding. But it didn't worked for me.
Here is the KO code for binding the messages
ko.utils.arrayForEach(data, function (item) {
var msgobj = new ViewMessagesObject();
msgobj.Chattype(item.Chattype);
msgobj.contactname(item.contactname);
msgobj.contactnum(item.contactnum);
msgobj.contactpic(item.contactpic);
msgobj.deliverydate(item.deliverydate);
msgobj.file(item.file);
msgobj.frompic(item.frompic);
msgobj.is_delivered(item.is_delivered);
msgobj.is_read(item.is_read);
msgobj.loader(item.loader);
msgobj.message(item.message);
msgobj.messageid(item.messageid);
msgobj.messgetype(item.messgetype);
msgobj.Pic(item.Pic);
msgobj.readdate(item.readdate);
msgobj.sentdate(item.sentdate);
msgobj.sentstatus(item.sentstatus);
msgobj.toname(item.toname);
msgobj.topic(item.topic);
msgobj.uploadopacity(item.uploadopacity);
self.DisplayMessageCollection.push(msgobj);
}
How can I stop these flickering issue while binding.
I've attached a video that shows the flicker of favicon and refresh button, so that you can understand my problem clearly.
Thanks in Advance..
Video Demonstrating My Problem

The video you have posted shows the reload button next to the address bar in chrome spinning and the favicon flickering.
The symptoms you describe happen when changing window.location in some way.
This happens when:
navigating to a url
an iframe is injected into the DOM
the src attribute of an iframe changes
certain properties on window.location object change
This is by no means an exhaustive list of what can cause the refresh button to spin in the chrome browser but the code in your answer is not the cause; this is not a knockout related issue at all.
Some possible causes to this issue:
You have some code not posted in your original question that does stuff with iframes. Is your chat application possibly using the forever frame technique?
You have a chrome plugin that uses iframes
I hope this points you in the right direction to solve the issue.

Could someone explain what this script does?

When I visit the homepage of the Rails website that I'm building, it takes a few seconds to load. Let's say after 2 seconds it has loaded the visuals after which for some reason it's busy for 2 more seconds (I think loading JavaScripts). If I scroll down between second 2 and 4, then after second 4 it automatically pops back to the top of the page. So that's a bit annoying, especially since this happens everytime you visit the homepage (not just the first time you visit it).
After trying to remove various parts of the page I found out the cause. I'm using a website template to develop my website. This template at the top of the homepage uses the following script:
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
When I remove this script the described behaviour is gone. But I don't know what this script does and why it's there. Could someone perhaps advice if it's okay to remove it?

Let's break it down.
First, the code is adding a listener to the window. When the window is loaded it will trigger the function passed to addEventListener.
addEventListener("load", function() {
// Code here will run when the page loads
});
Then the code defines a function called hideURLbar which will scroll to one pixel from the top when called (using window.scrollTo). This appears to be for mobile devices since they show the URL bar until the user scrolls down a little. 1px must be enough. This function is not called immediately, however.
function hideURLbar(){
window.scrollTo(0,1);
}
After loading the page the function hideURLbar is passed to setTimeout with a timeout of zero milliseconds.
setTimeout(hideURLbar, 0);
Using setTimeout with a zero timeout tells the browser to call hideURLbar as soon as it can, but that it should finish whatever else its doing first. This is often used to sort of "kick" things to the background in the browser so they don't interrupt other things the browser may be doing.
The combination of waiting for the load event and using setTimeout means this code isn't triggered until your browser is done loading everything else. By that time if you have scrolled down you will be popped back to the top of the page.
This is poor code and a better approach would be to only execute something like this if the scroll position is at the very top, like this:
function hideURLbar(){
if (window.scrollY == 0) window.scrollTo(0,1);
}

I believe that is a hack for mobile devices. See, when you have a website load on the mobile, the url bar is on the top of the screen and eats up 15% of your space. This (poorly designed) hack make the web scroll automatically just a tiny bit to hide this url bar. You should remove this code, it's plain dirty and will cause some problems, like the one you mention.

This seems to be quite a common way to try and hide the address bar on mobile browsers such as iOS Safari or Chrome on Android. It waits for the page to load and then scrolls down slightly in order to trigger the auto-hide feature most touch device browsers have.
I'm 99.99% sure it doesn't do anything else so if it's causing issues for you, I'd recommend just removing it.

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page.
For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth.
The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/
Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way.
Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided?
P.S.: On my real site the same occurs with Chrome. In the example fiddle Chrome seems to not show the same behaviour as Safari, though.
Edit: I also tried to have the printing button on a different tag than an a anchor, like span or button, but that didn't help with the problem.
Edit: I run into this problem with Safari 5.1.2 on Mac OS 10.6.8. In the jsfiddle example, the behavior shows as a white "flicker" that covers the whole browser after having clicked the print button and closing (either printing or aborting) the print dialogue.
Edit: Just started a bounty for this question, as I am still looking for an explanation for this browser behaviour. I am more than willing to give more details on the issue. From my experience on SO it is not adviseable to post links to online pages, however I feel the problem is really hard to reproduce. I think the "flicker & re-render" I experience with the posted jsfiddle is hopefully is result of the same problem.
Edit: As explained in the comments, opening a new window containing the current state of the application, then printing and closing that window, might be a fix, but I don't consider it a sufficient answer to the problem at hand.

If you can't figure a way to fix the problem you might get a quick fix this way:
var win=window.open() the same page you are on
then win.print() it, then win.close(). Hope this helps.

Sadly, I don't have a solution. but since I was able to reproduce this in Safari and Webkit with the fiddle, I thought I'll at least offer my observations:
The white-out doesn't happen if you hit Print dialog button right away. You need to wait few seconds before you hit Print to be able to see the white. On OSX 10.6.8 I see the threshold marked by appearance of the spinning beachball.
When the mouse stays stationary since the Print button hit, the page stays white until you move the mouse again (beachball still spinning).
Hope this will help somehow.

I'm not sure if this will fix your problem but i recently found a very good Jquery plugin to print only certain part of your webpage.
You should give it a try :) It has a some very cool parameters to customize it to your needs.
Take a look here.
Why does your page refresh? Here's my answer on that. the window.print() function will print the entire content of your page. So since i read that you only want to print a part of the page, I guess you are using some function to remove all unwanted content from the page for a very short moment, then you call the window.print() function and after that you put all orignal content again on the screen. This results in a very short flash that will look like your page is refreshing and will load all flash parts again.
I had the same problem yesterday and this jquery plugin really helped me out. I hope it will help you too.
Have a nice day!

Since it seems window.print() is not part of any standard, browsers are free to implement it in any way they choose.
The only work-around I can see, if you really have to leave the page as-is, would be to open another window and print that. Which is a whole other, possibly worse, can of worms.

Try this in your function:
document.write("<script type='text/javascript'>window.print()</script>");
I am referencing this stack:
After window.open, can't print in Safari for Mac
Update, Try:
document.writeln("<script type='text/javascript'>window.print()</script>");

Repainting a page in Chrome?

I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks

You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.

Strange problem with load() and iframe (dojo)

I have I really big problem in this website http://emprego.xtreemhost.com/log/emprego.php
To see the problem you need to click on register (green button) and open the Firefox (I tested in Firefox 4).
If I do the same in chrome none scroll is created, but in Firefox, the registration page has a frame in the bottom of the page - is created a horizontal scroll. I want to avoid the scroll and overflow: hidden is bad practice in this case.
Any ideas? I can't understand what is happening.
cause of the problem: var anim1b = new dojox.charting.action2d.Tooltip(chart1, "default");

in response to my question
i need to import the themes in the principal file that made the load()
solved