Develop Reference

Why isn't my javascript code scrolling on website?

This code works great when I test it, but when it's embedded into the website it no longer scrolls down to reveal the images below. It's static. I've tried adding overflow:visible but to no avail. Any idea on what I need to change? Here is a link to the website page where it's not working. https://den-of-dreamers-45.showitpreview.com/new-page-1
Thank you!
var PHOTODATA = [{
id: 1,
category: 'cottagecore',
imageUrl: 'https://static.showit.co/file/U0ucmfm5T22dFNiq2ejzSw/118367/pexels-nadi-lindsay-4990969_1.jpg'
},
{
id: 2,
category: 'cottagecore',
imageUrl: 'https://static.showit.co/file/I1dybkKETdq4ijozGfDs3w/118367/pexels-anete-lusina-6354251.jpg'
},
{
id: 3,
category: 'cottagecore',
imageUrl: 'https://static.showit.co/file/MpOOhlgLSZ2b__8uTuKBJQ/118367/pexels-photo-10213893.jpg'
},
{
id: 4,
category: 'academia',
imageUrl: 'https://static.showit.co/file/5xDz3V4KTi63UoOKKbAlYQ/118367/ashley-winkler-yzhnw0qiqo0-unsplash.jpg'
},
{
id: 5,
category: 'academia',
imageUrl: 'https://static.showit.co/file/ybGpWcTnQmS-beO1R4LqqQ/118367/mel-poole-ppuz3fosru8-unsplash.jpg'
},
{
id: 6,
category: 'academia',
imageUrl: 'https://static.showit.co/file/9td2KJYPQuypgOrKrM20SA/118367/pexels-roman-odintsov-8349176.jpg'
},
{
id: 7,
category: 'ethereal',
imageUrl: 'https://static.showit.co/file/RjY3KcUERsWnjlKbWmkepw/118367/screen_shot_2022-02-03_at_6_43_28_pm.png'
},
{
id: 8,
category: 'ethereal',
imageUrl: 'https://static.showit.co/file/cgx9GCzlRQSoAufxS9dw3w/118367/pexels-ron-lach-10536607.jpg'
},
{
id: 9,
category: 'ethereal',
imageUrl: 'https://static.showit.co/file/FZICN6rlRkiZ4hAkdxdc0Q/118367/pexels-tatiana-twinslol-5444997.jpg'
},
{
id: 10,
category: 'tropical',
imageUrl: 'https://static.showit.co/file/iaEUuhQiQkajqRkvzCuibw/118367/pexels-alan-cabello-1173217.jpg'
},
{
id: 11,
category: 'tropical',
imageUrl: 'https://static.showit.co/file/HpWQ15TsSFKlaQEWXtcBcQ/118367/pexels-michael-block-3225531_1.jpg'
},
{
id: 12,
category: 'tropical',
imageUrl: 'https://static.showit.co/file/LXrsgIh6TA6iG0JSuAMlYw/118367/pexels-ryan-delfin-2270389.jpg'
}
];
{ /*Create a component of the filter panel*/ }
var FilterPanel = React.createClass({
displayName: "FilterPanel",
render: function() {
return /*#__PURE__*/ (
React.createElement("a", {
onClick: this.props.onClick
}, this.props.category));
}
});
{ /*Create a layout component for one photo*/ }
var Photo = React.createClass({
displayName: "Photo",
render: function() {
return /*#__PURE__*/ (
React.createElement("div", {
className: "photo-container",
"data-category": this.props.category
}, /*#__PURE__*/ React.createElement("img", {
src: this.props.imageUrl
})));
}
});
{ /*Create a final collection of photos in photoGallery*/ }
var PhotoGallery = React.createClass({
displayName: "PhotoGallery",
getInitialState: function() {
return {
displayedCategories: PHOTODATA,
active: false
};
},
toggleActive: function() {
this.setState({
active: !this.state.active
});
},
selectCategory: function(element) {
console.log('element is: ' + element);
var categoryName = element.toLowerCase();
var displayedCategories = PHOTODATA.filter(function(el) {
var searchValue = el.category.toLowerCase();
return searchValue.indexOf(categoryName) !== -1;
});
this.setState({
displayedCategories: displayedCategories
});
},
resetFilter: function(element) {
this.setState({
displayedCategories: PHOTODATA
});
},
render: function() {
var buttonClass = this.state.active ? 'active' : '';
var categoryToSelect = this.selectCategory;
var getUniqueCategories = [];
PHOTODATA.forEach(function(el) {
if (getUniqueCategories.indexOf(el.category) === -1) getUniqueCategories.push(el.category);
});
return /*#__PURE__*/ (
React.createElement("div", {
className: "overlay-photogallery"
}, /*#__PURE__*/
React.createElement("div", {
className: "filter-panel"
},
getUniqueCategories.map(function(el, i) {
var boundClick = categoryToSelect.bind(null, el);
return /*#__PURE__*/ React.createElement(FilterPanel, {
onClick: boundClick,
category: el,
key: i
});
}), /*#__PURE__*/
React.createElement("a", {
className: "resetBtn",
onClick: this.resetFilter
}, " Reset Filter ")), /*#__PURE__*/
React.createElement("div", {
className: "PhotoGallery"
},
this.state.displayedCategories.map(function(el) {
return /*#__PURE__*/ React.createElement(Photo, {
key: el.id,
imageUrl: el.imageUrl,
category: el.category
});
}))));
}
});
ReactDOM.render( /*#__PURE__*/ React.createElement(PhotoGallery, null), document.getElementById('main'));
.PhotoGallery {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
overflow: visible;
}
.photo-container {
margin: 5px;
position: relative;
animation: fadeUP .5s;
}
#media screen and (min-width: 1024px) {
.photo-container img {
max-width: 300px;
width: 100%;
}
}
#media screen and (max-width:640px) {
.photo-container img {
max-width: 140px;
width: 100%;
}
}
#keyframes fadeUP {
from {
top: -40px;
opacity: 0;
}
to {
top: 0;
opacity: 1
}
}
#media screen and (min-width: 1024px) {
.filter-panel {
display: flex;
padding: 25px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
#media screen and (max-width:640px) {
.filter-panel {
display: flex;
flex-wrap: wrap;
padding: 10px;
justify-content: center;
align-items: center;
}
}
#media screen and (min-width: 1024px) {
.filter-panel a {
display: inline-block;
background: #fff;
position: relative;
padding: 10px 25px;
font-size: 16px;
color: #000;
border: 1px solid #000;
margin: 5px 15px;
transition: .25s ease-in;
border-radius: 4px;
font-family: cormorant;
letter-spacing: 0;
text-transform: lowercase;
cursor: pointer;
}
}
#media screen and (max-width:640px) {
.filter-panel a {
display: flex;
background: #fff;
position: relative;
padding: 5px 18px;
font-size: 16px;
color: #000;
border: 1px solid #000;
margin: 5px 3px;
transition: .25s ease-in;
border-radius: 4px;
font-family: cormorant;
letter-spacing: 0;
text-transform: lowercase;
cursor: pointer;
}
}
.filter-panel a:hover {
background: #fff;
}
.filter-panel a.active {
top: -8px;
}
.filter-panel a.resetBtn {
background: #b37351;
}
.filter-panel a.resetBtn:hover {
background: #b37351;
}
<title>Image filter with React.js (get from jSON)</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<div id="main"></div>

