We Keep Coding

highcharts not responsive and overlapping on first view

Im having a small issue with my highcharts.
Oddly when i first view the page, the donut chart overlaps with my line chart but when i resize the window or open firebug it comes to its original position.
When i check the firebug console there are no errors related jquery or javascript.
also i have set the container width to 100% but none of the charts are becoming responsive...
Demo : http://vidznet.com/debug/
Can someone tell me why this is happening?

Hamburger menu loads outside viewport, reappears randomly

So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.

The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here

It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?

Chrome reloading embedded SVG object when hiding and showing parent DIV container

I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');

It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).

Flot line graphs in popups have overlapping axis labels

I have a table of data with some hover-activated popups. These popups are simply div elements with position: absolute and display: none initially set; a few lines of JavaScript then hide or show them based on mouse hovering. A flot line graph is attached to each popup.
This works great and fast, except for one hitch. Flot has a bug which causes the x-axis and y-axis labels to overlap at the lower-left corner when the graph is part of a popup like this. In short, the solution is to display the containing div before generating the graph.
I tried a solution in which I eliminated the initial display: none from the CSS for each popup div. I also eliminated the background-color and border style elements, effectively making these divs invisible. Then some simple jQuery generates the graphs and does the proper CSS styling for these popups (setting the background-color, border, etc.). This works, functionally. The graph labels are now correctly positioned. But it's slow. It easily triples the loading time of the page, which is unacceptable.
Simply adding display: none back into the initial CSS for the popup divs solves all the performance problems. So the jQuery code itself cannot be the bottleneck. But that of course causes the label formatting to be messed up again.
Does anybody know how to overcome this issue?

As you discovered, Flot must draw into a div that's attached to the DOM. I can't say for sure without an example, but I would guess that your slow performance is probably due to the fact that the divs, even if they have no content, are still on-screen, and so you're triggering a redraw whenever you change them.
Instead of hiding the background and border, simply absolute-position the div far off-screen, e.g. top:-9999px; left:-9999px. That way it's still in layout, so Flot can make its measurements, but the browser is smart enough not to redraw something off-screen.

I've solved the problem by just deferring the generation of each graph until the initial corresponding mouse hover event is fired. I also had to initially set the z-index of the containing divs to be -1 and then change this to 1 upon generation of the graph; otherwise the invisible div would "cover up" other page content, making it impossible to, say, click on links "behind" the div before the graph was generated.

Why sometime scrollTop/scrollLeft not writable?

I'm using dhtmlx Gantt Chart UI component which have task list and graphical chart. Task list and graphical chart are contained in two separate div element which synchronized for parallel scrolling. By scrolling the chart area, task list is automatically scrolled resulting the task row position matches the Gantt line position.
Inspecting the component source code, I found the sync is implemented by the following code :
this.oData.onscroll = function() {
self.panelTime.scrollLeft = this.scrollLeft;
self.panelNames.scrollTop = this.scrollTop;
};
All HTML markup in the UI control are generated dynamically by JavaScript. All is working well except it takes too long time to render 800-ish task list.
To improve rendering time, I decide to built my own server side rendering module to generate the HTML markup identical with that originally generated client side. This markup is fetched from client side using ordinary jquery $.get() and injected to page using $(el).html(). Then I put the necessary event handler as the original client side version.
The problem now is parallel scrolling doesn't work. I could capture the scroll event on the chart area, but I couldn't set the scrollTop property of the task list area. I test in firebug to manually force the scrollTop property, but the value didn't change. It seems that scrollTop property is read-only.
Is there any explanation for this ?

You can't scroll down below the bottom (or past the right) of the element's contents. If the element has overflow: visible (the default), or is at least as large as its contents, then both scroll properties will be stuck at 0. Similarly, even if there is something hidden to scroll into view, then you won't be able to scroll past the end; if you set the scrollTop or scrollLeft to a larger value than makes sense, it will decrease to the largest value that makes sense.
My guess is in your case you're trying to scroll the div before its content is loaded, and it's refusing to scroll because there isn't anything to scroll into view.