CODEWITHSUNDEEP
jquerycssdynamichighchartshighslide
Abu Sulaiman
Abu Sulaiman

Reputation: 1507

How to dynamically resize a highslide popup called from a Highchart graph using jquery?

Below is the section of jquery code where the highslide popup is called - hs.htmlExpand(). I want to be able to resize the popup dynamically. If this is not possible, maybe auto resize would work for me. The reason I want to resize dynamically is because the text within the popup will change dynamically as well.

point: {
  events: {
    click: function() {

           hs.htmlExpand(null, {
              pageOrigin: {
                   x: this.pageX,
                   y: this.pageY
              },
              headingText: 'Error Rate',
              maincontentText: 'test',
              width: 220
            });
     }
  }
}, ...

Here is a working fiddle: http://jsfiddle.net/e2qpa/1200/

I have come across the following code in the Highslide documentation but I don't know how to use it in this context:

void hs.Expander.prototype.resizeTo ( int width, int height )
void hs.Expander.prototype.reflow()

Upvotes: 0

Views: 811

Answers (1)

Mark
Mark

Reputation: 108537

If you call hs.getExpander(), it'll return the last opened expander. Then you can use:

var ex = hs.getExpander();
ex.resizeTo(600,600);

reflow() worked well with updated content:

var ex = hs.getExpander();
ex.maincontent.innerHTML = "alkdfjalkdjf<br/>laksjdflaksjdf<br/>asjkdf<br/>lajkdf<br/>asjkdfl<br/>aksjdflkasjdflk<br/>ajsdfl<br/>kjasdfl<br/>kjasdfkl";
ex.reflow();

Example here.

Upvotes: 1

Related Questions