Dynamic NiftyCorners

programming web dev
1

I’m working on a layout for fun and i’m trying to get divs that are loaded dynamically to agree with niftycorners.

http://www.joshuajonah.com/portfolio/demo8/

If i do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>photoblog - a Joshua Jonah design</title>
        <link href="ff.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/niftycube.js"></script>
        <script type="text/javascript" src="js/getimages.js"></script> 
        
    </head>
    <body>
        <div id="container"> 
            <div id="header">
            </div>    
        </div>
        <div id="content"> 
            <div id="info"> 
              <div id="infotext"> 
                    <p>Welcome to my photo blog!</p>
                    <p>Follow me on a mystical photo journey through my life and time captured on camera. </p>
                </div>
            </div>    
            <script type="text/javascript">
                      //getimages("top");
             </script>
            <div id="images">
            <br /><br />
                <div id='box1'>
                    <a href='submitted/1.jpg' target='_blank'><img src='php/resizeb.php?image_name=../submitted/1.jpg&w=300&h=223' border='0'></a>
                </div>
                <script type='text/javascript'>
                   Nifty('div#box1');
                </script>
            </div>
        </div>
    </body>
</html>

It works.

But if i try it dynamically via php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>photoblog - a Joshua Jonah design</title>
        <link href="ff.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/niftycube.js"></script>
        <script type="text/javascript" src="js/getimages.js"></script> 
        
    </head>
    <body>
        <div id="container"> 
            <div id="header">
            </div>    
        </div>
        <div id="content"> 
            <div id="info"> 
              <div id="infotext"> 
                    <p>Welcome to my photo blog!</p>
                    <p>Follow me on a mystical photo journey through my life and time captured on camera. </p>
                </div>
            </div>    
            <script type="text/javascript">
                      getimages("top");
             </script>
            <div id="images">
            
            </div>
        </div>
    </body>
</html>

if (isset($_GET['action']) && $_GET['action'] == "top"){
        $db=mysql_connect ("localhost", "username", "password") or die ('I cannot connect to the database because: ' . mysql_error());
        mysql_select_db ("demo8");
        $result = mysql_query('select * from images order by rating limit 1') or die("query error.");
        while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
            echo "<br /><br />
                <div id='box1'>
                    <a href='submitted/".$row['path']."' target='_blank'><img src='php/resizeb.php?image_name=../submitted/".$row['path']."&w=300&h=223' border='0'></a>
                </div><script type='text/javascript'>
                Nifty('div#box1');
                </script>";
                 
        }
        mysql_close($db);
    }

This doesn’t work.

If i use the “generated source” from the firefox plugin after it doesn’t work, it works great.

Any ideas?