I have a windows store app with a column of scrollable text in the center. On the top and bottom I want to have fixed widgets which do not move when scrolling.
I've gotten this to work just fine using some quite simple html
However, when the soft keyboard / touch keyboard is displayed, the bottom of the window is hidden (I would have expected it to resize) and the content is out of view until scrolled to the end. I can see how this probably works quite well for some apps, but for mine it's a disaster. bottom widgets are occluded by the keyboard and top ones scroll out of view when I scroll the center text column to the end.
Here's an imgur gallery of screenshots that show what I mean. I gave up trying to screencapture this after two hours.
Here's the source of my demo app
https://dl.dropboxusercontent.com/u/568631/ninjaScroll2.zip
I can detect when the keyboard is shown or hidden, but I can't seem to do anything about it. I can't resize the window (window.height cannot be set). I can move my bottom widgets to just above the keyboard position, but the window will still scroll when it reaches it's nadir, and then the top widgets are gone.
Does anyone have a workaround for this issue? Is there some way to control the actual window height, or stop this weird viewport scroll effect?
Once the content window has scrolled to it's maximum of 100% (hidden beneath the keyboard) the window itself then starts to scroll up, hiding the top left / top center / top right divs
I couldn't reproduce this scenario. By my side when scrolling to 100%, the touch-keyboard also cover the bottom of the window, and the window didn't start to scroll itself. I'm targeting SDK 14393.
I can move my bottom widgets to just above the keyboard position, but the window will still scroll when it reaches it's nadir, and then the top widgets are gone.
You are targeting the right direction. When the touch-keyboard is on, the window scroller is shown, so that you can scroll to the see the bottom when the touch-keyboard is on. Thus when you scroll the content to the bottom and continuing scrolling, the window will be 'pulled' to up.
So, the workaround is to adjust the position of the bottom divs in window.onscrolling:
default.js:
var windowHeight = window.innerHeight;
var inputPane = Windows.UI.ViewManagement.InputPane.getForCurrentView();
...
window.onscroll = function (evt) {
//change the position of bottom div
var myDiv = document.getElementById("myDiv");
myDiv.style.top = window.pageYOffset+"px";
}
inputPane.onshowing = function (eventArgs) {
document.getElementById("myDiv").style.height = windowHeight-eventArgs.occludedRect.height+"px";
}
inputPane.onhiding = function (eventArgs) {
document.getElementById("myDiv").style.height = windowHeight + "px";
}
default.html:
<div id="myDiv" style="position:absolute;height:100%;width:100%;">
<div style="position:absolute;top:2vh;left:2vw">top left</div>
<div style="position:absolute;top:2vh;right:50vw">top center</div>
<div style="position:absolute;right:2vw">top right</div>
<div style="position:absolute;top:50vh;left:2vw">middle left</div>
<div style="position:absolute;top:50vh;right:50vw">middle center</div>
<div style="position:absolute;top:50vh;right:2vw">middle right</div>
<div style="position:absolute;bottom:2vh;left:2vw">bottom left</div>
<div style="position:absolute;bottom:2vh;right:50vw">bottom center</div>
<div style="position:absolute;bottom:2vh;right:2vw">bottom right</div>
</div>
Notes: To simplify the problem, I use a div to wrap the fixed content. And adjust the position by changing the height of the div.
And here is the link to complete demo: ninjaScroll2.
Related
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
the question is a bit more complex than the title can describe. I'm trying to make something like this:
There's a one page layout with content sections. Each section is 100vh, some of them are taller. When user scrolls down or swipes an animation occurrs sliding to a next section. When in a taller section user scrolls freely unless at the bounds of the section, then an animation occurrs.
I've come up with an idea that the browser's scrollbar should be something of a controller, that means it should indicate a position value that would be translated by JS to proper animation. I've created a fixed positioned container with the sections over page's body with its height set to the total sections height so the scrollbar indicates proper values.
The problem is I think I don't want the scrollbar to be visible, because it makes a little paradox when dragging it. Also there will be some content sliding in from the side with its own scrollbar. I think I can hide the scrollbar by doing some tricks if the scrollbar is in a div, not window, but it looks like when a fixed container is in a container with a scrollbar the scroll doesn't happen when the mouse is over the fixed container.
So now I'm stuck between having a window scrollbar and not being actually able to scroll over fixed container. I'd appreciate any help so much. Cheers!
some html just for codepen links to work:
<div class="fixed">
<div class="section-container">
<div class="section"><h1>section 1</h1></div>
<div class="section"><h1>section 2</h1></div>
<div class="section"><h1>section 3</h1></div>
</div>
</div>
codepen example with body scroll
codepen example with container scroll
You added scroll before fixed so it doesn't matter if you have scroll or not it is fixed so you cant scroll over fixed area only under.
I have a mobile website that has a main wrapper with three divs inside - all are fixed height which add up to 480px total. The top two divs inside are headers which are pretty short, and the bottom one is where the main content is and has an overflow-y of scroll. I set the html and body to overflow-y:hidden. I want only the main content div to scroll vertically and absolutely nothing else, leaving the headers always visible in full.
When I view it in my desktop browser it works fine. In my iPhone simulator it scrolls correctly if I click and drag within that content div, but if I click and drag from one of the headers or I swipe with two fingers on my trackpad it scrolls the whole page, not just the content. This results in the top header getting scrolled off the page. I don't have a real iphone to test with, but I am told by my client that the same thing happens on her iphone.
I tried setting the height of the main wrapper to something very short (300px) so in theory there shouldn't be any need to scroll the page at all regardless of the overflow setting, but it still scrolls. I also tried visiting this very short page and even there in the simulator it scrolls a little. I also tried setting my headers to position:fixed but no luck.
How can I get the page to stop scrolling away from the headers?
You could bind a "touchmove" event to the two other divs, and use prevent default.
<div id="main-wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
The use jQuery and
jQuery(function($) {
$("#header").on(‘touchmove’, function(e) { e.preventDefault() });
$("#footer").on(‘touchmove’, function(e) { e.preventDefault() });
}
This will prevent the browser from doing it’s default behaviour.
here's what I want. I want a top bar AND navigation menu attached to the bar. I've done this no problem. I want to bar and the navigation menu to follow me if I scroll up and down.I can do this with a position fixed. but, if i have a fixed position, then when i scroll left to right, they follow.
I want to have both the top bar and the navigation menu follow as the user scrolls up and down but if they scroll left to right i want it to act like an absolute position, and become partially or completely hidden (depending on how much the user scrolls).
Is this possible? I've seen a couple of topics but haven't been able to get it to work for me.
Here is my jfiddle http://jsfiddle.net/kyleseitz/rX4Vh/11/
I want EVERYTHING to move down with me when I scroll down and back up when I scroll up. But, if i get a horizontal scroll bar, I want to pass the viewing window over it.
I found the javascript on a previous question but i can't get it to work for me.
.slim {position: absolute;}
<div id="phantombar" class="slim">
<!--I Technically don't need these if they are not neccessary-->
<div id="phantombar" class="fixed_elem">
<div id="headWrap">
ScrollToFixed is a jQuery plugin that used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Website: https://github.com/bigspotteddog/ScrollToFixed
Demo: http://bigspotteddog.github.io/ScrollToFixed/
try to use this. Maybe works :
$(function(){
var elements = $('#ptm, #spt, #support, #act, #left_nav');
elements.css('position', 'absolute');
$(window).scroll(function(){
if($(this).scrollLeft()){
elements.removeAttr('style').css('position', 'absolute');
}else{
elements.removeAttr('style').css('position', 'fixed');
}
});
});
elements can you add more, depending on needs.
I have a top menu bar that is in position fixed and contains some text. When the screen is resized smaller it compresses and it's height increases to fit the text.
I have a div below the top menu bar that contains my website content, moved down using padding-top.
When the top menu bar resizes the top of the article gets covered by the height change of the top menu bar.
#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}
#content {padding-top:40px;}
What is the best way around this so the resized top menu bar does not cover my content?
The Top menu bar has to always be visible at the top of the screen, so I guess how can I make the padding-top get bigger with the screen width getting smaller or another solution?
Pure JavaScript solution (no jQuery required):
window.onresize = function() {
document.getElementById("content").style.paddingTop = document.getElementById("topmenubar").offsetHeight;
};
jquery
$(window).resize(function(){
var h = $("#topmenubar").height();
$("#content").css("padding-top",h+"px");
});
You can get around this by removing width 100% to some fixed pixel width so that top menubar will not resize,
or at some extent by min-width property.