FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Layout gap problems with Javascript/PHP Combo

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


eday2010
When I started redesigning my site, I decided that I wanted the picture at the top to randomly rotate through a set of images in a specific folder. Once I got the dimensions right with a placer image, I popped in the script and got it going.

The problem is that when I put the script in to do the rotating, there is a gap between the bottom of the image and the top of the rest of the layout. When I take the script away and just have one static image, there is no gap, which is how it should be.

Does anyone know what caused this gap and how to get rid of it so that I can get my images to rotate through like I want while maintaining my tight layout?

Last edited by eday2010 on Sat Oct 28, 2006 10:13 pm; edited 1 time in total
rohan2kool
we would be able to help you better if you could provide a screenshot (with and without the gaps) and the sourcecode too of the site.
eday2010
Okie Dokie, here is how it's supposed to look:

http://www.wnstudios.ca/layout/nogap.jpg

The source code is simple:

Code:
  <tr>
    <td valign="top" colspan="3"><img src="content/includes/layout/random/33.jpg" alt=" " width="627" height="164" /></td>
  </tr>



And here is how it looks when I use the Javascript/PHP random image rotator:

http://www.wnstudios.ca/layout/gap.jpg

Source code:

Code:
<?php
$path_to_images = "content/includes/layout/random/";
$num_to_rotate = "ALL";

// returns string to echo into JavaScript images array 
function getJSRandomized($path, $list, $num) {
    $str = '"';
    mt_srand( (double)microtime() * 1000000 );
    shuffle($list);
    if ( $num == "ALL" ) $num = count($list);
    for ($i=0; $i<$num; $i++) {
        $str .= $path . $list[$i] . '", "';
    }
    // remove last comma and space
    $str = substr($str, 0, -3);
    return $str;
}
function getImagesList($path) {
    $ctr = 0;
    if ( $img_dir = @opendir($path) ) {
        while ( false !== ($img_file = readdir($img_dir)) ) {
            // add checks for other image file types here, if you like
            if ( preg_match("/(\.gif|\.jpg)$/", $img_file) ) {
                $images[$ctr] = $img_file;
                $ctr++;
            }
        }
        closedir($img_dir);
        return $images;
    } else {
        return false;
    }
}
?>
   <?php if ( $image_list = getImagesList($path_to_images) ) : ?>

<script type="text/javascript">
/*************************************************************************
    This code is from Dynamic Web Coding at dyn-web.com
    Copyright 2001-5 by Sharon Paine
    See Terms of Use at dyn-web.com/bus/terms.html
    regarding conditions under which you may use this code.
    This notice must be retained in the code as is!
   
    See full source code at dyn-web.com/scripts/rotate-rand/
*************************************************************************/
var imgList = [
  <?php echo getJSRandomized($path_to_images, $image_list, $num_to_rotate); ?>
  ];
var rotator1 = new dw_RandRotator(10000); // rotation speed
// images array, width and height of images, transition filter (boolean)
rotator1.setUpImage(imgList, 627, 162, true);
</script>

<?php else : ?>
<!-- image to display if directory listing fails -->
<img src="images/smile.gif" width="625" height="122" alt="">

<script type="text/javascript">dw_Rotator.start = function() {};</script>

<?php endif; ?>


And here is the source code for the whole page without the random rotator script:


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WN Studios {Version 9.0}</title>
<link type="text/css" rel="stylesheet" href="designtb.css"></link>
<!--<script src="dw_rotator.js" type="text/javascript"></script>
      <script src="dw_random.js" type="text/javascript"></script>-->
</head>

<body>
<!--<body onload="dw_Rotator.start()">-->
<table border="0" width="895" cellpadding="0" cellspacing="0">
    <tr>
    <td class="leftbg" style="width:135px; height:987px; vertical-align:top;" rowspan="5"></td>
    <td class="top" style="width:627px; height:137px; vertical-align:top;" colspan="3"></td>
   <td class="rightbg" style="width:135px; height:987px; vertical-align:top;" rowspan="5"></td>   
  </tr>
    <tr>
    <td style="height:162px;" colspan="3"><img src="content/includes/layout/random/15.jpg" /></td>
  </tr>    <tr>
    <td class="wnleft" style="width:90px; height:606px; vertical-align:top;" rowspan="2"></td>
   <td style="vertical-align:top; width:537px; height:85px;" align="left" colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="537" height="85" title="Menu">
      <param name="movie" value="content/includes/layout/menu.swf" />
      <param name="quality" value="high" />
      <embed src="layout/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="537" height="85"></embed>
    </object></td>
  </tr>
  <tr>
    <td width="456" height="519" valign="top" bgcolor="#FFFFFF"><iframe marginheight="0" marginwidth="0" height="510" width="445" name="content" align="center" frameborder="0"></iframe></td>
     <td class="wnright" width="81" height="519" align="right" valign="top"></td>
  </tr>
  <tr>
    <td style="height:84px;" class="bgbottom1" colspan="2"></td>   
   <td style="height:85px;" width="81"><img src="content/includes/layout/bgbottom2-3.jpg" alt="Legal" width="81" height="82" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="0,0,88,18" href="content/legal.php" target="content" /></map></td>

  </tr>
</table>
</body>
</html>



Any ideas?
jabapyth
(not wanting to sort through reams of code) could you repost that, sans-php?
since its obviously just an html problem
eday2010
Just ignore the second chunk of code. The first chunk is just the table where the image is, and the third chunk is the whole page with no PHP. From my experience, PHP leaves gaps like that with divs, which is one reason I did the layout with tables for now. It might require some CSS styling work to correct the gap, but i havent been able to get it right yet.
Related topics

Layout Gap PRoblems with PHP/Javascript Combo
Don't Use Flash
Problems with php
Have your layout coded for $50 frih!!! (XHTML & CSS)
javascript php html styling and good practice.
[DESIGNER] - Sites de Código HTML, JAVASCRIPT, PHP(PORUGUÊS)
php include path
Problems With Php Memory Size
Problems with PHP-Nuke on Server2
Tabless layout - footer problems - [solved]
AJAX tutorial [2nd part now updated]
Whos is the FUTURE.... JAVA or .NET
php super slow!!
[ HELP] Problems with PHP and Perl
Is CSS good for the web programmer?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.