How to automatically resize D3Plus charts - d3.js

I'm working with D3Plus and I have tried many methods to autoresize a div when the browser window is resized.
Methods like a div inside another div do not work with D3Plus.
Did anybody find a way to re-draw the D3Plus object when the browser window is resized?

Version 1.9.2 of D3plus added support for automatic resizing:
.resize(true)
The Github issue related to this feature can be found here: https://github.com/alexandersimoes/d3plus/issues/433

Related

Flickering when using neon-animated-pages with Polymer

I searched for this the solution a lot but I couldn't find any post describing the same "flickering" problem.
You can see a GIF here
Situation
I have a website with a menu, using app-route as in Polymer Starterkit but enhanced with neon-animated-pages.
If you use the menu (Start, My Card, My Dashboard) there is a smooth transition.
Problem
Go to "My Card" and click the enhance card arrow down (tooltip "more info") at the first card.
Now use the menus again and the page transitions are now flickering, as soon as the animation finished. It is like all object are quickly moving somewhere and then back to the position where they should be.
What I have tried
I tried to change CSS, as it seems to "re-align" the objects on the page.
Also I had this problem before when I used javascript to route to another page, but using "a href..." for app-route (as in polymer starterkit), this problem disappeared again.
Anyone have any idea what this can be?
I checked with Chrome, Firefox and IE, seems to be the same everywhere.
Thanks very much for your help!
Kind regards,
Huebiii
Found two more sources on github with the same issue and solutions.
Apparently only slide left/right animation are affected. Using a different animation should help.
Set Element.prototype.animate = null before loading the polyfill.
Flicker after slide animation in neon-animated-pages in Chrome
web-animations-next-lite flicker #86

Blueimp Image Gallery: Borderless mode as default?

I'm trying to setup a Gallery similiar to the demo one, but with only one option, the fullscreen mode. The borderless mode should be default for everyone and not be able to changed.
The documentation gives this hint:
Bootstrap Image Gallery provides the additional useBootstrapModal option, which enables the original borderless layout as seen in the demo. The easiest way to enable this option is to adjust the lightbox container and set the data-use-bootstrap-modal attribute to false
However, if I do that, it wont look as pretty (no autoplay, no arrows, no small previews at the bottom.
Im trying to find a workaround for serveral days now, but wasnt able to do that.
Any hints? Thanks!
Change the div to this worked for me
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">

jVectorMap mousewheel zooms in with too few steps

Zoom with the mousewheel in their main example http://jvectormap.com/
I have tried to change zoomScale property in the config, but that only seems to afflict the zoom buttons and not the mousewheel zoom.
I would prefer the mousewheel to zoom with the same amount of steps as the zoom buttons.
if its still needed, answered your question in other topic
JVectorMap Scroll Speed and Full screen Issue
Doubt that you can put the same step, but at least you can try to find value that will behave similarly to buttons.
I found a bower package of jvectormap at https://github.com/tlvince/bower-jvectormap that's labeled as version 1.2.2 and here the mousewheel works as expected.
The problem still exists in all their demos on the website http://jvectormap.com/ and also in the latest downloadable code (2.0.1) in their official git repository https://github.com/bjornd/jvectormap

Google Chrome and drag to scroll

I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right Click Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.

jQuery ui dialog overlay and ajax injected html

I have a problem with a site (unfortunately I can't provide a link because it's on a staging environment).
I have a jqueryui dialog that opens when page loads, if you scroll down the overlay covers all of it.
Then some part of the page is updated by ajax calls and the height of the page increase and that's the issue, the overlay don't covers all the page any more and the bottom content is accessible.
I can see that the overlay adapts to certain changes, like resize of the page.. is there a way to update it when scrolling down for example? that could solve my issue
I'm sorry I can't provide a link that shows the issue..
Regards,
Gianpiero
In a similar situation I found a successful workaround by triggering a window resize event after each asynchronous DOM change:
$(window).resize();

Resources