PDA

View Full Version : 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/dynamicindex14/fadeinslideshow.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.

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

mag3
08-20-2011, 07:26 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.

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

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:


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


.descpanelfg { color: #ABC123 !important; }

That worked! Thanks! :):):)

mag3
09-24-2011, 05:49 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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:


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


// -------------------------------------------------------------------
// 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." :D

Thanks so much!