I'm putting together a responsive galleria slideshow on a drupal site with the galleria module and the galleria 'twelve' theme, using omega as my drupal base theme. Everything is working very well, except that when I enter fullscreen on my iPod I can't get rid of the address bar. I'd also like to make the bottom toolbar go away if possible. Together they take up quite a bit of space.
Any suggestions? I've seen a few methods to accomplish this (in a more general way, not specific to galleria) with some javascript, but that's not my strong suit, and I wouldn't know how to implement those solutions.
To hide the address bar on iOS you just need to scroll the page a little
window.onload = function() {
// x/y coordinates, "1" will cause the address bar to hide
window.scrollTo(0, 1);
};
The bottom bar can't be hidden while in the browser. However, you can add the website to the home screen which will make hiding the address bar and bottom toolbar possible by adding a meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
Related
when I try to make a Next/React project in which I have an invisible input.
Almost the whole page is my label for that input.
when I use my mobile browser and the soft keyboard appears it forces the page to be scrollable which interferes whit my design
I want to either adjust the size of the page so that the
height(page)+height(keyboard)=height(screen)
or
make the whole page unscrollable.
I don't know why but it is scrollable in Brave browser but not in Opera GX browser
I want it like it is on Opera GX.
I tried setting the overflow of html, body & #__next to "hidden"
but that didn't work.
You can see what I am talking about on my website: phew
I am trying to hide the browser in mobile version and have tried to use below on load:
<script>
window.addEventListener("load",function() {
setTimeout(function(){
// This hides the address bar:
window.scrollTo(0, 5);
}, 0);
});
</script>
However this isn't working on my android device it is only scrolling down 5px and not hiding browser bar as if human scrolled down. I feel like this has something to do with viewport but can't figure.
I have tried to follow https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ as well but I can only it make it work with click. I don't really want to go full screen really just hide browser as if user has scrolled down on load (if scrolled up than visible again).
I found a site that has something similar (https://www.webpagefx.com/blog/internet/interstitial-ads-google-hate/amp/) - this happens when you enter via link google search and before entry into site the browser bar has already been hidden, ie scrolled down to google search.
If anyone can help point to right direction that would be helpful so I canget started to code the script that I need. Ideal android and ios resolution (if not than just android)
So, i've been struggeling with getting my website to work on phones, i'm using a grid, but once i'm trying to view it on a phone it looks awful.
I just want to scale down the desktop-version to half the size on phones.
I've been trying the old zoom:0.5; and transform:scale(0.5); but neither has yeilded me any acceptable result, does anyone know how i can fix this?
I'm using <meta name="viewport" content="width=device-width, initial-scale=1" /> right now, but i've tried without it also.
Here's a link to the website: http://7b772c72.ngrok.io/wordpress/
My grid: https://github.com/joelfolkesson/jf/blob/master/style.css
Shrinking down the content will most likely result in an illegible website on smaller view ports.
You can try media queries for your CSS to give your website the appropriate scale for the sizes defined in said media queries.
If you have not invested too much time I would suggest using Twitter Bootstrap as it already has decent cross device CSS that allow for quick and easy mobile friendly deployments.
You can check out this site that was build with Twitter Bootstrap.
UPDATE:
You want to keep the layout the same as the desktop view for mobile. But as stated above the text will become illegible on mobile view ports and that is in deed the case.
What I would suggest is that you change the CSS media query that governs your menu and logo and increase its size to be readable on the mobile view, instead of using zoom: 0.5;.
Change your logo sizing for the mobile view to about 75% and either change your menu items to 100% width or try using a different defined style for it and either put them in a grid of 3 with 33.3% width and your menu should split into 2 sections above and below or change the grid to 6 with 16.6% width and fit them next to each other and decrease your padding to allow for bigger text.
Other than that I can't help much further as your stylesheet naming conventions are very confusing to me.
I have a webpage where I show some PDFs converted in HTML5 with this awesome tool called pdf2htmlEX.
In the same page I make a navigation bar.
If I use mobile devices and I zoom with pinch-to-zoom gesture, the device apply zoom to all elements with navigation bar included.
I would like to make only the html-pdf content zoomable with pinch-to-zoom on mobile devices. I wrapped the content inside a div with id "content-container" and I tried some JS libraries like HammerJS (results with bad bad mobile performance) and iScroll-5 but I can't figure it out.
I checked out OpenStreetMaps mobile website that have some fixed elements and zoomable contents.
Have anyone implemented with good result this feature?
Thank you.
See this similar question: How to zoom div content using jquery?
Basically you can use $('#divName').animate({ 'zoom': zoomlevel }, 'slow'); to get the effect you like using zoom control buttons.
A good plugin that is very flexible to use zoom is http://jaukia.github.io/zoomooz/
I have a site that uses a jQuery UI slider.
I fired it up in my iPhone, and realised that when trying to drag the slider (by dragging my finger over it), it scrolls the site left to right and leaves the slider unaltered.
It appears I can only slide when the site is at a zoom level that shows the entire page. I think you can force this zoom level with a meta element. However, the site's content is quite illegible at this zoom level (at least on an iPhone's screen).
What is the quickest way to get around this? Is it possible, on mousedown (I guess the iPhone will fire this when the finger is placed on it) to zoom the site to fit-all so the user can actually use the slider?
And if the quickest way is hacky/ugly, what are some better solutions?
I am using jQuery.
Many thanks!
Try adding this meta-tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
I copied it from mrdoob's harmony webapp. I know that when you open his harmony app from android webkit browser, you can still draw around by sliding your finger. It doesn't make the entire web page slide.
Do you have to use the slider element? I also use the slider element on a site but if javascript is disabled or not available, I show two selectboxes instead of the slider.