PDA

View Full Version : Need Expando with a Z-index



Lorel
01-19-2009, 09:11 PM
Hi

I have the Expando script available on dynamicdrive working with a row of small images across the top of a page, but I would like it to float above the text on the page on mouseover so it won't push the text down. I tried adding z-index:-1; to the CSS but that didn't work.

If this is supposed to go in the js can someone tell me how to add it as I don't write JS?

Here is the page for Expando:
http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

Lorel

Snookerman
01-19-2009, 09:16 PM
For z-index to work, the element has to be positioned. Try adding position:relative; to the elements you are giving z-indexes. If you want more help:

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.

Lorel
01-19-2009, 10:07 PM
I tried the position:relative; with z-index and now the mouseover doesn't work at all. If I take out the position relative it works again but still pushing text down.

-----HTML--------

<img class="expando" src="images/Example.gif" width="100" height="137" border="0" alt="">

------CSS---------

.expando {border: none;
position:relative;
z-index:-1;
vertical-align: top; }


thanks for trying to help.

Lorel

Snookerman
01-19-2009, 10:36 PM
Ahh, now I see what you want to do. Try giving the image position: absolute;. You will then need to position the image with left/right and top/bottom margins. I'm not sure if this will affect the script though, but try it.

Good luck!

Lorel
01-21-2009, 09:39 PM
I tried using position:absolute, etc. but it didn't work. I tried setting up a separate class for each image as I have 5 images centered at the top of the page but that didn't work either. Noting I tried lifts the expando images above the text on the page.

Snookerman
01-21-2009, 10:25 PM
I tried it on the demo site with absolute positioning and it worked. Could you please post a link to your site or attach the code you're using so we can take a look?

Lorel
01-22-2009, 08:06 PM
Here is the URL. This is a rough draft temporary site.

http://www.loriswebs.com/-RC/

Snookerman
01-22-2009, 08:24 PM
I see what the problem is now. Since you are using a negative z-index, the images are placed behind the other elements (when you absolutely position them) and therefore your mouse never hovers over them so the zoom-effect doesn't work. I suggest that you skip the z-index and leave the images on the top. Also, remember to give them different values from the left or right or else they'll just pile up on top of each other.

Good luck!

jscheuer1
01-23-2009, 04:04 AM
Demo:

Link Removed

Use your browser's 'view source' to get the code.

Notes: The (slightly modified) script may be made external again, as long as the script credit remains on the page. The inline styles may be placed in an external stylesheet, as can the on page stylesheet's styles, as long as their order in relation to the main aarc.css styles remains the same. The:


<base href="http://www.loriswebs.com/-RC/">

tag is only required for my demo so that I did not have to copy all of your images and other external resources. It may be removed.

Any questions, feel free to ask.

Lorel
01-23-2009, 07:09 PM
Hi John,

Thanks for trying to help. I can see it working on your site as it should be.

I copied off the code (put css data in the css file and JS in the JS file and edited the index file and that didn't work so I copied off the whole page on your site and put it on mine but it's not working that way either.

Can you check to see what might be wrong?

I know it's not centered. I'll deal with that later.

BTW, what was the purpose of the div>&nbsp;</div> at top of page?

Lorel
01-23-2009, 07:17 PM
John.

Oppps. I had my index files messed up New vs old.

It's working now.

Thanks much!!

Please remove your copy on your website now as I don't want the search engines to get a copy as this will go on another site when i'm finished.

Lorel
01-23-2009, 07:27 PM
BTW, I tried taking out the JS and putting it in it's own js file and then it doesn't work again. I copied the JS that what was on your page directly into the JS file and put the script tag back where it was.

I write code by hand so would rather have the JS in an external file.

Can you tell me why it's not picking up the external expando.js file?

take care
Lori

jscheuer1
01-24-2009, 02:02 AM
First of all, don't worry about the page on my site. No robots allowed. That means that it will not interfere with any SEO for your site.

Though once this matter is resolved, I will be happy to and will remove the page from my personal site - just in case.

Now, the matter at hand appears to be making the script external again. The external file should contain this, and only this:


/* 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 */

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40,
speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
im.parentNode.style.zIndex = 3;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
im.parentNode.style.zIndex = 2;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump < 1) im.parentNode.style.zIndex = '';
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}


Call it expando.js and put it in the same folder as your page. Then on your page, replace the entire script, including its tags (which I removed in the above) with:


<script type="text/javascript" src="expando.js">
/* 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 */
</script>

If you are still having problems, consult my guidelines for external scripts:


Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:


<script src="some.js" type="text/javascript"></script>

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:


<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
<script>
<!--and
//-->
</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:


http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:


<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters, without which the script won't function.

There is also info here:

