Changing Size using a Web Link

classic Classic list List threaded Threaded
34 messages Options
12
Reply | Threaded
Open this post in threaded view
|

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
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

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);
});
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

mikaelmoller
Wow - this sounds really promising! Do you have a working example?
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

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!
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

mikaelmoller
OK, thanks. - do you have any ideas on how to do this in version 2?
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

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);
});
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

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?
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

Wizzud
That's up to you and how you want to determine/set what new size you want for your iframe!
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

bmccune
In reply to this post by nearsky
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.
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

bmccune
In reply to this post by nearsky
Ok I realize that document.observe is prototype now...must have been sleeping. Is there a mootools version.
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

Wizzud
window.addEvent('domready', function(){
  ...
  ...
});
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

bmccune
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...
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

Wizzud
As long as you've got the relevant library included in page.html I don't see any problem with your implementation.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

bmccune
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?
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

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?).
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

bmccune
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!!!
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

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.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

bmccune
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!
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

bmccune
In reply to this post by Wizzud
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!
Reply | Threaded
Open this post in threaded view
|

Re: Changing Size using a Web Link

Wizzud
The prime objective of Shadowbox is that it not exceed the viewport. So I think the answer is no.
Combine literacy with curiosity and a whole world of information opens up to you
12