ScrollIntoView in Chrome - javascript

I use:
var el = document.getElementById("centd");
el.scrollIntoView(true);
to scroll to specific position. In every browser it works fine, but in Chrome when the page is loaded it scrolls to that point, but after a second or two (when the page is finished loading) it scrolls back to start.

Make sure all your JavaScript code is run after your page completes loading:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
Or if you're using jQuery:
$(document).ready(function(){
// your code
});
This will make sure that your code runs the way you intend.

I feel like it's supposed to be a feature and not a bug (but cannot find evidence to support this theory): it works fine the first time the page loads / in a new tab, but as soon as the user scrolled, that scroll-position overrides any scrollTo or scrollIntoView commands (in this briefly flashing fashion you described, and that I am currently trying to make sense of) – even if you wait for the document to be ready.
Other browsers don't share this behavior, in my experience.

Related

How can I get Firefox to fire onscroll once, as Chrome does, per scroll "action.?"

I've been working on getting a "float then fix" navigation bar working on most browsers without any JavaScript libraries (like JQuery).
It works on Chrome but I have a small problem in FF and it seems to be due to FF firing onscroll multiple times when you do a "scroll action" - PdDn, PdUp, up and down arrow keys, up and down arrows on scroll bar, clicking scroll bar, etc.
Chrome fires only once but FF first multiple times, how many tines depends upon the length of the web page and your current position.
Is there any way to get FF to fire only once like Chrome?
I'll put up a test page which lets you look at how many times onscroll fires by logging "scroll" to the console. It should be up in about 10 minutes. I will put a link back to this question on the page.
There will be some comments at the top of the page explaining how to use it.
Does anyone have any ideas as to getting just one onscroll event when you peform a "scrolling action?"
You can do something like this:
var timer = null;
function action(){
// do stuff on scroll
}
function onscroll(e){
clearTimeout(timer);
timer = setTimeout(action.bind(this, e), 100);
}
This way, it only fires scroll events after 100ms of idle time, which may or may not be what you need. You may need to tweak the timeout delay to get the best result.

Chrome executing all JS again on browser back button

I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.
I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do not close.
Is there any way to fix this with javascript? So that I can put any condition like if(history.forward.length < 1){ do this....}
You can use the pageshow event to guarantee you always detect navigation to a particular page, regardless of whether the user presses the back/forward button or selects a link, and regardless of which browser is being used.
Then you can perform checks regarding the state of UI and perform logic as required (i.e. modify UI, prevent execution of additional JS).
window.addEventListener('pageshow', function(event) {
// check state of UI, etc.
});
The solution that came to my mind is using sessionStorage to know if it is a first time loading or not. Or even better, you can keep state of your accordions in session storage so it always be the way the user want.
In my case, the iframe was a hidden iframe (width and height zero).
This iframe is just an workaround from legacy system, developed 12 years ago. But still using nowadays on current application.
To solve it, i just redirected the page loaded into iframe to the blank page.
Example:
page_loaded_into_iframe.php
<?php
//do the php stuffs
?>
<script>
alert("hello world");
location.href = "about:blank"; // here, where the the magic happens!
</script>
Once pressed the "back button", the browser will reload a blank page.
Be aware that this might be not applicable if your case is not similar to mine.
In the Chrome Extension you can use the function:
chrome.webNavigation.onCommitted.addListener(function callback)
and in the callback function you may take a look to the arguments:
transitionType + transitionQualifiers
to look for:
"forward_back" The user used the Forward or Back button to initiate the navigation.
For deatils see chrome.webNavigation
Of course, this event can be communicated to the content script with the usual message model (refer to: Message Passing

Scrolling stuck after interacting with iframe

I have a site in which I'm implementing parallax using skrollr.js.
In that site I'm also integrating Flash objects created by Storyline, in iframes.
My problems is that after the user interacts with the Storyline in the iframe, when he tries to continue scrolling to the rest of the content, sometimes the page gets stuck and stops scrolling.
This happens only in Firefox (it doesn't happen in Chrome, and surprisingly enough - not in IE11 either).
The only way to "unstick" the scroll is by the user clicking the browser window again. Of course, that's not intuitive to the user, so I'm trying to find a way to emulate that click programmatically.
I thought that maybe the focus gets lost and the mouse click returns it, so I tried returning the focus to the body programmatically, but that doesn't help:
setInterval( function () {
if ( document.activeElement.tagName.toLowerCase() === "iframe" ) {
document.activeElement.blur();
}
}, 1000 );
In the end, this problem got solved by changing the wmode parameter from window to transparent.
The way to do that is as follows:
I can't find where to change wmode to transparent in Storyline, but I found how to change it in the generated files :
In the root of the generated directory, find the story.html file.
Go to line 134, where the g_strWMode parameter is defined.
Change its value from window to transparent.
That's it!

jquery mobile dialog closes after page loads

folks, i've got a problem i'm hoping someone can help with. when my jquery mobile app loads, it checks with my server to see if a native app exists for the platform the user is on. if it does, i pop a dialog asking if they'd like to download the native app. here is the problem, it doesn't seem to matter where i put this check, when the page finishes loading in mobile safari, the dialog disappears. here is my code to start the check:
$( document ).ready(function() {
checkRedirect();
});
but i've also tried in the pageinit and pagecreate. checkRedirect() makes an ajax call and based on the result pops the dialog with a "$.mobile.changePage"
it seems the browser still thinks the original page is loading and then somehow dismisses the dialog when the page is done loading. sorry i don't have more details. i think what i need is an event that happens after the whole page is loaded (and after all ajax background loading), but i haven't been able to find that. any help or suggestions is appreciated.
UPDATE: after a discussion with Omar, it turned out that using a "Popup" instead of a dialog worked for what i wanted.
Firstly, using .ready() in jQuery Mobile isn't correct, use jQuery Mobile events.
You need to delay opening dialog/popup once any page event occur to make sure that the page is fully loaded.
setTimeout(function () {
$.mobile.changePage('#dialog');
}, 50);
update:
Based on our discussion, using jQM popup widget is more reliable in your case.

reload page on mobile browser javascript

I'm trying to reload my page every time the user puts my page in focus again or opens their browser. My code works, if the user is in the browser and changing pages, but it doesn't work if the user exit the browser (without actually shutting it completely down) and then opens the browser again, where my page would be the first site they see. I am testing this on chrome for android. Is there another event I need to listen for?
I am looking for a method to reload on all browsers as soon as the user enter my page, no matter what state it was in before - mobile browsers are especially important.
Code:
<script type="text/javascript">
onload = function () {
onfocus = function () {
onfocus = function () {}
location.reload (true)
}
}
</script>
This is a pretty crazy idea to reload the page all the time in full, your users will hate you. If you are going to do it, just do partial updates to the page.
Anyway, to answer the question, check the PageVisibility API(Chrome) or the specs. This event fires when the page is visible to the user either by bringing the app into focus or by changing tabs.

Categories