I have a problem that seems pretty simple to me, but so far it was impossible to find a simple solution: On my website, whenever the Android soft keyboard pops up, it resizes the window and shrinks the content, instead of just overlaying the page.
See these pictures for reference:
The first two are the current situation, the third is what I want. It works like this on iOS. What can I do to make it work that way?
The screenshots were taken in Firefox - this is a website based on HTML, not a native app.
I tried setting body size and position, but so far, no luck. I've seen some very complicated JS code snippets for similar problems, but I didn't get any of them to work the way I want, and it also seems like there should be an easier way around it. The sizes of all the elements are determined with vh and wv. Setting fixed pixel values seems like it would kill the responsiveness of the design, no?
I'm not a very experienced developer, my page is just very basic HTML and CSS. Is there a way to achieve what I want with only that?
On your manifest.xml you can set android:windowSoftInputMode to adjustPan.
<activity
android:name=".WebActivity"
android:windowSoftInputMode="adjustPan" />
From Android documentation:
Don't resize the window to make room for the soft input area; instead
pan the contents of the window as focus moves inside of it so that the
user can see what they are typing. This is generally less desireable
than panning because the user may need to close the input area to get
at and interact with parts of the window
Related
So I searched quite some time for an answer to that now, but so far was not able to find any. This is my first time really looking into HTML5 video questions, so please forgive me if my question is totally stupid.
I read quite a few things about this awesome video tag and how it works. However, I only find the info that the controls parameter enables the whole control bar or not, and then it seems to be up to the browser, which controls exactly are shown.
To make even more clear what I am talking about, in Chrome, the full screen Button looks like this:
I found this example here: http://www.w3schools.com/html/html5_video.asp
And as you can (probably) see, the button is there, when you open this site. However, as soon as you click the "Try it yourself" button right below it, the full screen button is not shown anymore, and that is, despite the code seems to be basically the same.
I understand that this is inherent to the browser how it handles it. However, the behaviour is exactly the same in at least Firefox, so I am wondering: What is the logic behind this? Is there any way to "trick" the browser into allowing the fullscreen button?
Some points that I (I think) have already ruled out as the source of the problem:
The actual size of the video being larger than the player
Some CSS tricks like setting the width to a specific value and max-width to 100%
Any ideas?
That is because the video in your second example is inside an iframe, which is quite restrictive as to how you can manipulate the content inside of it.
I imagine adding the allowfullscreen attribute to an iframe would show a different result r.e. video controls.
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
I am really new to HTML and CSS but have created a prototype page to get a reasonable size, look, and feel to fit on a 768x1024 or larger display. I revised it to be used in landscape mode but it's apparent it won't fit in a typical browser window even at full screen with my minimum height and width criteria. The page doesn't contain text; just buttons, check boxes, text, and textarea "widgets". I think that I can fiddle with sizing and make it fit into a window if there is only a top "title" bar with the minimize and close buttons but absent all the other "stuff" such as the navigation bar, tool bar, etc. found in a typical browser.
I do use a couple of web apps that are like this so I know that it is possible. I've searched Google for examples and found popups but none are like this.
My question is: how do I do this, preferably without javascript, and what is this type of window called?
This should help with the minimizing: Is there a good jQuery plugin for a hide effect that looks like minimizing windows in Windows
You're going to have to include jQuery from http://www.jquery.com and call this animate script when the window you want to minimize is clicked.
This will help you with the 'closing'.
https://api.jquery.com/hide/
When you click on an element you can call .hide() on it, effectively closing it from the user's perspective.
I'm looking for something like CATiledLayer (on iOS), but for use in PhoneGap/Sencha Touch 2.
The idea is to "stream" a very large image from a server in form of tiles - very much like Google Maps does the job.
It should support touch gestures on mobile devices so a user can pinch zoom and scroll.
Unfortunately I couldn't find something - so a few pointers are highly appreciated.
Update:
In the meanwhile I took a look at OpenLayers, which seems to what I want and manages multiple layers of zooming and such. Unfortunately it is hooked too much into Geospartial data and there is no way to disable projections to make it work like a basic image viewer.
I also found GSV (Big Ass Image Viewer) - unfortunately I doesn't support touch gestures and generally seems to be abandoned.
To me it's just weird that nobody really had the need for something like this and I try to prevent "re-inventing the wheel" as much as I can. But right now it does not look like there are any non-geodata/map related solutions.
I've never seen anything like this done using Sencha Touch 2, though I'm going to assume that putting something like this together wouldn't require much.
It would basically be your custom component (which would be scrollable). Inside that component you would insert 1 child which would be the size of your image (lets say; 15000px x 15000px) so it overflows. You would then listen to the scroll event on the parent container and when it gets to a certain x/y state, update the child item with that section of the image.
I'm not sure what the best solution for the child's HTML would be. Perhaps a bunch of divs, but I'm thinking <canvas> would be best for images.
I'm wondering if anyone knows a way that you can prevent browser zooming of specific page elements.
This is for the mobile version of a site I'm developing. I have a fixed menu bar that runs full width of the site and remains at the top of the page at all times to provide navigation. I've optimised the button/text sizes to work for touch screens and don't really want it to be affected if a user zooms the page content text.
The only thing I've come across is the following CSS, but this doesn't seem to work when I've tried it:
-webkit-text-size-adjust: none;
I'm do not wish to disable resizing of the whole page via the Viewport meta tag, I just want to target the menu bar html elements.
The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.
I wrote a modal dialog based on a similar question, you can find it here.
In essence, the logic is about getting the page scale ratio based on window.innerWidth and maximum page width, applying it as a CSS transform to the element and then repositioning it on screen. If there is interest, I will rewrite it into a library that just takes a position: fixed element as an input and does all this magic to it when the user zooms the page.