Changing Size using a Web Link

[nearsky]

I am building a registration system that I want to take place within a shadowbox window.  I would like for the window to resize as the user clicks through the different steps (3 total).  Does anyone have any suggestions for how I might achieve that?

See concepts here:
Registration Step 1
Registration Step 2
Registration Step 3

Thanks in advance!

Jeremy

[Wizzud]

On the assumption that we're talking iframe pages, you could do  something along the lines of...

- expose resizeContent() as a public method, eg. add...

    Shadowbox.adjustDims = function(w, h){ //I prefer specifying width then height!
      resizeContent(h, w, function(){;}); //needs to callback function to animate
    };

to shadowbox.js

- from each page loaded into the iframe, within a 'DOM Ready' function (or window.onload, or as plain script if you prefer!) call the parent Shadowbox's new method to adjust the size to the required dimensions, eg (for prototype on the loaded page)...

document.observe("dom:loaded", function(){
   window.parent.Shadowbox.adjustDims(500,200);
});

[mikaelmoller]

Wow - this sounds really promising! Do you have a working example?

[Wizzud]

'Fraid not.
And bear in mind that the proposed solution was based on, and tested on, Shadowbox version 1. It won't work for version 2!

[mikaelmoller]

OK, thanks. - do you have any ideas on how to do this in version 2?

[Wizzud]

Shadowbox version 2:

- add...

    Shadowbox.dynamicResize = function(w, h){
      if(content){
        content.width = w;
        content.height = h;
        resizeContent(function(){;}); //needs callback function to animate
      }
    };

to shadowbox.js

- from each page loaded into the iframe, within a 'DOM Ready' function (or window.onload, or as plain script if you prefer!) call the parent Shadowbox's new method to adjust the size to the required dimensions, eg (for prototype on the loaded page)...

document.observe("dom:loaded", function(){
   window.parent.Shadowbox.dynamicResize(500,200);
});

[mikaelmoller]

Cool! - I suppose I before the call to the new method should meassure height and width of iframe content and pass this info?

Wizzud wrote:

    window.parent.Shadowbox.dynamicResize(500,200); //<-- dynamic meassurement of height and width?

[Wizzud]

That's up to you and how you want to determine/set what new size you want for your iframe!

[brianmccune]

I just tried implementing this into my own site and copied exactly. It won't resize is that because I'm using mootools and not prototype? If so is there a mootools equivalent.

[brianmccune]

Ok I realize that document.observe is prototype now...must have been sleeping. Is there a mootools version.

[Wizzud]

window.addEvent('domready', function(){
  ...
  ...
});

[brianmccune]

Wizzud Thanks for the help I got them running from a function perfectly. The resizing is another issue I've  tried a few different methods. But nothing yet. So I'll give you all the info.

I've got this in my shadowbox2.js

Shadowbox.dynamicResize = function(w, h){
      if(content){
        content.width = w;
        content.height = h;
        resizeContent(function(){;}); //needs callback function to animate
      }
    };

Then I'm Calling the shadowbox using this

window.onload = function(){

    Shadowbox.init({
        // let's skip the automatic setup because we don't have any
        // properly configured link elements on the page
        skipSetup: true
    });

   

};
function openShadowbox(type, header, url) {
    Shadowbox.open({
        player:     type,
        title:      header,
        content:    url,
        height:     500,
        width:      750
    })
}

...in the header and this for the URL

a onclick="openShadowbox('iframe', 'title' , 'page.html');">title</a

Then in the page.html im using

 window.addEvent('domready', function(){
        window.parent.Shadowbox.dynamicResize(500,200);
});

and I have the js files attached in all pages. Thanks again can't wait to see this in all its glory.

oh and for commercial use the paypal link isn't working...

[Wizzud]

As long as you've got the relevant library included in page.html I don't see any problem with your implementation.

[brianmccune]

according to my firebug javascript error. The problem is with

resizeContent(function(){;}); //needs callback function to animate

It's claiming resizeContent is not defined am I missing a function?

[Wizzud]

I don't know. Are you? Look in shadowbox.js for "resizeContent". If the function is there then you're not; if it isn't, then something is definitely wrong with your shadowbox.js file!

(I'm making the assumption that you added Shadowbox.dynamicResize() within the all-encompassing anonymous function?).

[brianmccune]

shadowbox.js

I've attached the JS file I'm showing 3 instances of resizeContent. I'm not sure what else it could be. I'm so lost trying to figure this out I've tried about 100 different things. Hope you can help, I know I've been a hassle I appreciate your help so far. Thanks!!!

[Wizzud]

You are using a composite build version of Shadowbox. You can't just tack the dynamicResize function onto the end of that script because it does not then get the scope of the Shadowbox object - which is why it can't find resizeContent().

Look at the very end of the second line of that composite script and you will see it ends with

{throw e}}})();

The new function needs to be inserted...

{throw e}}  ...here...  })();

Eg.

{throw e}};Shadowbox.dynamicResize=function(w,h){if(content){content.width=w;content.height=h;resizeContent(function(){;});}}})();

This is the same as inserting it at the end of the source shadowbox.js, within the encompassing anonymous function.

[brianmccune]

That would make sense. I really need to get used to seeing compressed js. I'm so used to formatting it and spacing it out. I apreciate your help, and I'll let you know if I get it working. I'll be purchasing a license for commercial use after I get it running on my test project. Thanks again!

[brianmccune]

Works like a charm Thanks so much! I have one final question for you. Sorry for so many! Is there a way to turn off the resizing to the max window size. To allow the shadowbox to go below the browser. I'm trying to make it so there are no scroll bars and occasionally the window height might re size to larger then the browser height. I'm not sure it's a great idea yet but I would like to see it in action before making that decision.

Thanks again....so awesome!

[Wizzud]

The prime objective of Shadowbox is that it not exceed the viewport. So I think the answer is no.