I start to working with gridstack.js and i want to build layout dynamically from jquery.
But for this i want to provide some layout for boxes, like this:
So i do this, but problem is how i can build, this layout for boxes from script, because now i just add this to html.
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
var grid = GridStack.init();
grid.load(items);
.stantion-box {
display: flex;
}
.stantion-text {
justify-content: right;
}
.image-box {
width: 100%;
height: 100%;
}
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
<link href="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack-h5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />
<div class="container-fluid">
<div class="grid-stack">
<div class="text-center card text-white grid-stack-item newWidget ui-draggable" gs-x="0" gs-y="2" gs-w="3" gs-h="1">
<div class="card-body grid-stack-item-content ui-draggable-handle stantion-box">
<div class="stantion-icon">
<img src="https://www.ccifr.ru/wp-content/themes/ccifr/img/no-image.png" class="image-box"/>
</div>
<div class="stantion-text">
<div class="stantion-title">
<span>Drag me into the dashboard!</span>
</div>
<div class="stantion-descr">
<span>some descr</span>
</div>
</div>
</div>
</div>
</div>
</div>
So i want to build first box on the layout use js, to dynamically boxes build from here
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
How i can defind standart layout for boxes?
Related
Hello I tried to populate Bootstrap cards in a JSP file, but there is this rendering issue with chrome, where card becomes invisible. It works fine in firefox. I have tried inspecting the elements, it was fine. But when I try to scroll down, the card vanishes. Please help me how to resolve this issue.
Here is the Psuedo Code for HTML.
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
crossorigin="anonymous"></script>
</head>
<div class="main-cards" id="reports">
<%
for(int i=0;i<10;i++){
%>
<div class="card">
<div class="card-title">ABC</div>
<div class="card-title">XYZ</div>
<script>
var chart={
pass:"10",
failed:"4",
blocked:"0",
skipped:"0",
notCompleted:"0",
total:"14"
}
</script>
<canvas id="<%=i%>" style="height: 180px"></canvas>
<script>lineCharts(chart,"<%=i%>");</script>
<div class="form-row mb-4">
<div class="col">
<button class="btn" style="background-color: #3e62bd;color: white" name="details" onclick="window.open('SomeServlet?','details','width=800,height=800')">Details Report</button>
</div>
<div class="col">
<button class="btn" style="background-color: #3e62bd;color: white" name="stability" onclick="window.open('SomeServlet?','stabilty','width=800,height=800')">Stability Report</button>
</div>
</div>
</div>
<%
}
%>
</div>
and the CSS
.main-cards {
column-count: 3;
column-gap: 20px;
margin: 40px;
align-items: center;
display: block;
overflow-x: hidden;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
width: 380px;
height: 500px;
background-color: white;
margin-bottom: 20px;
-webkit-column-break-inside: avoid;
padding: 24px;
box-sizing: border-box;
overflow-x: hidden;
}
JS file:
function lineCharts(chart,id){
var pass = chart.pass;
var fail = chart.failed;
var blocked = chart.blocked;
var NotCompleted = chart.notCompleted;
var total = chart.total;
var skipped = chart.skipped;
var legend = [];
var TestData = [];
var background = [];
if(total>=0){
legend.push("Total");
TestData.push(total);
background.push("#05a2f7");
}
if(pass>=0){
legend.push("Pass");
TestData.push(pass);
background.push("#70d660");
}
if(fail>=0){
legend.push("Failed");
TestData.push(fail);
background.push("#FF5A5E");
}
if(skipped>=0){
legend.push("Skipped");
TestData.push(skipped);
background.push("#bf77d6");
}
if(blocked>0){
legend.push("Blocked");
TestData.push(blocked);
background.push("#f2ca6d");
}
if(NotCompleted>0){
legend.push("Not Completed");
TestData.push(NotCompleted);
background.push("#D3D3D3");
}
var ctxL = document.getElementById(id).getContext('2d');
var myBarChart = new Chart(ctxL, {
"type": "horizontalBar",
"data": {
"labels": legend,
"datasets": [{
"label": "Pass Fail Details",
"data": TestData,
"fill": false,
"backgroundColor": background,
"borderColor": background,
"borderWidth": 1
}]
},
"options": {
"scales": {
"xAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
myBarChart.update();
}
Resolved the issue.
Was using different stylesheet of bootstrap
before version:
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
and changed to
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
Now rendering issue is gone and shows correct result.
This will do:
<div class="main-cards" id="reports">
<%
for(int i=0;i<10;i++){
%>
<div class="row">
<div class="card">
<div class="card-body">
<div class="col-6">
<button class="btn" style="background-color: #3e62bd;color: white" name="details" onclick="window.open('SomeServlet?','details','width=800,height=800')">Details
Report</button>
</div>
<div class="col-6">
<button class="btn" style="background-color: #3e62bd;color: white" name="stability" onclick="window.open('SomeServlet?','stabilty','width=800,height=800')">Stability
Report</button>
</div>
</div>
</div>
</div>
<%
}
%>
</div>
I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized My html code is:
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 50%;
margin: 0 auto;
position: absolute;
}
.myslider {
-webkit-appearance: none;
background: white;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 180px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #000080;
width: 33%;
height: 20px;
}
.col-4 {
text-align: center;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
#sliderOutput>div {
display: none;
}
#sliderOutput>div.visible,
#sliderOutput>div:first-child {
display: block;
}
#p1{
height: 10px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="../static/images/1.jpg" width="400" height="180">
<img src="../static/images/2.jpg" width="400" height="180">
<img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div id="sliderOutput">
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
</div>
My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.
Are you just trying to remember what the last slide the user viewed is? If so just use the localStorage.setItem() method and utilise the dataset feature to set a flag of each slide.
If I am right in my presumption your on load function would include the following line to default to the first slide:
localStorage.setItem('currentSlide', '1')
Your HTML slides would each have a dataset tag which could be something like:
data-index="1"
Then, in your change slide function you would get the dataset value and update the localStorage parameter:
function changeSlide() {
// ... Whatever code you have...
localStorage.setItem('currentSlide', this.dataset.index);
}
You could also use the sessionStorage instead, if you do not wish for the website to remember the user's last position after they leave the page: https://developer.mozilla.org/en-US/docs/Web/API/Storage
you can save your image using savImage function
html
<img src="../static/images/1.jpg" id="bannerImg" />
js
function saveImage() {
var bannerImage = document.getElementById('bannerImg');
var canvas = document.createElement("canvas");
canvas.width = bannerImage.width;
canvas.height = bannerImage.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(bannerImage, 0, 0);
var dataURL = canvas.toDataURL("image/png");
localStorage.setItem("imgData", dataURL.replace(/^data:image\/(png|jpg);base64,/,"");
}
after your process you can get your image from local storage
html
<img src="" id="tableBanner" />
js
function getImage() {
var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;
}
you must run these two function for your problem
I need to create a function that generates a new instance of a specific div (.container in the template) when a button (#addDiv) is clicked. The button should be the only thing visible on the webpage before that. How do I do?
I know that it may be possible to do this with document.appendChild. Is there a better way?
I am using toggle-function that works great, I have included it in the code to give you the whole picture.
Vue
Vue.component('dynamicdDvs', {
template: `
<div>
<div class="headerDiv">
<button class="addDiv" type="button" v-on:click="createDiv">Create</button>
</div>
<div class="container">
<div class="createdDiv">
<h2>I am dynamic!</h2>
<button class="minimize" v-on:click="expand">Make me smal</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv">
<p>I am a smal version of the created div!</p>
<button class="maximize" v-on:click="expand">Expand me</button>
</div>
</div>
</div>
`,
data:function () {
return {
displayDiv: false
}
},
methods: {
expand: function () {
this.displayDiv = !this.displayDiv;
},
createDiv: function() {
//The function that creates a new div, with the same code as
//.createdDiv and .createDivMinimized may be placed here
}
}
});
CSS
.headerDiv {
height: 100px;
width: 400px;
background-color: blue;
color: white
}
.createdDiv {
height: 300px;
width: 400px;
background-color: black;
color: white
}
.createdDivMinimized {
height: 300px;
width: 400px;
background-color: red;
color: white
}
HTML
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="parent">
<dynamicDivs></dynamicDivs>
</div>
So what you can do is set a number in data for the number of <div> elements and use v-for with a range. For example
data () {
return {
displayDiv: [false],
divs: 1
}
}
And in your template
<template v-for="n in divs">
<div class="createdDiv">
<!-- snip -->
<button class="minimize" v-on:click="displayDiv[n-1] = !displayDiv[n-1]">Make me small</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv[n-1]">
<!-- snip -->
</div>
</template>
and in your methods...
createDiv () {
this.divs++
this.displayDiv.push(false)
}
I am using bootstrap 4 and it is great but Is there any way I can add certain columns another class like resizable and maybe add min-width or max-width and they will be resizable within these limits. That would be so great.
I’m not referring to any existing library specifically. I am just looking for a solution to this problem.
An example code would be:
<div class="row">
<div class="col" resizable style="max-width:500px;"></div>
<div class="col" resizable></div>
<div class="col" style="min-width:100px;"></div>
<div class="col"></div>
</div>
Thank you very much
https://split.js.org/
You can use split js you'd give your elements an id and set default sizes, because you're using bootstrap you already have a dependency on Jquery so that shouldn't be an issue.
Github link is: https://github.com/nathancahill/split
const GUTTER_SIZE = 30;
const gutterStyle = dimension => ({
'flex-basis': `${GUTTER_SIZE}px`,
});
const elementStyle = (dimension, size) => ({
'flex-basis': `calc(${size}% - ${GUTTER_SIZE}px)`,
})
Split(['#one', '#two'], {
sizes: [500, 100],
minSize: 200,
elementStyle,
gutterStyle
});
div {
border: 2px solid black;
background: #ccc;
height: 170px;
}
.flex {
display: flex;
flex-direction: row;
}
<section class="flex">
<div id="one"></div>
<div id="two"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js">
</script>
Split.js just worked perfect for me, If you are using flex (bootstrap 4) you also must add elementstyle and gutterstyle attributes.
This is how I did it
HTML:
<div class="row no-gutters" style="height:300px">
<div id="one" class="col">A</div>
<div id="two" class="col">B</div>
<div id="three" class="col">C</div>
</div>
CSS:
.split {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;}
.gutter {background-color: transparent;background-repeat: no-repeat;background-position: 50%;}
.gutter.gutter-horizontal {cursor: col-resize;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); }
.gutter.gutter-vertical {cursor: row-resize;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); }
.split.split-horizontal, .gutter.gutter-horizontal { height: 100%;float: left;}
JS Library :
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>
Code:
var splitobj = Split(["#one","#two","#three"], {
elementStyle: function (dimension, size, gutterSize) {
$(window).trigger('resize'); // Optional
return {'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'}
},
gutterStyle: function (dimension, gutterSize) { return {'flex-basis': gutterSize + 'px'} },
sizes: [20,60,20],
minSize: 150,
gutterSize: 6,
cursor: 'col-resize'
});
I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>
You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>
From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>