http://www.javascriptkit.com/javatutors/external.shtml

and/or let me know if you have any further questions. Let me know either way, so I can remove the demo from my site.

Lorel
01-26-2009, 03:55 PM
Ahhh. I see the problem. I didn't take the JS code out of the script tags for the external JS. All fixed.

Thanks much.

jscheuer1
01-26-2009, 04:17 PM
Great! I've now removed the demo from my site. I did have an alternative idea for the styles:


<style type="text/css">
.expando {
position: absolute;
top: 0;
}
.ex1 {
left: 0;
}
.ex2 {
left: auto;
right: 0;
}
.excontainer {
position:relative;
float: left;
margin: 0;
padding: 0 2px;
height: 137px;
z-index: 1;
}
</style>
<!--[if IE]>
<style type="text/css">
img {
-ms-interpolation-mode: bicubic;
}
</style>
<![endif]-->

With these added hooks and inline styles in the markup:


<div class="excontainer" style="width:99px;">
<img class="expando ex1" src="images/steamed-vegetables1.gif" width="99" height="137" border="0" alt="steamed vegetables cartoon 1">
</div>
<div class="excontainer" style="width:123px;">
<img class="expando ex1" src="images/steer-bathroom1.gif" width="123" height="137" border="0" alt="steer in bathroom cartoon 2">
</div>
<div class="excontainer" style="width:105px;">
<img class="expando ex1" src="images/whipped-cream1.gif" width="105" height="137" border="0" alt="whipped cream cartoon 3">
</div>
<div class="excontainer" style="width:105px;padding-left:0;margin-left:-1px;">
<img class="expando ex2" src="images/new-muffler1.gif" width="105" height="137" border="0" alt="new muffler cartoon 4">
</div>
<div class="excontainer" style="width:122px;">
<img class="expando ex2" src="images/big-A-ranch1.gif" width="122" height="137" border="0" alt="Big A Ranch cartoon 5">
</div>

This allows the two images on the right to expand leftwards. The added conditional style for IE simply makes for better resolution of the images when small in that browser (version 7 and up).

Lorel
01-27-2009, 06:21 PM
This allows the two images on the right to expand leftwards. The added conditional style for IE simply makes for better resolution of the images when small in that browser (version 7 and up).

Hi John,

Thanks for the added changes. Expanding the last two images to the left works great except but they are still out of focus on IE6 and FF on Windows. They look perfect on all browsers on the Mac. I put the "if IE" code in the style tag above the head tag on the page as I'm sure those comment tags won't work on the css page. I don't write JS script so I'm not sure how to edit it.

Alternatively, is there a way to use small images for the thumbnails along with the larger images in expando?

PS. I know the content part of the page is way below left menu on Win IE6 but I'm working on that.

jscheuer1
01-28-2009, 01:30 AM
The way you are dealing with the conditional style is fine. You could even just put it in the stylesheet without the style tags or conditional, like so:


img {
-ms-interpolation-mode: bicubic;
}

It will register as invalid (in a style validator) or as an error in some non-IE browsers, but not unless someone decides to debug or validate your page.

Generally, I like to avoid that though, that's why I used the separate on page sheet with the conditional.

You can also put it like the above code block into a separate stylesheet - say, ie_styles.css - then link it to your page like so:


<!--[if IE]>
<link rel="stylesheet" href="ie_styles.css" type="text/css">
<![endif]-->

That too will avoid any errors or validation flags.

As to using thumbnails to avoid a slight distortion of the smaller images in some browsers - there are pluses and minuses to such an approach. Obviously there would be a slight improvement of the appearance of the page in some browsers. However, it would require preloading of the larger images with the risk that even if set for preloading that they might not be ready in time for mouseover enlargement. It would also require a fair bit of modification of the script to account for preloading and getting the actual dimensions of the larger images, as well as swapping the thumbnail images for their larger versions and visa versa at the appropriate moments.

I will kick this idea around the old alleged brain a bit more, but I think for the slight change in clarity of the images when small in some browsers, the costs outweigh the benefits. Especially as browsers will continue to improve in this regard, rendering any changes for them superfluous.

Though If I could determine a way to do it that wouldn't have the drawbacks I currently envision, it might be worthwhile.

P.S. In a separate development, we can make the center cartoon enlarge in a centered way (neither to the left or to the right) if you want, also the spacing between the thumbs currently looks a little off, could probably use a little tweaking.

jscheuer1
01-28-2009, 08:38 AM
I've figured out a way to do this. We will need thumbnails. They should each be the size of the image when small, for example, when steamed-vegetables1.gif is small it's 99 x 137, that's the size that its thumbnail should be.

For simplicity's sake, make up the various thumbnails and put them in the images directory. Name them each the same as their larger image counterpart except with '_tbn' appended to the filename, ex:

