When I use Google Charts it uses a position: absolute inside one of it's div's. That messes up the layout.
On the HTML I put:
<div id="chart-1-year" />
And the Javascript:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Performance'],
<%= CurrentData.first.chart_1_year%>
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('chart-1-year')).
draw(data, {curveType: "function",
width: 500, height: 400, title: "Performance 1 Year"
}
);
}
I get the following on the browser (using Firebug):
<div class="row">
<div id="chart-1-year" style="position: relative;">
<div style="position: relative; width: 500px; height: 400px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
</div>
<div style="display: none; position: absolute; top: 410px; left: 510px; white-space: nowrap; font-family: Arial; font-size: 12px;">Performance</div>
</div>
</div>
It works fine if I remove the "position: absolute;" from the inner div.
How can I change that position setting?
Related
/* Add property modal */
.add-property {
position: relative;
width: 60rem;
height: 35rem;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 15px;
}
.modal-title {
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.close {
background-color: transparent;
border: none;
}
#footer-btn {
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border: 0.1em solid black;
border-radius: 10px;
width: 5em;
height: 2.5em;
font-weight: 600;
margin-bottom: 1.2em;
}
.add-prop {
background-color: #3498db;
color: white;
}
.add-prop:hover {
background-color: rgb(12, 65, 180);
}
.add-inpt {
outline: none;
border-width: 0 0 0.17em;
border-color: black;
border-radius: 5px;
width: 15em;
height: 2em;
text-align: center;
}
.prop-info-row {
height: 15em;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prop-info-col {
height: 2em;
}
.add-inpt::placeholder {
text-align: center;
}
.main-add-row {
width: 50rem;
height: 26rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}
#property-types {
background-color: white;
height: 2.5em;
width: 13em;
border-radius: 5px;
}
/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
height: 100%;
}
.side-nav .nav-menu {
list-style: none;
padding: 40px 0;
width: 13em;
background-color: #3498db;
}
.side-nav .nav-item {
position: relative;
padding: 0.7em 1.5em;
position: relative;
top: 42%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-item.active {
background-color: #fff;
box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}
.nav-item.active a {
color: #2980b9;
}
.nav-item a {
text-decoration: none;
color: #fff;
}
.menu-text {
padding: 0 20px;
}
.side-nav .nav-item.active::before {
content: "";
position: absolute;
background-color: transparent;
bottom: 100%;
right: 0;
height: 150%;
width: 20px;
border-bottom-right-radius: 25px;
box-shadow: 0 20px 0 0 #fff;
}
.side-nav .nav-item.active::after {
content: "";
position: absolute;
background-color: transparent;
top: 100%;
right: 0;
height: 150%;
width: 20px;
border-top-right-radius: 25px;
box-shadow: 0 -20px 0 0 #fff;
}
/* UPLOAD IMAGE STYLE */
:root {
--clr-white: rgb(255, 255, 255);
--clr-black: rgb(0, 0, 0);
--clr-light: rgb(245, 248, 255);
--clr-light-gray: rgb(196, 195, 196);
--clr-blue: rgb(63, 134, 255);
--clr-light-blue: rgb(171, 202, 255);
}
/* End General Styles */
/* Upload Area */
.upload-area {
width: 100%;
max-width: 25rem;
background-color: var(--clr-white);
box-shadow: 0 5px 10px rgb(218, 229, 255);
border: 2px solid var(--clr-light-blue);
border-radius: 24px;
padding: 1rem 1.875rem 0rem 1.875rem;
margin: 0.625rem;
text-align: center;
}
/* Header */
.upload-area__title {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 0.3125rem;
}
.upload-area__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin-top: 0;
}
.upload-area__tooltip {
position: relative;
color: var(--clr-light-blue);
cursor: pointer;
transition: color 300ms ease-in-out;
}
.upload-area__tooltip:hover {
color: var(--clr-blue);
}
.upload-area__tooltip-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -125%);
min-width: max-content;
background-color: var(--clr-white);
color: var(--clr-blue);
border: 1px solid var(--clr-light-blue);
padding: 0.625rem 1.25rem;
font-weight: 500;
opacity: 0;
visibility: hidden;
transition: none 300ms ease-in-out;
transition-property: opacity, visibility;
}
.upload-area__tooltip:hover .upload-area__tooltip-data {
opacity: 1;
visibility: visible;
}
/* Drop Zoon */
.upload-area__drop-zoon {
position: relative;
height: 13.8rem;
/* 180px */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 2px dashed var(--clr-light-blue);
border-radius: 15px;
margin-top: 1.1rem;
cursor: pointer;
transition: border-color 300ms ease-in-out;
}
.upload-area__drop-zoon:hover {
border-color: var(--clr-blue);
}
.drop-zoon__icon {
display: flex;
font-size: 3.75rem;
color: var(--clr-blue);
transition: opacity 300ms ease-in-out;
}
.drop-zoon__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin: 0;
margin-top: 0.625rem;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
opacity: 0.7;
}
.drop-zoon__loading-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
color: var(--clr-light-blue);
z-index: 10;
}
.drop-zoon__preview-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0.3125rem;
border-radius: 10px;
display: none;
z-index: 1000;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__preview-image {
opacity: 0.8;
}
.drop-zoon__file-input {
display: none;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
border-color: var(--clr-blue);
}
.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
opacity: 0.7;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
display: none;
}
/* File Details Area */
.upload-area__file-details {
height: 0;
visibility: hidden;
opacity: 0;
text-align: left;
transition: none 500ms ease-in-out;
transition-property: opacity, visibility;
transition-delay: 500ms;
}
/* (duploaded-file--open) Modifier Class */
.file-details--open {
height: auto;
visibility: visible;
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
Property</button>
<form action="" enctype="multipart/form-data" method="POST" id="id_ajax_upload_form">
{% csrf_token %}
<div class="modal fade" id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content add-property">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Property</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body" style="padding: 0;">
<div class="row g-0 main-add-row">
<div class="col-sm-3" style="padding: 0;">
<nav class="side-nav">
<ul class="nav-menu">
<li class="nav-item active" id="img-nav-link">
<a href="#">
<i class="fa-solid fa-file-arrow-up"></i>
<span class="menu-text">Upload Image</span>
</a>
</li>
<li class="nav-item" id="prop-info-nav-link">
<a href="#">
<i class="fa-solid fa-house-chimney-crack"></i>
<span class="menu-text">Propery Info</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-9 d-flex justify-content-center" id="toggle-content-add-modal">
<!-- UPLOAD IMAGE SECTION START -->
<div id="uploadArea" class="upload-area" data-target="img-nav-link">
<!-- Header -->
<div class="upload-area__header">
<h1 class="upload-area__title">Upload your file</h1>
<p class="upload-area__paragraph">
File should be an image
<strong class="upload-area__tooltip">
Like
<span class="upload-area__tooltip-data"></span>
<!-- Data Will Come From Js -->
</strong>
</p>
</div>
<!-- End Header -->
<!-- Drop Zoon -->
<div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
<span class="drop-zoon__icon">
<i class='bx bxs-file-image'></i>
</span>
<p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
<span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
<img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">
</div>
<!-- End Drop Zoon -->
<!-- File Details -->
<div id="fileDetails" class="upload-area__file-details file-details">
<div id="uploadedFile" class="uploaded-file">
<div class="uploaded-file__icon-container">
<i class='bx bxs-file-blank uploaded-file__icon'></i>
<span class="uploaded-file__icon-text"></span>
<!-- Data Will be Comes From Js -->
</div>
<div id="uploadedFileInfo" class="uploaded-file__info">
<span class="uploaded-file__name">Project 1</span>
<span class="uploaded-file__counter">0%</span>
</div>
</div>
</div>
<!-- End File Details -->
</div>
<!-- UPLOAD IMAGE SECTION END -->
<!-- PROPERTY INFO START -->
<div class="row g-0 justify-content-center prop-info-row" data-target="prop-info-nav-link" style="display: none;">
<div class="col-md-8 prop-info-col">
<p style="font-weight: 600;">Property Type</p>
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col">
<select name="property-types" id="property-types">
<option value="volvo">Tenament</option>
<option value="saab">Car</option>
<option value="opel" selected>Helicopter</option>
<option value="audi">Space Shuttle</option>
</select>
<div class="input-group mb-3 ms-3">
<span class="input-group-text" id="basic-addon1">OR</span>
<input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">
</div>
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col mt-5">
<input type="text" id="prop-name" class="add-inpt" placeholder="Property Name" autocomplete="off">
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col mt-3">
<input type="text" id="prop-address" class="add-inpt" placeholder="Property Address" autocomplete="off">
</div>
</div>
<!-- PROPERTY INFO END -->
</div>
</div>
</div>
<div class="modal-ftr">
<button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
I have been using AJAX recently with DJANGO to send text data. It has been working smoothly and feels an easy method. But I cant understand and there no proper resource to learn to send images with AJAX and save to Django Database.
HTML:
<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">
JS:
$(".add-prop").click(function() {
var data = new FormData();
data.append("image", $("#fileInput-single")[0].files[0])
data.append("csrfmiddlewaretoken", $("input[name=csrfmiddlewaretoken]").val())
$.ajax({
method: "POST",
url: "{% url 'upload-prop-images' %}",
processData: false,
contentType: false,
mimeType: "multipart/form-data",
data: data,
success: function(data) {
if (data.status == "Upload Done") {
console.log("Uploading Done successfully")
}
}
})
});
models.py
class Property(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, related_name='property_user')
prop_images = models.ImageField(upload_to="prop_images")
views.py
def uploadPropImages(request):
image = request.POST['image']
property_new = Property(user_id=request.user.id, prop_images=image)
property_new.save()
return JsonResponse({'status': 'Upload Done'})
urls.py
urlpatterns = [
path('upload-prop-images/', views.uploadPropImages, name='upload-prop-images')
]
There is one tutorial using the forms.py file but I don't want to create a forms.py file.
HTML
<form id="upload-file" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file">
<button type="submit" class="btn btn-success">Upload</button>
</form>
JS
$('body').on('submit','#upload-file',function(e){
e.preventDefault()
var formData = new FormData(this);
$.ajax({
url:'/url/',
type: 'POST',
data: formData,
success: function (response) {
},
error: function (response) {
},
cache: false,
contentType: false,
processData: false
});
VIEWS.py
def fileupload(request):
if request.method=="POST":
property = Property()
property.prop_images = request.FILES['file_name']
property.user = self.request.user.username
property.save()
# Can update response as per requirement.
# Can Add `Status`: Success/Failed to make it more clear.
return JsonResponse({"Message":"File Uploaded Successfully"})
return JsonResponse({"Message":""})
I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container.
I need to keep the style #scene {display: inline-block;} or else the panning inside bounds breaks.
How can I center this image at load initially
const element = document.querySelector('#scene');
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
display: flex;
justify-content: center;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Found out a move to function Thanks to #Temani Afif for help
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth /2) - (element.offsetWidth / 2);
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
panZoomController.moveTo(s, 0);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
You can use zoomAbs to set the initial position. The scale need to be different from 1 (not sure why) so I made it 0.9
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth - element.offsetWidth) ;
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
}).zoomAbs(
6*s, // initial x position
0, // initial y position
0.9 // initial zoom
);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Here:
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
}
#scene {
display: flex;
justify-content: center;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Try this
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
width: 100%;
}
#scene {
position: absolute;
width:400px;
left: 50%;
margin-left:-200px;
display:block;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
This will center the img inside its container :
#scene {
display: flex;
justify-content: center;
}
I would like to get some help with this. I've tried so many different ways and no one works. I want this in only HTML and CSS.
.circles {
background-color: white;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row {
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
<div class="row">
<div class="circles"></div>
<div class="circles"></div>
<div class="circles"></div>
</div>
Here is an example via jsbin:
http://jsbin.com/tezocucufi/edit?html,css,output
There are a couple different ways to get it to "not interfere" with other elements... but depends on what your situation.
Circle code:
border-radius: 50%;
width: 100px;
height: 100px;
Alignment could be with floats, or:
display: inline-block;
and position'ing both the element and the parent container to position it on the page.
Reference: https://davidwalsh.name/demo/css-circles.php
I have a bubble chart that looks like this currently in Chart.js:
I simply want to add labels to the chart, like this:
How can this be done?
Current code: http://jsfiddle.net/Lvc0u55v/7323/
To achieve expected result, use below option
HTML:
<section class="content" ng-app="myApp" ng-controller="ChartCtrl">
<canvas chart-data="data" chart-labels="labels" chart-options="options" chart-series="series" class="chart-bubble" id="base"></canvas>
</section>
<span id="q1">Quadrant1</span>
<span id="q2">Quadrant2</span>
<span id="q3">Quadrant3</span>
<span id="q4">Quadrant4</span>
CSS:
#q1{
position:absolute;
margin-top:-30%;
margin-left:80%;
}
#q2 {
position: absolute;
margin-top: -30%;
margin-left: 20%;
}
#q3 {
position: absolute;
margin-bottom: -30%;
margin-left: 20%;
}
#q4 {
position: absolute;
margin-bottom: -30%;
margin-left: 80%;
}
Codepen- http://codepen.io/nagasai/pen/LkmZkL
I am new to web development and I've hit a road block here with swipe-pages from https://github.com/TheSeamau5/swipe-pages
Basically, I want to make a "swipe-images" out of the "swipe-pages" by putting a template inside the contents of the swipe-pages. In other words, I want to pass to the polymer-element an array of strings (location of image) as attributes and the swipe-pages in the element should auto-generate swipe-pages with images inside it.
I am trying to avoid java script as much as I can and take advantage of polymer binding. I have even extended the template as a swipe-page.
here is the code so far and it does not work as expected. Is this approach correct or should I reinvent the swipe-pages uniquely for swipe-images. But nevertheless, the template binding should work!
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="items">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template extends="swipe-page" repeat="{{item in items}}">
<img src="{{item}}" style="width: 20px; height 20px"/>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
items="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
Does anyone have a sample code on something like this?
I made the change as mentioned and I got the code working. Turns out I did not initialise the array (attribute) in the polymer-element constructor and that was really important.
The below code works,.......... and now I have an "image swipe".
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="imglinks">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template repeat="{{imglink in imglinks}}">
<swipe-page>
<img src="{{imglink}}" style="width: 20px; height: 20px"/>
</swipe-page>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
this.imglinks = []; // This line is important
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
imglinks="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
With this, I could just have the pages up with an array of strings. Perhaps an improvement would be to have the page decipher the link to show image, videos, PDF files, text files etc by having a template selector. And if backed by auto-animation, can become an image carousel and slider too.
Thanks and hope this helps!