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>

X axis scrollbar hidden at the bottom inside of vertical scroll

Exactly as the title says, my overflow-x scrollbar is hidden at the bottom of the overflow y scrollbar. Is there anyway to fix this?
Right now the height and width are coming from the parent .wrapper div, but the overflow-x, while commented out, seems to be automatically set to scroll.
Any advice would be greatly appreciated!
Codesandbox
<template>
<div class="wrapper">
<vue-good-table
style="width: 100%"
class="issue-tracker-style"
:columns="columns"
:rows="rows"
:sort-options="{
enabled: false,
}"
>
<template v-slot:table-row="scope">
<div>
<div>{{ scope.formattedRow[scope.column.field] }}</div>
</div>
</template>
</vue-good-table>
</div>
</template>
<script>
export default {
name: "my-component",
mounted: function () {
let tdElm;
let startOffset;
Array.prototype.forEach.call(
document.querySelectorAll("table th"),
function (td) {
td.style.position = "relative";
//td.style.maxWidth = "unset";
let grip = document.createElement("div");
grip.innerHTML = " ";
grip.style.position = "absolute";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = "5px";
// grip.style.background = "red";
grip.style.cursor = "col-resize";
grip.addEventListener("mousedown", function (e) {
tdElm = td;
startOffset = td.offsetWidth - e.pageX;
});
td.appendChild(grip);
}
);
document.addEventListener("mousemove", function (e) {
if (tdElm) {
tdElm.style.minWidth = startOffset + e.pageX + "px";
}
});
document.addEventListener("mouseup", function () {
tdElm = undefined;
});
},
data() {
return {
columns: [
{
label: "Name",
field: "name",
//width: "100px"
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
{
label: "Name",
field: "name",
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
{
label: "Name",
field: "name",
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
],
rows: [
{ id: 1, name: "John", age: 20, createdAt: "", score: 0.03343 },
{
id: 2,
name: "Jane Jacob Johnson OOOO",
age: 24,
createdAt: "2011-10-31",
score: 0.03343,
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343,
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343,
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343,
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343,
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343,
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343,
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343,
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343,
},
],
};
},
};
</script>
<style lang="scss">
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
overflow-y: scroll;
/* overflow-x: scroll; */
}
body {
display: flex;
justify-content: center;
margin-top: 5rem;
}
.issue-tracker-style {
font-family: "Inter";
width: 100%;
.vgt-inner-wrap {
box-shadow: none;
}
td > div {
position: relative;
width: 100%;
height: 100%;
}
td > div > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
thead {
border: 1px solid #f0f7ff;
}
tr {
background: white;
margin: 0;
height: 32px; // height works like min-height apparently https://stackoverflow.com/questions/19432092/can-i-use-a-min-height-for-table-tr-or-td/37115413
}
td {
min-width: 70px;
overflow: hidden;
white-space: nowrap;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
tr th {
color: #4859af;
font-weight: 600;
height: 100%;
vertical-align: middle;
padding: 0.5rem 0;
font-size: 13px;
background: #fafafa;
border: 2px solid #efeff0;
text-align: center;
overflow: hidden;
white-space: nowrap;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
tr td {
padding: 0;
font-size: 13px;
color: #4859af;
background: white;
border: 2px solid #efeff0;
height: 42px;
vertical-align: middle;
}
tr td,
tr th {
text-align: center;
}
/*tr th {
width: 60px !important;
}*/
}
</style>

this css should fix the problem
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
overflow: scroll;
}
.vgt-responsive {
overflow: visible!important;
}
The scrollbar hidden at the bottom comes from the .vgt-responsive class.

Kendo Grid tooltip at the end of row

I'm using a kendo grid and I want to implement an action bar when a user hover the row. I found the example solution. But I'm looking for showing the tooltips at the end of the row instead of the current hover column. So how can I get the last column that user currently stop at?

Add a :last-child to the filter property:
filter: "tbody td:last-child",
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 500
}, {
field: "ContactTitle",
title: "Contact Title",
width: 300
}, {
field: "CompanyName",
title: "Company Name",
width: 300
}, {
field: "Country",
width: 300
}]
});
});
$("#grid").kendoTooltip({
position: "right",
callout: false,
filter: "tbody td:last-child",
content: function(e) {
return "<button class='k-button' ><span class='k-icon k-i-trash'></span></button> <button class='k-button'><span class='k-icon k-i-email'></span></button> <button class='k-button'><span class='k-icon k-i-warning'></span></button>";
}
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Dojo

Unable to update datatable in Highcharts

Continuation of what I thought was resolved a couple of months ago:
A new datatable is rendered each time when called in Ajax response [Highcharts]
$(function() {
Highcharts.setOptions({
lang: {
exportData: {
categoryHeader: 'Vulnerability'
}
}
});
$('#container').highcharts({
chart: {
//plotBackgroundColor: null,
//plotBorderWidth: null,
//plotShadow: false,
evsents: {
load: Highcharts.drawTable
},
height: 400,
width: 800,
//marginBottom: 250
},
title: {
text: undefined
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
showInLegend: true,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -50,
connectorColor: '#000000',
format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
}
}
},
exporting: {
showTable: true,
tableCaption: false
},
series: [{
type: 'pie',
name: 'Counts',
data: [{
y: 4,
name: 'high',
}, {
y: 8,
name: 'medium',
}, {
y: 2,
name: 'low'
}]
}]
});
});
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
position: absolute;
top: 200px;
left: 20px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Overview:
I have a condition where I need to update highcharts datatable every time when the change event is triggered.
http://jsfiddle.net/BlackLabel/s7m0tvpy/
This was working perfectly before in which clicking the update button changes 4,8,2 to 0,0,1.
But quite recently, this is not working.
Is it something that update function has been modified?
Any help would be appreciated.

This issue was due to
https://github.com/highcharts/highcharts/issues/14320
However, it still works in 8.1.2 version.
<script src="https://code.highcharts.com/8.1.2/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/export-data.js"></script>

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>