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

panels on event

Expand Messages
  • jimwestern37
    Hi All, I m working on making panels appear on mousovers of href anchors. In the real app the number of href anchors displayed varies depending on the
    Message 1 of 3 , May 29, 2008
    • 0 Attachment
      Hi All,

      I'm working on making panels appear on mousovers of href anchors. In
      the real app the number of href anchors displayed varies depending on
      the number of results to a query. An unknown number of href anchors
      will appear in the page. So, the number of mouse over listeners is
      indeterminate. Each href panel body will need to display a markup from
      a <div>.

      Right now the YUI Panel does display....but the panel display slows
      down after several mouse overs are done.

      Also, I need the <div> to remain hidden before any mouseovers occur.
      Presently, the <div id="panel1"> appears on first load of the page...but
      then disappears after the first mouseover event.

      Any suggestions or ideas would be of great help. Thank you in advance.

      **The code snippet below works but has flaws that are mentioned above.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Yui Test</title>

      <style type="text/css">
      body {
      margin:0;
      padding:0;
      }
      </style>
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/co\
      ntainer.css" />
      <link type="text/css" rel="stylesheet"
      href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logge\
      r.css">
      </head>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-even\
      t.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js"></sc\
      ript>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/container/container-min.js"></\
      script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js"></script\
      >

      <body class=" yui-skin-sam">
      <a href="/yuiTest/3/" id="3">Test 1</a> <br>
      <a href="/yuiTest/3/" id="5">Test 2</a> <br>
      <a href="/yuiTest/3/" id="7">Test 3</a> <br>
      <a href="/yuiTest/3/" id="9">Test 4</a> <br>

      <script type="text/javascript">

      function basic_panel(){
      if(this.id){
      panel1 = new YAHOO.widget.Panel("panel1", {
      width:"320px", visible:true, constraintoviewport:true } );
      panel1.setBody("This is a dynamically generated Panel. ID
      is: " + this.id);
      panel1.render();
      YAHOO.log("moused over the url");
      }
      }
      function init(){
      YAHOO.widget.Logger.enableBrowserConsole();
      // get all anchors on the page and feed them to the
      testing method
      var anchors = document.getElementsByTagName("a");
      for(var i=0;i<anchors.length;i++){
      YAHOO.util.Event.addListener(anchors[i],
      "mouseover", basic_panel);
      }
      }
      init();
      </script>
      <div id="panel1" >
      <div class="hd">Panel #1 from Markup — This Panel is
      Draggable</div>
      <div class="bd">This is a Panel that was marked up in the
      document.</div>
      <div class="ft">End of Panel #1</div>
      </div>
      </body>
      </html>
    • Solas I.T. Solutions
      Hi Jim, I m no expert but by looking at your code it looks like you are creating a new panel every time you mouse over a url. This would cause the panels to
      Message 2 of 3 , May 30, 2008
      • 0 Attachment
        Hi Jim,

        I'm no expert but by looking at your code it looks like you are creating
        a new panel every time you
        mouse over a url. This would cause the panels to eventually slow down.

        The reason it's visible at the start is because, it's starting life as a
        normal DIV which is visible when the DOM is rendered. When you mouse
        over a URL the DIV is being turned into a panel...

        The way I'd do it (and this may not be the most efficient) is create one
        panel, store it against each URL and then set the panel contents and
        visibility on the mouse over:

        I'd also call the init function using the
        YAHOO.util.Event.onDOMReady(init);
        it will make the browser wait until the DOM is fully rendered before
        executing the init function.

        function basic_panel(){
        if(this.panel){
        this.panel.setBody("This is a dynamically generated Panel.ID is: " + this.id);
        this.panel.show();
        YAHOO.log("moused over the url" + this.id);
        }
        }


        function init(){
        YAHOO.widget.Logger.enableBrowserConsole();
        // get all anchors on the page and feed them to thetesting method

        anchors = document.getElementsByTagName("a");
        var panel1 = new YAHOO.widget.Panel("panel1", {width:"320px", visible:false, constraintoviewport:true } );
        panel1.render();

        for(var i=0;i<anchors.length;i++){
        anchors[i].panel = panel1;
        YAHOO.util.Event.addListener(anchors[i],"mouseover", basic_panel);
        }


        }

        YAHOO.util.Event.onDOMReady(init);

        You can see it working at http://www.solasit.com/sandbox/yui2/

        HTH,
        JC

        jimwestern37 wrote:
        >
        > Hi All,
        >
        > I'm working on making panels appear on mousovers of href anchors. In
        > the real app the number of href anchors displayed varies depending on
        > the number of results to a query. An unknown number of href anchors
        > will appear in the page. So, the number of mouse over listeners is
        > indeterminate. Each href panel body will need to display a markup from
        > a <div>.
        >
        > Right now the YUI Panel does display....but the panel display slows
        > down after several mouse overs are done.
        >
        > Also, I need the <div> to remain hidden before any mouseovers occur.
        > Presently, the <div id="panel1"> appears on first load of the page...but
        > then disappears after the first mouseover event.
        >
        > Any suggestions or ideas would be of great help. Thank you in advance.
        >
        > **The code snippet below works but has flaws that are mentioned above.
        >
        > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        > "http://www.w3.org/TR/html4/strict.dtd
        > <http://www.w3.org/TR/html4/strict.dtd>">
        > <html>
        > <head>
        > <title>Yui Test</title>
        >
        > <style type="text/css">
        > body {
        > margin:0;
        > padding:0;
        > }
        > </style>
        > <link rel="stylesheet" type="text/css"
        > href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css
        > <http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css>" />
        > <link rel="stylesheet" type="text/css"
        > href="http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/co\
        > ntainer.css
        > <http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/container.css>"
        > />
        > <link type="text/css" rel="stylesheet"
        > href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logge\
        > r.css
        > <http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css>">
        > </head>
        >
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-even\
        > t.js
        > <http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js>"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js
        > <http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js>"></sc\
        > ript>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/container/container-min.js
        > <http://yui.yahooapis.com/2.5.1/build/container/container-min.js>"></\
        > script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js
        > <http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js>"></script\
        > >
        >
        > <body class=" yui-skin-sam">
        > <a href="/yuiTest/3/" id="3">Test 1</a> <br>
        > <a href="/yuiTest/3/" id="5">Test 2</a> <br>
        > <a href="/yuiTest/3/" id="7">Test 3</a> <br>
        > <a href="/yuiTest/3/" id="9">Test 4</a> <br>
        >
        > <script type="text/javascript">
        >
        > function basic_panel(){
        > if(this.id){
        > panel1 = new YAHOO.widget.Panel("panel1", {
        > width:"320px", visible:true, constraintoviewport:true } );
        > panel1.setBody("This is a dynamically generated Panel. ID
        > is: " + this.id);
        > panel1.render();
        > YAHOO.log("moused over the url");
        > }
        > }
        > function init(){
        > YAHOO.widget.Logger.enableBrowserConsole();
        > // get all anchors on the page and feed them to the
        > testing method
        > var anchors = document.getElementsByTagName("a");
        > for(var i=0;i<anchors.length;i++){
        > YAHOO.util.Event.addListener(anchors[i],
        > "mouseover", basic_panel);
        > }
        > }
        > init();
        > </script>
        > <div id="panel1" >
        > <div class="hd">Panel #1 from Markup — This Panel is
        > Draggable</div>
        > <div class="bd">This is a Panel that was marked up in the
        > document.</div>
        > <div class="ft">End of Panel #1</div>
        > </div>
        > </body>
        > </html>
        >
        >
        > ------------------------------------------------------------------------
        >
        > No virus found in this incoming message.
        > Checked by AVG.
        > Version: 7.5.524 / Virus Database: 269.24.4/1473 - Release Date: 29/05/2008 7:53 PM
        >


        --
        www.solasit.com
      • jimwestern37
        Many thanks for the help. Your suggestions work great. Best, jw ... creating ... as a ... one ... + this.id); ... visible:false, constraintoviewport:true }
        Message 3 of 3 , May 30, 2008
        • 0 Attachment
          Many thanks for the help. Your suggestions work great.

          Best,

          jw

          --- In ydn-javascript@yahoogroups.com, "Solas I.T. Solutions"
          <lists@...> wrote:
          >
          > Hi Jim,
          >
          > I'm no expert but by looking at your code it looks like you are
          creating
          > a new panel every time you
          > mouse over a url. This would cause the panels to eventually slow down.
          >
          > The reason it's visible at the start is because, it's starting life
          as a
          > normal DIV which is visible when the DOM is rendered. When you mouse
          > over a URL the DIV is being turned into a panel...
          >
          > The way I'd do it (and this may not be the most efficient) is create
          one
          > panel, store it against each URL and then set the panel contents and
          > visibility on the mouse over:
          >
          > I'd also call the init function using the
          > YAHOO.util.Event.onDOMReady(init);
          > it will make the browser wait until the DOM is fully rendered before
          > executing the init function.
          >
          > function basic_panel(){
          > if(this.panel){
          > this.panel.setBody("This is a dynamically generated Panel.ID is:
          " + this.id);
          > this.panel.show();
          > YAHOO.log("moused over the url" + this.id);
          > }
          > }
          >
          >
          > function init(){
          > YAHOO.widget.Logger.enableBrowserConsole();
          > // get all anchors on the page and feed them to thetesting method
          >
          > anchors = document.getElementsByTagName("a");
          > var panel1 = new YAHOO.widget.Panel("panel1", {width:"320px",
          visible:false, constraintoviewport:true } );
          > panel1.render();
          >
          > for(var i=0;i<anchors.length;i++){
          > anchors[i].panel = panel1;
          > YAHOO.util.Event.addListener(anchors[i],"mouseover", basic_panel);
          > }
          >
          >
          > }
          >
          > YAHOO.util.Event.onDOMReady(init);
          >
          > You can see it working at http://www.solasit.com/sandbox/yui2/
          >
          > HTH,
          > JC
          >
          > jimwestern37 wrote:
          > >
          > > Hi All,
          > >
          > > I'm working on making panels appear on mousovers of href anchors. In
          > > the real app the number of href anchors displayed varies depending on
          > > the number of results to a query. An unknown number of href anchors
          > > will appear in the page. So, the number of mouse over listeners is
          > > indeterminate. Each href panel body will need to display a markup from
          > > a <div>.
          > >
          > > Right now the YUI Panel does display....but the panel display slows
          > > down after several mouse overs are done.
          > >
          > > Also, I need the <div> to remain hidden before any mouseovers occur.
          > > Presently, the <div id="panel1"> appears on first load of the
          page...but
          > > then disappears after the first mouseover event.
          > >
          > > Any suggestions or ideas would be of great help. Thank you in advance.
          > >
          > > **The code snippet below works but has flaws that are mentioned above.
          > >
          > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          > > "http://www.w3.org/TR/html4/strict.dtd
          > > <http://www.w3.org/TR/html4/strict.dtd>">
          > > <html>
          > > <head>
          > > <title>Yui Test</title>
          > >
          > > <style type="text/css">
          > > body {
          > > margin:0;
          > > padding:0;
          > > }
          > > </style>
          > > <link rel="stylesheet" type="text/css"
          > > href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css
          > > <http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css>" />
          > > <link rel="stylesheet" type="text/css"
          > >
          href="http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/co\
          > > ntainer.css
          > >
          <http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/container.css>"

          > > />
          > > <link type="text/css" rel="stylesheet"
          > >
          href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logge\
          > > r.css
          > >
          <http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css>">
          > > </head>
          > >
          > > <script type="text/javascript"
          > >
          src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-even\
          > > t.js
          > >
          <http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js>"></script>
          > > <script type="text/javascript"
          > > src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js
          > > <http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js>"></sc\
          > > ript>
          > > <script type="text/javascript"
          > > src="http://yui.yahooapis.com/2.5.1/build/container/container-min.js
          > > <http://yui.yahooapis.com/2.5.1/build/container/container-min.js>"></\
          > > script>
          > > <script type="text/javascript"
          > > src="http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js
          > > <http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js>"></script\
          > > >
          > >
          > > <body class=" yui-skin-sam">
          > > <a href="/yuiTest/3/" id="3">Test 1</a> <br>
          > > <a href="/yuiTest/3/" id="5">Test 2</a> <br>
          > > <a href="/yuiTest/3/" id="7">Test 3</a> <br>
          > > <a href="/yuiTest/3/" id="9">Test 4</a> <br>
          > >
          > > <script type="text/javascript">
          > >
          > > function basic_panel(){
          > > if(this.id){
          > > panel1 = new YAHOO.widget.Panel("panel1", {
          > > width:"320px", visible:true, constraintoviewport:true } );
          > > panel1.setBody("This is a dynamically generated Panel. ID
          > > is: " + this.id);
          > > panel1.render();
          > > YAHOO.log("moused over the url");
          > > }
          > > }
          > > function init(){
          > > YAHOO.widget.Logger.enableBrowserConsole();
          > > // get all anchors on the page and feed them to the
          > > testing method
          > > var anchors = document.getElementsByTagName("a");
          > > for(var i=0;i<anchors.length;i++){
          > > YAHOO.util.Event.addListener(anchors[i],
          > > "mouseover", basic_panel);
          > > }
          > > }
          > > init();
          > > </script>
          > > <div id="panel1" >
          > > <div class="hd">Panel #1 from Markup — This Panel is
          > > Draggable</div>
          > > <div class="bd">This is a Panel that was marked up in the
          > > document.</div>
          > > <div class="ft">End of Panel #1</div>
          > > </div>
          > > </body>
          > > </html>
          > >
          > >
          > >
          ------------------------------------------------------------------------
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG.
          > > Version: 7.5.524 / Virus Database: 269.24.4/1473 - Release Date:
          29/05/2008 7:53 PM
          > >
          >
          >
          > --
          > www.solasit.com
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.