I feel like I must be missing something incredibly simple. Whenever I attempt to implement Stripe's Checkout feature on a mobile site, the payment button appears very, very small.
I stripped everything away that might be causing styling issues and then just started using their basic embedded form just to see and I still get this problem where it just doesn't appear optimized for a mobile format.
What am I missing here?
<html>
<form id="buy" action="backend/create_subscription.php" method="post">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_SOMEKEYHERE"
data-amount="2000"
data-name="Widget"
data-description="Some widget"
data-image="/img/marketplace.png"
data-locale="auto"
data-shipping-address="true"
data-label="Option 1"
data-panel-label="Subscribe"
data-bitcoin="false">
</script>
</form>
</html>
Image of the tiny button on mobile
This isn't a button issue, it's a scaling issue. You might want to try this in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
That should (probably?) help with scaling. You could also do a Custom integration and that will allow you to use whatever button you want to trigger it.
Related
I am very new to location based Web AR and I have never done any coding before so please bare with me if I am asking something very basic.
As described in the title I was learning, following this tutorial:
https://medium.com/chialab-open-source/build-your-location-based-augmented-reality-web-app-c2442e716564
When I use the Chrome browser on my ios device, the animated object showed up on screen but it is never stable in one place. Meaning it doesn't get larger/smaller when I approach it or walk away from it. And as I point my camera away from the location where it first show up, it would disappear for a second then show up again.
I tried to diagnose if this is because my device GPS is messed up by following the first answer under this question:
location-based Ar: position is not accurate
(I would have commented below but I dont have enough reputation yet)
I got visual of the text content but the text follow my device instead of staying in its place. It is always in this location of my screen and wherever I move it is always there. this is a screenshot of what it looks like
And the code currently looks like this.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>GeoAR.js demo</title>
<script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
</script>
</head>
<body style='margin: 0; overflow: hidden;'>
<a-scene
vr-mode-ui="enabled: false"
embedded
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<a-text
value="This content will always face you."
look-at="[gps-camera]"
scale= "50 50 50"
gps-entity-place="latitude: 42.45112; longitude: -76.48455;"
></a-text>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
</body>
Again I apologize in advance if there is any bad practice in this post, I am very, very new to coding and this! Thank you!
Newbie question from a UX designer been trying to get this working for 2 days now.
I am trying to test out matthew dove's inject script in codepen
https://github.com/Matthew-Dove/Inject
I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.
I have copied the example code provided by Matthew into the html panel.
But as you can see in the image above the website does not get injected.
My codepen is https://codepen.io/lisatw/pen/oNXxgMR
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>
<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>
<h4>Above this heading the world's first website will be injected</h4>
</body>
</html>
I have tried with and without the call to the .js library
<script src="./inject.js"></script>
Any help mightly appreciated.
When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:
<script src="./inject.js"></script>
Because right after that, CodePen automatically adds another script:
<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject#master/src/inject.js"></script>
But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952
Unfortunately, there is nothing you can do about it.
I have some Html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
</head>
<body>
Enter UserName <input type="text" name="user"><br>
Enter Password <input type="password" class="password-input" name="pass">
</body>
</html>
that I am running on browser after ctrl+shift+i in inspecor I want to override some other code in complete body tag.
in above after I dont want to see this body tag code some override code i want see.
is this possible?
This is not possible.
Hide Javascript
If your concern is having a tidier HTML because Javascript code takes too much space, just <script src="externalFile.js"></script>
If your concern is you want to hide your code, because you don't want others to read it and understand it, you could minify and obfuscate the code, for example with UglifyJS. However the inspector can undo the minification by prettifying the code. Obfuscation however cannot be totally undone depending on techniques used.
Hide HTML
If this question is not about javascript and you want to reduce the number of html lines:
<object data="externalHTMLFile.html"></object>
or
<iframe src="externalHTMLFile.html"></iframe>
There are also other ways.
But you cannot simply hide some html from the inspector or remove the ability from the user to open the external HTML file and read all the HTML.
For a simple use case example check out below:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>A Question for The Stackflow Community</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
</head>
<body>
<script src="../js/cool-awesome-jquery.min.js"></script>
<div id="container"></div>
<div id="call-to-action">DUDE YOU NEED TO BUY THIS STUFF!!</div>
<div id="menu">
<button id="home">HOME</button>
</div>
<script>yada yada yada....</script>
</body>
</html>
I know that browsers offer some native relationship with the container div, or at least they can. But I see this use case alot in code, where the container div is created then closed. No special CSS is being used for it within the global.css file in this example. As you can see, no style tags are being used to add anything special either. So what I am asking is, why do this? What purpose does it serve?
As a sidenote, the body tag is outside of the container tag, whereas I would assume the inverse to be true, at least to follow what is expected as clean semantic markup. Any knowledge or feedback from the community is truly appreciated. A good answer deserves a good upvote for sure. Thank you!
-Cheers,
Branden Dnae
too vague to pinpoint an exact answer, however overall the probable effect is to have the content outside of the container (typically) pinned atop the container (or at least pinned in front, even if hidden), ala position:fixed; either 100% of the time, like a banner/header, or perhaps only upon user interaction...so think like a lightbox.
I would like to help with QWebView. I'm trying to create a software that will open a web page, so far everything was right, but I came across an issue with QWebView. On double click with the mouse is zooming.
WebView {
id: webviewHelp
anchors.fill: parent
smooth: false
url: "http://stackoverflow.com"
objectName: "webView"
}
This happens because of the use of mobile devices that need disabled some features that bring comfort to small devices. Put on head this code
<head>
<meta name="viewport" content="width=device-width; initial-scale=1;
maximum-scale=1; user-scalable=no;target-densitydpi=72;" />
...
</head>
Is that your full code?
If not then check for a onDoubleClick property, I'm not familiar with Qt5 much but on Qt4 it had to be a child of a Flickable then the onDoubleClick property a child of the WebView calling heuristicZoom.