I have a site being developed for the mobile browser platform. Each page is large in width and height, and requires pop-up messages to be displayed. These ideally should be accomplished by using a html pop-up.
Using a basic javascript alert/confirm will cause the browser to display a message at a size which is consistent whatever the zoom level. I.e. it doesn't get smaller when you zoom out.
Is there a way to do this with html/css
I have tried position: fixed and transform: scale().
Fixed works nicely - most of the time - but only ensures that the modal background fills the viewport
Transform: scale requires a fixed scaling value? This could be modified by javascript I suppose?
The html meta viewport tag sets up the default browser viewport level. I want the users to be able to zoom/pan around to their hearts content.
I hope I have described my problem sufficiently, however if more clarification is required let me know.
Apologies if this question has been posted somewhere else.
The only way I can think of doing this at present is to write html into a new window, however it doesn't provide the functionality I was hoping for.
Related
I have been searching for the best part of a day in order to try and find a way around this but cant. So here I am.
Basically I am working on a component which is position: fixed; to the bottom of the mobile browser's viewport window. This is trivial in itself.
The issue is that the company's native iOS app has an Apple association file which presents the Apple smart banner to open the native app at the top of the page.
When this is presented to the end user it seems that the browser redefines what it classes as the bottom of the page and, as a result, anything which is fixed to the bottom of the page is overlapped by the navigation toolbar which appears.
The only solution I can think of is to write out a list of all Apple mobile device viewport sizes and then compare the size of the window.innerHeight value on the onresize event -- which seems like absolute overkill and still has some nuance in itself.
I have added some screen shots to illustrate the problem and what I would like to achieve.
Thank you in advance to anyone who can assist with this. I have searched through the answers to other questions but they all seem to be people either trying to surface a smart banner or people trying to redirect to their app.
I have managed to find a solution by leveraging the resize event in the document window and then setting the top attribute of the element to window.innerHeight - element.clientHeight.
If there is a better, more performant way of achieving this I would love to still hear the answer but I will, for all intents and purposes, mark this as answered.
On a side note this does feel like a bug in the Safari browser itself as it seems that Apple are altering what they consider to be the bottom of the document.
Solution:
window.onresize = () => {
const button = document.querySelector(".add-to-bag--sticky");
if (button) {
button.style.top = `${window.innerHeight - button.clientHeight}px`;
}
};
I've implemented a scheme allowing visitors on my website to tap small photos to see a larger view. The tap/click causes a new page element to appear and expand to the max dimensions available for the screen, displaying a higher resolution image there. The reason is to avoid loading high bandwidth images unless the visitor is interested. Once the better hi-resolution image is displayed, the visitor can further expand the image with finger pinch gestures, as its typical for phones. The problem is, if the visitor does manually enlarge the photo, they will be left with an annoying oversized page after dismissing the larger image. And no matter what I do, the visitor's manual adjustment of the image affects the whole page.
For a long time there was a reasonable solution to this, which I found years ago somewhere here on stack exchange. I'd set up a function like this...
function resetScreenSize() {
var viewport = document.querySelector('meta[name="viewport"]');
if(viewport===null){
// just for test alert("no viewport meta");
return;
}
var original = viewport.getAttribute('content');
var forceScale = original+",maximum-scale=1.0";
viewport.setAttribute('content', forceScale);
setTimeout(function() {
viewport.setAttribute("content", original);
}, 100);
}
The idea was to un-do whatever manual zooming the visitor did by adding the "maximum-scale" value of 1 to the viewport, wait a moment for system to settle, and then return the viewport to its original settings (without a maximum scale). After testing this approach with a simple button, I just set up my code to call the function automatically when the visitor dismissed the zoomed image.
Well it seems that Apple, in their infinite wisdom, has decided that IOS devices will no longer honor viewport "maximum-scale", as well as several other options, like disallowing user scaling. It seems to be blocked on other browsers too like Chrome on IOS. So as a result my scheme no longer works. If a visitor picks a full size image and then expands it further, I have no way to set the viewport back to normal, without doing something drastic like re-loading the page.
I've tried a few other approaches I've found on stackexchange, most involving attempts to block zooming to begin with. That's not what I want.
So is there another solution I could consider? I know Social media giants like Facebook have a way of letting a visitor click an image to bring up a larger view, and no matter how the visitor enlarges it manually, things go back to normal once the photo is dismissed. But I don't know how that do it.
I ran in a similar problem a while back and fixed it in a similar way.
One important trick here was the wait with a 100ms. Using 0 would get the code executed immediately and not actually apply anything.
Now, if Apple changed the rules on these viewport parameters (probably because it got abused by some), then one solution I can think of is to use an IFRAME. I think that Facebook uses that technique whenever they open a "popup" with an image in it (and comments on the side). That makes it really easy to close that window and get back to the previous view. Also the viewport scaling factor will be changed in the IFRAME and not the window in the back. So you should get exactly what's necessary.
Before you read the rest this might be considered a broad question.
I'm sorry if it is, but I have no other way to ask it than this.
So, I thought about a loading page animation, which I consider to be complex, but it may not be.
What I want to achive is this:
When the page loads (let's say the index page), what you would see would be the point of view of a person looking at his/her smartphone (or desktop monitor, depending on the media query). So you would basically see what you see right now. If you're on a chair or a sofa you see maybe your legs, your hands, the environment and of course the device. On that device you would see a miniature of your index page, like that person is looking at your website.
Ok, now when the page is loading you would see a zoom on the smartphone/desktop monitor like you are going "into the content" that's displayed on the screen of that person's smartphone/desktop monitor, and when it's completely loaded you see the actual website fully displayed on your device.
In other words, in the animation, that person's device becomes your device. Hope I was clear enough.
POSSIBLE SOLUTIONS I THOUGHT ABOUT
Putting a screenshot of the index page on the animation's device and then using transform: scale(); for the zoom, but how could I get rid of the animation's content once the page is fully loaded, and then have the actual website displayed?
Having the entire <body> element zoomed out using transform: scale(); and positioned on the person's device, and when the page id loaded using transform: scale(); again to zoom in to the full viewport's size.
Note that I listed only CSS solutions, because I just started learning JS.
IMPORTANT: I don't want nobody to write that code for me. I only want to know if there's a solution, and if the solutions I thought about could work. Or, if I should use JS or other stuff I'm not aware about, in order to achive this animation.
POSSIBLE SOLUTIONS I THOUGHT ABOUT
Putting a screenshot of the index page on the animation's device and
then using transform: scale(); for the zoom, but how could I get rid
of the animation's content once the page is fully loaded, and then
have the actual website displayed?
you can get rid of the animation's content once the page is fully loaded with the help of javascript:
window.addEventListener("load", function () {
var AnimationContent= document.querySelector("#ID OF YOUR ANIMATION CONTENT");
AnimationContent.remove();
// or
AnimationContent.style.display = "none";
});
We have a web based LOB application and currently we are shrinking the content of the app when it goes onto a smaller resolution browser i.e. IPad, using the viewport. using javascript:
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=0.8');
This works fine asthecially but it seems to produce a performance hit when the browser has to scale everything down, especially with our kendo controls (the grid takes a massive hit).
Just wondering if anyone can advice a better was to scale down the viewport without hitting any performance issues?
I'd be surprised if you're getting a performance hit from scaling the page since that happens on the GPU and is expected to be very fast.
Additionally, your viewport descriptor as-is wont scale the page unless you have content that's explicitly wider than your layout size (for example, a very wide image). The browser will automatically zoom out to show all the content on load so your best bet is to pick a good layout width for your page (e.g. width=1200) and not set an initial-scale. width=device-width will attempt to lay your page out into the size of the device's screen, which is not what you want if you're trying to scale your page down.
I was wondering how to achieve the native scrollbar effect which TheFWA (thefwa.com) has managed to do pretty well (I am not a fan of Flex scrollbars).
I found this post (http://stackoverflow.com/questions/318675/how-can-i-create-a-flex-application-with-dynamic-height), and implemented the technique, as I am calling a JS function through ExternalInterface every time, when the flash object changes size. This JS function simply resizes the div which holds the flash object, which creates the native bars.
Unfortunately, when I resize quite rapidly (from 800 to 1800 height, for instance) the flash object simply gets warped for several milliseconds (as if it hasn't changed its size, but simply got pulled in all directions). After these milliseconds, things get back to normal, but the whole situation is really visually annoying.
Originally I thought that it's simply a timing issue, but after a bunch of attempts to set a delay, the effect was the same ... just delayed.
How can I resolve that? I know it's technically possible. Just take a look at TheFWA, and see how smoothly flash and the browser are communicating with each other to make the native scroll bars work, without any flickering, or mismeasurement
This is an issue that appeared since Flash Player 10 and is still happening up to FP 11 beta.
When you resize the DIV that contains the SWF, the SWF itself is resized, therefore you "ask" the player to redraw the content. But the thing is that this redraw creates this ugly flicker.
The workaround it to not resize the SWF DIV at all and to resize another empty DIV, so you force the browser to update the scrollbar.
At this point when you use the scrollbar it won't move the SWF DIV (as it is probably often a position absolute full-size flash site) but then you create a simple JS callback to send the scroll values to your application.
It may sound as a much greater effort but it is not much actually, and at the end you will create a more flexible way to manage your application.
You can check that in use here http://www.andrefelipe.com/
And the source code is at my framework https://github.com/andrefelipe/fabricaframework/blob/master/src/fabrica/external/Browser.as
The flash content on that site has fixed size. What they did is to put the swf file in a centered div. Something like this:
...header stuff...
<body>
<div id="flashContent" style="width:960px; margin:0 auto;">
...the flash content goes here...
</div>
</body>
The width of the div container should be the width of your flash movie.
If you want to resize the flash movie then take a look at swffit
That site isn't doing anything special, simply setting the height and width of the application and slapping it on the page - no resize is happening. If you simply employ the same technique (specifying a height for the app) then you will get the same results.
Am I missing something?