PDA

View Full Version : 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/dynamicindex4/expandoimage.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/html/courtyard_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:


<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:


<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):


<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:


<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
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 http://www.dynamicdrive.com/forums/
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

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.