Text color in Fade-in Slideshow

**mag3** · 08-20-2011, 06:57 PM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Question: Is there a way to specify the color of the text descriptions associated with the slide show? I see in the fadeslideshow.js file where the "fontStyle:" can be specified, but what about font color? Perhaps using standard CSS Hex (ie. #ABC123)?

Sorry... Not terribly proficient in JS... Not yet, anyway

Thanks much!

**djr33** · 08-20-2011, 07:08 PM

I'm not sure if there's a way within the script to do this, but you can use the class "close" and modify it in CSS.

Code:

<style type="text/css">
.close { color:#ABC123; }
</style>

**mag3** · 08-20-2011, 07:26 PM

Originally Posted by djr33

I'm not sure if there's a way within the script to do this, but you can use the class "close" and modify it in CSS.

Code:

<style type="text/css">
.close { color:#ABC123; }
</style>

Thanks... So I would then reference the "close" class in the <div> which contains the slideshow? I don't see where else to reference it.

Also, I'll have to include the styling in my master CSS file, as I'm writing XTHML 1.0 "Strict" and trying to keep it that way

Update: Tried the above... doesn't work... Will need to try something else...
But thanks anyway

**jscheuer1** · 08-20-2011, 09:00 PM

Actualy it's .descpanelfg not .colse. And yes you can put it in an existing stylesheet.

However, since it's specified in the script as white and assigned to the inline style of the division with the description text, you need to use the !important keyword to override that, ex:

Code:

.descpanelfg { color: #ABC123 !important; }

**djr33** · 08-20-2011, 09:20 PM

Ah, yes, "descpanelfg", not close. I read the source too quickly.

You don't need to create a div for this. The style is already specified in the script so you just need to give the browser extra information about how to display what's already there. What John put above will be all you need.

**mag3** · 08-20-2011, 10:08 PM

Originally Posted by jscheuer1

Actualy it's .descpanelfg not .colse. And yes you can put it in an existing stylesheet.

However, since it's specified in the script as white and assigned to the inline style of the division with the description text, you need to use the !important keyword to override that, ex:

Code:

.descpanelfg { color: #ABC123 !important; }

That worked! Thanks!

**mag3** · 09-24-2011, 05:49 PM

Originally Posted by mag3

1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Question: Is there a way to specify the color of the text descriptions associated with the slide show? I see in the fadeslideshow.js file where the "fontStyle:" can be specified, but what about font color? Perhaps using standard CSS Hex (ie. #ABC123)?

Sorry... Not terribly proficient in JS... Not yet, anyway

Thanks much!

A quick follow up on this topic. I've noticed that when fadeinslideshow is used in conjunction with the "DHTML Window widget" (http://www.dynamicdrive.com/dynamici...ndow/index.htm), the slide show seems to stay "always on top." That is, when a DHTML window instance opens over the top of a slide show (or an opened DHTML window is moved over the top of a slide show), the slide show overrides the DHTML window and pops to the top screen layer, partially blocking the DHTML window. The browser doesn't matter (happens in both FF and IE).

Is there a way, either to: 1) Make the slide show "not 'always on top' " or 2) make the DHTML window stay "always on top?"

Thanks much.

**jscheuer1** · 09-24-2011, 08:11 PM

Technically no*, in reality yes. It's a matter of z-index. The slideshow operates in a range of z-index from 999 to 1001. The DHTML window starts at 100 and escalates from there in increments of 1 if there are more than one so that the current one may be on top of the other(s). That (the starting value of 100) is set in the dhtmlwindow.js script. Open it up with a text only editor like NotePad and find the highlighted line. Set the value (red) as shown:

Code:

// -------------------------------------------------------------------
// DHTML Window Widget- By Dynamic Drive, available at: http://www.dynamicdrive.com
// v1.0: Script created Feb 15th, 07'
// v1.01: Feb 21th, 07' (see changelog.txt)
// v1.02: March 26th, 07' (see changelog.txt)
// v1.03: May 5th, 07' (see changelog.txt)
// v1.1:  Oct 29th, 07' (see changelog.txt)
// -------------------------------------------------------------------

var dhtmlwindow={
imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that order
ajaxbustcache: true, //Bust caching when fetching a file via Ajax?
ajaxloadinghtml: '<b>Loading Page. Please wait...</b>', //HTML to show while window fetches Ajax Content?

minimizeorder: 0,
zIndexvalue:1050,
tobjects: [], //object to contain references to dhtml window divs, for cleanup purposes
lastactivet: {}, //reference to last active DHTML window

init:function(t){
	var domwindow=document.creat

Save it and use that version.

The browser cache may need to be cleared and/or the page refreshed to see changes.

*I say technically no because something else could theoretically have a higher z-index. But, for practical purposes in this situation, as long as you set things up as I've just outlined, the effect will be that the DHTML Window will be 'always on top'.

**mag3** · 09-24-2011, 08:28 PM

Originally Posted by jscheuer1

Technically no*, in reality yes. It's a matter of z-index. The slideshow operates in a range of z-index from 999 to 1001. The DHTML window starts at 100 and escalates from there in increments of 1 if there are more than one so that the current one may be on top of the other(s). That (the starting value of 100) is set in the dhtmlwindow.js script. Open it up with a text only editor like NotePad and find the highlighted line. Set the value (red) as shown:

Code:

// -------------------------------------------------------------------
// DHTML Window Widget- By Dynamic Drive, available at: http://www.dynamicdrive.com
// v1.0: Script created Feb 15th, 07'
// v1.01: Feb 21th, 07' (see changelog.txt)
// v1.02: March 26th, 07' (see changelog.txt)
// v1.03: May 5th, 07' (see changelog.txt)
// v1.1:  Oct 29th, 07' (see changelog.txt)
// -------------------------------------------------------------------

var dhtmlwindow={
imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that order
ajaxbustcache: true, //Bust caching when fetching a file via Ajax?
ajaxloadinghtml: '<b>Loading Page. Please wait...</b>', //HTML to show while window fetches Ajax Content?

minimizeorder: 0,
zIndexvalue:1050,
tobjects: [], //object to contain references to dhtml window divs, for cleanup purposes
lastactivet: {}, //reference to last active DHTML window

init:function(t){
	var domwindow=document.creat

Save it and use that version.

The browser cache may need to be cleared and/or the page refreshed to see changes.

*I say technically no because something else could theoretically have a higher z-index. But, for practical purposes in this situation, as long as you set things up as I've just outlined, the effect will be that the DHTML Window will be 'always on top'.

Of course! zIndexvalue.... Worked like a charm, and I will manage said values so that the DHTML window is never "trumped."

Thanks so much!