this might be sort of a random question. I'm developing a mobile web application and I want to give it as much of a native-app feel as possible. My problem is that i have elements on the website that is supposed to be centered both vertically and horizontally in the viewport but Safari's IOS browser snackbar (see picture) is ruining the look and feel.
(OBS this is obviously not my webpage)
The list that appears at the bottom of the browser, is placed on top of the website so that it overlays its content. This is problematic since the element doesn't appear to be centered anymore when this happens.
My question is. Is it in anyway possible to make the snackbar push up/ compress the content of the website instead of overlaying it? I have seriously no idea what to google.
Thank you
So it sounds like you want the minimal-ui property back, but unfortunately Apple has removed this. However all is not lost there are some hacks you can do.
Probably the most popular trick is to scroll down a pixel so safari hides the bars automatically.
Version 1:
window.scrollTo(0,1);
Version 2:
/mobile/i.test(navigator.userAgent)
&& !location.hash
&& setTimeout(function() {
window.scrollTo(0, 1);
}, 300);
The other option is to use a 3rd party plugin like Brim, which can essentially force the screen to rotate orientations and then rotate back extremely quickly.
Related
I'm currently pulling my hair out with this one. Im a new web developer using bootstrap themes and templates just to get a feel for the industry, and have hit a bump in the road that needs an experienced input
Ive got a website that Ive created at the minute, where certain parts of the screens don't resize properly when the aspect ratio is lower than mine (1920px). However zooming out on the browser corrects this issue. For instance 1440px needs to be zoomed out to 75% in order for everything to be correct. A number of images have fallen out of the bootstrap framework due to a positioning request from my friend, although ive used #media queries to correct a number of these issues but thats clearly where the problems have arisen.
I'm aware that I should go back and fix this bugs from scratch but I seriously will go crazy if I have to do that. I do know that it is possible to resize the browser zoom being used if the aspect ratio is below a certain level however Ive heard thats not the way to go.
Does anyone have any advice on how to proceed with this one? Is there an "entire page/html" zoom query that can be put in place rather than a browser zoom?
Use CSS zoom:
body {
zoom: 0.75;
}
If you're just starting out, I would recommend you right click on elements that are not appearing as expected, and inspect them in your Chrome console (or whatever browser you're on). You can then first adjust styling properties and transfer over the appropriate changes to your actual code once you confirm that the adjustments you make do what you want.
Kind of getting ahead of myself with the discovery of the javascript auto-refresh script..
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
I was stoked to have it be used as a way for my site to auto-adjust it's nav bar no matter what size the screen is. My goal was mainly to have the nav bar's menu icon "float on right" but still be visible on the screen, even on small screens. And I know there's a better way going about this, but for the moment this method seemed to work best via my limited javascript knowledge. No judgement! :-P
Anyway here's my problem. Although the nav bar re-sizes itself upon refresh, on small screens and mobile browsers it will REFRESH the page anytime the user swipes down on the site. The same happens for most tablets and smartphones.
To see what I'm talking about here is an alternate link to my website (Updating my database atm so I apologize for the horrid address numbers)
http://69.194.231.142 <---Please copy/paste this address into major/mobile browsers for diagnosis
it works great on laptops and large screens, but when viewing this site on a phone or tablet it will either refresh for infinity or refresh whenever you scroll.
If there's any way to solve this little riddle of nuisance code please let me know. Or at least, a better way to go about coding it so it only refreshes ONCE and not indefinitely. I don't know if this is possible though so any alternative solutions are welcome.
Maybe there's a way for just the CSS that makes up the nav to refresh and not the entire page? Either that or something that lets the page refresh just one time would be superb :-D
Thanks!
I found a solution!
Seems that my browser was using a cdn. So I had to flush the cache on the server to see the changes. Removed the JS refresh script and fixed the navbar to be set to "relative" when in mobile view. This way I don't have to worry about the spacing! It was originally being crossed out from this other javascript that makes the nav bar sticky, but the script also made the navbar stick on mobile view, which was messing up my layout and causing a lot of lag upon scrolling.
Fixing these little things made a big difference in my website usability. Now theres no refresh to worry about and the page stays centered on multiple screens.
Thanks all who suggested removal of the JS, Using CSS only worked like a charm!
I'm new to the HTML\CSS\Javascript thing, so please excuse my incompetence. I know for some bits (mainly class modification) I'm not using jQuery, but only because I couldn't get it to work, so I went old-skool.
I have a web page (here: http://dashboards.kantarhealthspain.com/uk/segmentation/Segmentation_v0.4.html) that works just fine in Chrome (and Safari) on my desktop. You click on the massive squares in the middle of the page, and then click on the >> to go to the next 'page'. Eventually you get to the point where it hides\unhides one of 4 segments based on what you've chosen. It's a bit clunky, but it works, which right now is a win...
When I view the same page on an iPad, the layout isn't quite as good, but that's not my problem. When you get to the final question to show\hide the segments, it seems to change the way the whole page is rendered - every element seems to take up so much room.
Debugging on an iPad is very difficult, as I'm using a Windows machine to develop, and the Safari emulator doesn't actually emulate what's going on, as it doesn't break on desktop Safari (for Windows).
I don't even know where to start looking on this - any hints would be much appreciated.
EDIT: Now I've fixed the evil HTML, it looks like when the divs at the bottom are shown\hidden, the height of each div above doubles(?) I've made the background of NavDiv and Breaker fuschia and maroon so they show up, and the double in size. The height is a percentage of the size of the page (I presume) - what's going on there?! Does the percentage recalculate when areas are unhidden?
Thanks
Tom
I'm working on a jQuery lightbox type plugin that needs to function for mobile devices and desktops. I'm having a problem with the full screen overlay effect. From my research, it seems that the standard solution for this is to use position: fixed or background-attachment: fixed to accomplish the overlay effect. Of course, mobile devices don't support fixed positioning, and so I'm trying to find another way.
Right now, I'm attaching a function to $( window ).on( 'resize' ) to get the new dimensions of the window and set the overlay to them. The problem I'm seeing is that this is triggering flickering scroll bars that make the whole thing really jumpy when I size the window down. You can see the effect here: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or http://3strandsmarketing.com/lightbox.php).
Any idea how I can solve this? The code is still in heavy development so it's kind of a mess, but I tried to highlight what I think the 2 problem areas are in the jsFiddle with a comment that says "THE PROBLEM: START".
UPDATE:
I had a brilliant idea to just change the positioning to fixed for desktop browsers and still rely on my resizing scripts for mobile browsers. It seems to have helped a lot, but there is still some significant flicker when the browser window starts to get small (especially when shrinking it vertically). Also, when using position: fixed on Android 4 there is suddenly a large white gap on the side of the screen that I can horizontally scroll to in portrait mode only. Anyone have an idea of how to resolve either problem?
The solution for the flicker problem seems to be to set the overflow-x (or just overflow if you prefer) property for the <body> element to hidden. For curiosity's sake, it actually wasn't the overlay layer, but the lightbox contents that were causing the flicker.
I'm still struggling with the white gap that shows up on Android, but that's a separate problem, so I'm posting this as the solution.
I'm working on making an application with adobe air and I have a div that uses overflow-y. In order for the UI to look nice and sexy, what's the best way to replace the ugly default scrollbar [link broken] with a creation of my own?
Thanks
EDIT: Everyone remember that this is on adobe air, not on a browser (I know better than to to mess with a scrollbar, that's way web -4.2)
Don't.
Users know how to to use the default platform UI widgets: they know what they look like, how they behave, etc. And the platform ones work really well.
They won't know how to use your widget. And even if you try and copy the platform one except for appearance, your widget will behave as a cheap knockoff; it will be missing features the user expects:
Does your scroll thumb grow/shrink to show the length of the document, with a minimum size such that its always grab-able — but only on platforms where that is expected?
Does middle-click scroll to the position clicked, left-click scroll down only, and right-click scroll up only, and each in proportion to where clicked on the scrollbar — on the platform where this is expected?
Does clicking in the blank space between the thumb and up or down arrow work? Does it scroll by the amount the user is expecting, which varies by platform?
Does scrolling go at the speed the user expects when the scroll buttons are held down?
How is the user dragging the thumb handled when the mouse goes outside the scrollbar? Or middle-click, on the before-mentioned platform.
Does your custom scroll bar follow the visual theme the user selected e.g., because he needs extra-high-contrast and/or extra-large widgets due to disability?
The answer to most of those is probably "no". At least, that's been my experience with web sites where the designer decided the platform scroll bars aren't cute enough.
Skin them, like you would any other flex component. To keep your code nice any clean you can specify the embed the skin files through a style in a css file.
Edit: A link on how to skin a scrollbar