I'm developing an iOS app with phonegap. The UI consists of a number of 'wrappers', laid out horizontally, each at 100% of the height of the viewport.
<html>
<body>
<div id="wrapper-one"></div>
<div id="wrapper-two"></div>
<div id="wrapper-three"</div>
</body>
</body>
The html, body and #wrapper-* elements all have height: 100% declared in the CSS, which works perfectly, and stops the app from scrolling.
The problem is, that when the 'in call' or 'Personal Hotspot' indicators are visible, they reduce the height of the viewport by around 20px. This then pushes the bottom of the page slightly off screen, and you can scroll up and down. The wrapper divs within the body are scrollable, so I don't want the window to be scrollable as well.
Is there any way that I can stop the scrolling from happening when these indicators are visible, as I have for when only the normal status bar is visible?
You should be able to detect the window resize and handle it.
window.onresize = function() {
//820 just an example height
if (window.innerHeight >= 820) {
// Do something
}
}
Put this code inside your MainViewController.m right after MainViewController #implementation and before #end.
- (void)viewDidLayoutSubviews{
if ([self respondsToSelector:#selector(topLayoutGuide)]) // iOS 7 or above
{
CGFloat top = self.topLayoutGuide.length;
if(self.webView.frame.origin.y == 0){
// We only want to do this once, or if the view has somehow been "restored" by other code.
self.webView.frame = CGRectMake(self.webView.frame.origin.x, self.webView.frame.origin.y + top, self.webView.frame.size.width, self.webView.frame.size.height - top);
}
}
}
Related
I use Jquery to get the height of the devices displaying a website, to make sure that my homepage has a height of 100%, and when scrolled thru, header menu will go fixed to top.
For that, I measure Window InnerHeight with a functiun, which is called on document ready, and window resize events (to keep the design clean when user changes portrait / landscpae mode on mobile, or resizes his window on desktop).
Problem on mobile : the adress bar on android is displayed on page load, and hides on scroll down, then reappears on scroll up. This makes some page elements change sizes on evey opportunity and moves contents in the page. Not pleasant for the user.
function setHeight() {
windowHeight = $(window).innerHeight();
$('.home-intro').css('min-height', windowHeight);
}
$( window ).resize(function() {
setHeight();
});
Is there a way to get the window size, not affected by the adress bar being displayed or not ?
I know this answer is a year late, but I've struggled with this issue as well. I've found that using "window.document.documentElement.clientHeight" instead of "$(window).innerHeight();" makes it so the when the address bar disappears your min-height targeted elements won't resize again to fill the extra 50px or so.
Here's what I'm using on my project:
function adjustBackgrounds() {
windowHeight = window.document.documentElement.clientHeight;
$('#section-01-home').css('min-height', windowHeight);
}
// Triggers Sizing on Load (783 = 800px accounting for 17px of scrollbar)
if ($(window).width() <= 783) {
adjustBackgrounds();
} else {
}
// Triggers Sizing on Browser Resize (783 = 800px accounting for 17px of scrollbar)
$(window).resize(function() {
if ($(window).width() <= 783) {
adjustBackgrounds();
} else {
}
});
I have a fixed header div with a 200px height. On scroll, the height is reduced until it reaches a certain height (40px). This gives the effect of the header turning into a fixed header once user reaches the content container.
This works smooth in Firefox and Chrome, however, Safari is glitchy. Particularly, when user scrolls back up and the header increases in height. See JS Fiddle here.
$(window).scroll(function () {
var $scrollTop = $(window).scrollTop(),
$element = $('.content-container').offset().top,
$distance = ($element - $scrollTop);
if ($scrollTop < $element - $newHeight) {
header.height($distance);
}
});
What is causing safari to glitch so much on the height increase? What can I do to smooth this out?
The way to smoothen out this effect in Safari is to change the approach all together. Instead of changing the height of the header on scroll, make the content container position:relative; and set a higher z-index. Then when scroll reaches the bottom of your header (or wherever point you'd like to make the header sticky), change the z-index of the header to be higher than the content container and set it's height to your desired size.
Here is the JS. Please see this JS Fiddle for demo and the rest of code (css, html).
$(window).scroll(function () {
if ($scrollTop > $element - $newHeight) {
header.height($newHeight).css("z-index", 1000);
}
else {
header.css("z-index", 100).height($oldHeight);
}
});
Also, consider using requestAnimationFrame instead of onScroll. It''ll be lighter weight.
I am trying to build an animated sidebar that slides in and out when you click the button. This was quite easy to achieve however I ran in to a problem when making the sidebar 'more' responsive. Basically, I wanted the sidebar to be 200px wide when the width is less than 500 and 300px wide otherwise. This was done in a media query. The problem I've run into is that when you resize the window the sidebar goes out of position if you have already run the function before resizing.
This problem can occur for example if a user rotates their mobile screen whilst using the sidebar and so I feel it's best to try and fix it.
Here is the jQuery:
function sidebar(){
var menuWidth = $('#menu').width();
if($('#menu-link').hasClass('hidden')){
$('#menu-link').removeClass('hidden');
$('.push').animate({right: "-=" + menuWidth});
}else{
$('#menu-link').addClass('hidden');
$('.push').animate({right: "+=" + menuWidth});
}
};
$('body').on('click', '#menu-link', sidebar);
The sidebar changes to 200px <500 and is otherwise 300px. What is the best way to code this or is it better to keep it simple by just always making the sidebar 200px even though it's not as aesthetically pleasing at larger resolutions.
Here is a link to a JSFiddle of my code
https://jsfiddle.net/fqcydqu7/
Edit: Sorry, to explain the actual problem clearly - Before you resize, this code runs fine and is perfect. However, if you run this code (ie. open and close the sidebar) and then resize the window so the media query is active you will see that the sidebar is out of position by 100px. The opposite will happen if you reverse the order.
Okay guys I came up with a solution for my problem.
Basically, I remove the media query from CSS and set the div to always be 300px.
The jquery uses a variable that is updated whenever the window is resized to judge how much to slide the menu. (200px or 300px).
here is the code:
// variable is set to 0 by default
var menuWidth = 0;
//call to function that will set this variable
setWidth();
function setWidth(){
if(windowSize <= 800){ //if its less than 800px wide, set the variable to 200px (the menu is still 300px)
menuWidth = "200px";
}else{
menuWidth = "300px"; //otherwise set the variable to 300px
}
}
$(window).resize(function(){ //when a user resizes the window, run the setWidth function to readjust the variable
setWidth(); //this re-runs setWidth
//the following closes the menu if it's already open to avoid glitches
if($('#menu-link').hasClass('hidden')){
$('#menu-link').removeClass('hidden');
$('.push').animate({right: "-=" + menuWidth});
}
});
//nav slide
function sidebar(){
if($('#menu-link').hasClass('showing')){ //checks to see if the nav is showing or not
$('#menu-link').removeClass('showing'); //remove the showing tag
$('.push').animate({right: "-=" + menuWidth}); //closes the nav
}else{ //if the nav doesnt have showing tag it must be hidden
$('#menu-link').addClass('showing'); //add the showing tag
$('.push').animate({right: "+=" + menuWidth}); //open the nav
}
};
With this code, the menu will only slide out by 200px when the window is less than 800px wide and 300px if it's wider. The div will always be in the correct position even if the user rotates the mobile or changes the window width.
I'm currently developing a website that that has a fixed banner div that is centered, and I'm using the jQuery below to ensure that it scrolls correctly even though it is a fixed positioned div.
jQuery:
$(window).scroll(function() {
$('#top-content').css('left', -$(this).scrollLeft() + "px");
});
However, I have come across an issue within IE(version 9). The issue is that when the user scrolls the website (creating a minus left margin on the "top-content" div, to give the effect of scrolling) and then if they maximize the webpage, the left margin is still present causing the div to not be centered.
I have attempted to remedy this with the jQuery below, but as of yet no luck
$(window).resize(function() {
if ($("#top-content").width() < $(window).width()) {
$('#top-content').css('left:0px');
}
});
Any ideas?
You better do
$('#top-content').css('left', '0px');
In your resize event.
I do a menu fixed top when scroll, it ok with some pages have large height, but in page has not enough height, this script loop:
Example:
I have menu with height 50px and i write a script:
if ($(this).scrollTop() > 50){
// add class fixed
} else { //remove class }
on pages with large height this run: scroll(over 50px) > add class
on pages with small height this run: scroll(over 50px) > add class > remove class
Please see this example: http://jsfiddle.net/F4BmP/2930/
Finally, i find a solution for my problem.
Reason make problem is HTML document lost height when menu change from static to fixed.Examble: Browser has 500px and has a scrollbar, when user scroll my menu change to fixed and browser lost 50px of menu, so browser not enough height to has scrollbar, it will return to top page and do code lines in ELSE statement.
So i add a div wrap my menu and set height the same height with my menu, this will make the height of document always the same on before and after scroll:
<div id="wrap" style="height:50px;width:100%">
<div id="mymenu"></div>
</div>
This solution solve my problem.
Use this javascript:
$(document).ready(function(){
var elementPosition = $('.menu').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('.menu').css('position','fixed').css('top','0');
$('.menu').css('width','100%');
$('.menu').css('z-index','500');
} else {
$('.menu').css('position','static');
}
});
});
Well, this code is working on my menubar, even if screen size is different .
Basic concept is user has to see the menu while scrolling the page.
But in your functionality is correct.There is no much content and User can see the menu in current screen itself. If there is more content user can scroll and get sticky menu always on top.
If you really want to make browser scroll you can give min-heightfor container.
Example
.containerclassname{
min-height: 1500px;
}
I tested your code in firefox and also in chrome , the issue seems to be in chrome . i reworked the code both html and JS and it works fine in chrome, for for that matter in any browser .
heres what should probably work for you :
$(document).ready(function(){
$(window).scroll(function (e) {
$el = $('.nav');
if ($(this).scrollTop() > 100) {
$('.nav').addClass("fixedNav");
}else {
$('.nav').removeClass("fixedNav");
}
});
});
the entire code is enclosed in a fiddle .
Link to fiddle
Kind regards .
Alexander .