Don't execute href jquery

Question

Possible Duplicate:
Jquery if conditions false then prevent default

I have this code, it's running fine but I want it to be dynamic.

$(".nav a").click(function () {     
    var getid = $(this).attr('id');
    $("#background-wrapper").fadeOut("slow");
    $("#page_box").fadeOut("slow");         
    $("header").fadeOut("slow");
    $("footer").fadeOut("slow", function () {
        window.location = getid+".php";
    });
});

I want to execute the fade out first before directing it using the href.

What I want is this first

$(".nav a").click(function () {     
    var getid = $(this).attr('id');
    $("#background-wrapper").fadeOut("slow");
    $("#page_box").fadeOut("slow"); 
    $("header").fadeOut("slow");
    $("footer").fadeOut("slow");
});

then trigger this after

.nav a = href = "link"

score 3 · Answer 1 · answered Sep 06 '12 at 07:56

You need to use event.preventDefault() first to stop the link behaviour, then manually redirect the user. Try this:

$(".nav a").click(function (e) {     
    e.preventDefault();

    var getid = $(this).attr('id');
    $("#background-wrapper").fadeOut("slow");
    $("#page_box").fadeOut("slow");         
    $("header").fadeOut("slow");
    $("footer").fadeOut("slow", function () {
        location.assign = getid + ".php";
    });
});

Ahsan Khurshid · Answer 2 · 2012-09-06T08:08:39.733

Try This:

$(".nav a").click(function (e) {     

    e.preventDefault(); /*  If this method is called, the default action of the event will not be triggered. e.g clicked anchors will not take the browser to a new URL */

    var pageUrl = this.id + ".php";

    $("#background-wrapper").fadeOut("slow");
    $("#page_box").fadeOut("slow"); 
    $("header").fadeOut("slow");
    $("footer").fadeOut("slow", function () {
        window.location.replace(pageUrl);
    });

});

score 0 · Answer 3 · answered Sep 06 '12 at 08:01

0

Give this a try:

$(".nav a").click(function (e) {   
    e.preventDefault();
    var $ele = $(this);
    $("#background-wrapper, #page_box, header, footer").fadeOut("slow", function () {
        window.location = $ele.attr('id')+".php";
    });
});

answered Sep 06 '12 at 08:01

Ian Wood

6,429
5
33
72

Thanks! This one is working with me. I just removed the .php at the end since I want it to have a external url also. Thanks again :) – EatCodePlaySleep Sep 09 '12 at 09:38
great stuff! don't forget to accept your answer! – Ian Wood Sep 09 '12 at 21:41

score 0 · Answer 4 · answered Sep 06 '12 at 08:02

Perhaps the following will work for you?

$(".nav a").click(function (e) {     
    e.preventDefault();
    var pageUri = $(this).attr('id') + '.php';
    $("#background-wrapper, #page_box, header, footer").fadeOut('slow', function () {
        window.replace(pageUri)
    });
}

Don't execute href jquery

4 Answers4