I'm a newbie in html and trying to upload image to my homepage.
I already set up the uploading part like below in html,
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/upload", method="post", enctype="multipart/form-data">
<input type="file" style="max-width: 30%; max-height: 50%;" name="upFile" id="upFile" onchange="getCmaFileView(this,'name')" target="dropzone_1">
<input type="submit" name="Upload" >
</form>
</li>
<li>
<form action="/jsondata", method="get", id="jsd", enctype="multipart/form-data" ></form>
</li>
<li><a onclick="save2()" id="imageSave">Save</a></li>
</ul>
However, it shows a button like old-fashioned typical button like below,
and I want it to make my own customized button using with clicking..
I tried to find in google, but they used <div> instead of <form> of mine..
So I posted here customize the file button for image upload
I know this might be a stupid question, but I just want to learn!
How can I make that...?
Thanks in advance!
Here is working example how to style your upload button. Basically you have to hide your html input.
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="fileUpload btn btn-success">
<span>Click to upload new file</span>
<input type="file" class="upload" />
</div>
Related
I'm working on creating some data visualizations for our clients and they have requested that I put a description of the data chart on the left side with the data chart on the right side. Clearly I need to create a divider to split this in half, but I'm over thinking this. How do I get the desired output like the link below?
I want to provide my full code for context. I know it's annoying to include my menu and references, but I rather provide too much detail than too little.
<!DOCTYPE html>
<html lang="en">
<title>The Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
VARC Home
About
Project Search
Methods
<div class="w3-dropdown-hover w3-hide-small">
<button class="w3-padding-large w3-button" title="More">Data <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
Overview
Access Relevance
Access Type
Community Care and Virtual Care
Model Classification
Implementation Status
OVAC Priorities
Project Type
Type of Care
</div>
</div>
<i class="fa fa-search"></i>
</div>
</div>
<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
Results
Project Search
Methods
Overview
Access Relevance
Access Type
Community Care and Virtual Care
Model Classification
Implementation Status
OVAC Priorities
Project Type
Care Type
</div>
<!-- Page content -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<style>
body {
margin: 20px auto;
font-family: 'Lato';
font-weight: 300;
text-align: center;
}
#pie-chart {
margin: 4 auto;
height: 575px;
}
</style>
<body style="background-color:black;">
<center>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id="pie-chart"></div>
</body>
<script>
var pieDiv = document.getElementById("pie-chart");
pie_chart = {
'data': [{
'labels': ['<b>Primary Care</b>', '<b>Specialty Care</b>', '<b>Mental Health</b>', '<b>Inpatient/Acute Care</b>', '<b>Long-term Care</b>', '<b>General Care/Not Specified</b>'],
'values': [4, 21, 8, 1, 1, 14],
'textinfo': 'percent',
'text': ['<b> Description</b>: Projects focused on primary care.', '<b> Description</b>: Projects focused on specialty care.', '<b> Description</b>: Projects focused on mental health', '<b> Description</b>: Projects focused on inpatient/acute care', '<b> Description</b>: Projects focused on long-term care', '<b> Description</b>: The type of care is not indicated or is not specific to one type'],
'type': 'pie',
'name': "Care Types",
'hole': .4,
'hoverinfo': 'label+percent+text',
'sort': false,
}],
'layout': {
'title': 'Type of Clinical Care Setting'+'<br>'+'N = 50'
}
}
Plotly.newPlot('pie-chart', pie_chart.data, pie_chart.layout);</script>
</div></div></div></div></div></div></div></div>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<!-- Extra large modal -->
<<!-- Trigger the modal with a button -->
<!-- Extra large modal -->
<div style="text-align: center;">
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-xl">Data Definitions</button></div>
<div class="modal fade cd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content"><h5> Care Type Definitions </h5> <br><table>
<tr>
<th>Field</th>
<th>Definition</th>
</tr>
<tr>
<td>Primary Care</td>
<td>The project is focused on primary care</td>
</tr>
<tr>
<td>Specialty Care</td>
<td>The project is focused on specialty care</td>
</tr>
<tr>
<td>Mental Health</td>
<td>The project is focused on mental health</td>
</tr>
<tr>
<td>Inpatient Care/Acute Care</td>
<td>The project is focused on inpatient/acute care</td>
</tr>
<tr>
<td>Long-term Care</td>
<td>The project is focused on long-term care</td>
</tr>
<tr>
<td>General Care/Not Specified</td>
<td>The type of care is not indicated or is not specific to one type</td>
</tr>
</table>
<p><br>
</div> <div style="text-align: center;"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div></div>
</div>
</div>
</div>
</div><div style="text-align: center;">
<p style="background-color:black;color:white;"><br>
Last updated on 7/20/2020</div></p>
</body>
Bootstrap has a wonderful grid system that would help you accomplish this.
Consider doing the following snippet:
<div class="container">
<div class="row">
<div class="col">
<!-- DESCRIPTION -->
</div>
<div class="col">
<!-- DIAGRAM -->
</div>
</div>
</div>
This link should provide some more information and examples on the grid system: Bootstrap Grid System
Make sure you import bootstrap so the classes work: Getting Started with Bootstrap
In the event that you do not wish to implement bootstrap, here is a link that will help with implementing the same features in your current style sheet. Using Bootstrap just simplifies the need to implement these classes in your style sheet: CSS Grid Layout
If I understand what you are trying to do, I would say you don't need a grid. I would create a parent div and inside this parent div, I would include two other divs: The first child div would contain the description of the data and the other one would contain the chart itself. Then I would apply 'display: flex' to the parent div. The divs will then be side by side. Like so:
<div style="display: flex">
<div>
Data description
</div>
<div>
Chart
</div>
</div>
Parting from your code and the answer provided by #El donny i recommend doing the following inside the <body> tag you already have:
body {
margin: 0;
padding: 0;
}
#content {
display: flex;
height: 100vw;
}
#description {
background-color: black;
color: white;
width: 50%;
}
<div id="content">
<div id="description">Description</div>
<div id="pie-chart">Pie</div>
</div>
** The styling of the example is just for you to see the result **
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>
In my Collapsible header I am trying to append an extra anchor tag which is pushed away from the header because this is not supported for JQuery mobile headers. Is there a way to add an extra link/action to the heading of a Collapsible in a neath way?
Thanks in advance
You can inject a button inside the collapsible from the $(document).on("collapsiblecreate") event, but I prefer to use pre-enhanced markup as described here (this should improve performance during page creation).
Here is an example (I believe everybody who is using JQM had such a problem at least one time...)
So, basically, instead of relying completely to the data-role enhancement, You need to write in Your html the expanded markup and the classes which JQM would add later during the widget initialization. To tell JQM that the markup is pre-enhanced add the data-enhanced="true" data-attribute to the widget.
This way, You are free to add whichever element You want inside any widget (search-inputs & so on). Just look inside the chrome developer tools: mostly, You will only need to copy-and-paste the markup enhanced by JQM using its own standard method and use that in Your html page.
$(document).on("collapsiblecreate", ".ui-collapsible", function(e) {
/* $(this) is the collapsible */
});
.collapsible-assist {
position: relative;
}
.collapsible-assist .ui-collapsible-heading {
margin-right: 2.5em;
}
.collapsible-assist.square .ui-collapsible-heading {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.collapsible-assist .assist-btn {
position: absolute;
right: 0;
}
.collapsible-assist.square .assist-btn {
margin: 0;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
.collapsible-assist .ui-collapsible-content {
margin-top: -1px !important;
border-top-width: 1px !important;
border-top-right-radius: inherit;
}
/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Speed-up some android & iOS devices */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist square ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
Help
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Farm animals<div class="ui-collapsible-heading-status">click to expand contents</div></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<ul data-role="listview" data-enhanced="false">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div>
</div>
<br>
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist round ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
Help
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Legend<div class="ui-collapsible-heading-status">click to expand contents</div></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<form>
<div data-role="controlgroup">
<input name="checkbox-1-a" id="checkbox-1-a" type="checkbox" checked>
<label for="checkbox-1-a">One</label>
<input name="checkbox-2-a" id="checkbox-2-a" type="checkbox">
<label for="checkbox-2-a">Two</label>
<input name="checkbox-3-a" id="checkbox-3-a" type="checkbox">
<label for="checkbox-3-a">Three</label>
</div>
</form>
</div>
</div>
</div>
<div data-role="popup" id="popup" class="ui-content" data-theme="a">
<p>I'm a help popup.</p>
</div>
</div>
</body>
</html>
I am using the js-mindmap library for a different kind of use, I need to allow a selection to link to extrenal/internal pages on some links but need others to bubble into a bullet list (preferably withing the same css shape as the rest of the mindmap.) I was initially looking at getting the content for the alert from the title or alt tags but not sure if they will retain the ul and li needed without defaulting to the mindmap format...
I'm searching for more of a more simplistic way to accomplish this. I'm sure css is most likely the best practice and I need to pull the content from the html for ease of creating different modles.
here is JSFiddle MindMp
html:
<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>
<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>
<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<ul>
<li>ALS
<ul>
<li>Chest Pain</li>
<li>Shortness of Breath</li>
<li>Allergic Reaction</li>
<li>Diabetic</li>
<li>STEMI
<ul>
<li>ACS</li>
<li>STEMI
<ul>
<li>Treatment</li>
<li>Protocol</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
Here you go my friend, it's a bit hacky but it works. I made several modifications to the plugin itself as well as your styles and html.
The plugin was taking your anchor tags, stripping everything and creating them anew. I had to make sure my new attribute data-content was being preserved. Now the plugin checks if a link has this attribute and if it does, it doesn't fire the click event.
Then, I assigned my own click handler to replace content of the alert div and subsequently show it:
$('a').click(function(e){
var tag = $(this).attr('data-content');
if(tag)
{
$('.alert .content').html(content[tag]).parent().show();
}
});
If you have any questions, let me know.
https://jsfiddle.net/x8826shn/7/
I have this (simple?) problem: in my page I have one popover, whose element are generated dynamically. How can I fix a div (specifically, the element with id="foot-notification-pop") in the bottom of popover, when it scroll?Below the code. Thanks!
HTML
$('[data-toggle="popover"]').popover({placement: 'bottom', trigger: 'click' });
.popover-content {
max-height: 200px;
overflow-y: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" integrity="sha512-mG7Xo6XLlQ13JGPQLgLxI7bz8QlErrsE9rYQDRgF+6AlQHm9Tn5bh/vaIKxBmM9mULPC6yizAhEmKyGgNHCIvg==" crossorigin="anonymous" />
<ul class="navbar-nav pull-right">
<li><a href="#" data-toggle="popover" title="Notifications" data-html="true" data-content="
<a href='?Profile'><div class='pop-text'>Notification 1</div></a><hr />
<a href='?Profile'><div class='pop-text'>Notification 2</div></a><hr />
<a href='?Profile'><div class='pop-text'>Notification 3</div></a><hr />
<a href='?Profile'><div class='pop-text'>Notification 4</div></a><hr />
<div><p id='foot-notification-pop'><a href='?notification'>Show all</a></p></div>">
Notification
</a></li>
</ul>
One way to do that is with the position: absolute css property
#foot-notification-pop {
position: absolute;
bottom: 0px;
background-color:#fff;
width:70%
}
Also I moved that id from the paragraph tag to the div tag.
<div id='foot-notification-pop'><p><a href='?notification'>Show all</a></p></div>