steamed-vegetables1_tbn.gif

When you have all 5 of those made up and on the server, let me know - I will then give you the new script, styles and markup.

The way this will work is that the thumbnails will be background images for the excontainer divs. The expando images will be visibility hidden. When the mouse moves over the excontainer, its expando image will become visible and expand. When the image contracts fully, it will become hidden again. That way, whenever an expando image is small, it will not be seen, but it's thumbnail version will.

There will still be the problem that, until the larger images load, the effect will not be pretty. Without this addition, the user will see that a given larger image isn't loaded. With it, they will see the smaller, faster loading background image thumbnail first, before the larger image has loaded, but the time lag should be short. There may be a way to work that out though. While you get the thumbnails together, I'll take a crack at that.

Lorel
01-28-2009, 02:53 PM
Hi John,

I reduced the images to thumbnails as you suggested and they are loaded on the server. The code has changed a little bit since my original post as I shrunk 2 of the images a bit so they would all line up with the smaller size because they didn't all have text on the bottom.

I appreciate your trying to fix this as 85% of visitors to the site are using Windows. I'm not sure if it's affecting Win IE 7 and 8 but it is on Win IE6 and FF3.

Thanks for taking the time to try and fix the resolution.

jscheuer1
01-29-2009, 04:46 AM
I see the thumbnail images, thanks. I'm a little busy at the moment, or have been. I will try to get to this soon (next day or so or sooner). I do have a workable solution I've been running trials on, but also a better idea that I want to test out.

BTW, I just wanted to mention that your work (your cartoons) are pretty funny.

jscheuer1
01-29-2009, 01:01 PM
I think I have all the kinks worked out. Before I start though, where you have:


</div><!--EndIndent-->
</div><!--ENDCONTENT-->

<hr>

<br class="clearboth">

<div align="center">

I think you really want this instead:


</div><!--EndIndent-->
</div><!--ENDCONTENT-->

<div class="clearboth"></div>

<hr>

<div align="center">

Here are the new styles:


.expando { position: absolute;
visibility: hidden;
top: 0; }

.ex1 {
left: 0; }

.ex2 {
left: auto;
right: 0; }

.excent {
left: -52px;
margin-left: 50%;
}

.excontainer {
position:relative;
float: left;
margin: 0;
padding: 0 2px;
height: 137px;
z-index: 1;
background-position: left top;
background-repeat: no-repeat;
}
#image1 {
width:105px;
background-image: url(images/steamed-vegetables1_tbn.gif);
}
#image2 {
width:116px;
padding-right: 0;
background-image: url(images/steer-bathroom1_tbn.gif);
}
#image3 {
width:104px;
background-image: url(images/whipped-cream1_tbn.gif);
background-position: center top;
}
#image4 {
width:104px;
padding-left: 0;
background-image: url(images/new-muffler1_tbn.gif);
background-position: right top;
}
#image5 {
width:117px;
background-image: url(images/big-A-ranch1_tbn.gif);
background-position: right top;
}

Here is the new markup with an on page helper script:


<div class="center">
<div class="excontainer start" id="image1">
<img class="expando ex1" src="images/steamed-vegetables1.gif" width="105" height="137" border="0" alt="steamed vegetables cartoon 1">
</div>
<div class="excontainer start" id="image2">
<img class="expando ex1" src="images/steer-bathroom1.gif" width="116" height="130" border="0" alt="steer in bathroom cartoon 2">
</div>
<div class="excontainer start" id="image3">
<img class="expando ex1 excent" src="images/whipped-cream1.gif" width="104" height="137" border="0" alt="whipped cream cartoon 3">
</div>
<div class="excontainer start" id="image4">
<img class="expando ex2" src="images/new-muffler1.gif" width="104" height="137" border="0" alt="new muffler cartoon 4">
</div>
<div class="excontainer start" id="image5">
<img class="expando ex2" src="images/big-A-ranch1.gif" width="117" height="131" border="0" alt="Big A Ranch cartoon 5">
</div>
</div>
<script type="text/javascript">
(function(){
var loadsure = function(i, e){
e = e || window.event || null;
if(e && e.type == 'load' || i.complete){
i.parentNode.className = i.parentNode.className.replace(r2, '');
i.style.visibility = 'hidden';
}
else i.onload = function(){loadsure(i);};
}, e = document.images, l = e.length, r1 = new RegExp('\\bexpando\\b'), r2 = new RegExp(' start');
for(var i = 0; i < l; ++i)
if(r1.test(e[i].className))
loadsure(e[i]);
})();
</script>
<div style="clear:left;"></div>

Here's the new script:


/* Expando-ZV Image Script 2008 - 2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use */

