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

8155Re: [ydn-javascript] Re: Combining YUI with PHP/mySQL db call

Expand Messages
  • dav.glass@yahoo.com
    Jan 5, 2007
    • 0 Attachment
      Del --

      I can't run the example, but what I would recommend would be:

      Inside of the while loop, you should also create the JavaScript for controlling the containers. for example:

      while (...) {
          /* Create the containers HTML*/
          .......
          /* Create the JS controlling the containers */
          echo('<script>');
          echo('    var overlay'.$rownews[id].' = new YAHOO.widget.Overlay(....);');
          echo('</script>');
          /* Or better yet */
          $strJS .= 'var overlay'.$rownews[id].' = new YAHOO.widget.Overlay(....);';
      }

      echo('<script>'.$strJS.'</script>');
       
      Hope that helps...

      Dav

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

      + 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: Del <dhanoad@...>
      To: ydn-javascript@yahoogroups.com
      Sent: Friday, January 5, 2007 8:45:27 AM
      Subject: [ydn-javascript] Re: Combining YUI with PHP/mySQL db call

      can anyone help me out:

      --- In ydn-javascript@yahoogroups.com, "Del" <dhanoad@...> wrote:
      >
      > I am playing around with the YUI.. lots of fun
      >
      > I am trying to combine overlays with a db query and am not having much
      > success.
      >
      > I am listing RSS titles on the site and when the user hits the '+'
      > sign an overlay is supposed to slide in with the body text of the
      > clicked article title..
      >
      > try clicking on the '+' sign next to the very first title -- that one
      > works but the remainder do not.
      >
      > [code]
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > "http://www.w3.org/TR/html4/strict.dtd";>
      > <html>
      >     <head>
      > <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      >         
      >         <script type="text/javascript"
      src="yui/build/yahoo/yahoo.js"></script>
      >         <script type="text/javascript" src="yui/build/event/event.js"
      ></script>
      >         <script type="text/javascript" src="yui/build/dom/dom.js" ></script>
      >         <script type="text/javascript"
      > src="yui/build/animation/animation.js"></script>
      >
      >         <script type="text/javascript"
      > src="yui/build/container/container_core.js"></script>
      >         
      >         <style>
      >             .overlay { position:absolute;border:1px dotted
      > black;padding:5px;margin:10px;background:#fff; }
      >             .overlay .hd { border:1px solid red;padding:5px; }
      >             .overlay .bd { border:1px solid green;padding:5px; }
      >             .overlay .ft { border:1px solid blue;padding:5px; }
      >         </style>
      >
      >         <script>
      >                 YAHOO.namespace("example.container");
      >
      >                 function init() {
      >
      >                     // Build overlay3 based on markup
      >                     YAHOO.example.container.overlay3 = new
      > YAHOO.widget.Overlay("overlay3", { xy:[350,300],
      >                                                       visible:false,
      >                                                       width:"300px",
      >                                                     
      > effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
      >                                                             
      > {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );
      >                     YAHOO.example.container.overlay3.render();
      >                 
      >                     YAHOO.util.Event.addListener("show3", "click",
      > YAHOO.example.container.overlay3.show,
      > YAHOO.example.container.overlay3, true);
      >                     YAHOO.util.Event.addListener("hide3", "click",
      > YAHOO.example.container.overlay3.hide,
      > YAHOO.example.container.overlay3, true);
      >                     
      >                 }
      >
      >                 YAHOO.util.Event.addListener(window, "load", init);
      >         </script>
      >
      >     </head>
      >     <body>
      >
      >                             <?php
      >                             
      >                                         include("../../inc/connect.php");
      >                     
      >                                          $query = "select id, dateUnix, dateString, headline,
      > permalink, body, author, authorURL, favico, sitetype, vote, verified
      > from anews2 where newsCat='breastfeeding' && majorNews = 0 ORDER BY
      > dateUnix DESC LIMIT 10";
      >                                 
      >                                         $result = mysql_query($query);    
      >                                                                                             
      >                                                                      
      >                                                                      
      >                    &nb sp;                             
      >                                         // echo $query . "<p>";
      >                     
      >                                         echo '<div id="wrapper">';
      >                                 
      >                                                 while ($rownews = mysql_fetch_assoc($result)){
      >                                              
      >                                                                  echo '<div id="headline'.$rownews[id].'"><img
      > src="'.$rownews[favico].'" width="14" height="14" alt="favicon"> <div
      > id="show3" style="display: inline; "><img
      > src="img/icons/expand.gif" width="15" height="15"
      > alt="expand"></div> <a
      > href="'.$rownews[permalink].'">'.substr($rownews[headline], 0,
      > 40).'</a></div>';                 
      >                 
      >                             ?>
      >                                                 <div id="overlay<?php echo $rownews[id]; ?>"
      > style="visibility:hidden">
      >                                                     <div class="hd"><?php echo 'posted by:
      > '.$rownews[author]; ?></div>
      >                                                     <div class="bd"><?php echo $rownews[body]; ?></div>
      >                                                     <div class="ft">End of Overlay #3 <div id="hide<?php echo
      > $rownews[id]; ?>">x</div></div>
      >                                         
      >                                                 </div>
      >                             <?php
      >                             
      >                                                 }
      >                                         
      >                                          echo '</div>';                             
      >                          
      >                               ?>
      >
      >     </body>
      > </html>
      > [/code]
      >
      > the problem is with function init() -- referring to each container as
      > overlay3 is obviously incorrect.  How do I change the JS so that the
      > overlay id becomes serialized (ie. id= overlay1, overlay2, overlay3 etc)
      >





      Yahoo! Groups Links

      <*> To visit your group on the web, go to:
          http://groups.yahoo.com/group/ydn-javascript/

      <*> Your email settings:
          Individual Email | Traditional

      <*> To change settings online go to:
          http://groups.yahoo.com/group/ydn-javascript/join
          (Yahoo! ID required)

      <*> To change settings via email:
          mailto:ydn-javascript-digest@yahoogroups.com
          mailto:ydn-javascript-fullfeatured@yahoogroups.com

      <*> To unsubscribe from this group, send an email to:
          ydn-javascript-unsubscribe@yahoogroups.com

      <*> Your use of Yahoo! Groups is subject to:
          http://docs.yahoo.com/info/terms/


    • Show all 3 messages in this topic