The live dashboard demo for icCube shows dashboards that scale with the size of your browser window. At the moment, though, after you resize the window, you have to refesh your browser first to see the re-scaled dashboard.
Is it possible - and how - to scale automatically after you resize the window (so without pressing F5)?
My javascript developer foung the following solution. It is not perfect, but it works:
in the main dashboard that acts as a menu (using the embedded report widget), place an action/button with the event ic3-report-refresh in it
make the button invisible with CSS
place the following code in the javascript section for the main dashboard:
function consumeEvent( context, event ) {
if (event.name == 'ic3-report-after-build') {
//resize window
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(window).resize(function () {
delay(function(){
$(".report-refresh-button").trigger("click");
}, 500);
});
}
}`
The effect is that when the main html page (in which the main dashboard is embedded) changes in size (i.e. iPad turns), a refresh is triggered which effectively triggers icCube to resize the page.
In version 5.1.1 it is now fixed and it works.
It took me a while to get it working, since I was referencing to a different version of jquery in the main page (jquery-1.11.2.min.js).
After I changed it to the jquery version in icCube (jquery-1.7.2.min.js) it worked.
I do not know why this is the case, but it is working and that is the main thing that counts.
Related
I am building a website using react to implement.First, we scroll the page to the bottom or middle position.Then we click refresh button in the iphone safari browser，page scroll to the permanent position strangely.I have tried to change the flex layout to float layout and add pageshow event listener to set scrollTop zero using
window.scrollTo(0,0)
.But page still stop at the permanent position in safari mobile.
I guess the problem is the page save the position of last view, but when page fresh, the content of the page is not show completely, and then the page could only scroll to the permanent position.At last, the rest part of the page show out.And the pageshow event has been triggered early before the page scroll to the permanent position.
How can I force the page to be scrolled to the top on page refresh except window.scroll? How can I solve this strange behavior of the safari browser?
I have the same issue as you using react on ios safari, the only fixed I found is to use a setTimeout in componentDidMount, but I really don't like this solution
componentDidMount() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 800);
}
Hope it'll help
use window.scroll(0, 0) instead of window.scrollTo()
We're using lots and lots of Kendo grids, many of which have virtual scrolling set up with a server-side data source.
Sometimes, one of them will hide records beyond the "reach" of the virtual scrollbar. We can see what's going on by using Developer Tools to make the internal scrollbar visible:
It's hard to put a finger on when this happens exactly - the bug keeps popping up in seemingly random places.
Any ideas how to narrow this down / deal with it?
Try resetting the virtual scroller in the grid onDataBound event.
onDataBound: function(evt) {
//Repaint the virtual scroll bar to make sure all rows are visible to user
var grid = evt.sender.wrapper.data("kendoGrid");
grid._rowHeight = undefined;
grid.virtualScrollable.refresh();
},
You need to do this on detail row expand and shrinks as well.
I tried virtualScrollable.refresh(), does not fully shown the hidden content, but using resize(true) works
$("#yourGridId").data("kendoGrid").virtualScrollable.refresh(); //does not fully show hidden content
$("#yourGridId").data("kendoGrid").resize(true); //works
just need to call this from all the related events (still working on identifying them)
As Telerik (more or less) points out in the docs, changes to the rowheight in a grid with virtual scrolling won't work when the grid has display: none.
We had an event handler that would hide the grid and fire an async call. On success of the async call, we were changing a value that resulted in a different rowheight (removed bold from one row).
That was enough to throw off the scrolling as pictured.
I am building a page which contains many charts, which are displayed one at a time depending on which tab you are looking at.
The chart in the initially active tab renders correctly. However when I click to another tab, the chart is not rendered properly.
Presumably this is because the hidden field does not have dimensions until it is made visible. In fact if I resize the window the chart will correct it's proportions, and render so that it fills the available width.
I can fix this problem by explicitly defining the chart size via css, but this defeats the responsive aspect of the charts.
Can anyone tell me how to trigger the same NVD3 event which gets activated when the window resizes? That way I can bind it to the selection of a new tab, and hopefully remedy the rendering issue.
I had the same issue (charts on multiple tabs), and this is the only thing that I could get to work.
$(function () {
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
window.dispatchEvent(new Event('resize'));
});
});
I have a feeling, however, that all of the charts are being re-rendered, regardless of whether they are on the active tab (visible) or in the non-selected tabs (hidden).
Does anyone know how to ensure ONLY the active chart gets resized / redrawn?
I figured out how to trigger the resize event I needed. In my case the tabs are driven by bootstrap. So I simply modified my bootstrap show tab event to trigger a page resize event as well. It's a little indirect, but it gets the job done:
jQuery('#myTab a').click(function (e) {
e.preventDefault()
jQuery(this).tab('show')
jQuery(window).trigger('resize'); // Added this line to force NVD3 to redraw the chart
})
Just add this JavaScript:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
})
hidden.bs.tab is the event that fires after a new tab is shown as per the Bootstrap docs. This code fires a resize event after each tab change.
Reason For New Answer
Vanilla Javascript is necessary for a lot of people in 2018. As a lot of frameworks and Javascript libraries that exist today do not play well with jQuery. Once upon a time answering all Javascript problems with a jQuery solution was acceptable but it is no longer feasible.
Problem
When loading C3.js or D3.js graphs, if the viewport is not actively in site during page load the graphs do not render correctly.
Example
If you type in the URL then open a new tab and then go back after your page loads.
If you refresh the page that has your graphs on it then minimize the browser and open it back up after the page has loaded.
If you refresh or go to the page with the graphs then swipe away to a new window on your computer. Then go back to the page with the graphs after they have loaded.
In all these cases your C3.js / D3.js graphs will not render correctly. Typically you will see a blank canvas. So if you were expecting a bar chart, you would see a canvas without the bars being drawn.
Background
Although I have seen this question answered I needed an answer that did NOT use jQuery. Now that we have reached the days of everything can not be fixed with jQuery I thought it seemed fit to provide a vanilla Javascript answer to this question.
My team faced the issue that the C3.js / D3.js graphs would not load if you refreshed the page and swiped away or minimized. Basically if you did not stay on the page and keep it in site till it was done loading you would not see the graphs till you resized the page again. I know this is a problem that happens to everyone using C3.js / D3.js but we are specifically using Lightning in Salesforce.
Answer
Our fix was to add this in the controller function that initializes the charts. Anyone can use this in any function they write to initialize their C3.js / D3.js graphs regardless of their stack. This is not Salesforce dependent but it does indeed work if you are facing this issue in Salesforce.
document.addEventListener('visibilitychange', () => {
console.log(document.visibilityState);
window.dispatchEvent(new Event('resize'));
});
I was facing same issue. I was using ng-show to make div hidden . Once I replaced ng-show with ng-if I am able to see graph drawn in expected behavior. Explanation:
When we use ng-show or ng-hide to make div hidden it only changes it display property but div will be in dom.
When we use ng-if div is removed from dom and again added to dom so internally it performs redraw operation on nvd3 graph too. Hence we see correct graph instead of squished one.
The event that usually triggers a redraw is the window resize event -- NVD3 doesn't use a custom event for this. You can control this yourself though; the usual definition is
nv.utils.windowResize(function() { d3.select('#chart svg').call(chart); });
(where "#chart" is the element that contains the graph). There's nothing stopping you triggering the code on another event or even just running the redraw code explicitly when you change the tab.
a more efficient approach would be to use the chart.update() method
var chart_x = nv.models.somechart()
var chart_y = nv.models.somechart()
..... show charts
jQuery('#myTab a').click(function (e) {
e.preventDefault()
jQuery(this).tab('show')
if(jQuery(this)...something === '..x..')
chart_x.update(); //CALL THE UPDATE
else ...
})
The new mini-site for iPhone 5s has a special page scroll:
http://www.apple.com/iphone-5s/
Every time you flick the page, it glides and stops at the next full page, not halfway, and not any more than required. How do they do it?
I had to do a similar site and I created a plugin for it:
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
Living demo
In mine you can also:
Use it over IE 8 and old browsers with no CSS 3 support.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Resize of texts when resizing the window.
Mobile and Tablet detection enabling the scrolling on them. (as there are usually problems to visualize big contents and texts)
It is in its first version, simple but working well :)
I will keep improving it as far as I can. Suggestions will be more than welcome.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
I've been fiddling with a solution to a similar problem.
All my solution does is monitor when the window scrolls.
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
Check out the full code at http://jsfiddle.net/dLCwC/1/
Maybe it'll be of some use to someone (let me know if it is, or isn't).
I'm running the latest download of sencha-touch off of the website download page.
I've got an html template with a nested iFrame that contains a Vimeo video.
When I touch any space AROUND the video, the panel scrolls exactly as expected, however, if I touch the video when trying to scroll, the whole app scrolls (tabbar menu, top toolbar, etc) and the actual panel doesn't scroll to reveal the content further down the page.
Is there a way to make it so that it scrolls properly no matter where on the screen you touch?
You probably want to take a look at the dom events that are being fired and try to stop the ones that are giving you the issue. At worst the user may not be able to scroll when touching the video first.
I had a similar issue with Google Maps (not in an iframe however). If it was embedded in a scrollable panel, the panel would scroll at the same time as interacting with the map. What I did was stop the propagation of the DOM events at the containing element. This resulted in the map being able to scroll/zoom, but the panel no longer responded to the events as well.
domEvent: function(evt, el, o)
{
evt.stopPropagation();
},
somefunction: function(){
this.googleMap.el.on({
tap: this.domEvent,
touchstart:this.domEvent,
touchmove:this.domEvent,
touchdown:this.domEvent,
scroll:this.domEvent,
pinch:this.domEvent,
pinchstart:this.domEvent,
pinchend:this.domEvent
});
}