Featured Content Slider first image flicking out not fading ( all browsers ).

[Chris-fr]

1) Script Title: Featured Content Slider

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

3) Describe problem: Have installed Featured Contant Slider and made recommended changes to enable script to work with IE 9 and all works fine in all browsers now except first image fades in then flicks out before second image fades in. After this first change of image fade in fade out works fine until page is reloaded the same thing happens at first change.

Have got the enablefade set to true with a fade degree of 0.03

Any help please.

[bernie1227]

1) Script Title: Featured Content Slider

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

3) Describe problem: Have installed Featured Contant Slider and made recommended changes to enable script to work with IE 9 and all works fine in all browsers now except first image fades in then flicks out before second image fades in. After this first change of image fade in fade out works fine until page is reloaded the same thing happens at first change.

Have got the enablefade set to true with a fade degree of 0.03

Any help please.

Could you please post the code that you have for the content slider? Just as a question, does it do this in all browsers? It sounds to me like something is happening when it first loads if the problem is not repeating after the first image has gone past.

[jscheuer1]

I think I see what you mean. I can only replicate the problem in IE though. Using a text only editor like NotePad, in the contentglider.css file make the highlighted changes as shown:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total widt . . .

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

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[TRUSTCollective]

I've made the CSS modifications as noted but I'm not seeing a change. Site is here: http://www.odd-ny.com/

Is there a way do delay the player display until the images load so the flicker isn't visible?

[jscheuer1]

I've made the CSS modifications as noted

No you have not. This is the location of the contentslider.css file:

http://www.odd-ny.com/uploads/NCleanBlue/js/contentslider.css

And this is it's contents:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border-bottom-width: 6px;
width: 720px; /*width of featured content slider*/
height: 331px;
margin:0 auto;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 0px;
background: white;
width: 720px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
display:none;
width: 720px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: white;
padding: 0;
}

.pagination a{
padding: 0;
text-decoration: none; 
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

Those should all be 0:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border-bottom-width: 6px;
width: 720px; /*width of featured content slider*/
height: 331px;
margin:0 auto;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 0px;
background: white;
width: 720px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

.pagination{
display:none;
width: 720px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: white;
padding: 0;
}

.pagination a{
padding: 0;
text-decoration: none; 
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

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

[TRUSTCollective]

Sorry, I did change it. I didn't expect you to look so quickly so I changed it back after it had no effect. Now it should be changed again.

[jscheuer1]

No flicker here. Make sure to clear the browser cache and refresh the page.

[TRUSTCollective]

I did both at the time and it was still creating the flicker. It is now too and I've tried it in Chrome, Firefox, and ie. Maybe we're looking for different things.

I think the only thing your solution fixed was the initial load. For example, if i go to the page the first time, the problem seems to be gone. But if I refresh that same page, the problem still replicates. Is there a more complete solution? If you do a refresh, does it not show the problem at all?

[jscheuer1]

I had not been doing a refresh. I see what you mean. When I have more time I'll look into it.

It does seem though that by using 0, it's better than using 1, at least in IE. With 1 you get a flicker each time it comes around to the beginning. With 0 it seems only to be an issue as the page loads.

In all others, regardless of the 0 or 1, it appears to only be an issue at page load.

Pages not behaving smoothly at page load is common. As images, css files and scripts are being fetched, layouts being read, items can flicker and/or jump around on the page. Most folks are used to this. It's a bit of a fine point to eliminate all of these sorts of loading artifacts from a page.

That said, I will be taking a closer look at this when I have more time.

[jscheuer1]

OK, for what you're doing with this script, you would be better off with:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

It shouldn't have that problem. If it does, use this updated version:

http://home.comcast.net/~jscheuer1/s...deslideshow.js

I got a little bored, as long as you haven't moved or removed the images and other resources, here's a demo:

http://home.comcast.net/~jscheuer1/s..._collect_h.htm