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

31898Re: panels on event

Expand Messages
  • jimwestern37
    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
      >
    • Show all 3 messages in this topic