Text wrapping on Tabulator

var table = new Tabulator("#example-table", {
layout: "fitColumns", //fit columns to width of table
height: "69vh",
responsiveLayout: "collapse", //hide columns that dont fit on the table
cellVertAlign: "middle",
headerSort: false,
columns: [
{
title: "title",
field: "title",
width: 300,
sorter: "string",
formatter(cell, formatterParams) {
return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
}
},
{
title: "body",
field: "body",
sorter: "string",
formatter(cell, formatterParams) {
return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
}
}
]
});
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/posts",
success: function (data) {
setTimeout(() => {
table.addData(data, false);
table.restoreRedraw();
}, 200);
}
});
body {
font-family: Arial;
}
h1 {
text-align: center;
margin: 0, auto;
}
.button {
justify-content: center;
margin: 10px;
text-align: center;
}
.button button {
margin: 10px;
padding: 10px;
}
.p-name-inside-table {
width: 100%;
cursor: default !important;
}
.p-name-inside-table img {
cursor: pointer !important;
}
<link href="https://unpkg.com/tabulator-tables#4.9.3/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Tabulator</h1>
<div id="example-table"></div>
How do I wrap the title's row so it doesn't get truncated on Tabulator? You can see the rows are truncated and I can't find it on the docs (http://tabulator.info)
( ----This is for avoiding that "mostly code" error---------------------------------------------------------------------------------)

