mhvalentcffp

I figured out how to add the visualize.render() to the click event of my tab, toggle, accordion plugin and now it works just fine.

I’m using a plugin called Whistles and it took a modification to whistles.js to make it work.

I simply had to add an else statement and insert visualize.render()

Since I’m only adding the visualizer to my toggles I only made the adjustment there, but I’m sure it would work on tabs and accordions as well.

Here is my new minimized.

jQuery(document).ready(function(){jQuery(".whistles-tabs .whistle-content").hide(),jQuery(".whistles-tabs .whistle-content:first-child").show(),jQuery(".whistles-tabs-nav :first-child").attr("aria-selected","true"),jQuery(".whistles-tabs-nav li a").click(function(t){t.preventDefault();var e=jQuery(this).attr("href");jQuery(this).parents(".whistles-tabs").find(".whistle-content").hide(),jQuery(this).parents(".whistles-tabs").find(e).show(),jQuery(this).parents(".whistles-tabs").find(".whistle-title").attr("aria-selected","false"),jQuery(this).parent().attr("aria-selected","true")}),jQuery(".whistles-toggle .whistle-content").hide(),jQuery(".whistles-toggle .whistle-title").click(function(){jQuery(this).attr("aria-selected","true"),jQuery(this).next(".whistle-content").slideToggle("slow",function(){jQuery(this).is(":visible")?visualizer.render():jQuery(this).prev().attr("aria-selected","false")})}),jQuery(".whistles-accordion .whistle-content").hide(),jQuery(".whistles-accordion .whistle-content:first-of-type").show(),jQuery(".whistles-accordion .whistle-title:first-of-type").attr("aria-selected","true"),jQuery(".whistles-accordion .whistle-title").click(function(){jQuery(this).parents(".whistles-accordion").find(".whistle-content").not(this).slideUp("slow",function(){jQuery(this).is(":visible")||jQuery(this).prev().attr("aria-selected","false")}),jQuery(this).next(".whistle-content:hidden").slideDown("slow",function(){jQuery(this).parents(".whistles-accordion").find(".whistle-content").not(this).slideUp("slow"),jQuery(this).is(":visible")||jQuery(this).prev().attr("aria-selected","false")}),jQuery(this).attr("aria-selected","true")})});

I am having the same problem as well and it seems that no one has found the solution. Best I can tell for some reason the SVG object automatically sizes at 400px X 200px when the parent has yet to be created. Once you open a tab, toggle or accordion the object isn’t resizing to fit the new parent it is created in, unless you resize the browser window which triggers a resize event.

Hopefully someone wiser than I can figure out how to trigger that resize event on the action of the opening of the tab, toggle, or accordion.