Loading ...
Sorry, an error occurred while loading the content.
 

Re: Tab in Panel (resize and relocate dialog when the content change)

Expand Messages
  • Caridy Patiño Mayea
    OK Josh, I ll wait for the DEMO link.... - About the problem with the second tab (in my examples everything works great), keep in mind that you need to use the
    Message 1 of 15 , Oct 11, 2007
      OK Josh,

      I'll wait for the DEMO link....

      - About the problem with the second tab (in my examples everything works great), keep
      in mind that you need to use the "delegate" for all your tabs.

      - About the "onDOMReady", here is the problem:

      YAHOO.util.Event.onDOMReady( YAHOO.mostyle.panel.text.load, text, true );

      must be:

      YAHOO.util.Event.onDOMReady( YAHOO.mostyle.panel.text.load,
      YAHOO.mostyle.panel.text, true );

      Because the second parameter must be an object (scope of execution), and "text" is not
      available there, just use the full namespace...

      Best Regards,
      Caridy (caridy at gmail.com)
      http://www.bubbling-library.com/

      --- In ydn-javascript@yahoogroups.com, "Josh Benham" <joshcow@...> wrote:
      >
      > OK It sort of works, only got a few problems now.
      >
      > It centers on load, but then when i click a tab it uncenters. Also you
      > can click on the active tab where in yours it looks like you cant.
      >
      > Also
      >
      > YAHOO.util.Event.onDOMReady( YAHOO.mostyle.panel.text.load, text, true );
      >
      > That seems to throw an error which is.
      >
      > Component returned failure code: 0x80470002 (NS_BASE_STREAM_CLOSED)
      > [nsIScriptableInputStream.available]
      >
      > Line 619
      >
      > Atleast i can finally see that i am getting somewhere.
      >
      > I can not at the moment actually give you access to the dev box as our
      > net connection isnt set up at work yet, but when it is ill make a buff
      > page for you. Although can you see anything else wrong with my
      > example. Im still using the
      >
      > text = YAHOO.mostyle.modal(700,"text");
      >
      > to create the modal so maybe there is something wrong with that
      > function which currently is.
      >
      > modal: function(width,name) {
      >
      > Dom.get('config-body').innerHTML = "";
      >
      > if ( !Dom.get('config_c') ) {
      > modal = new YAHOO.widget.Dialog("config",
      > {
      > width : width+"px", fixedcenter : true, visible : false,
      > modal : true, draggable : false, zIndex: 5, constraintoviewport : true
      >
      > //effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5}],
      > constraintoviewport : true
      > }
      > );
      > }
      > else {
      > modal.cfg.queueProperty("width",width+"px");
      > modal.cfg.queueProperty("fixedcenter",true);
      > }
      >
      > // Config
      > modal.setHeader('<img src="/assetw/img/panels/'+name+'_title.gif"
      > alt="'+name+'" />');
      >
      > // Set Footer
      > //modal.setFooter('<button class="button button_update"
      > onclick="modal.hide();"><span class="display">Close</button>');
      >
      > // Render the Dialog
      > modal.render(document.body);
      >
      > // Add esc listener
      > var esc = new YAHOO.util.KeyListener(document,
      > { keys:27 },
      > { fn:modal.hide,
      > scope:modal, correctScope:true }
      > );
      > esc.enable();
      >
      > return modal;
      > }
      >
      > Does this all look right or not.
      >
      > The reason why i originally had
      >
      > YAHOO.util.Event.onContentReady('config-body', function() {
      > text.show();
      > });
      >
      > was because i was calling it by YAHOO.mostyle.panels.text.load();
      > instead of text_show. but now i am changing it all around.
      >
      >
      > --- In ydn-javascript@yahoogroups.com, Caridy Patiño Mayea
      > <caridy@> wrote:
      > >
      > > Hi Josh,
      > >
      > > Sorry for the delay answer...
      > >
      > > Your code works for me too... with a couple of adjustments, and here
      > is the new example:
      > > http://www.bubbling-library.com/sandbox/misc/josh.html
      > >
      > > Please, provide me an URL to check your working code.
      > >
      > > Best Regards,
      > > Caridy (caridy at gmail.com)
      > > http://www.bubbling-library.com/
      > >
      > > --- In ydn-javascript@yahoogroups.com, "Josh Benham" <joshcow@> wrote:
      > > >
      > > > Sorry for the late reply, internet seems to be down at work.
      > > >
      > > > OK i am using 2.3.1 YUI library and the code is still not centering
      > > > after the tab is loaded.
      > > >
      > > > The code i currently have is
      > > >
      > > > YAHOO.mostyle.panel.text = {
      > > >
      > > > load: function() {
      > > >
      > > > var value = YAHOO.mostyle.getId();
      > > >
      > > > // Instantiate the Dialog
      > > > text = new YAHOO.widget.Dialog("config",
      > > > {
      > > > width : "700px", fixedcenter : true, visible : false,
      > > modal :
      > > > true, draggable : false, zIndex: 5, constraintoviewport : true
      > > >
      > > > //effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5}],
      > > > constraintoviewport : true
      > > > }
      > > > );
      > > >
      > > > text.render(document.body);
      > > >
      > > > // Create tab handle
      > > > var tabview = new YAHOO.widget.TabView({id: 'text'});
      > > >
      > > > // Add tabs
      > > > var tab = new YAHOO.widget.Tab({ label: 'Add', dataSrc:
      > > > base_url+'panel_text/add_view/'+value, active: true });
      > > >
      > > > tabview.addTab(tab);
      > > >
      > > > YAHOO.util.Dispatcher.delegate (tab, tabview,
      > > > {
      > > > after: function() {
      > > > text.cfg.setProperty("fixedcenter",true);
      > > > }
      > > > }
      > > > );
      > > >
      > > > tabview.appendTo(text.body);
      > > >
      > > > YAHOO.util.Event.onContentReady('config-body', function() {
      > > > text.show();
      > > > });
      > > >
      > > > YAHOO.util.Event.addListener("text_show", "click", text.show, text,
      > > > true);
      > > > YAHOO.util.Event.addListener("text_hide", "click", text.hide, text,
      > > > true);
      > > > }
      > > >
      > > > };
      > > >
      > > > I have NO idea why this isnt working, as it looks the same as what you
      > > > have :\
      > > >
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, Caridy Patiño Mayea
      > > > <caridy@> wrote:
      > > > >
      > > > > Hi again Josh:
      > > > >
      > > > > Here is a working example:
      > > > >
      > > > >
      > > >
      > http://www.bubbling-library.com/sandbox/misc/dialog-tabview-relocate-when-size-
      > > change.html
      > > > >
      > > > > I just tried to replicate your example code, please tell me if
      > this is
      > > > > what you need?
      > > > >
      > > > > Best Regards,
      > > > > Caridy (caridy at gmail.com)
      > > > > http://www.bubbling-library.com/
      > > > >
      > > > > --- In ydn-javascript@yahoogroups.com, "Josh Benham" <joshcow@>
      > wrote:
      > > > > >
      > > > > > OK it still doesnt work, im not sure if you know what i am trying
      > > > to do.
      > > > > > Also that seems to trigger after the url is fetched but before its
      > > > > > appended.
      > > > > >
      > > > > > Basically what im using is.
      > > > > >
      > > > > > YAHOO.mostyle.panel.text = {
      > > > > >
      > > > > > load: function() {
      > > > > >
      > > > > > var value = YAHOO.mostyle.getId();
      > > > > >
      > > > > > // Instantiate the Dialog
      > > > > > text = new YAHOO.widget.Dialog("config",
      > > > > > {
      > > > > > width : width+"px", fixedcenter :
      > > > true,
      > > > > > visible : false, modal : true, draggable : false, zIndex: 5,
      > > > > > constraintoviewport : true
      > > > > >
      > > > > >
      > //effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5}],
      > > > > > constraintoviewport : true
      > > > > > }
      > > > > > );
      > > > > >
      > > > > > text.render(document.body);
      > > > > >
      > > > > >
      > > > > > // creating a tabview
      > > > > > var myTabView = new YAHOO.widget.TabView({id: 'text'});
      > > > > >
      > > > > > // creating a tab
      > > > > > var myTab = new YAHOO.widget.Tab({ label: 'Add', dataSrc:
      > > > > > base_url+'panel_text/add_view/'+value, active: true });
      > > > > >
      > > > > > // adding the tab to the corresponding tabview and setting the
      > moments
      > > > > > with the dispatcher plugin...
      > > > > > YAHOO.util.Dispatcher.delegate (myTab, myTabView,
      > > > > > {
      > > > > > after: function() {
      > > > > > text.cfg.queueProperty("fixedcenter",true);
      > > > > > }
      > > > > > }
      > > > > > );
      > > > > >
      > > > > > myTabView.appendTo('config-body');
      > > > > >
      > > > > > // Apppend to document
      > > > > > YAHOO.util.Event.onContentReady('config-body',
      > function() {
      > > > > > text.show();
      > > > > > });
      > > > > >
      > > > > > // Add event listeners
      > > > > > YAHOO.util.Event.addListener("text_show", "click",
      > text.show,
      > > > > > text, true);
      > > > > > YAHOO.util.Event.addListener("text_hide", "click",
      > text.hide,
      > > > > > text, true);
      > > > > > }
      > > > > >
      > > > > > Maybe see if you can get it centering once the content is
      > loaded :)
      > > > > >
      > > > > >
      > > > > > --- In ydn-javascript@yahoogroups.com, Caridy Patiño Mayea
      > > > > > <caridy@> wrote:
      > > > > > >
      > > > > > > // Create tab handle
      > > > > > > Josh,
      > > > > > >
      > > > > > > Keep the sequence:
      > > > > > >
      > > > > > > // creating a tabview
      > > > > > > var myTabView = new YAHOO.widget.TabView({id: 'text'});
      > > > > > >
      > > > > > > // creating a tab
      > > > > > > var myTab = new YAHOO.widget.Tab({ label: 'Add', dataSrc:
      > > > > > > base_url+'panel_text/add_view/'+value, active: true });
      > > > > > >
      > > > > > > // adding the tab to the corresponding tabview and setting the
      > > > moments
      > > > > > > with the dispatcher plugin...
      > > > > > > YAHOO.util.Dispatcher.delegate (myTab, myTabView, {
      > > > > > > before: function() {
      > > > > > > alert('before');
      > > > > > > },
      > > > > > > after: function() {
      > > > > > > alert('after');
      > > > > > > // myTab is accessible here... use it to set the certain
      > > > > > properties...
      > > > > > > }
      > > > > > > }
      > > > > > > );
      > > > > > >
      > > > > > > myTabView.appendTo('config-body');
      > > > > > >
      > > > > > > Also, I sow a reference to text variable, and I don't no
      > what is it?
      > > > > > >
      > > > > > > Best Regards,
      > > > > > > Caridy (caridy at gmail.com)
      > > > > > > http://www.bubbling-library.com/
      > > > > > >
      > > > > > >
      > > > > > > --- In ydn-javascript@yahoogroups.com, "Josh Benham"
      > joshcow@ wrote:
      > > > > > > >
      > > > > > > > OK i am using the Dispatcher from bubbling library and now
      > i do.
      > > > > > > >
      > > > > > > > // Create tab handle
      > > > > > > > var tab = new YAHOO.widget.TabView({id: 'text'});
      > > > > > > >
      > > > > > > > // Add tabs
      > > > > > > > var tabview = new YAHOO.widget.Tab({ label: 'Add', dataSrc:
      > > > > > > > base_url+'panel_text/add_view/'+value, active: true });
      > > > > > > > //tabview.addListener('contentChange', function(){
      > > > alert('test');
      > > > > > > > text.cfg.queueProperty("fixedcenter",true); });
      > > > > > > >
      > > > > > > > tab.appendTo('config-body');
      > > > > > > >
      > > > > > > > tab.addTab(tabview);
      > > > > > > >
      > > > > > > > YAHOO.util.Dispatcher.delegate (tabview, tab,
      > > > > > > > {
      > > > > > > > before: function() {
      > > > > > > > alert('before');
      > > > > > > > },
      > > > > > > > after: function() {
      > > > > > > > text.cfg.queueProperty("fixedcenter",true);
      > > > > > > > }
      > > > > > > > }
      > > > > > > > );
      > > > > > > >
      > > > > > > > And i still get the same problem of the dispatchers after:
      > works
      > > > > > > > before the actual connect is appended to the tab container. Is
      > > > there
      > > > > > a
      > > > > > > > certain order or style i need to call everything ?
      > > > > > > >
      > > > > > > > --- In ydn-javascript@yahoogroups.com, Caridy Patiño Mayea
      > > > > > > > <caridy@> wrote:
      > > > > > > > >
      > > > > > > > > Hey Josh:
      > > > > > > > >
      > > > > > > > > Try this:
      > > > > > > > >
      > > > > > > > > YAHOO.util.Dispatcher.delegate (myTab, myTabView,
      > > > > > > > > { before: function() {
      > > > > > > > > // before the loading...
      > > > > > > > > },
      > > > > > > > > after: function() {
      > > > > > > > > // after the substitution...
      > > > > > > > > }
      > > > > > > > > }
      > > > > > > > > );
      > > > > > > > >
      > > > > > > > > This plugin ("Dispatcher") will solve your problems... Let
      > > > me know
      > > > > > if
      > > > > > > > > you need help...
      > > > > > > > >
      > > > > > > > > Best Regards,
      > > > > > > > > Caridy (caridy at gmail.com)
      > > > > > > > > http://www.bubbling-library.com/
      > > > > > > > >
      > > > > > > > > --- In ydn-javascript@yahoogroups.com, "Josh Benham"
      > <joshcow@>
      > > > > > wrote:
      > > > > > > > > >
      > > > > > > > > > OK as far as i can tell, the contentChange triggers
      > after the
      > > > > > > content
      > > > > > > > > > is loaded but before its actually appended to the tab
      > on the
      > > > > > > page, and
      > > > > > > > > > i am wondering is this how its meant to work or is
      > this a bug.
      > > > > > > > > >
      > > > > > > > > > If its how it is meant to work is there a way to get pass
      > > > this.
      > > > > > > > > >
      > > > > > > > > > --- In ydn-javascript@yahoogroups.com, "Josh Benham"
      > > > <joshcow@>
      > > > > > > wrote:
      > > > > > > > > > >
      > > > > > > > > > > OK i got that triggering, but the only problem is.
      > It still
      > > > > > > triggers
      > > > > > > > > > > before the content actually gets added to the panel,
      > so the
      > > > > > > > centering
      > > > > > > > > > > doesnt actually work.
      > > > > > > > > > >
      > > > > > > > > > > It has to be after the content is actually appended to
      > > > the tab
      > > > > > and
      > > > > > > > > > panel.
      > > > > > > > > > >
      > > > > > > > > > > Is there any way to do this or am i doomed :(
      > > > > > > > > > >
      > > > > > > > > > > --- In ydn-javascript@yahoogroups.com, Caridy Patiño
      > Mayea
      > > > > > > > > > > <caridy@> wrote:
      > > > > > > > > > > >
      > > > > > > > > > > > Hey Josh:
      > > > > > > > > > > >
      > > > > > > > > > > > "contentChange" is an important moment for a tab
      > instance,
      > > > > > not
      > > > > > > > for a
      > > > > > > > > > > > tabview instance. See the YUI Cheat Sheets for more
      > > > details.
      > > > > > > > > > > >
      > > > > > > > > > > > Try this:
      > > > > > > > > > > > ---------
      > > > > > > > > > > > // Create tab handle
      > > > > > > > > > > > var tabview = new YAHOO.widget.TabView({id: 'text'});
      > > > > > > > > > > > var tab = new YAHOO.widget.Tab({ label: 'Add',
      > dataSrc:
      > > > > > > > > > > > base_url+'panel_text/add_view', active: true });
      > > > > > > > > > > >
      > > > > > > > > > > > // Add tabs
      > > > > > > > > > > > tabview.addTab(tab);
      > > > > > > > > > > > tabview.appendTo('config-body');
      > > > > > > > > > > >
      > > > > > > > > > > > tab.addListener('contentChange', function(){
      > > > alert('test');
      > > > > > });
      > > > > > > > > > > >
      > > > > > > > > > > > Best Regards,
      > > > > > > > > > > > Caridy (caridy at gmail.com)
      > > > > > > > > > > > http://www.bubbling-library.com/
      > > > > > > > > > > >
      > > > > > > > > > > > --- In ydn-javascript@yahoogroups.com, "Josh Benham"
      > > > > > <joshcow@>
      > > > > > > > > wrote:
      > > > > > > > > > > > >
      > > > > > > > > > > > > Hello all, i have a dynamic tab in a panel, and
      > what i
      > > > > > want to
      > > > > > > > > do is
      > > > > > > > > > > > > when the content loads i want the tab to recenter
      > > > itself,
      > > > > > > as it
      > > > > > > > > > > wont be
      > > > > > > > > > > > > centered when the content is added. ATM i am.
      > > > > > > > > > > > >
      > > > > > > > > > > > >
      > > > > > > > > > > > > load: function() {
      > > > > > > > > > > > >
      > > > > > > > > > > > > // Instantiate the Dialog
      > > > > > > > > > > > > text = YAHOO.mostyle.modal(700,"text");
      > > > > > > > > > > > >
      > > > > > > > > > > > > // Create tab handle
      > > > > > > > > > > > > var tab = new YAHOO.widget.TabView({id:
      > > > 'text'});
      > > > > > > > > > > > >
      > > > > > > > > > > > > // Add tabs
      > > > > > > > > > > > > tab.addTab(new YAHOO.widget.Tab({
      > label: 'Add',
      > > > > > > > dataSrc:
      > > > > > > > > > > > > base_url+'panel_text/add_view', active: true }));
      > > > > > > > > > > > >
      > > > > > > > > > > > > tab.appendTo('config-body');
      > > > > > > > > > > > >
      > > > > > > > > > > > > tab.addListener('contentChange',
      > function(){
      > > > > > > > > alert('test');
      > > > > > > > > > > > > text.cfg.queueProperty("fixedcenter",true); });
      > > > > > > > > > > > >
      > > > > > > > > > > > > // Apppend to document
      > > > > > > > > > > > >
      > YAHOO.util.Event.onContentReady('config-body',
      > > > > > > > > function() {
      > > > > > > > > > > > > text.show();
      > > > > > > > > > > > > });
      > > > > > > > > > > > >
      > > > > > > > > > > > > // Add event listeners
      > > > > > > > > > > > > YAHOO.util.Event.addListener("text_show",
      > > > > > "click",
      > > > > > > > > > text.show,
      > > > > > > > > > > > > text, true);
      > > > > > > > > > > > > YAHOO.util.Event.addListener("text_hide",
      > > > > > "click",
      > > > > > > > > > text.hide,
      > > > > > > > > > > > > text, true);
      > > > > > > > > > > > > }
      > > > > > > > > > > > >
      > > > > > > > > > > > >
      > > > > > > > > > > > > Although for some WIERD reason, that addListener
      > doesnt
      > > > > > ever
      > > > > > > > > > > trigger an
      > > > > > > > > > > > > i am not sure why :\
      > > > > > > > > > > > > So i wont get that alert('test'); in it.
      > > > > > > > > > > > >
      > > > > > > > > > > >
      > > > > > > > > > >
      > > > > > > > > >
      > > > > > > > >
      > > > > > > >
      > > > > > >
      > > > > >
      > > > >
      > > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.