Home/ Questions/Q 8865709
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T16:35:00+00:00

I have an unusual problem. The code below isn’t working properly. I have pasted

  • 0

I have an unusual problem.

The code below isn’t working properly. I have pasted it into jsFiddle and it works fine, however on my website it doesn’t work smoothly and it doesn’t look any good. What it should do: after clicking on ‘Start here’ button, it should smoothly slideUp the whole content then proceed to the next page. It actually starts sliding up, but it doesn’t go to the end and loads a new page. I assume it can be fixed by using any sort of delay, but I’m new in jQuery and I’m not sure how to do it properly. Or maybe there is another way to sort it out. (problem fixed, reason: min-height applied)

The next problem I faced is loading external .js file (commented fragment in the code). When I do it, the script doesn’t work. When I place the script BELOW the button, it works. how to overcome this problem that I can implement the code as an external .js in a head section instead of putting it in tags below the button?

Thank you very much in advance.

the code is here:

    <html>
    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=480" />
        <link rel="stylesheet" type="text/css" href="_css/index.css">
        <script type="text/javascript" src="_js/jquery.js"></script>
        <script type="text/javascript" src="_js/form.js"></script>
    <!--            <script type="text/javascript" src="_js/transitions.js"></script>
    -->
    </head>

    <body>

    <div id="wrapper">

      <div id="header">
            <img src="_images/header.png">
            <div id="spons"><img src="_images/main-sponsor.jpg"></div>
      </div>

      <div id="content">

        <div id="starthere">
                <strong>Thank you. <br/>You have gained access to free Wi-Fi Media Network. <br/>Please enjoy free content from GAME.</strong>
            <div id="finalbut">
                <a href="#" id="roll"><img src="_images/butt-start.png"></a>
            </div>

            <script>
            $("#roll").click(function() {
                 $("#content").slideUp(function() {
                     window.location.href = "menu.html";
                 });
            });
            </script>

        </div>

      </div>

    </div>

    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your content div has a min-height, which is screwing up the animation.

    You can simply remove the min-height

    For part two of your problem, wrap the code in the jQuery on ready event.

    Always do this when using jQuery! It’ll make sure to run your code when everything is ready, so you can put your code anywhere.

    $(function() {
    $("#roll").click(function() {
        $("#content").slideUp(function() {
            window.location.href = "menu.html";
        });
    });
});
    • 0