Hyperlink click redirecting to home and slidetoggeling a div

Question

Either am I missing something or searching with the wrong terms, but I cannot solve this problem by myself. As described in the headline a click on navLink is supposed to go back to home, but also slide toggle slide-2 and animate the website. The following code reloads home, but either the callback is overwritten or simply wrong in thhis context, because the toggle and animate code work in other contexts.

Help would be greatly appreciated

function goHome(callback) { 
window.location = $("#navLink").find("a").attr("href");
callback() 
} 

function changeHome(){
$("#slide-2 h2").next(".portNav").slideToggle(800);
$("html, body").animate({scrollTop:$(this).offset().top}, 'medium');
}

$("#navLink").click(function(event){
event.preventDefault();
goHome(changeHome)
});

maybe your way is OK too, but I've always seen it written as: .click(function(e){e.preventDefault();...}); — Phillip Schmidt, Aug 21 '12 at 21:26
What's important is that the `event` is referenced in the function call, and whether you use `e` or `event` is not important in jQuery, as long it's used consistently within the function, but in the code above, `event` is `undefined`. — adeneo, Aug 21 '12 at 21:33
Yeah.. that's what I was going for. Isn't gonna fix your problem, but rather it would cause another problem when you fixed your current one — Phillip Schmidt, Aug 21 '12 at 21:36
@Philip: Thanks, somewhere in between I had used the event in that function, but dropped it again in the try and error process. — justMe, Aug 21 '12 at 21:56

score 4 · Answer 1 · answered Aug 21 '12 at 21:26

4

You're changing the documents location, loading a new page, and the javacript will be loaded again and your callback will never be executed as you've left the page.

answered Aug 21 '12 at 21:26

adeneo

312,895
29
395
388

Yes, I guessed so, but it is supposed to be executed on home anyway...? – justMe Aug 21 '12 at 21:28
Only if you have some sliding function that is executed on pageload. The above code will NOT do anything after the part where you redirect to another page. – adeneo Aug 21 '12 at 21:30
On any page load including home, the body is hidden at first and than fades in. But opening that div on page loade anyways by putting that callback there is not really, what I would like to do. – justMe Aug 21 '12 at 21:35
Ahh, the classic fade-in-on-load trick. Nothing says "I'm so special, you'll wait longer just to read my website" quite so well. – Blazemonger Aug 21 '12 at 21:39
Again, your callback will never ever ever run. You're clicking a link, and doing a redirect to another page. In the exact moment when you redirect to another page, all the functions, events and everything the user did is lost, including that callback function. There is no need to put anything after the document location change as it will never run, and as it's triggered by a click event it will not run on pageload either. You need a new function, one of those "see what element is on my page" or "read the URL" functions to do the fading stuff on load. @Blazemonger - agreed! `this!=UX;` – adeneo Aug 21 '12 at 21:43
No, it's rather: Sort yourself and than show instead of jumping into place while everybodey is watching... – justMe Aug 21 '12 at 21:43
@adeneo Thanks, for confirming my suspicion about overwriting at least. – justMe Aug 21 '12 at 21:47

Mohammed Swillam · Answer 2 · 2012-08-21T21:49:48.860

2 options you have here in order to achieve what you need

1- QueryString

you can use a querystring to determine if this load is from your link or a normal one something like this:

$(function(){
 $('#redirect').click(function(){
   window.location = 'YOUR_HOME_DOCUMENT?lnk=1';
 });
});

then inside your homepage ready() function, check for the existence of this querystring, if provided, then animate whatever you want.

Example:

1- first, in order to read Querystring variables with ease, I always use the following jQuery plugins. (I can't remember from where I've got this code, but many thanks for the original poster).

$.extend({
    getUrlVars: function () {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        if ($.getUrlVars()[name] == null) {
            return "";
        }
        else {
            return $.getUrlVars()[name];
        }
    }
});

then, I can do something like this:

$(function (){ // a short hand for $(document).ready(function)  ;)

var comingFromMyLink = $.getUrlVar('lnk');

if(comingFromMyLink)
{
     // do the required animation here
}

});

2- Cookies

I really don't recommend this option for this scenario, but to be honest, I wanted to provide you with much information as possible, and you may choose whatever you find suitable.

You can preserve a flag or a variable in a cookie, and try to get it inside your homepage

checkout this sample: http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html

or this plugin: http://archive.plugins.jquery.com/project/Cookie

that's it, please let me know if you still need help in this manner, hope you find my answer useful for you :)

The first option looks perfect. Any idea where I can read up about that, including how to check the existence of the querystring? — justMe, Aug 21 '12 at 21:42
Exactly. The only way to do this is by adding a query string the end of the URL, and then checking on page load whether or not that string exists. If it does, execute your code, if it doesn't load it like normal. — Sean Thompson, Aug 21 '12 at 21:42
Thanks a lot you two, but it is in the middle of the night here. I'll try to get my head into all that code tomorrow and see, if I can come up with something. — justMe, Aug 21 '12 at 21:53
@Mohammed ElSayed: Right, so I've given this code some thought. I don't think it is going to work, because the navLink sits in the footer. I cannot put something like one Url in that function, unless changing '+1' to '-1' and putting 'home' instead of the questionmark will work. Than it will store every Url except for 'home'. Am I on the right track and will the secomd piece of code still run? — justMe, Aug 22 '12 at 19:46

Hyperlink click redirecting to home and slidetoggeling a div

2 Answers2