Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.
Is there any way to change the scaling on this so the snapping can happen at smaller intervals?
Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.
HTML:
<body>
<section class="darklue" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Tile drop</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2 grid-container sidebar-scroll">
<div class="sidebar grid-stack-1"></div>
</div>
<div class="col-lg-10 grid-container">
<div class="grid-stack grid-stack-4"></div>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
background: #2c3e50;
color: #fff;
}
.sidebar {
/* background: lightblue; */
height: 100%;
}
.grid-stack {
/* background: #66a3ff; */
}
.sidebar-scroll {
overflow-y: scroll;
}
.grid-container {
padding-top: 15px;
padding-bottom: 15px;
height: 542px;
background: grey;
}
.sidebar .grid-stack-item {
text-align: center;
line-height: 100px;
z-index: 10;
cursor: grab;
display: inline-block;
}
.grid-stack-item-content {
background: white;
color: #2c3e50;
font-family: 'Indie Flower';
text-align: center;
font-size: 20px;
}
.grid-stack .grid-stack-item[data-gs-width="4"] {
width: 100%
}
.grid-stack .grid-stack-item[data-gs-width="3"] {
width: 75%
}
.grid-stack .grid-stack-item[data-gs-width="2"] {
width: 50%
}
.grid-stack .grid-stack-item[data-gs-width="1"] {
width: 25%
}
.grid-stack .grid-stack-item[data-gs-x="3"] {
left: 75%
}
.grid-stack .grid-stack-item[data-gs-x="2"] {
left: 50%
}
.grid-stack .grid-stack-item[data-gs-x="1"] {
left: 25%
}
.sidebar .grid-stack-item[data-gs-width="1"] {
width: 100%
}
JS:
$(function() {
var options = {
float: true,
width: 4,
height: 4,
animate: true,
always_show_resize_handle: true,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
acceptWidgets: '.grid-stack-item'
};
$('.grid-stack').gridstack(_.defaults(options));
var items = [{
x: 0,
y: 0,
width: 1,
height: 1
}, {
x: 1,
y: 0,
width: 1,
height: 1
}, {
x: 2,
y: 0,
width: 1,
height: 1
}, {
x: 0,
y: 1,
width: 1,
height: 1
}, {
x: 3,
y: 1,
width: 1,
height: 1
}, {
x: 1,
y: 2,
width: 1,
height: 1
}];
$('.grid-stack').each(function() {
var grid = $(this).data('gridstack');
_.each(items, function(node) {
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});
var sidebar_options = {
float: true,
width: 1,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
};
$('.sidebar').gridstack(_.defaults(sidebar_options));
var droppables = [{
x: 0,
y: 0,
width: 1,
height: 1
}];
$('.sidebar').each(function() {
var sidebar = $(this).data('gridstack');
_.each(droppables, function(node) {
sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
node.x, node.y, node.width, node.height);
}, this);
});
});
Related
I'm starting to code this year and sorry if my english is not good enough,
I have a problem with a progress bar with JS,
I have on my console an "uncaught TypeError who charge infinitly and say to me that we can charge the properties on style...
The first step was working but when the bar is supposed to become interactive it's not working
const tll = gasp.timeline({
paused: true
});
tll.to("#percent", "#bar", {
duration: .2,
opacity: 0,
zIndex: -1
});
tll.to("#preloader", {
duration: .8,
width: "0%"
});
tll.from(".container", {
duration: 1.5,
y: "-150%"
}, "-=.2");
tll.to("container h1", {
opacity: 1,
textShadow: "12px 20px rgba(255, 255, 255,0.23)",
skewY: 10,
y: "10%",
stagger: {
amount: .4
}
});
var width = 1;
var bar = document.getElementById("barconfirm");
var id;
function move() {
id = setInterval(frame, 10);
}
function frame() {
if (width > 100) {
clearInterval(id);
tll.play();
} else {
width++;
bar.style.width = width + "%";
document.getElementById("percent").innerHTML = width + "%";
}
}
* {
margin: 0;
padding: 0;
overflow: hidden;
}
#preloader {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
z-index: 100;
background-color: #0f0f0f;
flex-direction: column;
}
#percent {
color: white;
font-family: "Neutral Face";
}
#bar {
width: 60%;
margin-top: 20%;
}
#barconfirm {
width: 1%;
padding: 1px 0px;
background-color: white;
}
.container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: gray;
}
.container h1 {
font-family: 'Monument';
text-transform: uppercase;
font-size: 40px;
opacity: 0;
}
<body onload="move()">
<div id="preloader">
<div id="percent">1%</div>
<div id="bar">
<div id="barconfirm"></div>
</div>
</div>
<div class="container">
<h1>Leo Clemente</h1>
</div>
Thanks to you all for your help, I want if you can an explanation more than just a code because I'm here to learn too and have a great day!
The issue in passing the selector to the tll.to method, it accepts ONE selector, so choose one of yours for tll.to("#percent", "#bar", {...}).
It will work as well whether you choose percent or bar. Also, according to the document, the dependency variable name is gsap.
You can check out an online snippet from here
Maybe this is a silly question but I am unable to include a chart for each point on a map.
I am collecting the data from a JSON, this data I print it in the popup, each one with its class .scoreA, .scoreB... I would like from this data to create a chart for each point like the one I have. I would prefer to take them from the content of the popup (.scoreA, .scoreB) rather than from the JSON in case the structure changes. is it possible?
var mymap = L.map('mapid').setView([39.46975, -0.37739], 8 );
L.tileLayer('https://api.mapbox.com/styles/v1/jamaldols/cktwljkom0vzo18l9ggtnky83/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 12,
minZoom: 8,
id: 'mapbox/standard',
tileSize: 512,
zoomOffset: -1,
// maxNativeZoom: 16,
accessToken: ''
}).addTo(mymap);
$.getJSON('data.geo.json', function (geojson) {
L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
},
onEachFeature: function (feature, layer) {
const coordinates = feature.geometry.coordinates;
const normalizedCoordinates = feature.geometry.coordinates.sort(function(a,b){return a.typeid-b.typeid});
console.log( `Coordinates: ${coordinates}`);
console.log( `Coordinates N: ${normalizedCoordinates}`);
const content =
`
<p id="heading">${feature.properties.name}</p>
<p class="scoreA"><strong>ScoreA: </strong>${feature.properties.scoreA}</p>
<p class="scoreB"><strong>ScoreB: </strong>${feature.properties.scoreB}</p>
<p class="scoreC"><strong>ScoreC: </strong>${feature.properties.scoreC}</p>
<p class="scoreD"><strong>ScoreD: </strong>${feature.properties.scoreD}</p>
<div class="popup__chart">chart</div>
`;
layer.on('click', function (e) {
document.getElementById("popup__content").innerHTML = content;
$(".popup").fadeOut(10);
$(".popup").fadeIn("slow");
console.log( `Click on ${feature.properties.name}`);
const maxZoom = mymap.getMaxZoom();
console.log(maxZoom)
mymap.flyTo(this.getLatLng(), maxZoom, {easeLinearity: 0.12, duration:1});
});
}
}).addTo(mymap);
});
//Chart
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: ["Score A", "Score B", "Score C", "Score D"],
datasets: [{
label: "City",
backgroundColor: "rgba(200,0,0,1)",
data: [65, 60, 90, 80]
},]
};
var radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData
});
$(document).ready(function(){
$(".popup__bar__close").click(function(){
$('.popup').css('display', 'none');
mymap.flyTo([39.46975, -0.37739], 8, {easeLinearity: 0.12, duration:1});
});
});
html,
body {
height: 100%;
font-family: 'Montserrat', sans-serif;
}
.popup-fixed {
position: fixed;
top: auto;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
margin: 0;
border-radius: 0;
}
.leaflet-popup-tip-container {
display: none;
}
.leaflet-popup-content-wrapper {
border-radius: 0;
}
.popup {
width: 300px;
padding-bottom: 50px;
background: white;
position: absolute;
top: 50px;
right: 50px;
border: none;
display:none;
z-index: 1000;
}
#heading {
font-size: 35px;
color:black;
text-transform: uppercase;
margin: 15px 0;
}
#main {
display: flex;
overflow: hidden;
}
.popup {
}
.popup__bar {
width: 100%;
height: 50px;
position: relative;
display: flex;
align-items: center;
background: black;
}
.popup__bar__close {
background-image: url(img/close.svg);
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 30px;
width: 30px;
right: 15px;
transform: rotate(45deg);
cursor: pointer;
}
.popup__chart {
}
.popup__chart img{
max-width: 100%;
height: auto;
}
#popup__content {
padding: 0 30px;
}
#info {
}
#footer {
font-family: 'Roboto Condensed', sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 6px;
height: 70px;
position: absolute;
background: white;
bottom: 0;
width: calc(100% - 90px);
right: 0;
}
#marksChart {
display: block;
box-sizing: border-box;
height: 250px;
width: 250px;
position: absolute;
top: 100px;
left: 90px;
background: white;
z-index: 200000;
border-radius: 12px;
padding: 20px;
}
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#mapid {
height: calc(100vh - 70px);
width: calc(100vw - 90px);
}
body {
padding: 0;
margin: 0;
}
</style>
<main id="main">
<div id="mapid"></div>
</main>
<div class="chart-container" style="max-width: 200px;">
<canvas id="marksChart" width="200" height="400"></canvas>
</div>
<script>
</script>
<div class="popup">
<div class="popup__bar">
<div class="popup__bar__close"></div>
</div>
<div id="popup__content"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- <script type="text/javascript" src="data.geo.json"></script> -->
<script type="text/javascript" src="main.js"></script>
</body>
Change your javascript to following:
$.getJSON('data.geo.json', function (geojson) {
L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
},
onEachFeature: function (feature, layer) {
const coordinates = feature.geometry.coordinates;
const normalizedCoordinates = feature.geometry.coordinates.sort(function(a,b){return a.typeid-b.typeid});
console.log( `Coordinates: ${coordinates}`);
console.log( `Coordinates N: ${normalizedCoordinates}`);
const content =
`
<p id="heading">${feature.properties.name}</p>
<p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>
<p class="scoreB"><strong>ScoreB: </strong><span>${feature.properties.scoreB}</span></p>
<p class="scoreC"><strong>ScoreC: </strong><span>${feature.properties.scoreC}</span></p>
<p class="scoreD"><strong>ScoreD: </strong><span>${feature.properties.scoreD}</span></p>
<div class="popup__chart">chart</div>
`;
layer.on('click', function (e) {
var popupElm = document.getElementById("popup__content");
popupElm.innerHTML = content;
$(".popup").fadeOut(10);
$(".popup").fadeIn("slow");
console.log( `Click on ${feature.properties.name}`);
const maxZoom = mymap.getMaxZoom();
console.log(maxZoom)
mymap.flyTo(this.getLatLng(), maxZoom, {easeLinearity: 0.12, duration:1});
var marksData = {
labels: ["Score A", "Score B", "Score C", "Score D"],
datasets: [{
label: "City",
backgroundColor: "rgba(200,0,0,1)",
data: [
popupElm.querySelectorAll('.scoreA span')[0].innerHTML,
popupElm.querySelectorAll('.scoreB span')[0].innerHTML,
popupElm.querySelectorAll('.scoreC span')[0].innerHTML,
popupElm.querySelectorAll('.scoreD span')[0].innerHTML
],
},]
};
if(radarChart){
radarChart.destroy();
}
radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData
});
});
}
}).addTo(mymap);
});
//Chart
var marksCanvas = document.getElementById("marksChart");
var radarChart = null;
$(document).ready(function(){
$(".popup__bar__close").click(function(){
$('.popup').css('display', 'none');
mymap.flyTo([39.46975, -0.37739], 8, {easeLinearity: 0.12, duration:1});
});
});
What changed:
Add in the Popup around the score value a span, so it can easily read out
<p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>
Move the chart generation into the click function but keep the global variables
Destroy the existing chart, else an error is thrown radarChart.destroy();
Get the valus from popup and use it in the data array. It searches for the class .scoreA and then it get the child span element
popupElm.querySelectorAll('.scoreA span')[0].innerHTML,
Btw. you can also get the values from the clicked layer:
data: [
layer.feature.properties.scoreA,
layer.feature.properties.scoreB,
layer.feature.properties.scoreC,
layer.feature.properties.scoreD,
]
I need to convert default position of two charts in chartjs from absolute to relative. From inspect elements of the browser I saw that it could be changed. Then I tried to change the position of the div to relative as follows but it didn't changed the position of the chart.
<div class="col-xs-6 col-sm-6 d-flex flex-column" style="background-color: ghostwhite;">
<div id="barChartContainer1" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
<div id="barChartContainer2" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
<div id="barChartContainer3" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
</div>
three charts overlaps on each other. I tried by changing java script as follows but it didn't do the work I expected.
var chart1 = new CanvasJS.Chart("barChartContainer2", {
animationEnabled: true,
position: "relative",
height: 600,
})
Can anyone help me with this?
You can try implementing Flexbox design in CSS3:
#container{
display: flex;
flex-direction: row;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div style="height: 100%; width: 100%; padding: 10px; background-color: red;"></div>
<div style="height: 100%; width: 100%; padding: 10px; background-color: blue;"></div>
<div style="height: 100%; width: 100%; padding: 10px; background-color: green;"></div>
</div>
</body>
</html>
If that does not work, this will for sure:
var chart = new CanvasJS.Chart("chart1",
{
animationEnabled: true,
title: {
text: "Chart 1"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(255,12,32,.3)",
dataPoints: [
{ x: 1, y: 10 },
{ x: 2, y: 30 },
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chart2",
{
animationEnabled: true,
title: {
text: "Chart 2"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(32,255,12,.3)",
dataPoints: [
{ x: 1, y: 10 },
{ x: 2, y: 20 },
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chart3",
{
animationEnabled: true,
title: {
text: "Chart 3"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(12,32,255,.3)",
dataPoints: [
{ x: 1, y: 30 },
{ x: 2, y: 1 },
]
},
]
});
chart.render();
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart1" style="height: 100%; width: 30%; display: inline-block;"> </div>
<div id="chart2" style="height: 100%; width: 30%; display: inline-block;"></div>
<div id="chart3" style="height: 100%; width: 30%; display: inline-block;">
</div>
jsFiddle
You'll notice the containment options for the draggable are [7, 0, 40, 0], though I feel they should be [0, 0, 32, 0]. If you click on the button so it is in the "ON" position and drag the <div> (circle slider thing) around, you will notice that it goes to far left and not far enough right. I can't figure out why this is the case. Here is a picture of the problem, it is very slight.
This is what I am going for when you drag it around:
Thanks!
HTML:
<section></section>
<div></div>
CSS:
section {
background-image: url(http://www.rsadler.com/OnOff_slider_small.png);
width: 57px;
height: 25px;
margin: 0;
padding: 0;
}
section:hover{
cursor: pointer;
}
section.ON {
background-position: 82px 0px;
}
div {
background-image: url(http://www.rsadler.com/OnOff_slider_small.png);
background-position: 26px 0px;
position: relative;
height: 24px;
width: 25px;
margin: -25px 0px 0px 0px;
padding: 0;
}
div:hover {
cursor: pointer;
}
JS:
$(document).ready(function(){
$('section').click(function(){
if ($(this).hasClass('ON')) {
$(this).removeClass('ON');
$(this).next().slideLeft();
} else {
$(this).addClass('ON');
$(this).next().slideRight();
}
});
$('div').click(function(){
if ($(this).prev().hasClass('ON')) {
$(this).slideLeft();
$(this).prev().removeClass('ON');
} else {
$(this).slideRight();
$(this).prev().addClass('ON');
}
});
$('div').draggable({
axis: 'x',
containment: [7, 0, 40, 0] // why do I have to put 7 as the x1 value? It should be 0
});
});
jQuery.fn.slideRight = function() {
var o = $(this[0])
o.animate({
'left': '32px'
}, 300);
};
jQuery.fn.slideLeft = function() {
var o = $(this[0])
o.animate({
'left': '0'
}, 300);
};
http://invisiblewebdesign.co.uk/temp/dreamteam/
Hi there..the link above has some sliding divs for the content. Basically what i idealy want is that when you click on the thinner div (and only the thinner one) that it expands and shrinks the other one. I have made an attempt at doing this but i dont think i am doing it a very clever way.
Can someone please advise a more sensible solution and hopefully more elegant.
Thanks
Chris
JS:
$(document).ready(function () {
$('.right').addClass('sidebar');
$('.toggle').click(
function()
{
$('.left').toggleClass('sidebar');
$('.right').toggleClass('sidebar');
if($('.right').is('.sidebar'))
{
$('.left').animate(
{
width: 125,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
$('.right').animate(
{
width: 820
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
}
if($('.left').is('.sidebar'))
{
$('.left').animate(
{
width: 820,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
$('.right').animate(
{
width: 125,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
}
});
});
Simplified script:
HTML:
<div class="content">
<div class="left">
<div class="header">
<h2>Users</h2>
</div>
<div class="content">
</div>
</div>
<div class="right">
<div class="header">
<h2>Placements</h2>
</div>
<div class="content">
</div>
</div>
</div>
CSS:
.left { float: left; }
.right { float: left; margin-left: 10px; }
.header { height: 40px; cursor: pointer;}
.content { height: 200px; }
.left { width: 820px; }
.right { width: 120px; }
.content h2 {
color: white;
font-size: 1em;
font-weight: bold;
float: right;
padding: 10px;
}
.left .header { background-color: red; }
.left .content { background-color: pink; }
.right .header { background-color: green; }
.right .content { background-color: orange; }
jQuery:
$('.content .left').click(function() {
myAnim('.right', '.left');
});
$('.content .right').click(function() {
myAnim('.left', '.right');
});
function myAnim(small, big) {
$(small).animate({
width: 125,
}, {
duration: 700,
});
$(big).animate({
width: 820
}, {
duration: 700,
});
}
jsFiddle here
This should work smoother and be more easy to maintain:
$(document).ready(function () {
$('.right').addClass('sidebar');
$('.toggle').click(
function()
{
$('.left').toggleClass('sidebar');
$('.right').toggleClass('sidebar');
$(this).parent().animate(
{
width: 820,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
$(this).parent().siblings().animate(
{
width: 125,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
});
});
as you can see, instead of acting on a specific class, we will expand the current clicked header, and shrink the rest of his siblings (in case you will have more than one in the future, but even for 2 it is the best approach)
I haven't tested it, but I've attempted to cut your code in half, should make it easier to maintain.
$(document).ready(function () {
$('.right').addClass('sidebar');
$('.right').addClass('sidebarable');
$('.left').addClass('sidebarable');
var hideDistance = 125;
var showDistance = 820;
//this is so you click the hidden sidebar to show it,
//rather than clicking the one that is already visible
//and having it do that weird show//hide thing.
$('.toggle').parent(':not(.sidebar)').click(
function()
{
$('.left').toggleClass('sidebar');
$('.right').toggleClass('sidebar');
$('.sidebarable:not(.sidebar)').animate(
{
width: hideDistance,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});//hidden siderbar
$('.sidebar').animate(
{
width: showDistance
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});//active siderbar
});//click toggle function
});//ready