I'm building a portfolio website with React with large full width vertically scrolling images. There is a single text box on the side of the webpage that I would like to display the title of each image as each image comes into view.
Any recommendations on how to change the text in a DIV when an image comes into view? I'm not even sure what to search to find an answer to this. Any help is much appreciated. Thanks!
You can attach an onscroll listener to detect when the user scrolls. Inside the listener, you need to do some math to calculate which element is currently viewed. The variables you can use for the calculation are scrollTop (on the container, used to determine the current scroll position) and the clientHeight of each element.
let nameDisplayDiv = document.getElementById('display')
let containerDiv = document.getElementById('container')
function refresh() {
let scrollTop = containerDiv.scrollTop + containerDiv.clientHeight / 2
let height = 0
for (let child of containerDiv.children) {
let top = height
let bottom = height += child.clientHeight
if (top < scrollTop && bottom > scrollTop) {
// Found the element that's currently viewed!
nameDisplayDiv.innerHTML = child.style.backgroundColor
break
}
}
}
containerDiv.onscroll = refresh
Here's a working fiddle:
https://jsfiddle.net/uxh91Leq/2/
Related
I use kirjs/react-highcharts plugin for react but I have no idea how to get Highchart component in order to call reflow like: $('#container1').highcharts().reflow()
From docs its tells:
For access to methods & properties from the Highcharts library you can use ReactHighcharts.Highcharts. For example, the Highcharts options are available via ReactHighcharts.Highcharts.getOptions().
but I don't see there any reflow() method.
Any ideas?
Edit
its located under ReactHighcharts.Highcharts.charts so I can call
ReactHighcharts.Highcharts.charts[0].reflow()
but it has list of all highchart instances so I have no information what index is mine
I am using highcharts-react-official and highcharts. They are available via npm . Although I am using different packages, the working principle should be the same.
The way of using reflow() function in react-highchart is also Highcharts.charts[i].reflow(). I have prepared 2 code sandboxes for the demonstration. The first code sandbox shows the way of re-flowing every chart, and the second code sandbox shows the way of re-flowing a particular chart.
The first code sandbox link is here.
There is a button on App.js to hide and show highchart divs.
The child component is React.memo (for performance optimization), therefore the hidden highchart will not be auto resized after it becomes visible.
To let every chart window resize with respect to the window size. The following code is placed in App.js. It looks for all existing charts and re-flow them:
for (var i = 0; i < Highcharts.charts.length; i++) {
if (Highcharts.charts[i] !== undefined) {
Highcharts.charts[i].reflow();
}
}
The second code sandbox link is here.
Almost the same as the first code sandbox, but there is a ref array of referencing every chart.
The chart which needs re-flowing is placed with an id in its chart option.
Iterate every chart and get the index of the chart with that id e.g. "secondChart" for this example.
for (var i = 0; i < chartRef.current.length; i++) {
if (
chartRef.current[i].chart.userOptions.id !== undefined &&
chartRef.current[i].chart.userOptions.id === "secondChart"
)
Highcharts.charts[chartRef.current[i].chart.index].reflow();
}
Re-flow that chart.
The Reflow can be set with event load in options.
Workaround: You have to set reflow() using setTimeout() this will trigger the resizing. Time is set to 0 to avoid delay.
Solution
const options = {
chart: {
type: 'column',
style: {},
events: {
load() {
setTimeout(this.reflow.bind(this), 0);
},
},
},
title: 'Column Chart',
}
Usage
<HighchartsReact highcharts={Highcharts} options={options} />
I have a scope with 150 elements in it and I'm using ngInfiniteScroll to alowe users to scroll through those results. But in my project I can't get the directive to initially fill the container element. It shows the number of results that I want to add whenever the bottom of the element has been reached, and because of that there's no scrollbar so users can't scroll to get to the extra content.
http://plnkr.co/edit/B7CRjvdQ9paytwl5csKi?p=preview
$scope.loadMore = function() {
for(var i=0;i<10;i++) {
if($scope.movies.length) {
var movie = $scope.movies.pop();
$scope.pagedData.push(movie);
}
}
}
If I change the 10 to 20 it starts with 20 examples. The desired result is that the container element is filled with results untill a vertical scrollbar shows up, from then it should only add results when the bottom of the element has been reached.
You can use infinite scrolling feature of ag-grid
AG-Grid
I am new to google maps. right now I'm using ng-map with angularjs. I am finding it difficult to put animations on the makers (like bounce) when I click on a div. Can anybody tell me how can I do that?
I've written an example of how to animate a marker by clicking on a Div element (See the div under the map which has the text "Div element - Click me to toggle marker animation!"). It can be found here:
http://plnkr.co/edit/KATXex?p=preview
The code to animate the marker is as follows:
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
Note that to get this to work properly I had to set the marker's animation property to null in the "on" event e.g.
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
var mapMarker = map.markers[0];
mapMarker.setAnimation(null);
marker = mapMarker;
});
By default it is undefined, which means that without this step you'd normally have to click on the marker twice, once to set the animation to null, second to set the animation e.g. to BOUNCE. The issue with "undefined" may be an issue with the ng-maps library.
I'm building an app part in sharepoint (o365) using angularjs, which displays a list of items i'm following (docs, sites). I display the items as tiles (in rows of 4 below each other), and to fit the app part nicely on any page, I calculate the height of the most outer div (topContainer) which contains all items). I calculate the height when the ng-repeat finishes rendering (with a custom directive). The resizing is done with a postmessage:
var resizeAppPart = function (width, height) {
if (senderId && hostweburl) {
var message = "<Message senderId=" + senderId + " >"
+ "resize(" + width + "," + height + ")</Message>";
window.parent.postMessage(message, hostweburl);
}
}
The height and width are provided by
var heightDoc = $("#topContainer").height();
var widthDoc = $("#topContainer").width();
myUtils.resizeAppPart(widthDoc, heightDoc);
If I use
$(document).height/width();
it delivers the same result.
This works perfectly when loading the page.
However I also provide a button which allows a user to 'unfollow' any of the displayed items. Then the item disappears (splice from the array, the repeat gets updated nicely), and I try to recalculate the height of the app part (so no gap remains when unfollowing an item). I can successfully call the recalculate size function for the app part (that's not the problem) however I just can't get the right height of the app part.. The height remains the same as before unfollowing an item, even though there's now a gap where the unfollowed item was..
So I'm trying to find a method to get the right height of the app part after removing the item from the array. Any Ideas?
I have a qx.Desktop application which is used on mobile devices. Some of the content in my application should be zoomable by pinching. So my question is: Is there a way to zoom a qooxdoo widget like for example a qx.ui.basic.Image bigger and smaller?
The page zooming is configured through the meta tags of your index.html .
If you want to "zoom" or "pinch" one single widget you can use
http://demo.qooxdoo.org/current/apiviewer/#qx.bom.element.Transform
and use the scale method.
You can access the DOM element through getContentElement().getDomElement()
Here is an easy example:
var div = yourLayoutElement.getContentElement().getDomElement();
if (div !== undefined && div !== null)
{
div.style.zoom = scale;
}
a scale of 1.0 is 100%