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

problem in displaying layout in IE

Expand Messages
  • nihar bhatt
    Hi people, *Problem:* I am using multiple layouts in my website. i have two javascript files 1) main.js in which one simple layout is created. 2) tabview.js
    Message 1 of 5 , Jul 2, 2008
    • 0 Attachment
      Hi people,


      Problem:
                    I am using multiple layouts in my website. i have two javascript files

                              1) main.js   in which one simple layout is created.
                              2) tabview.js in which one more layout is created which is a child of a layout created in main.js.

                   now when i am rendering second layout which is in tabview.js i am getting "invalid argument" error in IE but in firefox everything is going perfect.


      here is code of default.html file
      ---------------------------------------------------------------------------------
      <html>
          <body class="yui-skin-sam">
              <div id="page" class="yui-t1 ">
                  <!-- top of the page -->
                  <div id="top1">  </div>

                  <!-- center of the page -->
                  <div id="center1">
                      <div id="top2"><div id="tabviewone"></div></div>
                      <div id="center2"><div id="tabviewtwo"></div></div>
                  </div>

                 </div>

              <!-- script for yui loder utility-->
              <script type="text/javascript" src="../build/yuiloader/yuiloader-beta-min.js"></script>
              <!-- script for main page-->
              <script type="text/javascript" src="js/main.js"></script>
          </body>
      <html>
      ----------------------------------------------------------------------------------

      main.js

      -------------------------------------------------------------------------------------
      (function() {
         
        var loader = new YAHOO.util.YUILoader({  
                  //Get these modules           
                  base: '../build/',
                  require:['reset-fonts-grids', 'utilities', 'resize', 'button','layout','tabview','imageloader','container','datatable','dragdrop','button','slider','selector'],
                  rollup: true,
                  onSuccess:function() {
                  YAHOO.util.Get.css('res/mainpage.css');
                    YAHOO.util.Event.onDOMReady(function(){
                  var Dom = YAHOO.util.Dom;
         
                     layout = new YAHOO.widget.Layout('page',{
                          height:Dom.getClientHeight(),
                          width:930,
                             units: [
                                 { position: 'top', height: '120px', body: 'top1',width:930},   
                               { position: 'center', body: 'center1',width:930 }
                          ]
                        }); // End of Layout
         
         
                    layout.on('resize', function() {
         
                      layout.set('height',Dom.getClientHeight());
                    });//End of resize
         
         
                    layout.on('render',function(){
                   
                                        
                            window.setTimeout(function() {
                           
                            YAHOO.util.Get.script('js/data.js');                  
                  YAHOO.util.Get.script('js/tabview.js');                                   
         
                  }, 0);
                       
                            YAHOO.util.Dom.setStyle(document.body, 'visibility', 'visible');
                           
                            setTimeout(function() {
                       layout.resize();
                          }, 1000);
                         
                          var elTop = document.getElementById('top1');
                  elTop.innerHTML='<img src="res/finalnew.png"/>';
            
         
                    });//End of Layout render
                   
         
                    layout.render();
                   
         
                    });// End of DOM
                   
                   
                    }// End of OnSuccess
         
         
         
              }); // End of loader
         
            
              loader.insert();
      })();
      ------------------------------------------------------------------------------------

       
      tabview.js
      -------------------------------------------------------------------------------------
      (function() {
      var Event = YAHOO.util.Event;
       var Dom = YAHOO.util.Dom;       
      var Sel = YAHOO.util.Selector;
                 
                   
                   
                          
              var layout2 = new YAHOO.widget.Layout('center1', {                                          
                                                    parent:layout,
                                                    width:'930px',
                                                    units:[
                                                        { position: 'top', height: '320px',width:'930px',body:'top2'},
                                                            { position: 'center',height:'200px',width:'930px',body:'center2'}
                                                          ]
                           
                            });       
                           
              layout2.render();
         

                 
                  //Create a tabview
                      var tabViewOne = new YAHOO.widget.TabView();
                     
                      //Add tab one
                      tabViewOne.addTab( new YAHOO.widget.Tab({
                     
                      label:'Home',
                      content:'',
                      active: true,
                      id:'home'
                      }));
                     
                      //Add tab two
                      tabViewOne.addTab( new YAHOO.widget.Tab({
                 
                      label:'Products',
                      content:'',
                      id:'products'
                      }));
                     
                     
                      tabViewOne.addTab( new YAHOO.widget.Tab({
                         
                      label:'Technology',
                      content:'',
                      id:'technology'
                      }));
                     
                      tabViewOne.addTab( new YAHOO.widget.Tab({
                     
                      label:'Contact Us',
                      content:'',
                      id:'contactus'
                      }));
                     
                      tabViewOne.addTab( new YAHOO.widget.Tab({
                                     
                      label:'Case Study',
                      content:'',
                      id:'casestudy'
                      }));
                     
                      tabViewOne.addTab( new YAHOO.widget.Tab({
                             
                      label:'Site Map',
                      content:'<div id="sitemaparea"><a href="#" id="homeclick">Home</a><br/><a href="#" id="prodclick">Product</a><br/><a href="#" id="techclick">Technology</a><br/><a href="#" id="contactclick">Contact Us</a></div>',
                      id:'sitemap'
                      }));
                     
                     
                     
                     
                      var elTop2 = Dom.get('tabviewone');               
                      tabViewOne.appendTo(elTop2);   
                     
                     
                      var setMap = function(e)
                              {
                                  YAHOO.util.Event.preventDefault(e);
                                 
                                 
                                  var elTarget = YAHOO.util.Event.getTarget(e);   
                                      while (elTarget.id != "sitemaparea") {
                                     
                                          //alert(elTarget.nodeName);
                                          if(elTarget.id.toLowerCase() == "homeclick") {
                                         
                                              tabViewOne.set('activeTab',tabViewOne.getTab(0));                       
                                              break;
                                          }
                                          if(elTarget.id.toLowerCase() == "prodclick")
                                          {
                                              tabViewOne.set('activeTab',tabViewOne.getTab(1));                       
                                              break;
                                             
                                          }
                                          if(elTarget.id.toLowerCase() == "techclick")
                                          {
                                              tabViewOne.set('activeTab',tabViewOne.getTab(2));                       
                                              break;
                                                                 
                                          }
                                          if(elTarget.id.toLowerCase() == "contactclick")
                                          {
                                              tabViewOne.set('activeTab',tabViewOne.getTab(3));                       
                                              break;
                                                                 
                                          }
                                          else
                                              {elTarget = elTarget.parentNode;}
                              }
                                 
                                 
                      }
                     
                      Event.on("sitemaparea", "click",setMap);
                     
                     
                      var tabViewTwo = new YAHOO.widget.TabView();
                                     
                                      //Add tab one
                                      tabViewTwo.addTab( new YAHOO.widget.Tab({
                                     
                                      label:'News & Event',
                                      content:'<table><tr><td width="700px"><div id="newstable"></div></td><td valign="bottom"><div id="mypaginator"></div></td></tr></table>',
                                      active: true,
                                      id:'newsevent'
                                      }));
                                                     
                      var elCenter2 = Dom.get('tabviewtwo');
                      tabViewTwo.appendTo(elCenter2);
      }) (); // End
      -------------------------------------------------------------------------------------
    • Dav Glass
      Nihar -- Can you toss up a page with the issue? I can t replicate it from your provided code :) Thanks Dav Dav Glass dav.glass@yahoo.com blog.davglass.com +
      Message 2 of 5 , Jul 2, 2008
      • 0 Attachment
        Nihar --

        Can you toss up a page with the issue? I can't replicate it from your provided code :)

        Thanks
        Dav
         
        Dav Glass
        dav.glass@...
        blog.davglass.com



        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: nihar bhatt <ntimesc@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Wednesday, July 2, 2008 10:46:45 AM
        Subject: [ydn-javascript] problem in displaying layout in IE

        Hi people,


        Problem:
                      I am using multiple layouts in my website. i have two javascript files

                                1) main.js   in which one simple layout is created.
                                2) tabview.js in which one more layout is created which is a child of a layout created in main.js.

                     now when i am rendering second layout which is in tabview.js i am getting "invalid argument" error in IE but in firefox everything is going perfect.


        here is code of default.html file
        ---------------------------------------------------------------------------------
        <html>
            <body class="yui-skin-sam">
                <div id="page" class="yui-t1 ">
                    <!-- top of the page -->
                    <div id="top1">  </div>

                    <!-- center of the page -->
                    <div id="center1">
                        <div id="top2"><div id="tabviewone"></div></div>
                        <div id="center2"><div id="tabviewtwo"></div></div>
                    </div>

                   </div>

                <!-- script for yui loder utility-->
                <script type="text/javascript" src="../build/yuiloader/yuiloader-beta-min.js"></script>
                <!-- script for main page-->
                <script type="text/javascript" src="js/main.js"></script>
            </body>
        <html>
        ----------------------------------------------------------------------------------

        main.js

        -------------------------------------------------------------------------------------
        (function() {
           
          var loader = new YAHOO.util.YUILoader({  
                    //Get these modules           
                    base: '../build/',
                    require:['reset-fonts-grids', 'utilities', 'resize', 'button','layout','tabview','imageloader','container','datatable','dragdrop','button','slider','selector'],
                    rollup: true,
                    onSuccess:function() {
                    YAHOO.util.Get.css('res/mainpage.css');
                      YAHOO.util.Event.onDOMReady(function(){
                    var Dom = YAHOO.util.Dom;
           
                       layout = new YAHOO.widget.Layout('page',{
                            height:Dom.getClientHeight(),
                            width:930,
                               units: [
                                   { position: 'top', height: '120px', body: 'top1',width:930},   
                                 { position: 'center', body: 'center1',width:930 }
                            ]
                          }); // End of Layout
           
           
                      layout.on('resize', function() {
           
                        layout.set('height',Dom.getClientHeight());
                      });//End of resize
           
           
                      layout.on('render',function(){
                     
                                          
                              window.setTimeout(function() {
                             
                              YAHOO.util.Get.script('js/data.js');                  
                    YAHOO.util.Get.script('js/tabview.js');                                   
           
                    }, 0);
                         
                              YAHOO.util.Dom.setStyle(document.body, 'visibility', 'visible');
                             
                              setTimeout(function() {
                         layout.resize();
                            }, 1000);
                           
                            var elTop = document.getElementById('top1');
                    elTop.innerHTML='<img src="res/finalnew.png"/>';
              
           
                      });//End of Layout render
                     
           
                      layout.render();
                     
           
                      });// End of DOM
                     
                     
                      }// End of OnSuccess
           
           
           
                }); // End of loader
           
              
                loader.insert();
        })();
        ------------------------------------------------------------------------------------

         
        tabview.js
        -------------------------------------------------------------------------------------
        (function() {
        var Event = YAHOO.util.Event;
         var Dom = YAHOO.util.Dom;       
        var Sel = YAHOO.util.Selector;
                   
                     
                     
                            
                var layout2 = new YAHOO.widget.Layout('center1', {                                          
                                                      parent:layout,
                                                      width:'930px',
                                                      units:[
                                                          { position: 'top', height: '320px',width:'930px',body:'top2'},
                                                              { position: 'center',height:'200px',width:'930px',body:'center2'}
                                                            ]
                             
                              });       
                             
                layout2.render();
           

                   
                    //Create a tabview
                        var tabViewOne = new YAHOO.widget.TabView();
                       
                        //Add tab one
                        tabViewOne.addTab( new YAHOO.widget.Tab({
                       
                        label:'Home',
                        content:'',
                        active: true,
                        id:'home'
                        }));
                       
                        //Add tab two
                        tabViewOne.addTab( new YAHOO.widget.Tab({
                   
                        label:'Products',
                        content:'',
                        id:'products'
                        }));
                       
                       
                        tabViewOne.addTab( new YAHOO.widget.Tab({
                           
                        label:'Technology',
                        content:'',
                        id:'technology'
                        }));
                       
                        tabViewOne.addTab( new YAHOO.widget.Tab({
                       
                        label:'Contact Us',
                        content:'',
                        id:'contactus'
                        }));
                       
                        tabViewOne.addTab( new YAHOO.widget.Tab({
                                       
                        label:'Case Study',
                        content:'',
                        id:'casestudy'
                        }));
                       
                        tabViewOne.addTab( new YAHOO.widget.Tab({
                               
                        label:'Site Map',
                        content:'<div id="sitemaparea"><a href="#" id="homeclick">Home</a><br/><a href="#" id="prodclick">Product</a><br/><a href="#" id="techclick">Technology</a><br/><a href="#" id="contactclick">Contact Us</a></div>',
                        id:'sitemap'
                        }));
                       
                       
                       
                       
                        var elTop2 = Dom.get('tabviewone');               
                        tabViewOne.appendTo(elTop2);   
                       
                       
                        var setMap = function(e)
                                {
                                    YAHOO.util.Event.preventDefault(e);
                                   
                                   
                                    var elTarget = YAHOO.util.Event.getTarget(e);   
                                        while (elTarget.id != "sitemaparea") {
                                       
                                            //alert(elTarget.nodeName);
                                            if(elTarget.id.toLowerCase() == "homeclick") {
                                           
                                                tabViewOne.set('activeTab',tabViewOne.getTab(0));                       
                                                break;
                                            }
                                            if(elTarget.id.toLowerCase() == "prodclick")
                                            {
                                                tabViewOne.set('activeTab',tabViewOne.getTab(1));                       
                                                break;
                                               
                                            }
                                            if(elTarget.id.toLowerCase() == "techclick")
                                            {
                                                tabViewOne.set('activeTab',tabViewOne.getTab(2));                       
                                                break;
                                                                   
                                            }
                                            if(elTarget.id.toLowerCase() == "contactclick")
                                            {
                                                tabViewOne.set('activeTab',tabViewOne.getTab(3));                       
                                                break;
                                                                   
                                            }
                                            else
                                                {elTarget = elTarget.parentNode;}
                                }
                                   
                                   
                        }
                       
                        Event.on("sitemaparea", "click",setMap);
                       
                       
                        var tabViewTwo = new YAHOO.widget.TabView();
                                       
                                        //Add tab one
                                        tabViewTwo.addTab( new YAHOO.widget.Tab({
                                       
                                        label:'News & Event',
                                        content:'<table><tr><td width="700px"><div id="newstable"></div></td><td valign="bottom"><div id="mypaginator"></div></td></tr></table>',
                                        active: true,
                                        id:'newsevent'
                                        }));
                                                       
                        var elCenter2 = Dom.get('tabviewtwo');
                        tabViewTwo.appendTo(elCenter2);
        }) (); // End
        -------------------------------------------------------------------------------------
      • nihar bhatt
        please go to this url i have uploaded the site on freewebpage http://wbtltd.freewebpage.org/index.htm please try to open it in IE and also in FireFox Thanks
        Message 3 of 5 , Jul 3, 2008
        • 0 Attachment
          please go to this url i have uploaded the site on freewebpage

          http://wbtltd.freewebpage.org/index.htm

          please try to open it in IE and also in FireFox

          Thanks Dav

          On Thu, Jul 3, 2008 at 1:50 AM, Dav Glass <dav.glass@...> wrote:

          Nihar --

          Can you toss up a page with the issue? I can't replicate it from your provided code :)

          Thanks
          Dav
           
          Dav Glass
          dav.glass@...
          blog.davglass.com



          + Windows: n. - The most successful computer virus, ever. +
          + A computer without a Microsoft operating system is like a dog
          without bricks tied to its head +
          + A Microsoft Certified Systems Engineer is to computing what a
          McDonalds Certified Food Specialist is to fine cuisine +


          ----- Original Message ----
          From: nihar bhatt <ntimesc@...>
          To: ydn-javascript@yahoogroups.com
          Sent: Wednesday, July 2, 2008 10:46:45 AM
          Subject: [ydn-javascript] problem in displaying layout in IE

          Hi people,


          Problem:
                        I am using multiple layouts in my website. i have two javascript files

                                  1) main.js   in which one simple layout is created.
                                  2) tabview.js in which one more layout is created which is a child of a layout created in main.js.

                       now when i am rendering second layout which is in tabview.js i am getting "invalid argument" error in IE but in firefox everything is going perfect.


          here is code of default.html file
          ---------------------------------------------------------------------------------
          <html>
              <body class="yui-skin-sam">
                  <div id="page" class="yui-t1 ">
                      <!-- top of the page -->
                      <div id="top1">  </div>

                      <!-- center of the page -->
                      <div id="center1">
                          <div id="top2"><div id="tabviewone"></div></div>
                          <div id="center2"><div id="tabviewtwo"></div></div>
                      </div>

                     </div>

                  <!-- script for yui loder utility-->
                  <script type="text/javascript" src="../build/yuiloader/yuiloader-beta-min.js"></script>
                  <!-- script for main page-->
                  <script type="text/javascript" src="js/main.js"></script>
              </body>
          <html>
          ----------------------------------------------------------------------------------

          main.js

          -------------------------------------------------------------------------------------
          (function() {
             
            var loader = new YAHOO.util.YUILoader({  
                      //Get these modules           
                      base: '../build/',
                      require:['reset-fonts-grids', 'utilities', 'resize', 'button','layout','tabview','imageloader','container','datatable','dragdrop','button','slider','selector'],
                      rollup: true,
                      onSuccess:function() {
                      YAHOO.util.Get.css('res/mainpage.css');
                        YAHOO.util.Event.onDOMReady(function(){
                      var Dom = YAHOO.util.Dom;
             
                         layout = new YAHOO.widget.Layout('page',{
                              height:Dom.getClientHeight(),
                              width:930,
                                 units: [
                                     { position: 'top', height: '120px', body: 'top1',width:930},   
                                   { position: 'center', body: 'center1',width:930 }
                              ]
                            }); // End of Layout
             
             
                        layout.on('resize', function() {
             
                          layout.set('height',Dom.getClientHeight());
                        });//End of resize
             
             
                        layout.on('render',function(){
                       
                                            
                                window.setTimeout(function() {
                               
                                YAHOO.util.Get.script('js/data.js');                  
                      YAHOO.util.Get.script('js/tabview.js');                                   
             
                      }, 0);
                           
                                YAHOO.util.Dom.setStyle(document.body, 'visibility', 'visible');
                               
                                setTimeout(function() {
                           layout.resize();
                              }, 1000);
                             
                              var elTop = document.getElementById('top1');
                      elTop.innerHTML='<img src="res/finalnew.png"/>';
                
             
                        });//End of Layout render
                       
             
                        layout.render();
                       
             
                        });// End of DOM
                       
                       
                        }// End of OnSuccess
             
             
             
                  }); // End of loader
             
                
                  loader.insert();
          })();
          ------------------------------------------------------------------------------------

           
          tabview.js
          -------------------------------------------------------------------------------------
          (function() {
          var Event = YAHOO.util.Event;
           var Dom = YAHOO.util.Dom;       
          var Sel = YAHOO.util.Selector;
                     
                       
                       
                              
                  var layout2 = new YAHOO.widget.Layout('center1', {                                          
                                                        parent:layout,
                                                        width:'930px',
                                                        units:[
                                                            { position: 'top', height: '320px',width:'930px',body:'top2'},
                                                                { position: 'center',height:'200px',width:'930px',body:'center2'}
                                                              ]
                               
                                });       
                               
                  layout2.render();
             

                     
                      //Create a tabview
                          var tabViewOne = new YAHOO.widget.TabView();
                         
                          //Add tab one
                          tabViewOne.addTab( new YAHOO.widget.Tab({
                         
                          label:'Home',
                          content:'',
                          active: true,
                          id:'home'
                          }));
                         
                          //Add tab two
                          tabViewOne.addTab( new YAHOO.widget.Tab({
                     
                          label:'Products',
                          content:'',
                          id:'products'
                          }));
                         
                         
                          tabViewOne.addTab( new YAHOO.widget.Tab({
                             
                          label:'Technology',
                          content:'',
                          id:'technology'
                          }));
                         
                          tabViewOne.addTab( new YAHOO.widget.Tab({
                         
                          label:'Contact Us',
                          content:'',
                          id:'contactus'
                          }));
                         
                          tabViewOne.addTab( new YAHOO.widget.Tab({
                                         
                          label:'Case Study',
                          content:'',
                          id:'casestudy'
                          }));
                         
                          tabViewOne.addTab( new YAHOO.widget.Tab({
                                 
                          label:'Site Map',
                          content:'<div id="sitemaparea"><a href="#" id="homeclick">Home</a><br/><a href="#" id="prodclick">Product</a><br/><a href="#" id="techclick">Technology</a><br/><a href="#" id="contactclick">Contact Us</a></div>',
                          id:'sitemap'
                          }));
                         
                         
                         
                         
                          var elTop2 = Dom.get('tabviewone');               
                          tabViewOne.appendTo(elTop2);   
                         
                         
                          var setMap = function(e)
                                  {
                                      YAHOO.util.Event.preventDefault(e);
                                     
                                     
                                      var elTarget = YAHOO.util.Event.getTarget(e);   
                                          while (elTarget.id != "sitemaparea") {
                                         
                                              //alert(elTarget.nodeName);
                                              if(elTarget.id.toLowerCase() == "homeclick") {
                                             
                                                  tabViewOne.set('activeTab',tabViewOne.getTab(0));                       
                                                  break;
                                              }
                                              if(elTarget.id.toLowerCase() == "prodclick")
                                              {
                                                  tabViewOne.set('activeTab',tabViewOne.getTab(1));                       
                                                  break;
                                                 
                                              }
                                              if(elTarget.id.toLowerCase() == "techclick")
                                              {
                                                  tabViewOne.set('activeTab',tabViewOne.getTab(2));                       
                                                  break;
                                                                     
                                              }
                                              if(elTarget.id.toLowerCase() == "contactclick")
                                              {
                                                  tabViewOne.set('activeTab',tabViewOne.getTab(3));                       
                                                  break;
                                                                     
                                              }
                                              else
                                                  {elTarget = elTarget.parentNode;}
                                  }
                                     
                                     
                          }
                         
                          Event.on("sitemaparea", "click",setMap);
                         
                         
                          var tabViewTwo = new YAHOO.widget.TabView();
                                         
                                          //Add tab one
                                          tabViewTwo.addTab( new YAHOO.widget.Tab({
                                         
                                          label:'News & Event',
                                          content:'<table><tr><td width="700px"><div id="newstable"></div></td><td valign="bottom"><div id="mypaginator"></div></td></tr></table>',
                                          active: true,
                                          id:'newsevent'
                                          }));
                                                         
                          var elCenter2 = Dom.get('tabviewtwo');
                          tabViewTwo.appendTo(elCenter2);
          }) (); // End
          -------------------------------------------------------------------------------------

        • Dav Glass
          Try this: var layout2 = new YAHOO.widget.Layout(layout.getUnitByPosition( center ).get( wrap ), { parent:layout, width: layout.getSizes().center.w, height:
          Message 4 of 5 , Jul 3, 2008
          • 0 Attachment
            Try this:

                    var layout2 = new YAHOO.widget.Layout(layout.getUnitByPosition('center').get('wrap'), {                                          
                                                 parent:layout,
                                                 width: layout.getSizes().center.w,
                                                height: layout.getSizes().center.h,
                                                 units:[
                                                     { position: 'top', height: '320px',width:'930px',body:'top2'},
                                                         { position: 'center',height:'200px',width:'930px',body:'center2'}
                                                   ]
                                 
                                  });       
                                 
                   
                     
                   
                    layout2.render();

            That should do it..

            Dav
             
            Dav Glass
            dav.glass@...
            blog.davglass.com



            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: nihar bhatt <ntimesc@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Thursday, July 3, 2008 1:38:37 AM
            Subject: Re: [ydn-javascript] problem in displaying layout in IE

            please go to this url i have uploaded the site on freewebpage

            http://wbtltd.freewebpage.org/index.htm

            please try to open it in IE and also in FireFox

            Thanks Dav

            On Thu, Jul 3, 2008 at 1:50 AM, Dav Glass <dav.glass@...> wrote:

            Nihar --

            Can you toss up a page with the issue? I can't replicate it from your provided code :)

            Thanks
            Dav
             
            Dav Glass
            dav.glass@...
            blog.davglass.com



            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: nihar bhatt <ntimesc@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Wednesday, July 2, 2008 10:46:45 AM
            Subject: [ydn-javascript] problem in displaying layout in IE

            Hi people,


            Problem:
                          I am using multiple layouts in my website. i have two javascript files

                                    1) main.js   in which one simple layout is created.
                                    2) tabview.js in which one more layout is created which is a child of a layout created in main.js.

                         now when i am rendering second layout which is in tabview.js i am getting "invalid argument" error in IE but in firefox everything is going perfect.


            here is code of default.html file
            ---------------------------------------------------------------------------------
            <html>
                <body class="yui-skin-sam">
                    <div id="page" class="yui-t1 ">
                        <!-- top of the page -->
                        <div id="top1">  </div>

                        <!-- center of the page -->
                        <div id="center1">
                            <div id="top2"><div id="tabviewone"></div></div>
                            <div id="center2"><div id="tabviewtwo"></div></div>
                        </div>

                       </div>

                    <!-- script for yui loder utility-->
                    <script type="text/javascript" src="../build/yuiloader/yuiloader-beta-min.js"></script>
                    <!-- script for main page-->
                    <script type="text/javascript" src="js/main.js"></script>
                </body>
            <html>
            ----------------------------------------------------------------------------------

            main.js

            -------------------------------------------------------------------------------------
            (function() {
               
              var loader = new YAHOO.util.YUILoader({  
                        //Get these modules           
                        base: '../build/',
                        require:['reset-fonts-grids', 'utilities', 'resize', 'button','layout','tabview','imageloader','container','datatable','dragdrop','button','slider','selector'],
                        rollup: true,
                        onSuccess:function() {
                        YAHOO.util.Get.css('res/mainpage.css');
                          YAHOO.util.Event.onDOMReady(function(){
                        var Dom = YAHOO.util.Dom;
               
                           layout = new YAHOO.widget.Layout('page',{
                                height:Dom.getClientHeight(),
                                width:930,
                                   units: [
                                       { position: 'top', height: '120px', body: 'top1',width:930},   
                                     { position: 'center', body: 'center1',width:930 }
                                ]
                              }); // End of Layout
               
               
                          layout.on('resize', function() {
               
                            layout.set('height',Dom.getClientHeight());
                          });//End of resize
               
               
                          layout.on('render',function(){
                         
                                              
                                  window.setTimeout(function() {
                                 
                                  YAHOO.util.Get.script('js/data.js');                  
                        YAHOO.util.Get.script('js/tabview.js');                                   
               
                        }, 0);
                             
                                  YAHOO.util.Dom.setStyle(document.body, 'visibility', 'visible');
                                 
                                  setTimeout(function() {
                             layout.resize();
                                }, 1000);
                               
                                var elTop = document.getElementById('top1');
                        elTop.innerHTML='<img src="res/finalnew.png"/>';
                  
               
                          });//End of Layout render
                         
               
                          layout.render();
                         
               
                          });// End of DOM
                         
                         
                          }// End of OnSuccess
               
               
               
                    }); // End of loader
               
                  
                    loader.insert();
            })();
            ------------------------------------------------------------------------------------

             
            tabview.js
            -------------------------------------------------------------------------------------
            (function() {
            var Event = YAHOO.util.Event;
             var Dom = YAHOO.util.Dom;       
            var Sel = YAHOO.util.Selector;
                       
                         
                         
                                
                    var layout2 = new YAHOO.widget.Layout('center1', {                                          
                                                          parent:layout,
                                                          width:'930px',
                                                          units:[
                                                              { position: 'top', height: '320px',width:'930px',body:'top2'},
                                                                  { position: 'center',height:'200px',width:'930px',body:'center2'}
                                                                ]
                                 
                                  });       
                                 
                    layout2.render();
               

                       
                        //Create a tabview
                            var tabViewOne = new YAHOO.widget.TabView();
                           
                            //Add tab one
                            tabViewOne.addTab( new YAHOO.widget.Tab({
                           
                            label:'Home',
                            content:'',
                            active: true,
                            id:'home'
                            }));
                           
                            //Add tab two
                            tabViewOne.addTab( new YAHOO.widget.Tab({
                       
                            label:'Products',
                            content:'',
                            id:'products'
                            }));
                           
                           
                            tabViewOne.addTab( new YAHOO.widget.Tab({
                               
                            label:'Technology',
                            content:'',
                            id:'technology'
                            }));
                           
                            tabViewOne.addTab( new YAHOO.widget.Tab({
                           
                            label:'Contact Us',
                            content:'',
                            id:'contactus'
                            }));
                           
                            tabViewOne.addTab( new YAHOO.widget.Tab({
                                           
                            label:'Case Study',
                            content:'',
                            id:'casestudy'
                            }));
                           
                            tabViewOne.addTab( new YAHOO.widget.Tab({
                                   
                            label:'Site Map',
                            content:'<div id="sitemaparea"><a href="#" id="homeclick">Home</a><br/><a href="#" id="prodclick">Product</a><br/><a href="#" id="techclick">Technology</a><br/><a href="#" id="contactclick">Contact Us</a></div>',
                            id:'sitemap'
                            }));
                           
                           
                           
                           
                            var elTop2 = Dom.get('tabviewone');               
                            tabViewOne.appendTo(elTop2);   
                           
                           
                            var setMap = function(e)
                                    {
                                        YAHOO.util.Event.preventDefault(e);
                                       
                                       
                                        var elTarget = YAHOO.util.Event.getTarget(e);   
                                            while (elTarget.id != "sitemaparea") {
                                           
                                                //alert(elTarget.nodeName);
                                                if(elTarget.id.toLowerCase() == "homeclick") {
                                               
                                                    tabViewOne.set('activeTab',tabViewOne.getTab(0));                       
                                                    break;
                                                }
                                                if(elTarget.id.toLowerCase() == "prodclick")
                                                {
                                                    tabViewOne.set('activeTab',tabViewOne.getTab(1));                       
                                                    break;
                                                   
                                                }
                                                if(elTarget.id.toLowerCase() == "techclick")
                                                {
                                                    tabViewOne.set('activeTab',tabViewOne.getTab(2));                       
                                                    break;
                                                                       
                                                }
                                                if(elTarget.id.toLowerCase() == "contactclick")
                                                {
                                                    tabViewOne.set('activeTab',tabViewOne.getTab(3));                       
                                                    break;
                                                                       
                                                }
                                                else
                                                    {elTarget = elTarget.parentNode;}
                                    }
                                       
                                       
                            }
                           
                            Event.on("sitemaparea", "click",setMap);
                           
                           
                            var tabViewTwo = new YAHOO.widget.TabView();
                                           
                                            //Add tab one
                                            tabViewTwo.addTab( new YAHOO.widget.Tab({
                                           
                                            label:'News & Event',
                                            content:'<table><tr><td width="700px"><div id="newstable"></div></td><td valign="bottom"><div id="mypaginator"></div></td></tr></table>',
                                            active: true,
                                            id:'newsevent'
                                            }));
                                                           
                            var elCenter2 = Dom.get('tabviewtwo');
                            tabViewTwo.appendTo(elCenter2);
            }) (); // End
            -------------------------------------------------------------------------------------

          • aniad
            Dav, As you see in my post http://tech.groups.yahoo.com/group/ydn-javascript/message/38440 I have a similar/same issue. I ve narrowed it down to nested layout
            Message 5 of 5 , Sep 30, 2008
            • 0 Attachment
              Dav,

              As you see in my post
              http://tech.groups.yahoo.com/group/ydn-javascript/message/38440 I have
              a similar/same issue. I've narrowed it down to nested layout and
              enclosed a simple html/js which demonstrates the problem. As you will
              see in that post/code I'm creating the inner layout the way you
              suggest here, yet I persistently get the "invalid argument" error in
              IE when switching between IE's tabs (bring up the html, switch to some
              other IE tab, switch back to the file).

              Any help/suggestion will be most appreciated!

              Ania.


              --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
              >
              > Try this:
              >
              > var layout2 = new
              YAHOO.widget.Layout(layout.getUnitByPosition('center').get('wrap'), {

              > parent:layout,
              > width: layout.getSizes().center.w,
              > height: layout.getSizes().center.h,
              > units:[
              > { position: 'top', height:
              '320px',width:'930px',body:'top2'},
              > { position:
              'center',height:'200px',width:'930px',body:'center2'}
              > ]
              >
              > });
              >
              >
              >
              >
              > layout2.render();
              >
              > That should do it..
              >
              > Dav
              >
              > Dav Glass
              > dav.glass@...
              > blog.davglass.com
              >
              >
              >
              >
              > + Windows: n. - The most successful computer virus, ever. +
              > + A computer without a Microsoft operating system is like a dog
              > without bricks tied to its head +
              > + A Microsoft Certified Systems Engineer is to computing what a
              > McDonalds Certified Food Specialist is to fine cuisine +
              >
              >
              >
              > ----- Original Message ----
              > From: nihar bhatt <ntimesc@...>
              > To: ydn-javascript@yahoogroups.com
              > Sent: Thursday, July 3, 2008 1:38:37 AM
              > Subject: Re: [ydn-javascript] problem in displaying layout in IE
              >
              > please go to this url i have uploaded the site on freewebpage
              >
              > http://wbtltd.freewebpage.org/index.htm
              >
              > please try to open it in IE and also in FireFox
              >
              > Thanks Dav
              >
              >
              > On Thu, Jul 3, 2008 at 1:50 AM, Dav Glass <dav.glass@...> wrote:
              >
              > Nihar --
              >
              > Can you toss up a page with the issue? I can't replicate it from
              your provided code :)
              >
              > Thanks
              > Dav
              >
              > Dav Glass
              > dav.glass@...
              > blog.davglass.com
              >
              >
              >
              >
              > + Windows: n. - The most successful computer virus, ever. +
              > + A computer without a Microsoft operating system is like a dog
              > without bricks tied to its head +
              > + A Microsoft Certified Systems Engineer is to computing what a
              > McDonalds Certified Food Specialist is to fine cuisine +
              >
              >
              >
              >
              > ----- Original Message ----
              > From: nihar bhatt <ntimesc@...>
              > To: ydn-javascript@yahoogroups.com
              > Sent: Wednesday, July 2, 2008 10:46:45 AM
              > Subject: [ydn-javascript] problem in displaying layout in IE
              >
              > Hi people,
              >
              >
              > Problem:
              > I am using multiple layouts in my website. i have two
              javascript files
              >
              > 1) main.js in which one simple layout is
              created.
              > 2) tabview.js in which one more layout is
              created which is a child of a layout created in main.js.
              >
              > now when i am rendering second layout which is in
              tabview.js i am getting "invalid argument" error in IE but in firefox
              everything is going perfect.
              >
              >
              > here is code of default.html file
              >
              ---------------------------------------------------------------------------------
              > <html>
              > <body class="yui-skin-sam">
              > <div id="page" class="yui-t1 ">
              > <!-- top of the page -->
              > <div id="top1"> </div>
              >
              > <!-- center of the page -->
              > <div id="center1">
              > <div id="top2"><div id="tabviewone"></div></div>
              > <div id="center2"><div id="tabviewtwo"></div></div>
              > </div>
              >
              > </div>
              >
              > <!-- script for yui loder utility-->
              > <script type="text/javascript"
              src="../build/yuiloader/yuiloader-beta-min.js"></script>
              > <!-- script for main page-->
              > <script type="text/javascript" src="js/main.js"></script>
              > </body>
              > <html>
              >
              ----------------------------------------------------------------------------------
              >
              > main.js
              >
              >
              -------------------------------------------------------------------------------------
              > (function() {
              >
              > var loader = new YAHOO.util.YUILoader({
              > //Get these modules
              > base: '../build/',
              > require:['reset-fonts-grids', 'utilities', 'resize',
              'button','layout','tabview','imageloader','container','datatable','dragdrop','button','slider','selector'],
              > rollup: true,
              > onSuccess:function() {
              > YAHOO.util.Get.css('res/mainpage.css');
              > YAHOO.util.Event.onDOMReady(function(){
              > var Dom = YAHOO.util.Dom;
              >
              > layout = new YAHOO.widget.Layout('page',{
              > height:Dom.getClientHeight(),
              > width:930,
              > units: [
              > { position: 'top', height: '120px', body:
              'top1',width:930},
              > { position: 'center', body:
              'center1',width:930 }
              > ]
              > }); // End of Layout
              >
              >
              > layout.on('resize', function() {
              >
              > layout.set('height',Dom.getClientHeight());
              > });//End of resize
              >
              >
              > layout.on('render',function(){
              >
              >
              > window.setTimeout(function() {
              >
              > YAHOO.util.Get.script('js/data.js');

              > YAHOO.util.Get.script('js/tabview.js');

              >
              > }, 0);
              >
              > YAHOO.util.Dom.setStyle(document.body,
              'visibility', 'visible');
              >
              > setTimeout(function() {
              > layout.resize();
              > }, 1000);
              >
              > var elTop = document.getElementById('top1');
              > elTop.innerHTML='<img src="res/finalnew.png"/>';
              >
              >
              > });//End of Layout render
              >
              >
              > layout.render();
              >
              >
              > });// End of DOM
              >
              >
              > }// End of OnSuccess
              >
              >
              >
              > }); // End of loader
              >
              >
              > loader.insert();
              > })();
              >
              ------------------------------------------------------------------------------------
              >
              >
              > tabview.js
              >
              -------------------------------------------------------------------------------------
              > (function() {
              > var Event = YAHOO.util.Event;
              > var Dom = YAHOO.util.Dom;
              > var Sel = YAHOO.util.Selector;
              >
              >
              >
              >
              > var layout2 = new YAHOO.widget.Layout('center1', {

              > parent:layout,
              > width:'930px',
              > units:[
              > { position: 'top',
              height: '320px',width:'930px',body:'top2'},
              > { position:
              'center',height:'200px',width:'930px',body:'center2'}
              > ]
              >
              > });
              >
              > layout2.render();
              >
              >
              >
              > //Create a tabview
              > var tabViewOne = new YAHOO.widget.TabView();
              >
              > //Add tab one
              > tabViewOne.addTab( new YAHOO.widget.Tab({
              >
              > label:'Home',
              > content:'',
              > active: true,
              > id:'home'
              > }));
              >
              > //Add tab two
              > tabViewOne.addTab( new YAHOO.widget.Tab({
              >
              > label:'Products',
              > content:'',
              > id:'products'
              > }));
              >
              >
              > tabViewOne.addTab( new YAHOO.widget.Tab({
              >
              > label:'Technology',
              > content:'',
              > id:'technology'
              > }));
              >
              > tabViewOne.addTab( new YAHOO.widget.Tab({
              >
              > label:'Contact Us',
              > content:'',
              > id:'contactus'
              > }));
              >
              > tabViewOne.addTab( new YAHOO.widget.Tab({
              >
              > label:'Case Study',
              > content:'',
              > id:'casestudy'
              > }));
              >
              > tabViewOne.addTab( new YAHOO.widget.Tab({
              >
              > label:'Site Map',
              > content:'<div id="sitemaparea"><a href="#"
              id="homeclick">Home</a><br/><a href="#"
              id="prodclick">Product</a><br/><a href="#"
              id="techclick">Technology</a><br/><a href="#"
              id="contactclick">Contact Us</a></div>',
              > id:'sitemap'
              > }));
              >
              >
              >
              >
              > var elTop2 = Dom.get('tabviewone');
              > tabViewOne.appendTo(elTop2);
              >
              >
              > var setMap = function(e)
              > {
              > YAHOO.util.Event.preventDefault(e);
              >
              >
              > var elTarget =
              YAHOO.util.Event.getTarget(e);
              > while (elTarget.id != "sitemaparea") {
              >
              > //alert(elTarget.nodeName);
              > if(elTarget.id.toLowerCase() ==
              "homeclick") {
              >
              >
              tabViewOne.set('activeTab',tabViewOne.getTab(0));
              > break;
              > }
              > if(elTarget.id.toLowerCase() ==
              "prodclick")
              > {
              >
              tabViewOne.set('activeTab',tabViewOne.getTab(1));
              > break;
              >
              > }
              > if(elTarget.id.toLowerCase() ==
              "techclick")
              > {
              >
              tabViewOne.set('activeTab',tabViewOne.getTab(2));
              > break;
              >
              > }
              > if(elTarget.id.toLowerCase() ==
              "contactclick")
              > {
              >
              tabViewOne.set('activeTab',tabViewOne.getTab(3));
              > break;
              >
              > }
              > else
              > {elTarget =
              elTarget.parentNode;}
              > }
              >
              >
              > }
              >
              > Event.on("sitemaparea", "click",setMap);
              >
              >
              > var tabViewTwo = new YAHOO.widget.TabView();
              >
              > //Add tab one
              > tabViewTwo.addTab( new
              YAHOO.widget.Tab({
              >
              > label:'News & Event',
              > content:'<table><tr><td
              width="700px"><div id="newstable"></div></td><td valign="bottom"><div
              id="mypaginator"></div></td></tr></table>',
              > active: true,
              > id:'newsevent'
              > }));
              >
              > var elCenter2 = Dom.get('tabviewtwo');
              > tabViewTwo.appendTo(elCenter2);
              > }) (); // End
              >
              -------------------------------------------------------------------------------------
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.