We've been taking payments online with 3D Secure enabled but a while ago we were getting so much negative feedback from mobile users because the Verified by Visa form in an iFrame was too big for the screen that we turned it off. I've been told that this is no longer financially viable and i need make it work properly for mobiles.
I've wrestled with numerous 'responsive iFrame' solutions but it seems to come down to the iFrame contents that are the issue (tables with hard-coded widths), which obviously I have no control over.
I've not found anything about a mobile-friendly solution after a few hours on the web.
Does anyone know if there is a responsive way to make 3D Secure usable on an iPhone for example?
I think the only way to solve this is to set the iframe’s width to accommodate the fixed width tables (400px should do it) and then apply some CSS to the iframe to scale the page so it fits the mobile screen size.
Here’s an example:
<iframe width="400px" height="500px" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="SagePayURL" style="-webkit-transform:scale(0.7);-moz-transform-scale(0.7);-webkit-transform-origin:top left;-moz-transform-origin:top left;"></iframe>
Honestly, I don’t know why VISA or Mastercard can’t have a desktop and mobile version of their 3D secure page.
Related
I use the Facebook Open Graph to publish URLs from a website to their corresponding Facebook Page. The main image is specified using the Open Graph tag og:image. Sometimes the images show up on Facebook as a very zoomed-in, and granular/pixelated. Upon further examination, the images which do poorly appear to have been rotated (I noticed this because a Lightbox plugin I use isn't correctly rotating them, but all other software: browser, Mac Preview, Facebook are).
An example page from the site with the problem (click to zoom and see the orientation issue in that 3rd party library but that's another matter). This issue I'm trying to resolve on Facebook can be seen by using the Facebook Debugger against this page. (As a side-note, it's oriented correctly).
At first I thought I could perhaps fix this with og:image:width and og:image:height, but it had no effect (it did fix a different the pre-caching/crawling issue).
Note that providing the raw image URL directly into the Debugger works fine; the problem is only when providing this URL via the Open Graph tags.
My one workaround idea is to use my image processing library (sorl-thumbnail) to produce a version of the image which FB might like better.
What is the specific characteristic of these rotated images causing a problem and how do I work around it?
Turns out this is a legitimate Facebook bug. Kudos to them for responding and addressing it promptly.
https://developers.facebook.com/bugs/1080037355413437/
The way YouTube recommends you load a video is like so:
<iframe id="ytplayer" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" allowfullscreen>
This loads the video as an iframe so they can detect iOS or other devices and deliver a swf or HTML5 player depending on what's necessary.
These snippets come from their Player API Demo. https://developers.google.com/youtube/youtube_player_demo
Unfortunately, in IE6-9 this causes serious slowdown - the browser seems to freeze up for as much as 5 seconds, even when the player is the only thing on the page and isn't set to autoplay. In addition, there's a touch of irony to this "demo" in that they aren't at all loading the player the way they recommend, and instead loading it via a custom written Google AppEngine/AppSpot app they put together - and it actually does load more performantly in the demo in IE than when one uses Google's recommended snippet.
Have others run into this? Is there a good solution?
This question is more philosophical than technical.
I've trained myself as a web developer back when web developers were called webmasters and my tool of choice was FrontPage, moving onto Evrsoft 1st Page 2000.
That was the last time I used an HTML image map.
Now it's HTML5, AJAX, vector canvasses, CSS 3D, jQuery, local storage, touchscreen Safari, you name it. The image map has faded into an obscurity where not even Google comes up with too many relevant results; a mandatory W3C Schools entry and some forum posts from 2004.
Obviously creating a website navigation or similar triviality using an image map was a bad idea back then and it certainly is inexcusable today.
But right now I have a task to create a polygon clickable area on top of a div with a background image.
I'd have no issue doing this in image map since it seems like it was designed for a use case exactly like this, and while I've done no tests, I couldn't imagine any browser dropping support for an element that worked beautifully for years. But I can't help but think that there must be a better way to do this today.
My web creation philosophy is to develop for IE5.5, and then design for Chrome edge. This means that the site first needs to work on a basic level on even the most antiquated browser, and then start adding JS & CSS to make it more beautiful, more usable, faster, simpler, friendlier and better.
As such, while I know I could do a canvas in Raphaël and add all kinds of snazzy hover effects and things, I think making functionality as simple as this shouldn't require a 89 kb (or X kb) JS library. Or even JS at all.
I don't know if CSS3 has capabilities to define polygonal areas, but while recognizing the great possibilities introduced by CSS3, I prefer keeping anything defined there as non-essential flair that would degrade gracefully.
So in today's webdev world, what would be the most cross-browser way to define a polygonal click area (preferably in a way that's grabbable by a jQuery .hover(), or at least a CSS :hover), that isn't dependent on JavaScript or CSS attributes available in a minority of browsers? Is image map really the only way to do it? What of mobile devices?
Why is using image maps for navigation inexcusable? It's a tool like any other; it has a time and place. Using imagemaps with javascript enhancements is backward compatible, degrades gracefully, and has 100% browser support. They don't need a plugin like flash.They've been supported practically since the dawn of the web browser. Just because something's old doesn't mean it isn't useful; quite the opposite, it means it's well supported.
I wrote a jquery plugin called ImageMapster to add effects to imagemaps so you could create interactive images without using flash. It would be easy to implement a tool that had the same functonality without Javascript support by replacing with a list in those cases. Personally, I think trying to write for the web without javascript is like trying to drive a car without tires. 99% of the web doesn't work without it any more. This isn't 1995. But if you really are concerned, the nice thing about imagemaps is the basic navigation functionality still works. There's no way to accomplish that just with CSS -- not even CSS3 if you have irregular shaped areas.
I'm extremely new to Media Queries so I was playing with the min-width: attributes with my Firefox 12.0 and noticed that it just wasn't working. After some playing around and after experimenting with this lovely website
http://barrow.io/lab/media-query-viewport/
I found out that the minimum min-width that my Firefox supports on my machine (it's an XP box) is 615px. Why? I'm trying to play with Media Queries so that I can make a website that works well on many devices as well as desktops. This includes devices that are 480 and 320 pixels wide. With Firefox not allowing me to test the smaller widths it's going to seriously affect my development.
Is there any kind of a work-around for this other than trying a different browser?
Thanks.
EDIT: Now that my Firefox has gone through a few upgrades (now at v22) this is not longer a problem. I'm glad it got fixed.
As of this: http://support.mozilla.org/en-US/questions/772847#answer-125895,
Firefox supports no more than 480 width, so if you want to test for 320 px, you must use a different browser. I would point out that if you want to test smartphones on your site, you should be using smartphone browsers on smartphone hardware... not just desktop browsers set to really small resolutions, which is what it sounds like you were trying to do.
There's a simple workaround: load the site in an iframe of your desired width.
Oh, and as for why, the behavior you observe is due to the Firefox user interface not shrinking down below a certain width for some reason. Often due to extensions mucking with the UI.
Use the Web Developer toolbar extension and you can see a selection of common screen sizes by selecting Resize > View Responsive Layouts
Here is the simple solution
install chromEditPlus Plugin from here http://webdesigns.ms11.net/chromeditp.html
And then Goto Tool-> ChromEdit Plus-> ChromEdit
select userChrome.css pannel
copy and pate below code Save then restart
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#main-window:not([chromehidden~="toolbar"]) {
min-width: 200px !important;
}
Thus solved the Problem this made your windows minimun to 200px
Thanks
Created a website, looks pretty solid on the desktop. (http://foo.com) Used an .htaccess redirect to send those using mobile browsers to subpage (http://foo.com/m.html). Redirect is working like a charm.
My problem is that one image (and for that matter, the background color) doesn't display on the mobile page, on any mobile browser. I've tried reformatting it (.png, .jpg, .gif), resizing it (down to 55p x 44p). It is the only image on the page. I've tried using a css stylesheet specifically for the mobile subpage, I've tried not using a stylesheet at all and simply putting the image in the body. Nothing works. I've searched for an answer but all I can find is 'why doesn't my wallpaper display on my mobile phone', which doesn't help at all.
Anyway, if someone knows what I'm doing wrong, I'd really appreciate it. Thanks all!
I've got the same problem, I've done a very simple page, with a single image inside, surfing there with desktop was all right, while going there with a mobile makes the image invisible, it takes the place, but without display, like with "visibility:hidden";
after some tries, i've noticed that the image was saved in a CMYK color space, I've converted the image in RGB color space and then all goes right.
mobile browsers seeams to not manage the CMYK image versions...
Look at CSS part:
background-image:('background.gif')
Do You think all is OK here? Because I think it's not...
https://developer.mozilla.org/en/CSS/background-image