We Keep Coding

jQuery position()/offset() value error on reload (chrome)

I've made a menu with a backlayered moving div on hover/current menu item in wordpress.
JsFiddle: https://jsfiddle.net/wwv9c0v7/
Problem: Everything works fine, except when I'm reloading the page (F5). A click on a link with new page works well too. I don't know why, but the position().left returns a bad value. It's moved too far left.
$magicLine.css("left", $(".current-menu-item").position().left)
Thanks for your help.
EDIT: Live preview
~ Neme

I've managed to see your problem, but as the documentation below refers, browsers do not expose theirs API to detect zoom situations, when you make a refresh to the page this have a different size, you can observe that behaviour when the page is loading, it begins with a different size (i assume the page comes with bigger size, because scroll bar is loaded after the page, so this makes the page to change it's size).
Docs: https://api.jquery.com/position/
Try to make this in jquery method: $(document).ready(...)by doing this you ensure that function will allways execute after the page is loaded.

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.

Hide address Bar for safari on ios 6

I am trying to hide the address bar for a webpage. On Iphone 4 and lower it works using
window.scrollTo(0,1);
and meta tags
.
But for IOS 6, these do not seem to work. I have checked other similar questions in stackoverflow, but could not find a solution that works. Has anyone faced a similar issue? If yes, is there any solution other than adding the site to the Home Screen as a web app and then launching from there.
Thank you.

After playing around with the script I noticed the following:
The address bar hides whenever I reload the page.
So as a workaround to this problem, I trigger the reload event (through a resize function ) and do window.scroll(0,1) in the resize function.
I have a function
var hideAddressBar = function() {
if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
setTimeout(function() {
window.scrollTo(1,1)
}, 0);
if(navigator.userAgent.match(/Android|iPhone/gi)){
window.scrollTo(0,1);
}
}
I initially was calling this function only on the Onload event. Tis was working for ios 5 but not for ios6. I realized that in my script there is a resize function being called after rendering the page. So i made an call to the hideaddressbar function at the end of resize. So you may want to check in your script if, after rendering the page are you resizing or reloading again? If so, then call the hideAddressBar after it is done reloading. I hope this solves your problem.

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.