I have long web page that scrolls vertically with several videos. Using Media Element Player, the videos play, but if you enter full screen mode and then exit full screen mode, the page returns to the very top, regardless of where the video is on the page. I want it to return to the same place. Here is the code I'm using:
var topPosition;
MediaElementPlayer.prototype.enterFullScreen_org =
MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
console.log('enter full screen');
this.enterFullScreen_org();
topPosition = window.pageYOffset;
console.log(topPosition);
}
MediaElementPlayer.prototype.exitFullScreen_org =
MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
console.log('exit full screen')
this.exitFullScreen_org();
ResetFullScreen();
}
function ResetFullScreen() {
console.log('top pos:', topPosition);
setTimeout(function () { window.scrollTo(0, topPosition) }, 500);
}
The console.log shows the correct value for "topPosition" but the window.scrollTo method doesn't appear to work.
Looking through your code, it appears that it should work. I do, however, have one more method to setting the scroll that may work. This will be useful if the element you're trying to scroll is not at the top level.
When storing the scroll position:
topPosition = document.body.scrollTop;
When setting the scroll position:
document.body.scrollTop = topPosition;
If what you're trying to scroll is an element within the body, and not the body itself, just replace document.body with the element you need to scroll.
Also, I found a little thing in your code:
MediaElementPlayer.prototype.enterFullScreen;'
There's a random quote at the end of that line.
EDIT:
If that method does not work, I have one more idea for you. When they click on the video they view, store the element that they clicked on in a variable. After leaving fullscreen, scroll the element into view. That way, you will be, more or less, where the screen was when it entered fullscreen.
Each video has an onclick containing the following; this stores the element they clicked on.
lastVideoClicked = event.target;
When leaving fullscreen, this code will attempt to scroll that element back into view.
lastVideoClicked.scrollIntoView();
You can try it out on the Stack Overflow site right here - scroll to the bottom of the page, open your javascript console, and enter the code document.getElementById('hlogo').scrollIntoView(). This scrolls the Stack Overflow logo into view.
Related
I am not trying to prevent the fragment identifier from working. I want the page to go back to the top after it goes down.
This question is asked for the purposes of using jQuery's UI tabs. You need the id to be set on the tab content div, so that jQuery knows which tab to open.
The fragment identifier will open the tab that it is set to, but it also scrolls the page down to the tab's content.
On a page with the tab close to the top, and barely any headers, I wish to keep my page at the top, not scroll down ~150 pixels.
Using javascript's onscroll event, we can see when the page scrolls.
Side note - Since I only have one scenario, I verify that my fragment identifier is what it should be.
We need to then keep a count of when the page scrolls. The page should only be set to the top at the beginning, otherwise the user wouldn't be able to scroll. Thus, check the scroll count for 1, and then move the page to the top.
<script type="text/javascript">
var scrollCount = 0;
window.onscroll = function () {
var hash = window.location.hash.substr(1);
if (hash === "chats") {
scrollCount++;
}
if (scrollCount === 1) {
window.scrollTo(0, 0);
}
}
</script>
I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.
I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.
Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):
$(document).ready(function () {
var contentOffset = getOffset();
function getOffset() {
var allOffsets = $("div#content").offset();
return allOffsets.top;
}
$(window).resize(function () {
contentOffset = getOffset();
});
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > contentOffset) {
$("div.fixeddiv").show();
} else {
$("div.fixeddiv").hide();
}
});
});
Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.
here is a fiddle to know where I am starting from
The problem I am looking to solve involves "paginating" content of a single html file, in such a way that locks them into a single section at a time. I want it so that when users scroll to the bottom of a section, it will slide up a prompt to move to the next page, which will fire a transition, such as different easing/from bottom and put them "in" the next section.
This would be repeated in the next section; when they scroll to the top, they will get a "previous" button but be unable to move unless they click "previous". If they hit the bottom, they will be unable to move to the next page without clicking "next". If they click a section tab, it would do the transition and bring them to that page from their current
I know that this will stop scrolling, but how do I modify it such that it will prevent scrolling in this way?
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
You can just have the window continue to scroll back to the element by using window.scrollTo.
I get the top bottom position and the height of the element, and then when the element is in view of the window I scollTo the difference between the window innerHeight and the elements position.
var el = document.querySelector('.stop');
window.addEventListener('scroll', function (e) {
var elementPos = el.getBoundingClientRect(),
elBot = elementPos.bottom,
elHeight = elementPos.height,
curTop = window.pageYOffset || document.documentElement.scrollTop;
if(elBot <= window.innerHeight-elHeight){
window.scrollTo(0,curTop-(window.innerHeight - elBot));
}
});
Live Demo
And a more complete example with clicking to move on, just to illustrate further.
I created this javascript function which disables the scrolling of the page content when the side menu is shown: (like a fb on mobile app)
function disableScroll(){
var top = $(window).scrollTop();
var left = $(window).scrollLeft();
$('body').css('overflow', 'hidden');
$(window).scroll(function(){
$(this).scrollTop(top).scrollLeft(left);
});
}
However, whenever I try to scroll the side menu, the page content shows the scroll bar moving up and going back to its original position. How do I prevent that from showing cos it looks really ugly.
I tried fixed the scroll position using CSS but it will automatically bring my page to the top which is not what i want. i want it to stay at the position where the user last clicked the button for the side menu to appear.
You should also set overflow: hidden to the body element.. Then the scroll bar won't be shown at all. Return it back to the original overflow afterwards.
JQUERY
$('body').delegate('#element', 'click', function() {
$("body").css('overflow', 'hidden');
});
This could maybe fix your problem?
I would like to have a widget on a webpage containing a number of tabs. When the user scrolls the page and the widget comes in to view and he keeps scrolling down, the tabs should be activated one by one (without the page scrolling further down). Once the last tab is showing, the page should resume scrolling as usual. Is this doable using JS/jQuery?
UPDATE:
Since this seems too broad a question:
The problem is, I don't know how to use the scroll offset and prevent the page from scrolling down until I decide it can resume its normal behavior
UPDATE 2
I created This fiddle,
$(document).ready(function(){
$('#tabbed').mouseover(function(){
$(this).focus();
}).scroll(function(){
console.log("scrolling tabs");
});
$(window).scroll(function(evt){
var scrollPos = $(this).scrollTop()
console.log(scrollPos);
// BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
// SCROLLABLE DIV AND GIVE IT FOCUS HERE?
});
});
it contains a long page and a scrollable div among its contents. The only problem is that the div starts catching scroll events only if I move my mouse. If I could find a bulletproof way to activate the scrolling div whenever the mouse is over it I'm there. Any ideas?
You can't prevent scrolling with javascript. Using iframes and divs with scroll will only work if the mouse is over them.
You can cancel the mouse wheel and keys events related to the scrolling, however the user will be able to scroll using the scrollbar (more here).
Another approach is leaving an empty area and fixing your widget inside this area, like in this working example
$(window).bind('scroll', function()
{
var scroll = $(window).scrollTop(),
innerHeight = window.innerHeight || $(window).height(),
fooScroll = $('#fooScroll'),
emptyArea = $('#emptyArea'),
offset = emptyArea.offset(),
fixedClass = 'fixed';
if(scroll > offset.top)
{
if(scroll < offset.top + emptyArea.height() - fooScroll.height())
{
fooScroll.addClass(fixedClass);
fooScroll.css("top", 0);
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", emptyArea.height() - fooScroll.height());
}
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", 0);
}
});
Then you can change the tabs while the page is scrolling.
You should be able to do this. You can use the jQuery scroll event to run your own code whenever the user scrolls up or down. Also, so long as you call e.preventDefault() whenever the scroll event is fired, you can prevent the whole window from scrolling up or down.