Grow your CSS skills. Land your dream job.

CSS Animation-Div remains same place on firefox & Opera when hitting the back space after load.

  • # June 16, 2013 at 3:38 am

    I have a div element that when a link is clicked it will animate. (Basically go down). The problem is that on google chrome everything works perfectly. On Firefox and Opera if i hit back after the page loads the page will load with that div on its last animation frame. I have no idea where to start to fix the problem

    This is the relevant code for each part

    **Javascript**

    $(document).ready(function() {
    $(“#widgetsWeb”).click(function()
    {

    $(“#spiderMove”).css(“top”,”5%”);
    var href = $(“#widgetWeb”).attr(‘href’);
    setTimeout(function() {window.location = href}, 3000);
    return false;
    });
    });

    **html**

    **CSS**

    #spiderMove
    {
    width: 150px;
    height:150px;
    background-size: 100% 100%;
    background-size: contain;
    background-image:url(‘spider.png’);
    position:fixed;
    left:50%;
    top:-30%;
    z-index:100;
    -moz-transition: all 3.0s ease-in;
    -o-transition: all 3.0s ease-in;
    transition: all 3.0s ease-in;
    }

    Would appreciate any help :)

    # June 16, 2013 at 3:38 am

    for some reason html code is not showing its just a div

    # June 16, 2013 at 7:04 am

    I find a partial solution on pressing back the page will reload thus putting each element back in page using

    I am concerned on what will happen if those who are using the page have a slow internet connection not having to reload the page instead of using the cached items may slow page load.

    I have a 50mbps dsl connection so can’t really test for this issue.

    # June 16, 2013 at 11:11 am

    found*

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

You must be logged in to reply to this topic.

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