PDA

View Full Version : Background color for Ultimate Fade-in slideshow



Arnor
11-03-2009, 12:57 AM
Hi,

I discovered the Ultimate Fade-in slideshow script today and have been playing with it. One minor "problem" is that the background of the image is black when it first loads. Since my page is white it's not as nice as if the background of the image was white. I've tried to set the background color of the DIV to white but that didn't help so my guess is that this is somewhere in the js code.

Any ideas on how/where to fix this?

Best regards,

Arnor Baldvinsson

jscheuer1
11-03-2009, 01:17 AM
You may use overriding style to do this, ex:


<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: white!important;
}
</style>

Where fadeshow1 is the wrapperid/id for the container/target division for the slide show.

Arnor
11-03-2009, 01:54 AM
Thanks John:) We'll try that:)

Best regards,

brookeln
11-17-2009, 08:06 AM
I am having the same exact problem as the OP, and the fix that John suggested is not working for me. What am I doing wrong?

The site is here: http://upticon.com/

The slideshow is just below the banner and navigation and consists of a series of quotes.

The code looks like this:

HTML:

<div id="quotes">
<div id="quotes-padding"></div><!--this is just some empty space-->
<div id="fadeshow1"></div><!--this is the js slideshow script-->
</div><!--end quotes-->

CSS:

#quotes {
margin:0;
padding:0;
background:#ffffff url(images/quote-box-bg.jpg) 0 0 no-repeat;
width:900px;
height:200px;
border:0;
}

#quotes-padding {
margin:0;
padding:0;
height: 38px;
}

#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}

Any suggestions? Thanks in advance!!

brookeln
11-17-2009, 08:20 AM
I also saw this same exact question asked and answered here: http://www.dynamicdrive.com/forums/showthread.php?t=49799

...with the same answer, and it also worked for them, but not working for me. I'm probably doing something obviously wrong, so hopefully you guys can correct my mistake. THANK YOU!

jscheuer1
11-17-2009, 02:49 PM
You are not using the fix. Yes, you have:


#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}

But that is not what I suggested. You can keep that if you like though, as it does do part of the job, and simply add (highlighted) after it:


#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}
#fadeshow1 .gallerylayer {
background-color: white!important;
}

brookeln
11-17-2009, 06:17 PM
But that is not what I suggested. You can keep that if you like though, as it does do part of the job, and simply add (highlighted) after it:


#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}
#fadeshow1 .gallerylayer {
background-color: white!important;
}


Thank you for pointing out my mistake - it now works. Much appreciated!

rbridgeman
07-12-2010, 09:15 PM
Apologies for the months-old bump to this thread, however, how would I make the background transparent?

I have a few different sized images and don't want any specific background except for the background that's on the site I'm making it for.

Thanks.


Edit: I'm using version 2.4

jscheuer1
07-12-2010, 10:01 PM
Apologies for the months-old bump to this thread, however, how would I make the background transparent?

I have a few different sized images and don't want any specific background except for the background that's on the site I'm making it for.

Thanks.


Edit: I'm using version 2.4

You can't do that as easily. You would think at first glance that making the background transparent would simply show whatever is behind the slide show.

However, the slide show proper (not counting the descriptions and and controls, if any) is made up of three divisions of equal size, two of which are absolutely positioned on top of each other, each of which contain the entire array of the images. Both of these are contained in the third division. Most of this is all constructed by the script, so you don't see it in the HTML markup for the page.

The fading effect is achieved by bringing one of the two contained divisions to prominence (higher z-index) and fading it in. After it fades in, the covered one is faded out and has its z-index lowered. It's a little more complicated than that. But that's the basic concept.

If the background is transparent, and the images are of differing sizes (as in your case) and/or have transparent regions that don't match up, there will be bleed through of the faded out image.

You can attempt to set the background to that of the site. If it's a solid color, you can do that as already discussed in this thread, and there's no problem.

I suspect though that your site's background is more complex, involving at least a background image.

If that's the case, you can set the same background image in the css for these three divisions that I've been mentioning. But unless your overall layout for the page and for the slide show stay in sync at various window sizes, it will be impossible to line up exactly for all possible window sizes.

Also, if the background for the site is even more complex than just a background-image, it can get even more complex or even impossible.

On the bright side, if it's just a background image, and one that will mesh well with itself regardless of its orientation, things are fairly simple.

So, what do you have as the site background?

In any case, for a background image you can do (in your stylesheet):


#fadeshow1, #fadeshow1 .gallerylayer {
background: white url(background.jpg) 50px 25px !important;
}

