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

8000Combining YUI with PHP/mySQL db call

Expand Messages
  • Del
    Jan 1, 2007
    • 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)
    • Show all 3 messages in this topic