if (document.images){
(function(){
var cos, times = 40, speed = 20, etype = null;
var expConIm = function(im){
im = im || window.event;
etype = im.type || null;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (expConIm.cr.test (im.className) && etype == 'mouseover'){
im.getElementsByTagName('img')[0].style.visibility = 'visible';
return;
}
else if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if(/\bexcent\b/.test(im.className))
im.style.left = '-' + parseInt(widthHeight (e.ims[i].w)) / 2 + 'px';
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
im.parentNode.style.zIndex = 3;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
im.parentNode.style.zIndex = 2;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump < 1){
im.parentNode.style.zIndex = '';
im.style.visibility = 'hidden';
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
if(e.ims[i].w && e.ims[i].h)
resize ();
};

document.write('<style type="text/css">.start { background-position: -1000px!important;}.expando {visibility: visible;}<\/style>');

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');
expConIm.cr = new RegExp('\\bexcontainer\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}

Lorel
01-29-2009, 05:36 PM
Hi John, Thanks for your desire to get this working.

PS. the cartoons are not mine. I'm just the web designer.

Lorel
01-29-2009, 05:52 PM
That worked great John! In Win XP6 and FF3.

Thanks Much!

Lorel

jscheuer1
01-29-2009, 07:05 PM
Hi John, Thanks for your desire to get this working.

PS. the cartoons are not mine. I'm just the web designer.

Oh well, I know how that goes, tell Leigh then. I think it was in part my being impressed with his work that made me go the extra mile here, though I've often been known to do so at the drop of a hat.


That worked great John! In Win XP6 and FF3.

Thanks Much!

Lorel

You're welcome. I tested it in a number of browsers, including those two, I don't anticipate any problems, but one never knows. If something comes up, we could try reverting to the earlier version for that browser, though any browser that has a problem with this one would probably have a problem with the older version (I'm thinking legacy browsers here - like older versions of Safari, or IE before v5.5, etc).

Lorel
01-29-2009, 07:21 PM
Hi John,

I'll relay all your hard work to Leigh re getting this working as I realize this was a special effor on your part.

I'm not worried about anyone using a broswer before IE 5 as I never see those anymore. I'm using Safari 3x on the Mac and it looks perfect there--in fact Safari on the Mac doesn't cause a slight distortion when the images are increasing in size like on Windows broswers. But that may just be my Windows machine.

jscheuer1
01-29-2009, 07:28 PM
I see it in IE 6 and Firefox 3 on Windows XP here, and a friend saw it on her Vista machine with Firefox 3. Using Safari 3 Win here, there was no problem, same thing with Opera 9.63. Some browsers are just better at interpolating images when asked to resize them. In the old days, none were any good at it. In a few years, all current version browsers will likely be adept.

Lorel
03-21-2009, 03:25 PM
Hi John,

Just wanted to say that I moved the Rubes Cartoons site that is using the expando script to it's own domain:
http://www.rubescartoons.com

However now I have a minor problem.

When I validated the code it wouldn't validate unless I made a few minor changes.

This hover code in css file (no-repeat 0 0; ) wouldn't validate and the (0 0;) caused a problem so I changed it to (background-repeat: no-repeat;) and left the (00) out.

However now the images have a black background when they are loading in the Safari browser on Mac (doesn't show up in Windows Vista or Win XP IE 6) so I messed something up.

Do you know what might be causing the black background when the page loads? I checked and don't see a background in CSS listed as black.

pannakara
05-20-2009, 01:02 PM
Hi John,
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";
?>

jscheuer1
06-16-2009, 04:07 PM
Please Start a new thread for a new question.

jscheuer1
09-26-2009, 01:55 AM
Hi John,

Just wanted to say that I moved the Rubes Cartoons site that is using the expando script to it's own domain:
http://www.rubescartoons.com

However now I have a minor problem.

When I validated the code it wouldn't validate unless I made a few minor changes.

This hover code in css file (no-repeat 0 0; ) wouldn't validate and the (0 0;) caused a problem so I changed it to (background-repeat: no-repeat;) and left the (00) out.

However now the images have a black background when they are loading in the Safari browser on Mac (doesn't show up in Windows Vista or Win XP IE 6) so I messed something up.

Do you know what might be causing the black background when the page loads? I checked and don't see a background in CSS listed as black.

Not sure if we or you by yourself resolved this or not. However, I was going over old posts and found this issue. It is a minor one. The background style may be set as a composite, with repeat and positioning included as well as color and/or image, etc., ex:


background: yellow 0 0 no-repeat;

But if you are just setting the repeat, ex:


background-repeat: no-repeat;

You cannot include any other information. If you do, it will not validate and will be ignored by most browsers. Other browsers may execute whatever part of the directive seems valid to its error correcting algorithm.