where fadeshow1 is the wrapperid for the show, background.jpg is the image (include its path there too if different than the page's), 50px is the left offset for the background and 25px is the top offset. Use these last two items to get it to line up with the existing site background if possible.

As I say there are situations where this will be nearly if not entirely impossible.

There are other slide shows that fade that will not have this degree of difficulty in using a transparent background.

If you want more help:

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

rbridgeman
07-12-2010, 10:15 PM
Thanks, John for the lengthy reply.

The site I'd be adding it to is (in place of the featured painting):
http://www.beckmanart.com

Edit: I might just add a background image as suggested and similar to the existing background by not identical. That could still likely achieve a good effect and not be entirely dominated by a single color.

jscheuer1
07-13-2010, 01:49 AM
Two facts about your layout work in your favor:


The width and height of the presentational area don't change at various window sizes. And your 'Featured Painting' image (which I presume represents where the slide show will be) doesn't appear to shift independently to the presentational area, rather appears to follow it precisely.


There isn't anything else behind where I think you plan to put the slide show other than the background image.


So it may be relatively easy to achieve the effect you want with the Ultimate Fade-In Slide Show.

Working against you is the fact that your page has no DOCTYPE, let alone one which would force browsers to display it in standards mode. More or less as a result the page looks differently in different browsers.* This may or may not effect your ability to integrate the Ultimate Fade-In Slide Show (or other slide show scripts) into your page. The page looks to me most as I believe is intended in IE 8. Opera is a close second, with (as far as I could quickly tell) only the little square I believe is supposed to be to the right of 'Paintings' missing. In Firefox there are dropouts (white rectangles) and shifts (rectangular areas whose positions are vertically shifted in spots by about 10px) that make things look bad. I didn't spend a lot of time comparing the browsers. I may have missed some things. And there are many other browsers than just these 3. (I used the latest automatically distributed versions of each browser I did check the page in.)


*A page doesn't have to look exactly the same in all browsers. Just OK is good enough. This can be achieved without standards mode. But generally it's easier to do in standards mode. If you only have one target browser in mind or don't care about other browsers for some other reason(s), you don't have to worry about such things.

rbridgeman
07-13-2010, 02:19 AM
Yes, I had some problems getting the site working across multiple browsers. I tested the site mostly around IE8. My client has a Mac and it's severely crippled in Safari with white blocks everywhere. Is DOCTYPE like you say supposed to fix this? I haven't payed much attention to that command.

jscheuer1
07-13-2010, 08:02 AM
The DOCTYPE isn't exactly a command, except in the generic sense of the word. It's technically referred to as a declaration.

There's quite a bit of disagreement over which is best. It depends to a degree on what you are doing. For the sort of work you have there, I think I'd recommend:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If you look into it, you might determine that a different one better suits your needs.

The DOCTYPE should be the first item in the page's source code.

A given DOCTYPE won't necessarily fix your problems, won't in fact for this page. If it's one that invokes standards, it will ensure that browsers like IE 8, Safari, Firefox, really all modern browsers will follow standards to the best of their ability when rendering a page.

That generally makes it easier to get the same look, or at least an OK look in all browsers. But it requires that you know and use standards in your HTML and css coding, as well as do so in such a way that gives the various browsers the best shot at rendering your page as intended.

Using the standards is relatively easy. You can look them up, and there are validators that will tell you when you've messed up. The two of the most popular are (for HTML and css respectively):

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

But none of that helps you with knowing the best approaches. Often that's a no-brainer, but with certain things, especially in certain situations, it can be quite tricky. IE is often the odd man out, but it has conditionals that will allow you to tweak either the css (preferred when workable) or even the HTML markup presented to IE. These can even be IE version specific.

If you need help on finding the best approach in certain cases, or in tweaking for IE, the HTML and css sections of this and other similar forums can be a good resource.

But to start out, just get used to coding to a valid URL DOCTYPE or to the HTML 5 DOCTYPE. This will throw whatever browser you test in into its standard compliance mode, so what you will then see is more likely to be what you will see in other browsers. I would recommend getting the Firefox browser and its developer extension and designing for it with a DOCTYPE that invokes standards. Then any tweaking that remains to be done should be minimal. The developer extension will assist you in using the validators already mentioned and help you analyze the results of your work in many other ways. Similar tools now exist for virtually all modern browsers, including IE 8. People who might be inclined to help you are probably more familiar with the tools dedicated to these purposes for Firefox though. And it is easier in the long run to design for Firefox and tweak for IE than the other way around. Workable Firefox design code will be more likely to work in other browsers.