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

score 3 · Answer 1 · answered Jul 03 '09 at 17:41

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);
        }); 
    }); 
});

answered Jul 03 '09 at 17:41

Elzo Valugi

27,240
15
95
114

1

This is correct, however I question the need to do an animation before redirecting. Sort of like delaying the inevitable with unnecessary animation. – Ian Elliott Jul 03 '09 at 18:01
this is exactly what the callback is doing. After the last slideup is finished the redirect is called. check the documentation here http://docs.jquery.com/Effects/slideUp – Elzo Valugi Jul 03 '09 at 18:25
I have adjusted my code to fit I thought, I edited it above, I wonder what I am doing wrong. yes Ian the animation probably isnt neccesary in most cases, but what I am trying to achieve I would like it. – Cool Guy Yo Jul 03 '09 at 18:42
@Elzo, I know what the callback is doing and what's its for, I was just commenting on whether such an effect is actually useful. – Ian Elliott Jul 03 '09 at 19:20
I don't really question the design issue.You can attach a callback directly to the hide() method without doing any animation. http://docs.jquery.com/Effects/hide. – Elzo Valugi Jul 03 '09 at 21:03

Doug Avery · Accepted Answer · 2011-10-08T06:34:54.200

2

"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(event){ 
    event.preventDefault();
    var url  = $(this).attr("href");
     $("#div1").slideUp("slow"); 
     $("#div2").slideUp("slow", function(){
       window.location=url;
    }); 
 });

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.

edited Oct 08 '11 at 06:34

answered Jul 03 '09 at 19:30

Doug Avery

1,057
1
8
14

I added the url = line as a bonus for users without JS - if they click a "#" link, nothing will happen, which would suck. Instead, you can leave them a normal, working link that goes to http://whatever and just grab that HREF using jQuery for the window.location assignment. Everybody wins! – Doug Avery Jul 03 '09 at 19:39
return false works most of the time, but if you really want to cancel the link click, a bit of preventDefault() helps too - http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29 – Dan F Jul 04 '09 at 07:16
oh, +1 btw, you're the only one to mention cancelling of the link click, which is likely to be Anders' problem :-) – Dan F Jul 04 '09 at 07:17
Awesome, thanks for the preventDefault() tip, I hadn't heard of that! Seems like a more widely-applicable answer to problems like this. – Doug Avery Jul 04 '09 at 14:22

score 0 · Answer 3 · answered Jul 03 '09 at 17:10

0

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

top.location.href='someURL';

answered Jul 03 '09 at 17:10

Joel Meador

2,586
2
19
24

score 0 · Answer 4 · edited May 23 '17 at 12:19

0

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: How to redirect to another webpage in JavaScript/jQuery?

edited May 23 '17 at 12:19

Community

1
1

answered Jul 03 '09 at 17:35

djmzfKnm

26,679
70
166
227

2

actually this will redirect before you can see the animations. window.location call will be executed before the slideUp will finish – Elzo Valugi Jul 03 '09 at 17:39

score 0 · Answer 5 · answered Jul 03 '09 at 20:59

0

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

answered Jul 03 '09 at 20:59

ykaganovich

14,736
8
59
96

How to Hide Div then visit Url on One Click

5 Answers5