I found a great example for this approach and it works fairly well but it starts changing the opacity when the TOP of the element scrolls off the page. Unfortunately with a larger element the visibility (opacity decrease) starts way too soon. I'm trying to figure out how to start lowering the opacity when the bottom of the element is in near proximity to the top of the top of the screen so that all elements start fading at the same time in relationship to their bottom (not their top).
Any ideas on how to accommodate that with this code? I like this code in terms of being able to control speed of the opacity change as well. Maybe leveraging element height?
Thanks!!
<script type="text/javascript">
$(function() {
var documentEl = $(document),
fadeElem = $('.fade-scroll');
documentEl.on('scroll', function() {
var currScrollPos = documentEl.scrollTop();
fadeElem.each(function() {
var $this = $(this),
elemOffsetTop = $this.offset().top;
if (currScrollPos > elemOffsetTop) $this.css('opacity', 1 - (currScrollPos-elemOffsetTop)/200); /* this number effects speed of fade aka opacity reduction*/
});
});
});
</script>
Related
i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.
Here's one way to do it:
handle rowDataChanged in your markup:
<ag-grid-angular
class="ag-dark"
[rowData]="messages"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
(bodyScroll)="handleScroll($event)"
(rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>
In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:
gridOptions: GridOptions = {
suppressScrollOnNewData: true,
}
handleRowDataChanged(event) {
const index = this.messages.length - 1;
this.gridOptions.api.ensureIndexVisible(index, 'bottom');
}
Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom
In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
I am aware of bringToFront(), but it does not meet my requirements. I would like to set the zIndex dynamically based on properties.
Leaflet has the method setZIndex(), but this apparently does not work for geoJson layers:
https://jsfiddle.net/jw2srhwn/
Any ideas?
Cannot be done for vector geometries.
zIndex is a property of HTMLElements, and vector geometries (lines and polygons) are rendered as SVG elements, or programatically as <canvas> draw calls. Those two methods have no concept of zIndex, so the only thing that works is pushing elements to the top (or bottom) of the SVG group or <canvas> draw sequence.
Also, remind that L.GeoJSON is just a specific type of L.LayerGroup, in your case containing instances of L.Polygon. Furthermore, if you read Leaflet's documentation about the setZIndex() method on L.LayerGroup:
Calls setZIndex on every layer contained in this group, passing the z-index.
So, do L.Polygons have a setZIndex() method? No. So calling that in their containing group does nothing. It will have an effect on any L.GridLayers contained in that group, though.
Coming back to your problem:
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
Looks like the thing you're looking for is map panes. Do read the map panes tutorial.
This is one of the reason for the implementation of user defined "panes" in Leaflet 1.0 (compared to versions 0.x).
Create panes: var myPane = map.createPane("myPaneName")
If necessary, set the class / z-index of the pane element: myPane.style.zIndex = 450 (refer to z-index values of built-in panes)
When creating your layers, specify their target pane option: L.rectangle(corners, { pane: "myPaneName" })
When building through the L.geoJSON factory, you can loop through your features with the onEachFeature option to clone your layers with specified target pane.
Demo: https://jsfiddle.net/3v7hd2vx/90/
For peoples who are searching about Z-Index
All path layers (so all except for markers) have no z-index because svg layers have a fix order. The first element is painted first. So the last element is painted on top.
#IvanSanchez described good why zIndex not working.
You can control the order with layer.bringToBack() or layer.bringToFront().
With that code you have more options to control the order of the layers.
L.Path.include({
getZIndex: function() {
var node = this._path;
var index = 0;
while ( (node = node.previousElementSibling) ) {
index++;
}
return index;
},
setZIndex: function(idx) {
var obj1 = this._path;
var parent = obj1.parentNode;
if(parent.childNodes.length < idx){
idx = parent.childNodes.length-1;
}
var obj2 = parent.childNodes[idx];
if(obj2 === undefined || obj2 === null){
return;
}
var next2 = obj2.nextSibling;
if (next2 === obj1) {
parent.insertBefore(obj1, obj2);
} else {
parent.insertBefore(obj2, obj1);
if (next2) {
parent.insertBefore(obj1, next2);
} else {
parent.appendChild(obj1);
}
}
},
oneUp: function(){
this.setZIndex(this.getZIndex()+1)
},
oneDown: function(){
this.setZIndex(this.getZIndex()-1)
}
});
Then you can call
polygon.oneUp()
polygon.oneDown()
polygon.setZIndex(2)
polygon.getZIndex()
And now layergroup.setZIndex(2) are working
I've made a MultiBarChart with NVD3.
It works, however, a colleague said I needed more space between each Australian state.
So, Tasmania further from Victoria etc.
Here is the data visualisation
I can not find a forum that explains this in non-developer language. I'm not a developer, but having a go.
Here is my code...
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 105, bottom: 30, left: 103})
.tooltips(true)
.showControls(false);
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg')
.datum(long_short_data)
.transition().duration(1400)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
Thanks you super kind and smart people!
No Need to use too much code for spacing just use below code :
var chart = nv.models.multiBarChart();
//added by santoshk for fix the width issue of the chart
chart.groupSpacing(0.8);//you can any value instead of 0.8
This is unfortunately something you can't configure in NVD3. However, you can change the height of the bars after the chart has been created to make it appear as if there's more space between them. The code to do this is simple:
d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3);
The default height is chart.xAxis.rangeBand()/2 -- you can adjust this as you see fit. The only thing to keep in mind when running this code is that NVD3 animates its elements, so not everything will be there in the beginning or values may be overwritten. You can solve this by waiting a small amount of time before calling that code using setTimeout:
setTimeout(function() {
d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3);
}, 100);
Just found this question while searching for a way to add more space between bars. Like Lars said, you can change the bar size after the chart has been drawn. However, when you increase the bar height without changing the space between each bar, it overflows. To add space between the bars you should use xRange:
var chart = nv.models.multiBarHorizontalChart().xRange([0, 125])
I have a Ext.form.Panel inside Ext.window. Form height is more than window height so I have vertical scroll on window.
On form fields validation (on validitychange event) scroll jumps to the top.
How to avoid this behaviour?
I tried to figure out, why one of my forms did scroll up and other did not. Turned out, that I have forgot to explicitly specify layout manager and that default layout manager (anchor) scrolled to top on validity change, while vbox layout did not. While everything looked exactly the same (vbox with align: 'stretch'), it behaved differently when the error was either shown or hidden.
I have the same problem :(
I made a creepy workaround (it works to 80%) Sometimes it still jumps to the top.
You should know, that I have a window with a layout of 'form'. If you have a window with (for example) a layout of 'fit' with an xtype of 'form' - you may have to change the code a little bit.
For example the line el.child(".x-window-body", fasle) wouldn't work.
init: function() {
this.control({
...
/** My Ext.window.Window is called reservationwindow **/
'reservationwindow': {
afterrender: function(comp) {
// comp is this Ext.Component == wrapper
var el = comp.getEl();
//extjs adds the scrollbar to the body element...
var elForm = el.child(".x-window-body", false);
// or el.child(".x-panel-body", false);
//we are listinig to the scroll-event now
this.myFormEl = elForm;
this.safeScroll = {top:0, left:0};
elForm.on('scroll', function() {
console.log("save");
this.safeScroll = this.myFormEl.getScroll();
}, this);
elForm.on('click', function() {
var resWin = this.getResWin();
resWin.scrollBy(0,this.safeScroll.top,false);
console.log("reset");
}, this);
elForm.on('keyup', function() {
var resWin = this.getResWin();
resWin.scrollBy(0, this.safeScroll.top, false);
console.log("reset");
}, this);
}
As you can see, I am listening to the scroll-event and safe and reset the scroll bar. Sometimes (especially if you are writing very quickly in a textbox) the events come in a different order and the page will still jump to the top. Sometimes you also see it flickering around (if it needs too long to set it back to the original position).
So.... As I said, its a creepy workaround.
If you find a better solution, please let me know.
EDIT
I also figured out, that the grow option on a textareafield was one of the troublemakers.
{
id: this.id + '-details',
xtype: 'textareafield',
// grow: true, now it isn't jumping
name: 'message',
fieldLabel: 'Zusätzliche Informationen',
labelAlign: 'top',
renderder: 'htmlEncode',
disabled: isDisabled,
anchor: '100%'
}
I am using the jqplotDataHighlight option to display the tooltip on a chart on MouseOver.
$("#"+sTargetId).bind('jqplotcustomDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
var chart_left = $("#"+sTargetId).offset().left,
chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
chart_top = $("#"+sTargetId).offset().top,
x = oPlot.axes.xaxis.u2p(data[0]), // convert x axis units to pixels
y = oPlot.axes.yaxis.u2p(data[1]);;
var tooltipData = data[1]*scale;
$('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
$('#tooltip').html('<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">' +sXDisplay+': '+ tooltipData + '</span>');
$('#tooltip').show();
});
$("#"+sTargetId).bind('jqplotcustomDataUnhighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#tooltip').empty();
$('#tooltip').hide();
});
It works fine.On iPad, i want the tooltip to be displayed on some touch event.How can i implement it?
// prop: highlightMouseOver
// True to highlight slice when moused over.
// This must be false to enable highlightMouseDown to highlight when clicking on a slice.
this.highlightMouseOver = true;
// prop: highlightMouseDown
// True to highlight when a mouse button is pressed over a slice.
// This will be disabled if highlightMouseOver is true.
this.highlightMouseDown = false;
I have observed that only the above two options are available. How can I implement it on touchstart or so?
Displaying the tooltip on doubleclick or any other event would also be helpful
Maybe you already figured this out. Here's what works for me. I am using jquerymobile, in jquery.jqplot.js version 0.9.7r635 line No: 2290 change mousemove to vmousemove. If you are using cursor: {followMouse: true} , then things should work out of the box, I have a fixed position for my tooltip, but on mousemove the top and left values did not get applied so i hardcoded the top and left for the tooltip div .jqplot-cursor-tooltip to appear in the same position as it does on click. Although its not a very good solution but I havent seen weird behavior till now. Hope this helps !