How to Hide Div then visit Url on One Click

Question

How would I go about setting a link to perform certain functions like hide div then go to destined url

something like this

$(document).ready(function(){ $("a").click(function(){ $("#div1").slideUp("slow"); $("#div2").slideUp("slow"); // then go to index.html }); });

This is my setup.

<script type="text/javascript">   $(document).ready(function(){
     $("a").click(function(){
     $("#one").hide("slow");
     $("#two").hide("slow" , function(){
     window.location (index.html);
       });
    });   });    </script>   

<div id="one"> some content </div>

<div id="two"> some content </div>

<a href="#">BUTTON HERE</a>

It only performs the hide function, if I replace the url in the html it perform the url only. I must be doing something Wrong

Answer 1

What you have is probably about right. Here's what you need to go to a new URL:

top.location.href='someURL';

Answer 2

There is nothing in JQuery to redirect from current page to some other page, but JavaScript has it location object, you can use it like:

$(document).ready(function(){ 
    $("a").click(function(){ 
        $("#div1").slideUp("slow"); 
        $("#div2").slideUp("slow"); 
        window.location(url); // or window.location.replace(url);

    }); 
});

You can read more abot redirection in JavaScript here: http://stackoverflow.com/questions/503093/redirect-page-in-jquery

Answer 3

try to put the redirect as callback to be executed after the last slideup:

$(document).ready(function(){ 
    $("a").click(function(){ 
        $("#div1").slideUp("slow"); 
        $("#div2").slideUp("slow", function(){
           window.location(url); // or window.location.replace(url);
        }); 
    }); 
});

Answer 4

"Location" is actually a property of the window object, not a method. This means you need to assign it with =, instead of passing it as a parameter with (). Try this code out:

$("a").click(function(){ 
    url  = $(this).attr("href");
     $("#div1").slideUp("slow"); 
     $("#div2").slideUp("slow", function(){
      window.location=url;
    }); 
    return false;
 });

Also, the default behavior of a link is to go to a URL, and it's going to run that behavior unless you stop it with something like "return false;". While setting the href to "#" won't take a user anywhere, it WILL scroll them to the top of the page, which could be annoying. Better to just return false it.

Answer 5

Do you really need to set location in javascript? What's wrong with just putting in in the href attribute?