A little bit of CSS should do the trick:
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
white-space: normal !important;
}

element.innerHTML is not a function and option with an object value

Hi I'm trying to do the following in javascript, basically, I have an input that I will get the input text from an array, and I need each option to have an object as a value so I can use some attributes of my object
const data = [
{
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
socioIncrease: 0,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 49.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
socioIncrease: 25,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 149.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
];
const Modes = () => {
if (data instanceof Array) {
return data.map((value) => {
return {
name: value.name,
funcionarioIncrease: value.funcionarioIncrease,
socioIncrease: value.socioIncrease,
faturamento: value.FATURAMENTO,
};
});
} else {
return null;
}
};
let results = function () {
const modes = Modes();
let selectHeader = document.querySelectorAll(".select__header");
let selectItem = document.querySelectorAll(".select__item");
modes.map((value) => {
let element = document.createElement("div");
element.classList.add("select__item");
element.innerHTML(value.name);
});
selectHeader.forEach((item) => {
item.addEventListener("click", selectToggle);
});
selectItem.forEach((item) => {
item.addEventListener("click", selectChoose);
});
function selectToggle() {
this.parentElement.classList.toggle("is-active");
}
function selectChoose() {
let text = this.innerText,
select = this.closest(".select"),
currentText = select.querySelector(".select__current");
currentText.innerText = text;
select.classList.remove("is-active");
}
};
results();
.select {
position: relative;
width: 100%;
}
.select.is-active .select__body {
display: block;
}
.select__header {
border: 1px solid #ccc;
cursor: pointer;
display: flex;
}
.select__current {
font-size: 18px;
line-height: 24px;
padding: 8px;
}
.select__icon {
align-items: center;
display: flex;
flex-shrink: 0;
justify-content: center;
height: 40px;
margin-left: auto;
text-align: center;
width: 40px;
}
.select__body {
border: 1px solid #cccccc;
border-top: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
.select__item {
cursor: pointer;
font-size: 16px;
line-height: 24px;
padding: 8px;
}
.select__item:hover {
background-color: #f2f2f2;
}
<div class="service_mode flex">
<div class="select is-active">
<div class="select__header">
<span class="select__current">Value 1</span>
<div class="select__icon">×</div>
</div>
<div class="select__body"></div>
</div>
</div>
for some reason, I am not able to map my array and add its inner HTML as the attribute name of my object and I am also not finding a way to link the option to that object.

As it says element.innerHTML is not a function. Instead of element.innerHTML(value.name);, write element.innerHTML = value.name;
So your code looks like:
modes.map((value) => {
let element = document.createElement("div");
element.classList.add("select__item");
element.innerHTML = value.name;
});

Try this below:
element.innerHTML = value.name;

How do I create nested fieldsets with vue-form-generator?

How do I create nested fieldsets with vue-form-generator?
Here is an example with a fieldset around the whole form. I would like to nest a fieldset to group skills and status within the main fieldset? I couldn't find anything in the documentation that explains this.
var vm = new Vue({
el: "#app",
components: {
"vue-form-generator": VueFormGenerator.component
},
data() {
return {
model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
age: 35,
skills: ["Javascript", "VueJS"],
email: "john.doe#gmail.com",
status: true
},
schema: {
groups: [{
legend: "User Details",
fields: [{
type: "input",
inputType: "text",
label: "ID",
model: "id",
readonly: true,
featured: false,
disabled: true
}, {
type: "input",
inputType: "text",
label: "Name",
model: "name",
readonly: false,
featured: true,
required: true,
disabled: false,
placeholder: "User's name",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "number",
label: "Age",
model: "age",
min: 18,
validator: VueFormGenerator.validators.number
}, {
type: "input",
inputType: "email",
label: "E-mail",
model: "email",
placeholder: "User's e-mail address",
validator: VueFormGenerator.validators.email
}, {
type: "checklist",
label: "Skills",
model: "skills",
multi: true,
required: true,
multiSelect: true,
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
}, {
type: "switch",
label: "Status",
model: "status",
multi: true,
readonly: false,
featured: false,
disabled: false,
default: true,
textOn: "Active",
textOff: "Inactive"
}]
}]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
};
}
});
html {
font-family: Tahoma;
font-size: 14px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
pre {
overflow: auto;
}
pre .string {
color: #885800;
}
pre .number {
color: blue;
}
pre .boolean {
color: magenta;
}
pre .null {
color: red;
}
pre .key {
color: green;
}
h1 {
text-align: center;
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
}
fieldset {
border: 0;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
border-color: #ddd;
}
.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-body {
padding: 15px;
}
.field-checklist .wrapper {
width: 100%;
}
fieldset {
border: 1px groove #ddd !important;
}
<script src="https://unpkg.com/vue-form-generator#2.1.1/dist/vfg.js"></script>
<link href="https://unpkg.com/vue-form-generator#2.1.0/dist/vfg.css" rel="stylesheet" />
<script src="https://unpkg.com/vue#2.2.1/dist/vue.min.js"></script>
<h1 class="text-center">Demo of vue-form-generator</h1>
<div class="container" id="app">
<div class="panel panel-default">
<div class="panel-heading">Form</div>
<div class="panel-body">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</div>
</div>
</div>
Here is a simple html example
<fieldset>
<legend>User Details</legend>
<label for="">ID</label>
<input type="text">
<br><label for="">Name</label>
<input type="text">
<br><label for="">password</label>
<input type="password">
<br><label for="">Age</label>
<input type="text">
<br><label for="">Email</label>
<input type="text">
<fieldset>
<legend>User Special Detils</legend>
<br><label for="">Skills</label>
<input type="text">
<br><label for="">Status</label>
<input type="text">
</fieldset>
</fieldset>
EDIT:
I added the simple html demo above

If I'm understanding you correctly then you already have the ability to add a fieldset as you are structuring your schema. Using groups you get the different fieldset you are looking for. If you are looking for dynamic if/then you can use visible which is in the first model below. You can select the model and condition of when your field will show.
Each group is a new fieldset in the html.
This is an older question so I hope you figured this out already.
schema: {
groups: [{
legend: 'Entry',
{model: "enter", type: "radios", label: "Enter", values: ["Yes","No"]),
{model: "entryPrice", type: "input", inputType: "number", label: "Entry Price",
visible(model) {
return model && model.entryType != 'Yes';
}
}
legend: 'newGroup',
{model: "model", type: "text" , label: "Cool Label", inputType: "text"}
}

Get specific data from an jQuery $(this) object

I have a node tree and want to fetch certain data attributes from these nodes when clickin on them.
I can't figure out how to get the right data from the object recived when clicking on it.
var simple_chart_config = {
chart: {
container: "#tree"
},
nodeStructure: {
text: {
name: "King Miro",
title: "King"
},
children: [{
text: {
name: "King Randor",
title: "King"
},
children: [{
text: {
name: "He-Man",
title: "Master of the Universe"
},},{
text: {
name: "She-Ra",
title: "Princess"
},
}]
}, {
text: {
name: "Skeletor",
title: "Lord of Destruction"
},
}, ]
}
}
var my_chart = new Treant(simple_chart_config);
$('body').on('click', '.Treant .node', function() {
alert($(this).attr("title"));
console.log($(this));
});
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<div id="tree">
</div>
So now I'm trying to fetch the name: and title:
I tried with many different versions of $(this).attr("") and val(). Trying to fetch via div class and similar.
I'm stuck right now.

You can use your build DOM to take the correct text that you need : $(this).find(".node-name") and $(this).find(".node-title")
var simple_chart_config = {
chart: {
container: "#tree"
},
nodeStructure: {
text: {
name: "King Miro",
title: "King"
},
children: [{
text: {
name: "King Randor",
title: "King"
},
children: [{
text: {
name: "He-Man",
title: "Master of the Universe"
},},{
text: {
name: "She-Ra",
title: "Princess"
},
}]
}, {
text: {
name: "Skeletor",
title: "Lord of Destruction"
},
}, ]
}
}
var my_chart = new Treant(simple_chart_config);
$('body').on('click', '.Treant .node', function() {
alert($(this).find(".node-name").text());
alert($(this).find(".node-title").text());
console.log($(this));
});
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<div id="tree">
</div>