Develop Reference

Error in button that transfers data to firebase in html,js

This button works:
<form id="contactForm">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Button with id guestAnswerIsNotComing_id does not work:
<button id="notConfirming_Button" onclick="document.getElementById('NotConfirmingArrival').style.display='block'" style="width:auto;" > no </button>
<div id="NotConfirmingArrival" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer" >
<span onclick="document.getElementById('NotConfirmingArrival').style.display='none'" class="close" title="Close Modal">×</span>
<p>Are you sure</p>
</div>
<div class="container" style="background-color:#f1f1f1">
<form id="contactForm">
<button id="guestAnswerIsNotComing_id" type="submit" onclick="document.getElementById('NotConfirmingArrival').style.display='none'" class="cancelbtn">yes</button>
</form>
</div>
</form>
</div>

Circles in a circular shape i.e 6 circles in a circle

Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>

Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%

How to implement signature pad in wordpress

I am trying to get signature pad to show up in my wordpress page.
I go to https://github.com/szimek/signature_pad and install the script. But nothing renders in wordpress. is there a specific way to make js work in wordpress?
Here is a js fiddle link of it: https://jsfiddle.net/szimek/jq9cyzuc/
*Ive added the following to header, and the html to the body (nothing happens) :
placed the following html
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>

I have created signature code, it's working fine. Take a look at demo.
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas width="664" height="235" style="touch-action: none;"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
</div>
<script src="https://szimek.github.io/signature_pad/js/signature_pad.js"></script>
<script src="https://szimek.github.io/signature_pad/js/app.js"></script>

Dynamic Survey with Javascript

I want to create a dynamic survery webpage with JavaScript.
I have 10 Questions which display types are set to "none" expect the first/actual questions displaytype is "block". Each question is a yes-no question. It's relevant which answer the user choose to see the next question.
I know how to build this static but I wanted a dynamic solution for this problem.
Can anybody help?
Here is a schema of my problem
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 Questions</title>
<script>
...
</script>
</head>
<body>
<header>A Dynamic Questionaire.</header>
<section>
<article>
<hgroup>
<h1>Questionaire</h1>
<h2>Anwer the questions in order as they appear.</h2>
</hgroup>
<div id="Question1" style="display:block;">
1.
<button type="button" id="btnYes1">Yes</button>
<button type="button" id="btnNo1">No</button>
</div>
<div id="Question2" style="display:none;">
2.
<button type="button" id="btnYes2">Yes</button>
<button type="button" id="btnNo2">No</button>
</div>
<div id="Question3" style="display:none;">
3.
<button type="button" id="btnYes3">Yes</button>
<button type="button" id="btnNo3">No</button>
</div>
<div id="Question4" style="display:none;">
4.
<button type="button" id="btnYes4">Yes</button>
<button type="button" id="btnNo4">No</button>
</div>
<div id="Question5" style="display:none;">
5.
<button type="button" id="btnYes5">Yes</button>
<button type="button" id="btnNo5">No</button>
</div>
<div id="Question5" style="display:none;">
6.
<button type="button" id="btnYes6">Yes</button>
<button type="button" id="btnNo6">No</button>
</div>
<div id="Question5" style="display:none;">
7.
<button type="button" id="btnYes7">Yes</button>
<button type="button" id="btnNo7">No</button>
</div>
<div id="Question5" style="display:none;">
8.
<button type="button" id="btnYes8">Yes</button>
<button type="button" id="btnNo8">No</button>
</div>
<div id="Question5" style="display:none;">
9.
<button type="button" id="btnYes9">Yes</button>
<button type="button" id="btnNo9">No</button>
</div>
<div id="Question5" style="display:none;">
10.
<button type="button" id="btnYes10">Yes</button>
<button type="button" id="btnNo10">No</button>
</div>
</article>
</section>
</body>
</html>

