I want to know how get an input from search bar
and how to replace image in div
I try to create a simple website to get the picture and then show up because i don't want to download each picture and merge in photoshop
This is i have try.
p.s. It's my free time to explore how to use html css and javascript.
P.s. No need to read my css. i just want some suggestion to get data by using javascript
Thank you.
function getInput() {
var input_symbol = get input from search bar
var input_symbol = input_symbol.concat(*BK);
/***** after that use the value to get data from this website
****** by 5 periods 30min 120min day week month
http://www.investorz.com/investorzChart.php?
mode=pc
&Provider=DDC
&symbolnsources=input_symbol
&Size=1200*1080
&End=20170124
&Start=
&period=Monthly //weekly //daily //Minutely
&interval=1 //120 and 30 (for Minutely period)
&Cycle=MONTH1 //WEEK1 DAY1 //MINUTE120 MINUTE30 (for Minutely period)
&Type=3
&ticket=1
&Scale=0
&EMA=5;10;25;50;75;200
&MA=
&OVER=;;;;
&IND=RSI(7);MACD(12,26,9);;;
&COMP=
&ShowBar=100
&max=400
&Skin=InvestorLight
&Layout=2Line;Default;Price;HisDate
&Width=1
&TimeStamp=21;50;1485183010.73 //current time
*************************************************** then replace all of 5 divs /
}
body, html {
padding: 3px 3px 3px 3px;
background-color: #d8dbe2;
font-family: Verdana, sans-serif;
font-size: 11pt;
text-align: center;
}
#custom-search-input {
margin:0;
margin-top: 10px;
padding: 0;
}
#custom-search-input .search-query {
padding-right: 3px;
padding-right: 4px \9;
padding-left: 3px;
padding-left: 4px \9;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#custom-search-input button {
border: 0;
background: none;
/** belows styles are working good */
padding: 2px 5px;
margin-top: 2px;
position: relative;
left: -28px;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #000000;
}
.search-query:focus + button {
z-index: 3;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 2px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
img {
max-width: 800px;
height: auto;
width: auto\9; /* ie8 */
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="container">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class=" search-query form-control" placeholder="ADD SYMBOL" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button" onclick="getInput();">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<table>
<tr>
<td>
<div id="img1"><img src="img1.png"></div>
</td>
<td>
<div id="img2"><img src="img2.png"></div>
</td>
<td>
<div id="img3"><img src="img3.png"></div>
</td>
</tr>
<tr>
<td>
<div id="img4"><img src="img4.png"></div>
</td>
<td>
<div id="img5"><img src="img5.png"></div>
</td>
</tr>
</table>
</body>
</html>
Related
Unable to render borders properly in xhtml2pdf. It is applying to individual elements.
Here is invoice template for rendering:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SRS Mess | Invoice</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
body{
font-family: 'Poppins', sans-serif;
user-select: none;
}
/* Keeping paragraph together */
p{
margin: 0;
-pdf-keep-with-next: true;
}
*,
::after,
::before {
box-sizing: border-box;
}
#media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
.container{
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: 7.5rem;
padding-left: 7.5rem;
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.text-danger {
color: rgba(220, 53, 69, 1) !important;
}
</style>
</head>
<body>
<div class="container mt-2 mb-2" style="background: rgb(237, 237, 255); border-top: 2px solid black; border-bottom: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; border-radius: 1rem;">
<div class="text-center mt-3">
<img src="{{ST_ROOT}}/logo.png" alt="" height="200" width="200">
<p class="mt-2" style="font-size: 1.5rem; color: orange;">SRS Mess</p>
<br>
<p style="font-family: 'Merriweather', serif; font-size: 2rem; text-decoration: underline;">INVOICE</p>
<p style="font-size: 1.5rem; font-weight:bold; color: green;">Monthly Mess subscription of Rs. {{amount}} /- </p>
</div>
<br>
<div class="details">
<p><strong>Name: </strong>{{name}}</p>
<p><strong>Email: </strong>{{email}}</p>
<p><strong>Mobile: </strong>{{mobile}}</p>
<p><strong>Hostel: </strong>{{hostel}} {{room}}</p>
<p><strong>Branch: </strong>{{branch}}</p>
<p><strong>Date: </strong>{{date}}</p>
<p><strong>Time: </strong>{{time}}</p>
</div>
<br>
<div class="subscriptions text-center" style="border: 2px solid green; background-color: #e9ffe9;">
<p class="text-danger" style="font-size: 1.5rem;">Mess Subscription</p>
<p><strong>Start date: </strong>{{start_date}}</p>
<p><strong>End date: </strong>{{end_date}}</p>
</div>
<br>
<div class="footer">
<p>Thank you for taking the monthly mess subscription! <br> We hope that you will enjoy our meal!</p>
<p>If you have any issues, please contact us here</p>
</div>
</div>
</body>
</html>
This is the render_to_pdf function:
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result, link_callback=fetch_resources)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
Downloading the pdf by:
pdf = render_to_pdf('invoice.html', usr_data)
return HttpResponse(pdf, content_type="application/pdf")
When we render the pdf it looks like this:
Rendered PDF
But by HTML template it should be:
invoice.html
So I want to render the HTML template as it is. You can see that the borders are been applied to all the individual elements in the tag. It should not happen. So please let me know the solution for this.
Thanks in advance !!
What I'm Doing
I am creating a picture framing calculator using HTML, CSS, and JavaScript.
What the Calculator Solves
The following are example user inputs:
Frame Width (wf): 16
Frame Height (hf): 20
Picture Width (wp): 11
Picture Height (hp): 17
Mat Overlap (o): .25
The equations for my calculator are:
Width = (1 / 2) * (hf - hp + o) = 1.625 which equates to the <div id="width">
Height = (1 / 2) * (wf - wp + o) = 2.625 which equates to the <div id="height">
The Code
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
/*Fieldset and legend */
fieldset {
margin: 2em 0;
padding: 1em 2em;
border: solid 1px #ccc;
border-radius: 6px;
min-width: P 200px;
}
legend {
font-size: 1.25em;
padding: 0 .25em;
color: #999;
}
/* Labels */
label {
display: block;
margin-top: 1em;
}
.checks label {
margin-top: 0;
}
label:first-of-type {
margin-top: 0;
}
/* Inputs and textarea */
input {
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
input[type="number"],
input[type="text"] {
width: 15em;
background-color: #D3D3D3
}
textarea {
min-height: 8em;
min-width: 100%;
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
/* radio buttons and checkboxes */
.checks {
margin-bottom: 1em;
}
.checks p {
margin-bottom: 0;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
padding-top: 0;
margin-top: 0;
}
input[type="radio"] {
margin-left: 1.5em;
margin-right: 0;
}
input[type="radio"]:first-of-type {
margin-left: 0;
}
#dvemail {
display: none;
}
#chkYes:checked~#dvemail {
display: block;
}
/* Submit Button */
input[type="button"] {
padding: .5em 1em;
border-radius: 6px;
background-color: #333;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .8em;
}
/* Large screen rules */
#media screen and (min-width: 430px) {
legend {
font-size: 1.75em;
}
fieldset {
width: 40%;
min-width: 320px;
margin: auto;
}
.checks label {
display: inline-block;
padding-top: .5em;
margin-top: 0;
margin-right: .5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form id="frm1" action="form_action.asp">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script>
function calc()
{
var wf = document.getElementById('wf').value
var hf = document.getElementById('hf').value
var wp = document.getElementById('wp').value
var hp = document.getElementById('hp').value
var o = document.getElementById('o').value
var width = (1 / 2) * (hf - hp + o);
var height = (1 / 2) * (wf - wp + o);
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;
}
</script>
<center>
<div style="width:300px;height:300px;border:1px solid #000;">
<center>
<div id="width"><div id="height"></div></div>
</center>
</div>
</center>
</body>
</html>
The Problem & What I've Tried
My code is able to display the Width which is <div id="width"> on the resulting rectangle. However, I cannot display the Height which is <div id="height">. Here is the portion of the code in question:
<center><div style="width:300px;height:400px;border:1px solid #000;"><center><div id="width"><div id="height"></div></center></div></center>
My Question
How do I display <div id="height"> as shown in the image here: placement of height? In the image, the 1.625 is the calculation and correct placement of <div id="width">.
I have finally figured out a solution for the following question:
How do I display as shown in the image here,
placement of Cut Height, Cut Width is already included.
I added a div with the id of height to the rectangle:
<center>
<div style="width:200px;height:300px;border:1px solid #000;">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
And then this accompanying CSS:
#height {
text-align: left;
margin-top: 130px;
margin-left: 4px;
}
First, I aligned the text to the left of the rectangle.
Then, I moved the rectangle down by 130 pixels, about half of the 300px tall box (I didn’t put 150px, exactly half, because adding margin on top adds space above the text. If the top of the box was 150px down from the top, it wouldn’t look centered, since the top of the text would be centered. It’s more about eyeballing that 130px until it looks right).
Lastly, I added 4px of margin on the left so the text isn’t so close to the left edge and looks less cramped.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
/*Fieldset and legend */
fieldset {
margin: 2em 0;
padding: 1em 2em;
border: solid 1px #ccc;
border-radius: 6px;
min-width: P 200px;
}
legend {
font-size: 1.25em;
padding: 0 .25em;
color: #999;
}
/* Labels */
label {
display: block;
margin-top: 1em;
}
.checks label {
margin-top: 0;
}
label:first-of-type {
margin-top: 0;
}
/* Inputs and textarea */
input {
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
input[type="number"],
input[type="text"] {
width: 15em;
background-color: #D3D3D3
}
textarea {
min-height: 8em;
min-width: 100%;
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
/* radio buttons and checkboxes */
.checks {
margin-bottom: 1em;
}
.checks p {
margin-bottom: 0;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
padding-top: 0;
margin-top: 0;
}
input[type="radio"] {
margin-left: 1.5em;
margin-right: 0;
}
input[type="radio"]:first-of-type {
margin-left: 0;
}
#height {
text-align: left;
margin-top: 150px;
margin-left: 4px;
}
/* Submit Button */
input[type="button"] {
padding: .5em 1em;
border-radius: 6px;
background-color: #333;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .8em;
}
/* Large screen rules */
#media screen and (min-width: 430px) {
legend {
font-size: 1.75em;
}
fieldset {
width: 40%;
min-width: 320px;
margin: auto;
}
.checks label {
display: inline-block;
padding-top: .5em;
margin-top: 0;
margin-right: .5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form id="frm1" action="form_action.asp">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>
<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>
</fieldset>
</form>
</section>
<script>
function calc()
{
var wf = document.getElementById('wf').value
var hf = document.getElementById('hf').value
var wp = document.getElementById('wp').value
var hp = document.getElementById('hp').value
var o = document.getElementById('o').value
var width = (1/2)*(hf-hp+o);
var height = (1/2)*(wf-wp+o);
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;
}
</script>
<center>
<div style="width:400px;height:500px;border:2px solid #000; margin-top: 30px; margin-bottom: 30px;">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
</body>
</html>
Now there are calculated numbers which display on a rectangle in the width and height portions of the shape: based on the input of a picture framing calculator.
Decimal to Fraction - Optional
EDIT: I conducted some more research, so I hope you find this valuable. I discovered a way to display the output in fraction form as opposed to decimal.
First Edit for Fractions
To accomplish this in the HTML code above:
Find:
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>
</fieldset>
</form>
</section>
Add After:
<script src="https://unpkg.com/fractional#1.0.0/index.js"></script>
I found this library called fraction.js. So you can load fraction.js through the unpkg.com website.
Second Edit for Fractions
Find:
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;
Replace With:
document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();
You’ll notice that, instead of width, I wrote new Fraction(width).toString(). That’s what the documentation of the library told me to do, in order to use their library (which converts decimals into fractions).
I have a simple back-end for a website that contains a todo list, a history of work done in previous months (and a few other things that aren't relevant.
The todo list is made up of multiple elements dynamically loaded in using AJAX, the 'history' works the same way.
For all todo list items that haven't been checked off yet, if the user clicks the checkbox, a form is supposed to slide down below, pushing the other divs further down but for some reason they don't.
I have pretty much the exact same happening for the 'history': If a user clicks a month name, then a table slides down (using jQuery) showing all the work that was done in that month.
I made the 'history' area first and then replicated it for the todo list but for some reason, when the form slides down for a todo list item, it shows the form but sort of on top of the todo list items below. It doesn't push them down at all. Whereas if I 'open' a history table, it pushes down the other history month entries.
Here is the todo list closed and then with one item checked so the form shows (ignore the CSS issues for now, still a WIP):
Closed:
Open:
And here is the history section, first 'closed' and then with one month 'open':
Closed:
Open:
<div id="todoList-container">
<h1>Todo</h1>
<div class="todoList">
<div data-id="1">
<input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem0" />
<span>test 1</span>
<span style="margin-left: 20px;">Development</span>
<div class="todoForm" style="display: none;">
<form class="todoItemCompleteForm" data-id="1">
<input class="todoItemCompleteHours" type="text" placeholder="Hours">
<textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea>
CompleteCancel
</form>
</div>
</div>
<div data-id="2">
<input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem1" />
<span>test 2</span>
<span style="margin-left: 20px;">Research</span>
<div class="todoForm" style="display: none;">
<form class="todoItemCompleteForm" data-id="2">
<input class="todoItemCompleteHours" type="text" placeholder="Hours">
<textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea>
CompleteCancel
</form>
</div>
</div>
</div>
</div>
Relevant JS:
$.ajax({
url: API_URL + "todos/user/",
data: {
token: LOGIN_TOKEN,
sortCompleted: 1
},
type: "GET",
dataType: "json"
})
.done(function(json) {
for(var k = 0; k < json.length; k++) {
//Show todoList strikethrough or with hidden form.
if(json[k].status == "1") {
$('.todoList').append('<div data-id="' + json[k].ID + '"><span><strike>' + json[k].name + '</strike></span><span style="margin-left: 20px;">' + groups[parseInt(json[k].groupID)] + '</span><span style="float:right; margin-right:10px;" class="date">' + json[k].completed + '</span></div>');
}
else {
$('.todoList').append('<div data-id="' + json[k].ID + '"><input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem' + k + '" /><span>' + json[k].name + '</span><span style="margin-left: 20px;">' + groups[parseInt(json[k].groupID)] + '</span><div class="todoForm" style="display: none;"><form class="todoItemCompleteForm" data-id="'+json[k].ID+'"><input class="todoItemCompleteHours" type="text" placeholder="Hours" /><textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea>CompleteCancel</form></div></div>');
}
}
$('.todoList').append('<div><input id="todoAddItemInput" type="text" placeholder="Todo Name" /><select><option>Development</option></select><i class="fa fa-plus"></i></div>');
})
Relevant CSS:
#todoList-container {
width: 80%;
border: 1px solid #CCC;
margin: 20px auto;
border-radius: 10px;
padding: 0 20px 40px;
}
#todoList-container h1 {
margin-top: 10px;
}
#todoList-container .todoList {
list-style-type: none;
}
#todoList-container .todoList div {
font-family: 'Lora', serif;
font-size: 18px;
padding: 2px 4px;
margin: 8px 0;
border-bottom: 1px solid #CCC;
height: 40px;
/* line-height: 40px; */
}
#todoList-container span {
vertical-align: -2px;
margin-left: 52px;
color: #333;
}
#todoList-container .todoBox+span {
margin-left: 0px;
color: #777;
}
#todoList-container .todoBox {
display: inline-block;
height: 30px;
width: 30px;
border: 1px solid #CCC;
margin-right: 20px;
border-radius: 4px;
text-decoration: none;
/* vertical-align: 3px; */
}
#todoList-container .todoBox::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
color: #CCC;
z-index: 999;
top: 4px;
left: 5px;
position: relative;
font-size: 20px;
}
#todoList-container .todoBoxSelected::after {
color: #6db235;
}
#todoList-container #todoAddItemInput {
margin-left: 48px;
font-family: 'Lora', serif;
border:0;
font-size: 18px;
padding: 2px 4px;
color: #777;
border-right: 1px solid #CCC;
margin-right: 20px;
vertical-align: -4px;
}
I can't see anything different in my css or js/jQuery. Could someone help?
Thanks
Stupidly, I still had a height set for all the div children of .todoList from before I added the form and so that's what was causing the form to not 'push' the rest down.
I was trying to make javascript take value from textbox and alert it, but it always pops up "Undefined". I tried grabing the value of selected items from combobox, but still shows undefined.
When I try using js in simple webpage, it works. Maybe something wrong with my code.
Note: I want the value to popup when "Schedule" button is clicked. Js will take value from txtbox and selected time value. But it does not..
Code: index.php
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Pinterest Grabber</title>
<style>
html, body{
width: 100%;
background-color: #DADADA;
color: black;
font-family: georgia, sans-serif, arial;
}
.container{
background-color: white;
width: 95%;
margin: auto;
padding: 10px;
box-shadow: 0px 5px 10px #333;
border: none;
border-radius: 2px;
}
.setupForm{
background-color: #ff9;
margin: 10px;
}
.pinterestForm{
background-color: #ff9;
margin-top: 2%;
}
.formTxtbox{
margin-bottom: 1%;
border: none;
width: 75%;
text-align: center;
font-size: 17px;
height: 30px;
background-color: white;
color: black;
transition-property: box-shadow;
transition-duration: 0.3s;
}
.formTxtbox:hover{
box-shadow: 0px 0px 10px #cab;
}
.formButton{
margin-bottom: 1%;
border: none;
background-color: royalblue;
color: white;
padding: 7px 35px;
font-size: 17px;
transition-property: background-color, box-shadow, color;
transition-duration: 0.3s;
}
.formButton:hover{
background-color: lime;
box-shadow: 5px 5px 5px black;
color: black;
cursor: pointer;
}
.txtboxSmall{
margin-bottom: 1%;
border: none;
width: 50%;
text-align: center;
font-size: 17px;
height: 30px;
background-color: white;
color: black;
transition-property: box-shadow;
transition-duration: 0.3s;
}
.txtboxSmall:hover{
box-shadow: 0px 0px 10px #cab;
}
.scheduleContainer{
background-color: #FF9800;
}
#scheduleOptions{
border: none;
width: 5%;
height: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.setupForm').hide();
$("#btnSettingsToggle").click(function(){
$(".setupForm").toggle('fast');
});
});
// js
var interval;
var time = document.getElementById('txtScheduleInterval').value;
var timeOptions = document.getElementById("scheduleOptions").value;
function schedule()
{
alert(time);
}
</script>
</head>
<body>
<div class="container">
<header>
<h1 align="center">Pinterest Grabber</h1>
</header>
<button class="formButton" id="btnSettingsToggle">Settings</button>
<center>
<form action="setup.php" method="post" class="setupForm">
<h2>Settings</h2>
<input class="formTxtbox" type="text" name="condapath" placeholder="Your Anaconda Path"><br>
<input class="formTxtbox" type="text" name="envname" placeholder="Enviroment Name To Activate"><br>
<input class="formButton" type="submit" value="Save Settings">
</form>
</center>
<?php
$settings = file('settings.txt', FILE_SKIP_EMPTY_LINES);
echo "<b>Working Path:</b> " . $settings[0] . '<br>';
echo "<b>Working Environment:</b> " . $settings[1] . '<br>';
?>
<center>
<form action="pinterest.php" method="post" class="pinterestForm">
<h2 align="left" style="margin-top:1%;margin-left:1%;">Pinterest Single</h2>
<input class="formTxtbox" type="text" name="singleSearchTerm" placeholder="Enter Search Term (EX: old kl)"><br>
<input class="formTxtbox" type="text" name="singleFilename" placeholder="Enter Filename (EX: data.csv)"><br>
<input class="formButton" type="submit" value="Start" name="btnPinSingle">
</form>
<form action="#" method="post" class="pinterestForm">
<h2 align="left" style="margin-top:1%;margin-left:1%;">Pinterest Bulk</h2>
<input class="formTxtbox" type="text" name="listPath" placeholder="Enter List Path (EX: c:\folder\list.txt)"><br>
<input class="txtboxSmall" type="text" id="txtScheduleInterval" placeholder="Enter Schedule Time">
<select id="scheduleOptions">
<option value="secs">Seconds</option>
<option value="mins">Minutes</option>
<option value="hrs">Hours</option>
</select>
<br>
<button type="button" class="formButton" onclick="schedule(); return false;">Schedule</button>
<input class="formButton" type="submit" value="Start Now" name="btnPinBulk">
</form>
</center>
</div>
</body>
</html>
Here is the hosted code on JSFiddle: https://jsfiddle.net/Lnt0crs8/1/
Any help would be appreciated.
Thanks.
Fetch textbox values in on click function call and try
function schedule()
{
var time = document.getElementById('txtScheduleInterval').value;
alert(time);
}
The variable time is now set only once, when the page is loaded.
It should be set whenever the schedule button is pressed.
So move the line var time = ... to a place within the schedule function:
function schedule()
{
var time = document.getElementById('txtScheduleInterval').value;
alert(time);
}
just add the below lines into the javascript schedule function
time = document.getElementById('txtScheduleInterval').value;
The value of the variable time is getting initialized while the page is getting loaded . While the page is been loaded the value return by document.getElementById('txtScheduleInterval').value is undefined as the input field txtScheduleInterval has no value in it. So while calling the function schedule you have to make sure that the variable time has the current value in txtScheduleInterval.
Hope this helps you..
You put your javascript which contain dom-operation before your html.
When your "var time = document.getElementById('txtScheduleInterval').value;" ran, it could not get your dom as your expectation. So the solution is either put your script after body or do dom-operation in your schedule function
fetch the values when the function is called. It should work!
function schedule()
{
time = document.getElementById('txtScheduleInterval').value;
timeOptions = document.getElementById("scheduleOptions").value;
alert(time);
}
The Problem
List.js isn't properly sorting numbers on my HTML-Table. This is happening because I'm using inner-HTML on the place of numbers, sort works fine if I just put the numbers and not an ID.
Why not just put the numbers on the table like you said?
I admit that's the best solution, it gains on performance and don't use any javascript, BUT :
I need to modify the data a couple of times a day.
I intend to use and display the data in other places as well, and not just the table.
And in consequence, a pain to modify the data on all my HTML pages, where I could modify just the .js and them, all HTML would be updated.
What I want:
Make the button "Numbers" properly sort data inside of each:
document.getElementById("mushroom_N").innerHTML = "some_number";
and not the actual ID name. (in this case, each "mushroom_N")
Conditions:
A solution that uses List.js, and not a different plugin.
I'm not using jQuery, the ideal solution would be one that also don't use it.
My code is HERE on codepen if you prefer.
Thanks for your attention!
var options = {
valueNames: ['name', 'number']
};
var userList = new List('users', options);
function myFunction() {
document.getElementById("demo0").innerHTML = 10;
document.getElementById("demo1").innerHTML = 1000;
document.getElementById("demo2").innerHTML = 1;
document.getElementById("demo3").innerHTML = 100;
}
.list {
font-family: sans-serif;
}
td {
padding: 10px;
border: solid 1px #eee;
}
input {
border: solid 1px #ccc;
border-radius: 5px;
padding: 7px 14px;
margin-bottom: 10px
}
input:focus {
outline: none;
border-color: #aaa;
}
.sort {
padding: 8px 30px;
border-radius: 6px;
border: none;
display: inline-block;
color: #fff;
text-decoration: none;
background-color: #f44336;
height: 30px;
}
.sort:hover {
text-decoration: none;
background-color: #b71c1c;
}
.sort:focus {
outline: none;
}
.sort:after {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content: "";
position: relative;
top: -10px;
right: -5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
position: relative;
top: 4px;
right: -5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content: "";
position: relative;
top: -4px;
right: -5px;
}
<html>
<html lang="en">
<head>
</head>
<body onload="myFunction()">
<div id="users">
<!-- "Search" -->
<input class="search" placeholder="Search" />
<!-- "Sort Buttons" -->
<button class="sort" data-sort="name">A -> Z</button>
<button class="sort" data-sort="number">Numbers</button>
<!-- "The List" -->
<ul class="list">
<li>
<h3 class="name">Mario</h3>
<span class="number"><p id="demo3"></p></span>
</li>
<li>
<h3 class="name">Luigi</h3>
<span class="number"><p id="demo1"></p></span>
</li>
<li>
<h3 class="name">Peach</h3>
<span class="number"><p id="demo2"></p></span>
</li>
<li>
<h3 class="name">Toad</h3>
<span class="number"><p id="demo0"></p></span>
</li>
</ul>
</div>
<!-- "List.js" -->
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
</body>
</html>
Welp, I did it!
You just need to create an array and put the elements inside of another one. The Codepen for someone interested or having the same problem of mine.
var mushs = [
"100", // Mario
"10", // Luigi
"1000", // Peach
"1" // Toad
// A change in the values will affect all places at the same time.
];
var options = {
valueNames: ['name', 'mushrooms'],
item: '<tr><td class="mdl-data-table__cell--non-numeric name"></td><td class="mushrooms"></td></tr>'
};
var values = [{
name: 'Mario',
mushrooms: mushs[0]
},
{
name: 'Luigi',
mushrooms: mushs[1]
},
{
name: 'Peach',
mushrooms: mushs[2]
},
{
name: 'Toad',
mushrooms: mushs[3]
}
];
var userList = new List('users', options, values);
document.getElementById("mushroom_0").innerHTML = mushs[0];
document.getElementById("mushroom_1").innerHTML = mushs[1];
document.getElementById("mushroom_2").innerHTML = mushs[2];
document.getElementById("mushroom_3").innerHTML = mushs[3];
body {
margin: 0;
padding: 20px;
}
input {
border: solid 1px #ccc;
border-radius: 5px;
padding: 7px 14px;
margin-bottom: 10px
}
input:focus {
outline: none;
border-color: #aaa;
}
<div id="users">
<input class="search" placeholder="Search">
<table class="mdl-data-table mdl-js-data-table">
<div id="mdl-table">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">
<button class="mdl-button mdl-js-button mdl-button--icon sort" data-sort="name">
<i class="mdl-color-text--red-500 material-icons">sort_by_alpha</i>
</button>
</th>
<th>
<button class="mdl-button mdl-js-button mdl-button--icon sort" data-sort="mushrooms">
<i class="mdl-color-text--red-500 material-icons">swap_vertical_circle</i>
</button>
</th>
</tr>
</thead>
<tbody class="list"></tbody>
</div>
</table>
</div>
<p></p>
<div>Hey, I know that Mario got <span id="mushroom_0"></span> mushrooms, also, Luigi got <span id="mushroom_1"></span> of them, Peach was greed and got at least <span id="mushroom_2"></span> mushs, and Toad got only <span id="mushroom_3"></span>, himself.</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite#1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://cdn.jsdelivr.net/npm/material-design-lite#1.3.0/dist/material.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/javve/list.js#1.5.0/dist/list.min.js"></script>