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

Combining YUI with PHP/mySQL db call

Expand Messages
  • Del
    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
    Message 1 of 3 , Jan 1, 2007
    View Source
    • 0 Attachment
      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);




      // 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)
    • Del
      ... src= yui/build/yahoo/yahoo.js
      Message 2 of 3 , Jan 5, 2007
      View Source
      • 0 Attachment
        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);
        >
        >
        >
        >
        > // 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)
        >
      • dav.glass@yahoo.com
        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
        Message 3 of 3 , Jan 5, 2007
        View Source
        • 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/


        Your message has been successfully submitted and would be delivered to recipients shortly.