Need help with Ultimate Fade-In Slideshow width

[jonnybravo]

1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Hi. I am currently running this script using 3 images, which are all the same size, but are different to look at. They fade from one to the next in a constant cycle. This all works perfectly.

However, i really need the images to resize depending on the resolution of the screen.


I am using the images as a header for the top of my container on my page, and the container obviously resizes using width:100%, however i tried to do the same with my image header so it all resizes nicely together, so the page look the same in 1024 by 768, as it does in 1260 by 1024 but had no joy with my method.

I tried the following (which does not work for me as it does not resize, just stays the original size of the image):

<script type="text/javascript"> new fadeshow(fadeimages, '100%', 141, 0, 3000, 0, "R")</script>


Is this the wrong place to do it? Am i doing something wrong? Is this impossible (i pray its not)?


Many Thanks for any help

[jscheuer1]

Well, of course depending upon the images, that could look really bad, but certain types of images will lend themselves well to being stretched in one dimension. You cannot add in the 100% where you are suggesting, the script just doesn't work that way.

Using css style though, we can get that sort of effect. Try this in your stylesheet:


#master0, #master0 * {
width: 100%!important;
}

This may or may not need a little fine tuning. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[jonnybravo]

Thanks john.

As i am not fully familiar with that piece of code, and am not sure what to do with it once in my style sheet, as in do i call the class of the javascript code that does the image fader "class = master0", i have set up a sample page on a website for you to view.

The url of the page is

http://www.tayside-vjb.gov.uk/test/test.htm

Other URLs which might be of use are:

My Style Sheet URL: http://www.tayside-vjb.gov.uk/test/NewIntranet.css

My HeaderFader JS code URL: http://www.tayside-vjb.gov.uk/test/HeaderFader.js


As i have said before, i would like the page to view as i does in my current resolution of 1280 by 1024, in anything down to 1024 by 768 and anything up to 1680 by 1050, and the way i thought this could be done is by using percentage widths so the whole page is always 100% of the screen, regardless of resolution. The container that the page is in resizes fine, only thing that doesnt is the header.

If there's any chance you can help me with this i would greatly appreciate it.

Many Thanks in Advance.

[jscheuer1]

Nothing so complex as all that, just as I said:


Try this in your stylesheet:


#master0, #master0 * {
width: 100%!important;
}

The master0 id is already a part of the script's generated markup.