Expando leaves a blank space

**bexvlad** · 03-17-2009, 10:58 AM

1) Script Title: Expando Image Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pandoimage.htm

3) Describe problem: Expando is brilliant and I got it working within minutes. I have problems, However, when using it as an image class with Cushy CMS, which is also great. Please see http://www.webmagicsouth.co.uk/trew/...ard_gates.html where images expand and contract fine in Chrome, Safari (PC) but in FF 3.0.7 only does not 'refresh' the page after contracting, leaving a large white space.

IE messes up the layout completely but I suspect I need to add a 'bicubic' instruction for IE.

**jscheuer1** · 03-18-2009, 05:36 AM

I'll work with you on this if need be, as I have the time (right now I'm a bit busy with some other things). However, what I would suggest is to make the .expando class position:absolute, and to give each expando classed image a position:relative container that has its width and height set to the width and height attributes of the expando image. For instance, I see you have:

Code:

<style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

and:

Code:

<p><a href="deganwy_pedestrian_gate.html"><img class="expando" src="courtyard_gates_14_0_1.jpg" vspace="3" height="74" hspace="3" align="left" alt="Deganwy Pedestrian Gate" width="80" /></a></p>

If you were to add to each (highlighted):

Code:

<style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
position: absolute;
top: 0;
left: 0;
}

</style>

and:

Code:

<p style="position:relative; height:74px; width:80px;"><a href="deganwy_pedestrian_gate.html"><img class="expando" src="courtyard_gates_14_0_1.jpg" vspace="3" height="74" hspace="3" align="left" alt="Deganwy Pedestrian Gate" width="80" /></a></p>

I think things would work out much better.

**pannakara** · 05-20-2009, 12:43 PM

please help me on this... i tried many times but can't get this expando works.. i intergrated the crawler script and it's working fine but just this one is not working.. please help.

PHP Code:


<?php
if ((!defined('NV_SYSTEM')) AND (!defined('NV_ADMIN'))) {
    Header("Location: ../index.php");
    exit;
}
$content  .= "<head>\n";
$content  .= "<style type=\"text/css\">\n";
$content  .= "img.expando{ /*sample CSS for expando images. Not required but recommended*/\n";
$content  .= "border: none;\n";
$content  .= "vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/\n";
$content  .= "position: absolute;\n";
$content  .= "top: 1;\n";
$content  .= "left: 0;\n";
$content  .= "}\n";
$content  .= "</style>\n";
$content  .= "</head>\n";
$content  .= "<script type=\"text/javascript\" src=\"../js/expando.js\">\n";
/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in [url]http://www.dynamicdrive.com/forums/[/url]
   username: jscheuer1 - This Notice Must Remain for Legal Use
*/
$content  .= "</script>\n";
$content  .= "<script type=\"text/javascript\" src=\"../js/crawler.js\"></script>\n";
$content  .= "<div class=\"marquee\" id=\"mycrawler2\">\n";
$content  .= "<p><p style=\"position:relative;\"><p align=\"center\">&nbsp;&nbsp;&nbsp;&nbsp;<SCRIPT language=\"JavaScript\" class=\"expando\" src=\"http://chuahuongdao.org/hinhanh/random.php?1\" width=\"140\" height=\"110\"></SCRIPT>\n";
$content  .= "&nbsp;<SCRIPT language=\"JavaScript\" class=\"expando\" src=\"http://chuahuongdao.org/hinhanh/random.php?2\" width=\"140\" height=\"110\"></SCRIPT>\n";
$content  .= "&nbsp;<SCRIPT language=\"JavaScript\" class=\"expando\" src=\"http://chuahuongdao.org/hinhanh/random.php?3\" width=\"140\" height=\"110\"></SCRIPT>\n";
$content  .= "&nbsp;<SCRIPT language=\"JavaScript\" class=\"expando\" src=\"http://chuahuongdao.org/hinhanh/random.php?4\" width=\"140\" height=\"110\"></SCRIPT>\n";
$content  .= "&nbsp;<SCRIPT language=\"JavaScript\" class=\"expando\" src=\"http://chuahuongdao.org/hinhanh/random.php?5\" width=\"140\" height=\"110\"></SCRIPT>\n";
$content  .= "&nbsp;<SCRIPT language=\"JavaScript\" class=\"expando\" src=\"http://chuahuongdao.org/hinhanh/random.php?6\" width=\"140\" height=\"110\"></SCRIPT>\n";
$content  .= "&nbsp;<SCRIPT language=\"JavaScript\" class=\"expando\" src=\"http://chuahuongdao.org/hinhanh/random.php?7\" width=\"140\" height=\"110\"></SCRIPT>\n";
$content  .= "</div></p>\n";
$content  .= "<script type=\"text/javascript\">\n";
$content  .= "marqueeInit({\n";
$content  .= "    uniqueid: 'mycrawler2',\n";
$content  .= "    style: {\n";
$content  .= "        'padding': '2px',\n";
$content  .= "        'width': '600px',\n";
$content  .= "        'height': '180px'\n";
$content  .= "    },\n";
$content  .= "    inc: 3, //speed - pixel increment for each iteration of this marquee's movement\n";
$content  .= "    mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)\n";
$content  .= "    moveatleast: 2,\n";
$content  .= "    neutral: 150,\n";
$content  .= "    savedirection: true\n";
$content  .= "});\n";
$content  .= "</script>\n";
?>

**pannakara** · 05-20-2009, 01:41 PM

i added the php

PHP Code:

and

tag but they are not working... this page i have is the block for nuke ... here is the sample page http://www.chuahuongdao.org you can see those images are running from right to left... but can not expando.

Thread: Expando leaves a blank space

Thread Tools

Search Thread

Expando leaves a blank space

Bookmarks

Bookmarks

Posting Permissions