I am trying to add a button to a simple webapp, however i do not know how to make it work. I am using Node,express,ejs. I have two major issues:
What i want to make happen is that when i click the button,it should redirect me to a different page '/applist' which has a list of all my applications.
I am trying to add an image, which doesn't show and just alt text appears.Image is in the same folder as shown. Image size is 679x1178 pixels.
There is an auto-generated app.js which of course has all required modules included.
The files below are ( index.js , style.css, index.ejs ) respectively.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {
title: 'Welcome to AJ homepage'
});
});
module.exports = router;
#import url(https://fonts.google.com/specimen/Fjalla+One?selection.family=Fjalla+One);
body {
padding: 50px;
}
a {
color: #00B7FF;
}
h1 {
font-family: cursive;
position: relative;
font: ""
}
.btn {
position: relative;
bottom: 10px;
top: 10px;
}
p {
position: relative;
top: 30px;
font-size: 20px
}
<!DOCTYPE html>
<html>
<head>
<title>
<%= title %>
</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="modal-body row">
<div class="col-md-6">
<body>
<h1>
<%= title %>
</h1>
<button class="btn" type="button">My Applications</button>
<p>MY INFO </p>
</body>
</div>
<div class="col-md-6">
<img src="../public/images/arjun.jpg.jpg" alt="My Photo" class="img-responsive">
</div>
</div>
</html>
Try using an <a href="/my_applications"> instead of the <button>, you should still be able to style it as a button. Check this answer out:
How to create an HTML button that acts like a link?
, as it shows other options, like using a <form>.
Also, in your express code you will need to define the route you want to serve.
I'm not sure why you need a button in this scenario. I suggest using an ordinary anchor link:
My applications
<a href="/applist"> you can this anchor tag instead of button . this will be redirect to your applist page where you have define the route.
Related
I have one requirement of edit and preview the songs chords. Like in this example https://songbase.life/admin/example . Actually this built in react js but i want to implement same in jquery or javascript
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5"></textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
Once you open the link on the left side user is typing and preview is on right side...
$(document).ready(function(){
$('#editText').keyup(function(){
$('#editText).val();
$('#preview').html($('#editText).val());
})
})
I want to set the chords positing like mentioned in the above example.
Note :- i want songs text to be formatted in preview same way in the above example link
Copying over the text from the source to the destination is rather simple as #Swati mentioned, but formatting it will be significantly more difficult. It looks like the example provided uses Markdown for the baseline formatting and expands upon it for use with music.
Writing the tool to transform your text from pure text to Markdown from scratch is a bit overkill, so I would recommend using something like Marked to get you started. From there, you should be able to extend the tool for use in music as they do in the example using the marked.use() functionality.
Building in the entirety of this functionality is going to require significant effort, but to get you started I've added an example of how to use Marked below.
$(document).ready(function(){
$source.keyup(transformText)
})
const $source = $('#editText')
const $dest = $('#preview')
function transformText() {
const markdown = marked($source.val());
$dest.html(markdown)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5"></textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
Edit
I didn't have anything better going on tonight, so here's an example of how to manually replace chords. This does not cover stanzas, lines, or links, but it's the best I can do to get you started on the solution.
The basic flow is as follows:
Wait for the textfield to change, then trigger the transformation
Use Marked to handle the basic Markdown functionality
Look for chord word combinations with the format [chord]word
Fill in template and replace each instance of [chord]word with the template
Set the output to our new markdown
The CSS comes straight from the example website and requires a bit of knowledge regarding data attributes and pseudo-elements.
$(document).ready(function(){
$source.keyup(transformText)
transformText()
})
const $source = $('#editText')
const $dest = $('#preview')
function transformText() {
let markdown = marked($source.val());
markdown = replaceChordWords(markdown)
$dest.html(markdown)
}
function replaceChordWords (input) {
let markdown = input
const chordWordRegex = /\[(.*?)\]\w+/g
markdown = markdown.replaceAll(chordWordRegex, (input) => {
const chordRegex = /\[(.*?)\]/
const inputSplit = input.split(chordRegex).filter(x => x !== '')
return `<span class="chord-word">
<span class="chord" data-uncopyable-text="${inputSplit[0]}"></span>
${inputSplit[1]}
</span>`
})
return markdown
}
.chord-word {
display: inline-block;
padding-top: 17px;
height: 17px;
position: relative;
}
.chord {
color: #1f45ff;
white-space: pre;
position: absolute;
bottom: 17px;
font-weight: normal;
font-style: normal;
white-space: wrap;
}
[data-uncopyable-text]::after {
content: attr(data-uncopyable-text);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="InputTEXT">
<textarea id="editText" class="form-control" rows="5">
You can enter [C]chords in [Am]the ex[F]act place you want them [G]with squ[E7]are b[C]rackets like this.
</textarea>
</div>
<div id="preview">
//Preview here
</div>
</body>
</html>
so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>
I'm beginning with this whole coding thing (it's beautiful) but I just found myself with an issue.
There's landing page I found and I kind of copied, it has a button that works as a hyperlink to another page but instead of that button, I have the code for a style sheet, it's kind of like a form people have to fill. So you press the button and the form pops out.
I have the code of the original landing page and I also have the code for the form but I don't know how to blend them, please help.
The first one is the original button code that takes people to https://myimstrategy.com/50perday-2/. I want to replace that site for a form that pops out. That's the second code in the bottom, I don't know how to merge both codes. I attached an image of the original button. I don't want to delete it, I just want the form to pop out when I click on it.
Thank you very much for your help!
.el-content{
display: inline-block;
width: auto;
height: auto;
min-width: 894px;
min-height: 114px;
}
.ib2-button {
color: rgb(15, 15, 15);
background-color: rgb(25, 202, 6);
border-color: rgb(0, 174, 0);
border-radius: 5px;
text-shadow: rgb(147, 138, 138) 1px 1px 0px;
background-image: none;
min-width: 920px;
min-height: 123px;
width: auto;
height: auto;
font-weight: bold;
font-size: 80px;
}
<div class="el-content">
Claim Your Spot Now >>
</div>
<link href="//app.webinarjam.net/assets/css/register_button.css" rel="stylesheet">
<div style="margin:auto;width:300px;">
<div class="embedded-joinwebinar-button">
<button type="button" class="btn btn-default css3button" title="regpopbox_35246_b21043f77c">
<span>Register now</span>
</button>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="//app.webinarjam.net/assets/js/porthole.min.js" language="javascript" type="text/javascript" async></script>
<script src="//app.webinarjam.net/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script>
If you want to create a popup, you're going to want to use javascript.
This is typically referred to as a modal. Here is a link to a tutorial: How TO - CSS/JS Modal
You can use bootstrap modal, or add onclick="showForm()"
And then you put id="form" to the form. Then in the head tag put
<script>
function showForm(){
document.getElementById("form").style.display = "inline-block"; //It must have display: none, the form, and this will make it display
}
</script>
I couldn't find your image but I got it, you want to show a pop on a button click. You can simply provide a href like below:
<link href="jsFunctionName()" class="buttonClass">Open Form</link>
And try using jquery dialogue on link clicked via jquery. https://jqueryui.com/dialog/
e.g.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function jsFunctionName() {
$("#dialog").dialog();
} );
</script>
<div id="dialog" title="My Form">
<form>
</form>
</div>
I'm working on a project where, on the client side, the user would have to fill out an online survey and on the server side, the data is stored in a database. The survey itself consists of multiple pages, where each page is a form. So essentially, that single online survey consists of multiple forms.
I'm picking up right after where the person who created the online survey left off. The way she had it done was something like this:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="survey.css">
<script>
// when the user clicks the button on the first page, he/she is brought to a new page where the stuff inside the function is displayed
function Q2(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q3()'>Next</button>";
// same deal here, stuff in this function are displayed in a new page
function Q3(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q4()'>Next</button>";
// same as the two functions above
function Q4(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q5()'>Next</button>";
// keeps going until the last question
</script>
</head>
<body>
<!-- this is the first page when the file is opened -->
<h1>Meeting 1</h1>
<p id="Q">Some text...<br><input type="text" name="tweet" style='height: 50px;width: 500px;'><br><br>
<button type="button" onclick="Q2()">Next</button>
</p>
</body>
</html>
I have to store things in a database, and that's where things started getting confusing for me. I've done research online and I'm sure that rather than having each page/form be a function (Q2, Q3, etc.) in JS, it would be better to have each page be its own HTML form and send the data to a PHP file, where the connection and storing data to the database happens.
WHAT I WANT TO HAPPEN: Is it possible to have all the forms be written/stored in a single HTML file, and at the same time, have each subsequent form be displayed on the next page? If that's not possible, what should I do?
Here's some test code I created (currently displays both forms on the same page, which isn't what I want):
<!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>
<link rel="stylesheet" type="text/css" href="survey.css">
</head>
<body>
<div>
<h1>Meeting 1</h1>
<form name="form1">
<!-- Some HTML code goes here -->
<button type="button">Next</button>
</form>
</div>
<div>
<form name="form2">
<!-- Some HTML code goes here -->
<button type='button'>Next</button>
</form>
</div>
</body>
</html>
Thank you in advance!
you could use actually simply use jQuery and CSS to put all your forms in the same place one behind the other. However you'd have to use ajax to put the form info into your database. Do it as such:
$(".step1").show();
$(".step2").hide();
$(".step3").hide();
$(".step1").submit(function(e)
{
e.preventDefault();
$.ajax({
url : 'submission1.php',
data : { name : $(".step1").children("input[name='username']") },
method : 'POST'
})
.done(function(data)
{
$(".step2").show();
});
});
/** Repeat the same process with step 2 and 3 **/
Then your CSS could be as follows Your forms must be in a parent container:
.step1
{
position: relative;
top: 0;
left: 0;
z-index: 10;
}
.step2
{
position: relative;
top: 0;
left: 0;
z-index: 5;
}
.step3
{
position: relative;
top: 0;
left: 0;
z-index: 1;
}
Complete example here: https://jsfiddle.net/LkjmL43h/3/
I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:
http://hayageek.com/docs/jquery-upload-file.php
To make the dialog modal, you just need to create a div like this:
<div id="myOverlay"></div>
and style it like this:
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}
The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.
Making a dialog modal really is that simple.
So, using Ravi's code, you just show a DIV like this:
See This jsFiddle Demo
HTML:
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<div id="myOverlay"></div>
<div id="box">
<div id="box-inside-div">
<div id="fileuploader"></div>
</div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
<h1>Upload a File Page</h1>
<p>To upload a file, click the button below</p>
<input type="button" id="myButt" value="Upload" />
</div>
CSS:
/* #myOverlay on two lines for readability in this SO answer */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
jQuery/javascript:
$(document).ready(function() {
$('#myButt').click(function () {
$('#myOverlay').show();
$("#box").show();
$("#fileuploader").uploadFile({
url: "upload_recv.php",
fileName: "myfile",
onError: function(files,status,errMsg){
/* onError because (1) jsFiddle cannot do ajax */
/* AND (2) there is no upload_recv.php file! */
$('#myOverlay').hide();
$('#box').hide();
alert('The file is now on the server');
}
});
});//END mybutt.click
});
When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.
For more information on how to do that, see the demos on the HayAGeek page.
And finally . . . how to process the file on the server once uploaded?
This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php
On the HeyaGeek demo page, see Server Side at the top right.