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.
Related
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.
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
So, I am trying to make a Gamebook that takes the players input in a form and then, when clicked, shows the text. Depending on what the player has answered, the game will reply, and so on. It has the idea of this game: https://jsfiddle.net/MacroG0D/9g1130pm/
So, below you can see that I do understand how to add text, using click and append. I just can't figure out how MacroG0D (in the fiddle) applied it to his game. Because I can't get it to work.
I also want to have the players-name shown as well and have this interaction. Since I can't seem to get it to work, it feels like it would be stupid to write the whole game first since I can't test it if this doesn't work.
Can someone maybe explain how it was done in the jsfiddle or have some tips?
$(document).ready(function() {
$("#button").click(function() {
var toAdd = $("input[name=checkListItem]").val();
$(".list").append('<div class="item">' + toAdd + '</div>');
});
});
h2 {
font-family: arial;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height: 20px;
width: 70px;
background-color: #cc0000;
font-family: arial;
font-weight: bold;
color: #ffffff;
border-radius: 5px;
text-align: center;
margin-top: 2px;
}
.list {
font-family: garamond;
color: #cc0000;
}
<!DOCTYPE html>
<html>
<head>
<title>Gamebook</title>
<link rel="stylesheet" type="text/css" href="CODEC.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="CODEC.js"></script>
</head>
<body>
<h2>The Dutch Golden Age</h2>
<p>Contains an introduction story </p>
<p>Are you ready to play the game?</p>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div id="button">Answer</div>
<br/>
<div class="list"></div>
</body>
</html>
So I'm making a sort of blog posting system or TODO list, however you want to call it.
I want that the following can happen / is possible:
[Working] The user types something in the textarea
[Working] The user clicks on the button.
[Working] A new div will be created with the text of the textarea.
[Working] The textarea will be empty.
[Not Working] The user has got the choice to delete the post by clicking the 'X' on the right side of each '.post' div.
BUT: If I click on the button when there's nothing in the textarea, there appears an empty div, with only an 'X' close button, no background color either. They appear on the same line as the previous message, so you can get a lot of 'X's next to each other.
AND: Clicking the 'X' close button doesn't do anything. No errors in Firefox console.
If it's not clear enough, run this JSFiddle, click the button and I think you'll understand what I mean:
JSFiddle
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="blog">
<h1>Blog post application</h1>
<div id="post-system">
<textarea id="poster" rows="5" cols="50" placeholder="Update status."></textarea>
<div id="button">Post</div>
<div id="posts">
</div>
</div>
</div>
</body>
</html>
jQuery Script:
<script>
$(document).ready(function () {
$('#button').click(function () {
var text = $('#poster').val();
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('.close-post').click(function () {
('.close-post').parent().hide();
});
});
</script>
CSS:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#blog {
background-color: blue;
margin: 50px;
padding: 50px;
text-align: center;
border-radius: 10px;
color: white;
display: block;
}
#poster {
color: default;
resize: none;
border: 1px solid black;
text-decoration: blink;
font-size: 20px;
display: inline-block;
position: relative;
border-radius: 5px;
border: 2px solid black;
padding-left: 10px;
padding-top: 5px;
}
#button {
background-color: #00FFFF;
color: white;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
width: 50px;
float: left;
}
.post {
background-color: white;
color: blue;
margin-top: 20px;
width: auto;
display: block;
}
.close-post {
margin-right: 10px;
float: right;
color: red;
cursor: pointer;
}
You appear to have two issues:
1) You don't want a post to be created if the textarea is empty
Simple fix . . . check to see if it is empty, before calling the logic to add the new post (and use jQuery's $.trim() to account for only blank spaces):
$('#button').click(function() {
var text = $.trim($('#poster').val());
if (text !== "") {
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
}
});
2) The 'X' buttons are not closing the posts
This also should be a pretty easy fix . . . the reason that they are not working is because the 'X' buttons don't exist when the page is loaded so $('.close-post').click(function() { is not binding to them on page load. You will need to delegate that event binding, so that it will apply to the 'X' buttons that are dynamically added after the page is loaded.
Now, not knowing what version of jQuery that you are using (I can't access jsFiddle from work), I'll point you to the right place to figure out the correct way to do it: https://api.jquery.com/on/
If it is jQuery 1.7 or higher, you would do it like this:
$("#posts").on("click", ".close-post", function() {
$(this).parent().hide();
});
If your version is earlier than that, then investigate the jQuery .delegate() and .live() methods to determine which is the right one to use for your code..
Try this:
$(document).ready(function() {
$('#button').click(function(event) {
event.preventDefault();
var text= $('#poster').val();
if (text === '') {
alert('Nothing to post!');
return;
}
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('#posts').on('click', '.close-post', function() {
$(this).closest('.post').fadeOut();
});
});
JSFiddle
The way you are doing this, the user will only ever see what they are posting - if you're trying for a chat type where users talk to each other then you will need to store what is being typed on the server side and refresh the screen using something like ajax
but in response to your question, you need to bind the close click like this:
$( "#posts" ).on( "click", ".close-post", function() {
$(this).parent().hide(); // $(this) is the clicked icon, the way you did it above wouldn't as if it had the dollar, it would close all .close-post parents
});
See the part about delegated events: http://api.jquery.com/on/
I am making a web app for the user to create a simple orgchart. I don't even have the lines connecting the nodes yet, but I am using text areas. I found a very useful autosize() plugin that is great for adding an extra row when the width is taken up. Is there a way to make it so that if the user only uses one line, the autoresize will shrink the width to wrap around the text?
I was trying to figure out how to do the jsfiddle but I dont know how to add more than one javascript (for the plug-in) so Ill just put my jquery code at the bottom of the plug-in and put the plug-in at in the javascript area in the jsfiddle
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathway Builder 2.0</title>
<link rel="stylesheet" href="PathwayBuilder2.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="PathwayBuilder2.js" type="text/javascript"></script>
<script src="plug-ins/autosize.js" type="text/javascript"></script>
</head>
<body>
<div id="Pathway">
<div class="whole">
<div class="text_display">
<textarea class="text_field_not_selected"></textarea><br />
<input type="button" class="add_child" value="+" />
</div>
</div>
</div>
</body>
</html>
javascript/jquery
$(document).ready(function() {
$('textarea').autosize();
});
$(document).ready(function() {
$('.add_child').live({
click: function() {
var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
$(this).closest('.whole').append(new_child);
$('.text_field_not_selected').autosize();
}
});
});
$('textarea').live('focusin blur', function() {
$(this).toggleClass('text_field_not_selected');
});
css
body {
margin: 0px;
padding: 0px;
text-align: center;
}
#pathway {
display: block;
}
.whole {
text-align: center;
display: inline-block;
vertical-align: top;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
textarea {
min-width: 2em;
text-align: center;
}
textarea:focus {
resize: none;
}
.text_field_not_selected {
resize: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 3px 5px #444;
-moz-box-shadow: 0px 3px 5px #444;
-webkit-box-shadow: 0px 3px 5px #444;
}
.add_child {
margin-bottom: 25px;
}
here you go working demo : http://jsfiddle.net/YVEhr/30/ (more apt)
or http://jsfiddle.net/YVEhr/1/
Please let me know if thats what you want, I am happy to help out. took me a bit to got it (i.e. resizing idea) :)
Edit Okies I got it now (Phew) Please feel free to play around with the css or you can have 'row=something` to start with, I have shared some links for further help. :)
Demo http://jsfiddle.net/YVEhr/30/
Resizing the textarea to fit the screen: good link: or you can also look into this man: http://archive.plugins.jquery.com/project/TextFill
Jquery Code
//inital resize
resizeTextArea($('textarea'));
//resize text area
function resizeTextArea(elem){
// alert(elem[0].scrollHeight + ' ---- ' + elem[0].clientHeight);
elem.height(1);
elem.scrollTop(0);
elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());
}
//'live' event
$('textarea').live('keyup', function() {
var elem = $(this);
// alert('foo');
//bind scroll
if(!elem.data('has-scroll'))
{
elem.data('has-scroll', true);
elem.bind('scroll keyup', function(){
resizeTextArea($(this));
});
}
resizeTextArea($(this));
});
Please let me know if thats what you want.
Explanation
Just need to bind new etxtareaclass to .autosize() function and rest you can see it in jsfiddle.
Dont forget to accept the answer & if you like you can use this solution without using any plugin: jQuery - Building an AutoResizing TextArea that Doesn't Flash on Resize
Anywho this will work, hope this helps and have a nice one, cheers!
JQuery Code
$(document).ready(function() {
$('.add_child').live({
click: function() {
var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
$(this).closest('.whole').append(new_child);
$('.text_field_not_selected').autosize();
}
});
});