Problem with Stop/Play

[giannesdabrun]

Hi, I have a project simple.
http://www.imaginis.com.br/desenvolvimento/fechosul/

My problem is when is mouse over, the buton makes red, thats ok. But if the mouse os over again, the buton makes green.
How???

I will put my CSS here!

Code:

.anythingSlider * { margin:0; padding:0; list-style:none; vertical-align:baseline; }

.anythingSlider { width: 795px; height: 158px; position: relative; margin: 0; padding:0; }
.anythingSlider .wrapper { width: 795px; overflow: auto; height: 158px; margin: 0; position: absolute; top: 0; }
.anythingSlider .wrapper img { border:0; }
.anythingSlider .wrapper ul { background-image:url(../../imagem/cabecalho/cabecalho_banner_bg.jpg); width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.anythingSlider ul li { display: block; float: left; padding: 0; height: 158px; width: 795px; margin: 0; }
/*.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 0px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: 0px; }
.anythingSlider .back { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover { background-position: 0 -200px; }
.anythingSlider .back:hover { background-position: -67px -200px; }*/

#thumbNav { position: relative; top: 125px; right:65px; text-align: right; }
#thumbNav a { color: white; font: 11px; font-weight:bold; display: inline-block; padding-top: 3px; padding-bottom:4px; width: 24px; margin: 0 3px 0 0; background: #7CB637 url(../images/botao.png) repeat-x; text-align: center; }
#thumbNav a:hover { background-image:url(../images/botao_hover.png); background-repeat:no-repeat; color:#29B855; }
#thumbNav a.cur { background-image:url(../images/botao_select.png); background-repeat:no-repeat; color:#5F8C2C; }

#start-stop { background: none; background-image: url(../images/botao_play.png); background-repeat: repeat-x; font-weight:bold; color: #5F8C2C; padding-top:3px; padding-bottom:4px; width: 50px; text-align: center; position: absolute; right: 5px; top: 138px; }
#start-stop.playing { background-image:url(../images/botao_stop.png); background-repeat:no-repeat; font-weight:normal; color: white; }
#start-stop:hover { background-image: url(../images/botao_stop_play_select.png); background-repeat:no-repeat; color:#5F8C2C; }

/*
Prevents
*/
.anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }

Sugestions?
OBS: Very good script!!! Congratulations!

[cybershot]

try setting the initial value in the jquery that handles the slider for the button. So it knows what color it should be to start

[giannesdabrun]

I Tried here some modifications in the js, but dont work. When I supos that was correct, i make a error.

I make this modification:

Code:

// If pauseOnHover then add hover effects
if(base.options.pauseOnHover) {
base.$el.hover(function(){
base.clearTimer();
}, function(){
//base.startStop(base.playing);
});
}

The StarStop works correct, because on mouse over, mouse out, the button still iqual, but then slider stop working. Then i think that the replay of this item is in the function startStop, because this function controls the style of button.
Any sugestions?

[giannesdabrun]

Well, I make a little tutorial about my problem. Here it is:

1) The bottun Pause have to be in RED color, when the animation is on!
[img]http://www.imaginis.com.br/desenvolvimento/fechosul/imagem/slider/imagem_01.jpg[/img]

2) The button Pause still in RED when the mouse is over and the animation is on!
[img]http://www.imaginis.com.br/desenvolvimento/fechosul/imagem/slider/imagem_02.jpg[/img]

3) When the mouse os out, the button Pause changes his color to GREEN! This color is for the button Play!
[img]http://www.imaginis.com.br/desenvolvimento/fechosul/imagem/slider/imagem_03.jpg[/img]

Repeat this operation and youll see the color changing every time the mouse is out of animation.
NOTE: the problem is the same when i click on numeric navigation!

[cybershot]

In your code, you have a line of text that says

pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover

try setting this to false and see how that effects the slider

[giannesdabrun]

In parts, works!
Now the style is working correctly! But i lost the efect to pause the slider when the mouse is over a banner!
And now? More sugestions?

[cybershot]

well, I think it’s overkill to have the pause button on the right and then to have it pause over the banner as well. I think the reason that it does what it does is that there is no code to tell the button what to do when you mouse over the banner. the button needs to have a start point and stop point for mousing over the banner. I can’t right that code. I see that this line of code is commented out

//base.startStop(base.playing);

what happens if you remove that comment?

[giannesdabrun]

As a Metter of Fact i already dicomented. If comentec, the efects goals well, but the animation fails! heheh
Its like a Dead Line, there is no where to go!

[giannesdabrun]

More sugestion people?

[Author]

Posts