Grow your CSS skills. Land your dream job.

Problem with Stop/Play

  • # October 28, 2009 at 3:43 pm

    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!

    # October 28, 2009 at 7:36 pm

    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

    # October 29, 2009 at 9:03 am

    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?

    # October 29, 2009 at 11:44 am

    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!

    # October 29, 2009 at 8:31 pm

    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

    # October 30, 2009 at 7:24 am

    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?

    # October 30, 2009 at 12:08 pm

    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?

    # October 30, 2009 at 3:05 pm

    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!

    # November 3, 2009 at 2:41 pm

    More sugestion people?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".