I've recently implemented 3D authentication into my checkout using an iFrame as part of a Sage Pay integration. I've then made live payments using my UK bank cards (Lloyds & HSBC) and can see that the bank's authentication page for 3D authentication fits snugly into a 400px X 450px iFrame.
Now it seems that there is a problem pattern with DE users struggling to pass 3D authentication and in one example (see below) I was provided with, I can see that the scroll bar has become active. It occurs to me that they might have missed some part of the bank's authentication page by mistake by not scrolling down.
My question is; Is there a general rule of thumb for the size of an iframe when displaying a bank's 3D authentication page? Also, in this case the client has requested we remove the default iframe border, from a usability stand point, do you think this makes it more difficult to spot that there is more to the page?
Here is the DE example of a customer's bank asking for 3D authentication. I don't know if there is more to scroll down to as I only got the screenshot later on and am not familiar with this bank's authentication page;
I have set the iFrame width to 100%.
Maybe this would stretch the text and it might fit.
If all works out it might get better with 3DSv2 next weekend as we can set the dimensions for the challenge window:
Dimensions of the challenge window that has been displayed to the cardholder.
The ACS shall reply with content that is formatted to appropriately render the
challenge UI in this window, to provide the best possible user experience.
Preconfigured sizes are width x height in pixels of the window displayed in the
Cardholder browser window.
01 = 250 x 400
02 = 390 x 400
03 = 500 x 600
04 = 600 x 400
05 = Full screen
I don't see a border on my iFrame:
<iframe src="/URL.aspx" width="100%" height="400px"></iframe>
Your screenshot is for 3DSecure v1 SagePay protocol 3.0, right?
Related
Struggling with an issue around LinkedIn downsizing images posted via their API. Hoping someone has some resources that might be able to assist?
When posting via LinkedIn's reach media share, as described here:
https://www.linkedin.com/help/linkedin/suggested/70781/image-specifications-for-your-linkedin-pages-and-career-pages?lang=en
https://learn.microsoft.com/en-us/linkedin/marketing/integrations/community-management/shares/rich-media-shares
It seems their API only supports a "1.91:1 ratio" (1200 x 627)
What's ironic about this is 1.91:1 looks terrible in the application.
So after some experimentation (forgive the bright green background, I was testing whether white padding was being added) I discovered that LinkedIn's native posting of images is actually a 1.5375:1 ratio when done within the application, which lo and behold... actually looks good within the application. Example:
So then naturally I try to post 1.5375 via the API and get these hideous gray bars on both sides:
Further, the API adds a crop factor to the overall height that is just simply not present when an image is added in the application natively. This example is a side-by-side of the exact same image... (left = posted via API) (right = posted natively on LinkedIn)
You can see how much better the native image looks.
Does anyone have any suggestions on how to resolve this issue?
Many thanks!!
The problem is here.I recently coded a landing page for a client and I made it fully responsive. Now he says that when the page loads, all content should be on the screen and there should be no need to scroll to see the lower part and everything should be fit on the screen. I'm not sure if I am wrong or he, but I think this is not possible at all if you want a responsive website then things will go off screen. I share some pictures so you can see what I mean.
I know that my question is not about coding but more about the possibility of what my client is requesting.
He has a macbook pro '15 inch laptop which I think is a Retina display laptop. So I don't really know what to do about this issue.
**This is what you see on a macbook pro '15 **
However, in other screens you see all the content.
I just want to know if what the client requests is something real and doable or is it impossible?
I'm working in a project of building a responsive website. The painful thing we're having is to deal with the content of the image in different display modes. Please be noted: the image content.
The thing is: in almost pages at PC view, the images are displayed in landscape, with great ratio between width and height. Now when bringing them to mobile view, we have to display it in a different frame. And as you might imagine, now the content of the image was scaled and cropped and then exported to some very weird images on mobile view. Like a wide picture with people are almost in left side, but after being cropped there are only non-sense objects in the picture left.
IMHO, via technical solutions we are only processing the technical attributes of the image (resizing, scaling), we are unable to deal with the image content, that's really a human matter, right?
I'm thinking about 4 solutions:
1 - Despite the customer feelings, we just scale the picture (keep
all content, just resizing it). The output sometimes will be very
ridiculous I guess because of resizing a landscape picture to a
portrait or square one. But that's mostly the easiest way to come up.
2 - Considering to image frame size on mobile view, and auto crop the
picture by picking the center area of the picture. As I said above,
it produced the non-sense picture after all.
3 - Informing customer, whenever they upload a picture, they have to upload 2 copies of it, 1 for desktop view and 1 for mobile view, and they're definitely responsible for the content displaying at front side. Tons of effort need to be spent by customers, but easier for development.
4 - Advanced feature: user can upload only 1 picture, we provide the
different view-ports and a cropper for them to decide how the image
displays on those after being cropped.
I don't have much experience in dealing with these stuff, and not sure how the world out there handling this case. As I see for now Wordpress is only requiring users to upload only 1 picture and it will automatically scale it (my 1st option). Does anyone have experience on this? Can you please share me your solutions and also your thoughts about my above solutions? Thank you.
you can build a simple web application for them to upload the picture and provide your client with a preview of how the pictures with look like for both desktop and mobile. in php, there is the GD library and it is quite easy to use for cropping and resizing.
Apply the 4th and the 1st option so you don't have to deal with it,
Crop and scale with the options you have AND let the customer decide if they want to change it and choose how the image is been displayed.
in case they ask you can say they have the option to fix it, in case they don't want to you already handle the best technological option.
Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.
I've just created a tshirt shop to put on my own website. A company called spreadshirt.co.uk (hereafter "SS") runs the shop. They allow me to embed their shop on my site via an iframe, and since they allow the CSS to be fully customisable through their admin panel I've got it looking pretty neatly integrated with my site.
The only catch is the iframe - I've set it to 2000 pixels high at the moment (just right for the longest pages). I'd rather have it resize for each page, but expect that to be "hard" so didn't bother.
Anyway, I've just put the page live, and put a test order through it. All is good, until....
...the "Verified by VISA" page. This motherhubbard turns up right at the end of the order process, and the HTML contained in it puts the little dialogue centred vertically in my iframe. I.e. nearly 1000 pixels down from the top - making less savy users think the page hasn't loaded (all they can see without scrolling down is a white background). I can't customise the CSS on this page like I can the SS pages, as this page isn't served up by SS.
Any clever ideas???
Many thanks people!
I'll put a link to my site if people want to see it, but assumed that might be seen as spammy and frowned upon.
I don't deal with iframes too much as i hate them, but i think you can still write to that document using javascript. Reason i say maybe is because its cross domain, but it should still work.
Check this post out
Resizing an iframe based on content
You could also check out
Resizing iframe to fit its content
and a jquery script:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
Again, I really don't know if this will work on a cross-domain website.