I have an HTML file where I added code like described here:
https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_javascript
So my HTML code looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
<style>
apple-pay-button {
--apple-pay-button-width: 140px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 5px;
--apple-pay-button-padding: 5px 0px;
}
</style>
</head>
<body>
<apple-pay-button buttonstyle="black" type="plain" locale="en">Check out</apple-pay-button>
</body>
</html>
When I open the HTML file in Chrome or Safari on my MacBook Pro it does not show the button. There are no JavaScript errors in the console either.
How can I make the Apple pay button show in the browser. I specifically need the Check out button with the Apple logo.
I have tried adding display: initial; inside the
apple-pay-button {
--apple-pay-button-width: 140px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 5px;
--apple-pay-button-padding: 5px 0px;
}
code, and it worked for me.
It stays like this after adding it:
apple-pay-button {
--apple-pay-button-width: 140px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 5px;
--apple-pay-button-padding: 5px 0px;
display: initial;
}
So the reason is basically it has a display none/hidden somewhere.
I think you will have to modify that display for it to fit your needs.
Related
Neither in the IDE when I preview does the button click nor in the various browsers I used. (Mozilla, Chrome)
I want the button to click but I can not do it although the IDE does not get an error. Take the following piece of code:
function increment() {
console.log("The button was clicked")
}
increment()
html,
body {
margin: 0;
padding: 0;
}
button {
border: none;
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
width: 200px;
margin-bottom: 5px;
border-radius: 5px;
}
#increment-btn {
background: darkred
}
<!DOCTYPE html>
<html lang="el">
<head>
<title>Page Count</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>People enter:</h1>
<h2 id="count">100</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
in your Javascript file don't call the function again. as you are already calling it on button,
i mean on button you have added " onclick " handler it should work just fine. just remove last line in Javascript file
Problem Statement:Create a web page with a paragraph, which has a link at the end. If you click on the link, it slowly fades into(about 1.5 sec a #FF0000 (red)block over the text and with a #FFFF00 (yellow)text on the top.
My written HTML code is below:
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("[href]").click(function(){
$("p").hide();
$("#div1").fadeIn("slow","swing");
$("#div1").fadeIn(15000,"swing");
$("div").text("WELCOME GUYS!")
});
});
</script>
<style>
p{
width: 400px;
height: 90px;
}
div{
width: 550px;
height: 65px;
text-align: center;
font-size: 36px;
color: #FFFF00;
}
#div1{
width:400px;height:90px;display:none;background-color:#FF0000
}
</style>
</head>
<body>
<p>
Machine learning is a type of artificial intelligence (AI) that provides
computers with the ability to learn without being explicitly programmed.
click! </p>
<div id="div1"></div>
</body>
</html>
My error which i have to rectify:-
Should have got an 'p' component
false
What should i try now??
Works fine for me. No errors whatsoever in the log. Fades In the div1 . The only problem I see is that You have 2 separate fadeIn functions right after eachother and only the first one is being used.
Okay, so, I'm using JQuery to show/hide a 'Processing' div element on my page. Below is the basic code:
function ShowLoading(){
$(divLoadingPanel).show();
}
function HideLoading(){
$(divLoadingPanel).hide();
}
Inside of my various Javascript functions I call ShowLoading() and HideLoading() as necessary. When viewing the page in FireFox, everything works correctly. When viewing it in Chrome, the loading panel is never seen. HOWEVER, if I debug and break at the line after the panel should be
displayed, it's there. It will display fine when walking the code manually, but not if I don't use a breakpoint and the debugger. That's got me baffled. Here's the code for the div itself:
<div id="divLoadingPanel" class="Loading_Panel" style="display: none">
<br>
<img src="./images/8.gif">
<br><br>
<font class="Loading_Text">Processing...</font>
</div>
And, finally, here's the class info for the panel:
.Loading_Panel {
position:fixed;
top: 50%;
left: 50%;
width:300px;
height:150px;
margin-top: -75px;
margin-left: -150px;
background: #E9F2FA;
border-radius: 10px;
border: 1px solid #1C4E7C;
}
Any help would be appreciated.
Change your code to:
function ShowLoading(){
$("#divLoadingPanel").show();
}
function HideLoading(){
$("#divLoadingPanel").hide();
}
The question says it all. I'm trying to make the example under examples/hash/ in the page.js examples work the same way it does, only using the { hashbang: true } option, but no avail.
I've also tried setting <base href="/hash/">, but that seems to get into an infinite redirection. After that, removing page.base('/hash') seems to do the trick, but then the location bar displays http://localhost:4000/hash/#!/hash/ and the # and #subsection links stop working properly.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Hash</title>
<style>
body p {
color: #333;
font-family: verdana;
}
#sections p {
height: 500px;
margin: 30px;
padding: 30px;
line-height: 40px;
background-color: #eee;
border: 1px solid #ccb;
font-size: 30px;
}
#sections p a {
display: block;
float: right;
font-size: 14px;
}
</style>
<script src="/page.js"></script>
</head>
<body>
<h1 id="top">Hash</h1>
<ul>
<li>#</li>
<li>#subsection</li>
<li>section?name=tana</li>
<li>section?name=tana#subsection</li>
</ul>
<div id="sections">
<p><strong>A</strong>top</p>
<p><strong>B</strong>top</p>
<p id="subsection"><strong>C</strong>top</p>
</div>
<script>
page.base('/hash');
page('/:section', section);
page();
function section(ctx, next) {
console.log('path: ', ctx.path);
console.log('querystring: ', ctx.querystring);
console.log('hash: ', ctx.hash);
console.log(' ');
}
</script>
</body>
</html>
How can I do this ?
Thanks
I'm having the same problem and couldn't find a solution. What I ended up doing was use a hacky workaround.
You can push the correct version of your url using history.pushState if you don't have to support old browsers.
history.pushState('','',location.pathname + location.search);
This cosmetically fixes the problem, but deep linking to complex paths will require a bit more logic.
I got the code from here, the main solution by rossipedia:
fixed sidebar until a div
Here's my Tumblr page and the part of the code the script is influencing (main is replaced with content):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
<style type="text/css">
#sidebarwrap {
margin: 0 0 1.5em;
width: 16.2em;
float: left;
position: relative;
}
#sidebar {
margin: 0 0 1.5em;
width: 16em;
height: 570px;
position: absolute;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer {
border-top: 4px solid {color:Footer Border};
background: {color:Footer Background};
color: {color:Background};
clear: both;
margin: 0;
overflow: auto;
padding: 0 0.5em;
}
#content {
margin-bottom: 4.5em;
margin-left: 18.5em;
min-width: 500px;
min-height: 550px;
}
</style>
</head>
Body
<body>
<div id="contain">
<div id="sidebarwrap">
<div id="sidebar">
...Stuff...
</div>
</div>
<div id="content">
...Stuff...
</div>
</div>
<div id="footer">
<div id="footer-container">
...Stuff...
</div>
</div>
I then included the the script right before the /body as so:
<script type="text/javascript">
...Script...
</script>
I keep spell checking and making sure everything is in order, but it all just won't work. At least not for that JS. The other JS's I used work just fine... The script is supposed to make my side bar scroll with the user and then stop right before overlapping the footer. Yet, the script acts likes its not even there, the sidebar doesn't move a single inch...
Heck, I even tampered with the original on its Fiddle page to make it the same layout and ordering as my page, and it still worked just fine.
Am I missing something? Everyone keeps talking about JQuery, and I'm not entirely sure what that is or if I'm supposed to use it... If someone could help me see what I'm doing wrong, I'd really appreciate it! :'D
It looks like you do need to load jQuery on your page to use the code you added. jQuery is a JavaScript library; it provides the "$" function.
To load jQuery in your page, add this before your fixed sidebar code:
<!-- Note that we have a closing tag right after the opening tag here. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Your code here
</script>