There are a ton of ways you could do this. A quick approach would be to put some information in the button that indicates where to take the user next. So here I've added a data-next value on each button that matches the id of the next panel to show, and I toggle a class in CSS to show/hide panels.
var buttons = document.getElementsByTagName('button'),
questions = document.getElementsByTagName('div');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.addEventListener('click', function() {
var target = this.getAttribute('data-next');
for (var j = 0; j < questions.length; j++) {
var question = questions[j];
if (question.id == target) {
question.classList.add('show');
} else if (question.classList.contains('show')) {
question.classList.remove('show');
}
}
});
}
div {
display: none;
}
.show {
display: block;
}
<div id="Question1" class="show">
1.
<button type="button" data-next="Question2">Yes</button>
<button type="button" data-next="Question3">No</button>
</div>
<div id="Question2">
2.
<button type="button" data-next="Question4">Yes</button>
<button type="button" data-next="Question5">No</button>
</div>
<div id="Question3">
3.
<button type="button" data-next="Question6">Yes</button>
<button type="button" data-next="Question6">No</button>
</div>
<div id="Question4">
4.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question5">
5.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question6">
6.
<button type="button" data-next="Question7">Yes</button>
<button type="button" data-next="Question8">No</button>
</div>
<div id="Question7">
7.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question8">
8.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question9">
9.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question10">
10.
</div>

Editing object with modal jhipster

I used JHipster to create my project and it has been pretty smooth sailing of late. However, I ran into an issue with editing objects on my main.html. I am able to successfully edit the post when I'm on the posts.html page that the router points to, but I am unable to do it with the exact same code on my main.html. I am able to call the information from the postController on my main page, and it is displayed adequately. I am, however, unable to make my data appear inside the modal popup. I know the information is being received by the controller because my console.log($scope.post) returns the object that I want to edit. However, that information is not transmitted to my modal. Any help appreciated.
Button that calls edit:
//inside postController and an ng-repeat of posts calling update function
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
Actual Modal Code:
<div ng-controller="postController">
<textarea class="form-control" rows="3" placeholder="Status update here..." data-toggle="modal" data-target="#savePostModal" ng-click="clear()"></textarea>
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="create()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Update function
$scope.update = function (id) {
$scope.post = Post.get({id: id});
$('#savePostModal').modal('show');
};
I know it's successfully calling this get function, but the data from the $scope.post isn't being used.

As it turns out, in order for a modal to work, it has to be in the same controller-div as the text that prints the button. I'm pretty sure this is because the scope on controllers is different if the div is different. Also, don't have a second modal with the same name for testing because it will inevitably fail because of the functions confusion over which one to use.
<div id="toBeUpdated" ng-controller="postController">
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
<li class="animate-repeat" ng-repeat="post in posts.slice().reverse() | checkboxAndFilter:search.$:search.author:search.name:search.id:search.text | limitTo: noPostsOnPage">
<div class="well ng-scope">
<div name="desktopPost" class="h4">
<input type="checkbox" name="checkered">  {{post.name}}   <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<div style="display: none" name="mobilePost" class="h4">
<div ng-click="postNameAlert(post.name);">
<div name="ellipse" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{post.name}}</div>
</div>
<input type="checkbox" name="checkered">  
<span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
  
<a class="pull-right" style="padding-top:7px" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<p>
<div ng-bind-html="trustHtml(post.text)" hashtagify term-click="tagTermClick($event)" user-click="tagUserClick($event)"></div>
</p>
<br> {{post.author}} on {{post.date_Written}}
<br>
<div name="desktopSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div style="display:none;" name="mobileSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="updateMob(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div class="animate-repeat" ng-repeat="summarized in filterID(post.id)">
<div class="animate-repeat" ng-repeat="new_post in getPost(summarized.child)">
<button class="pull-right btn btn-default btn-xs" ng-click="reversePostState(new_post.id, new_post.name, new_post.author)">
<span id="{{new_post.author}}" class="glyphicon glyphicon-plus"></span>
</button>
<div class="well ng-scope">
<h4>
{{new_post.name}}
<div id="{{new_post.name}}" style="display:inline;"> - {{new_post.author}}</div>
   <span ng-if="new_post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeElemOnClick('id_search');changeid(new_post.id);">{{new_post.id}}</a>
</h4>
<div id="{{new_post.id}}" style="display:none;">
{{new_post.text}}
<br> {{new_post.author}}
on {{new_post.date_Written}}
<br>
</div>
</div>
</div>
</div>
</div>
</li>
<center ng-if="checkForPosts()">
<button class="btn btn-default" ng-click="incrementLimit()">
<span class="glyphicon glyphicon-arrow-down"></span>Show More Posts
</button>
</center>
</div>