Sliding Page

Sliding Page

  1. <script type="text/javascript">
          $(document).ready(function(){
                $("#page").load('lang/eng.txt');
                $("#page").slideUp("1");
                $("#page").slideDown("slow");
                $("#eng").fadeTo("normal", 0.25);
      //swedish
                $("#swe").click(function(){
                      $("#page").load('lang/swe.txt');
                      $("#page").slideUp("normal");
                      $("#page").slideDown("slow");
                      $("#swe").fadeTo("slow", 0.25);
                      $("#eng").fadeTo("slow", 1.0);
                });
      //English
                $("#eng").click(function(){
                      $("#page").load('lang/eng.txt');
                      $("#page").slideUp("normal");
                      $("#page").slideDown("slow");
                      $("#eng").fadeTo("slow", 0.25);
                      $("#swe").fadeTo("slow", 1.0);
                  });
     });
    </script>

    </head>
    <body>

          <div id="page">
          </div>

          <div id="flags">
                <button id="swe" style=" background:#000; border:0"><img src="images/swe.png" /></button>
                <button id="eng" style=" background:#000; border:0"><img src="images/eng.png" /></button>
          </div>


































     
As you might understand the #page should slide up when it loads and when any of the flags are pressed it should slide up then down with the new language.

I'm planning to change the fadeTo to hide/show

But when i enter the site, all i get is a "popp" when it loads or when i press the flags.
I'm started with jQuery yesterday so the only thing i understand at this point is that the slideUp/Down cancel each other out.