Is this possible?
Very much in need of the window.scrollTo() function, but it seems that sites like Facebook and others have removed them (or at least removed the references).
They have not removed them. It does matter when you call them though.
Since most content if FB is brought in the page by ajax, if you call the scroll before the content is fetched, there is nowhere to scroll..
If you open firebug (or whatever javascript console you use) and issue a window.scrollTo(0,1000) while a page is displayed, it will scroll just fine. So it is there.
So be more specific about what you are trying to do, so we can see if we can help.
update after comment
For orkut specifically: They have created a wrapper div of the whole content that is 100% width and height. So the window does not have any room to scroll, as all content is isnide the wrapped and the scroll happens there. So the window.scrollTo does nothing (it exists though).
To actually scroll in there you need to find the container div which is the parent of the one with id gwtPanel and use its scrollTop property.
var scrollingNode = document.getElementById('gwtPanel').parentNode;
scrollingNode.scrollTop=500;
Related
I'm building a chrome extension where I have to access the innerText of some span elements. I can safely get them using simple document.querySelector commands.
But for some spans, it returns null because they don't exist yet in the DOM> (For security reasons, I cannot disclose which website this happens with but to make it more clear, LinkedIn does a similar thing where the Experience block is only loaded if you scroll down to it.)
Now, to quote the problem using that example: I want to get the value of a span which is inside that Experience section. If I run the script inside window.onload, it returns null because the span isn't there yet.
One solution is to simply scroll the page, (or even worse, ask the users of the extension to first scroll the page before running the extension.) However, I do not want to do that.
Is there a way in JS to scroll the page in the background without visual feedback to the user so that I can get the value of the HTML elements that are initially hidden?
Assume that the span I want to get has the following class: defense-rc4
I am researching a problem where a user triggers a scroll event, we process it, and in the process of doing so are somehow triggering a second scroll event. Our code is similar to this. In real life, 'thead' is buried inside many levels of containers, etc.
$(window).on('scroll', function(){
$('thead').css('position','fixed');
})
The triggering action seems to be fixing the position of an element. This causes document.height to change, which makes sense, but such actions do not normally cause a scroll event to occur (from what I can tell).
I can reproduce this in our app (which is a mountain of jQuery) with very specific combinations of browser height and document height (I can't see a pattern to it, though; I just know values that work).
I can't reproduce it in a simple case, and I've been trying to all day.
I am confident that $.ScrollTop() or equivalent functions are not being called, and that the user is only making a single gesture.
The jQuery event object looks to me like it is a second user initiated event, eg. there is nothing to suggest that event #2 was caused by event #1.
This is happening on Chrome, haven't tried other browsers. Any suggestions appreciated.
When you make any element to be position:fixed/absolute, your document's height is changed because changed element become out-of-normal-flow and does not push next elements down (read CSS position property). It's the same as removing element from your page.
So, if you're at the bottom of the page and one of elements is gone, browser scrolls page up to compensate removed element's height (to leave you at the bottom of the page).
I am wondering if there are any HTML5 events associated with whether or not an element has been viewed or "scrolled into view" by the user.
An example could be a longer page with elements at the bottom, which has yet to be scrolled into the users view...
I have seen jQuery solutions to this problem, however I am only interested in figuring out if weather or not this is achievable purely though the use of HTML5 events and JavaScript.
It should be noted that I have already had a look at the "onfocus" event, which (from it's official description) seems to only be applicable if the user selects or "clicks" somewhere on or within the element itself.
In plain JavaScript you can use the event "scroll" along with getBoundingClientRect().bottom <= window.innerHeight to determine if an html element has come into view.
document.addEventListener("scroll", inView);
function inView() {
if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
console.log("in view");
// uncomment below if you only want it to notify once
// document.removeEventListener("scroll", inView);
}
}
The console prints "in view" when the element comes into view.
<div id="viewElement">Hello there!</div>
There are no built-in events that tell you when an entire DOM element has become viewable/visible on the page due to scrolling or window resizing.
The only way to do this is to keep track of resize and scroll events (which can each cause more or less of your page to be visible) and then use the scroll position and window height and DOM element positions to calculate if your entire DOM element is visible.
Some relevant pieces of code you can either consider using or look into how they work (these tend to be jQuery-based because they are harder to share if not based on a common DOM library):
Lazy Load Plugin for jQuery
Element "in view" Event jQuery Plugin
Check if Element is Visible After Scrolling - plain JS
I had to do something similar to this when I built http://f1circle.com.
When the bottom banner becomes visible, I have to show a spotlight to the user asking him to login.
The code that achieves it using angularjs can be viewed at https://github.com/rajegannathan/angularUtilities/blob/master/directives/eagerload.js
Though it is an angularjs directive, the main logic is in plain javascript. Basically I check if the the last feed's bottom edge is visible and then trigger the spotlight.
I can explain more if required.
As already mentioned, there is no "event" but someone already wrote a method to "detect if a DOM Element is Truly Visible" (the title). It doesn't require JQuery. You might want to check for the value on several events like the document load, scroll or window resize.
I need to navigate to the element 'divElem1', on click of a button. Is it possible?
If we enter this link in browser, http://myUrl#divElem1, browser will navigate to the page and to the DIV element 'divElem1'. The same behavior has to be obtained through javascript.
The hash change will not work in my application, as there are other events will be fired on hash change.
So, the following will not work.
document.button.onclick = function () {
location.hash = "#divElem1";
};
document.getElementById("divElem1").focus() is also not working since the element is a div
You can use scrollIntoView for that:
document.getElementById("divElem1").scrollIntoView()
This doesn't give fine grain control over where exactly the target element will end up but it WILL be moved into the view-port. Even more, if the element is inside a scrollable container, both the container and the element inside it will be moved into a position so they are visible in the view-port.
If you want "plain" Javascript, use scrollIntoView(). But it really jumps to that position, see this question and answer.
Using jQuery, it can be done jumpy or with some easing, as explained here.
Easing is recommended to provide a better user experience and to let visitors see and understand what is happening.
I orginally asked this question and at the time I was grasping at straws. I created the following fiddle that is closely related to what I'm actually seeing on my internal application:
http://jsfiddle.net/uwtj9/10/
There is a normal index.asp page. On that page I can open a div that includes an iFrame (so a popup). Then from that iFrame I can then open another div that includes another iFrame. However, when the second div opens I am trying to close the 1st div. Hopefully that makes sense.
However, when I try to open the second div, the code to create the iframe never gets run. I think it has to do with the "top." that is currently in my internal application code. When I try to add top.hidepopwin I get an error in Firebug:
Permission denied to access property 'hidePopWin'
However, in my code internally I don't get that error message, but I don't get into the doPopWin code.
Unfortunately for whatever reason when I take out the top. in my code internally it doesn't quite work the way I'm expecting (and I can't replicate it on the fiddle). Basically the second div gets created but it remains the same size and not all the elements are getting cleared (i.e the original menu is still showing up under the new menu).
Anyone have any idea's on this? The fiddle seems to be working as I expect but this "top." thing is kind of weird.
UPDATE:
SLaks answer of why the "top." doesn't work for jsFiddle is acceptable. I'm still left wondering about this issue:
Unfortunately for whatever reason when I take out the top. in my code internally it doesn't quite work the way I'm expecting (and I can't replicate it on the fiddle). Basically the second div gets created but it remains the same size and not all the elements are getting cleared (i.e the original menu is still showing up under the new menu).
Any ideas?
top returns the window object for the outermost frame hosting your page.
In jsFiddle, that's the root jsfiddle.com page, which is in a different domain than your user code. (user submissions in jsFiddle run in http://fiddle.jshell.net)