We Keep Coding

How do I scroll the page to the top after the fragment identifier pulls the page down?

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>

Media Element Player Exit Full Screen Scrolling Issue

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.

jQuery - How to use smart way to load content on scroll top

I am using this way to load old content from messages when user scrolls top.
$("#Default3").scroll(function() {
if($("#Default3").scrollTop()<1) {
// load 10 more old data to div
});
});
However, if you scroll to top, it just loads for one time. You need to scroll a little bottom and then scroll top to load 10 more again. So I checked the facebook messaging, and noticed that they load more old content if the scroll is upper than 50% of the height. What is the correct way for doing that ?

You can scroll down one pixel, so the user would be able to scroll up again:
$("#Default3").scroll(function() {
if ($("#Default3").scrollTop() < 1) {
// load 10 more old data to div
$("#Default3").scrollTop(1);
}
});

How to disable scroll bar nicely?

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?

jScrollPane how to store scroll position?

I'm using the JQuery plugin jScrollPane.
A client has asked me if when a user scrolls the list of items, and clicks on one, then clicks back in their browser or goes back to that page from a menu, can the scroll box be at the same position. :S
This would mean storing the "top" css attribute computed by the plugin into a cookie on mouseUp (when they let go of the slider, store the value of "top") then when they return, I can check for that cookie and set it to that position.
That's the idea anyway, I've no idea even where to be begin with this.
Thanks for any responses. :)

Here's my solution.
The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.
var element = $(".scroll-pane").jScrollPane({showArrows:true});
if(element != undefined) {
var api = element.data("jsp");
$(function() {
if(parseInt(localStorage.getItem("ScrollPosition")) > 0) {
api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")))
}
$(".scroll-pane").bind("jsp-scroll-y", function(event, scrollPositionY, isAtTop, isAtBottom) {
localStorage.setItem("ScrollPosition", scrollPositionY)
}).jScrollPane()
})
}
;