Thread

Just a very quick test shows that if you change the Login link to this code :

and the javascript.js file to have :

$("div.panel_button").toggle();
        exit();

so you have the exit(); bit in there as well then this should hopefully work so if they have JS enabled the panel opens but if they don’t have JS enabled then it goes to Google (or wherever you want) instead.

Best wishes,

Mark

so you have the exit(); bit in there as well then this should hopefully work so if they have JS enabled the panel opens but if they don’t have JS enabled then it goes to Google (or wherever you want) instead.

I’m no JavaScript expert, but I think the proper way is to do this (within the context of jQuery):

$('a').click(function() {
   // Do something
   return false;
})

Thanks for all your help on this guys!

I’m getting closer, but still isn’t there yet. You can see the updated changes here:  Thanks for all your help on this guys!  I’m getting closer, but still isn’t there yet. You can see the updated changes here: http://www.randomjabber.com/test/logogala/jquery_test.html

The subscription link is what I’m working with. I still haven’t quite figured out what to do in the jQuery to tell the browser that if javascript is enabled, do what the jQuery says (pop up the div) instead of going to the anchor link.

Right now, if javascript is disabled, it works fine. It never shows the hidden div and will take you to the anchor (Google). If javascript is enabled, it starts to pop up the div when you click on the subscribe link, but quickly takes you to Google’s homepage which is the href value of the anchor. I just need a way to basically tell it to ignore the anchor href value when javascript is enabled but in my searching online, I’ve not found that solution. I’m sure it’s simple?

I’m also not sure what return false; is suppose to do? I added it and didn’t see a difference in effect if it was there or not there. I’m sure I’m not using it correct either.

Return false tells the browser to let the script override the default behaviour of the link, in this case following the url.
The basics of what you wanna do is this, more or less:

$(document).ready(function() {
        $("a#subscribeRollover").click(function() {
            $('#rssInfo').show('slow');
            return false;
        });
        $('#rssInfoClose').click(function() {
            $('#rssInfo').hide('slow');
            return false;
        });
    });

Return false tells the browser to let the script override the default behaviour of the link, in this case following the url.
The basics of what you wanna do is this, more or less:

$(document).ready(function() {
        $("a#subscribeRollover").click(function() {
            $('#rssInfo').show('slow');
            return false;
        });
        $('#rssInfoClose').click(function() {
            $('#rssInfo').hide('slow');
            return false;
        });
    });

Ah, makes sense now! I knew it would be obvious once someone pointed it out.

I’m still having problems though. I’ve tweaked my javascript code just a little and now I’ve got this:

$(function() {
        <!--$("#rssInfo").hide();-->
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("a#rssInfoClose");
            $("a#subscribeRollover").click(function () {
                rssInfo.animate({ opacity: "show" }, "slow");
                rssInfoClose.click(function () {
                rssInfo.animate({ opacity: "hide" }, "slow");
                });
            });
    });

I’m not sure where to place the return false; to make that work and not not follow the default behavior of the link.

I tried:

$(function() {
        <!--$("#rssInfo").hide();-->
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("a#rssInfoClose");
            $("a#subscribeRollover").click(function () {
                rssInfo.animate({ opacity: "show" }, "slow");
            return false;
                rssInfoClose.click(function () {
                rssInfo.animate({ opacity: "hide" }, "slow");
            return false;
                });
            });
    });

But it seems to only show the hidden div. The “hide” part is non function once the return false is in place…

Check your brackets, right now your 2 click functions are nested.

Ok, I’m not exactly sure what you’re referring too as I’m pretty much a complete noob with jquery, but I gave it another go and came up with this (which seems to work):

$(function() {
        <!--$("#rssInfo").hide();-->
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("a#rssInfoClose");
            $("a#subscribeRollover").click(function () {
                rssInfo.animate({ opacity: "show" }, "slow");
                return false;
                });
                rssInfoClose.click(function () {
                rssInfo.animate({ opacity: "hide" }, "slow");
                return false;
            });
    });

Is that correct?

You mentioned that my two click functions were nested. Is that not correct either? Or just not correct when you add in return false; to the code? Everything worked fine originally when javascript was enabled, just not when it was disabled.

I just want to make sure my original code was correct in the first place and that I didn’t start from something that was broken to begin with.

Curious why something like this does not work?:

$(function() {
        <!--$("#rssInfo").hide();-->
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("a#rssInfoClose");
            $("a#subscribeRollover").click(function () {
                rssInfo.animate({ opacity: "show" }, "slow");
                rssInfoClose.click(function () {
                rssInfo.animate({ opacity: "hide" }, "slow");
                return false;
            });
    });

Ok, I’m not exactly sure what you’re referring too as I’m pretty much a complete noob with jquery, but I gave it another go and came up with this (which seems to work):

$(function() {
        <!--$("#rssInfo").hide();-->
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("a#rssInfoClose");
            $("a#subscribeRollover").click(function () {
                rssInfo.animate({ opacity: "show" }, "slow");
                return false;
                });
                rssInfoClose.click(function () {
                rssInfo.animate({ opacity: "hide" }, "slow");
                return false;
            });
    });

Is that correct?

Yup, because now both click events are no longer nested.
The default click code is something like:

.click(function() {
        // Act on the event
    });

When I said watch the brackets I meant keeping an eye on the } and )

Ok, following now on the original problem.

If this is the default click code:

.click(function() {
        // Act on the event
    });

Assuming I didn’t want to use the return false; and wanted to stick to the code that I originally was using (that was broken when javascript was disabled). Would I need to split the click functions up or is it okay to have them nested in that situation? I’m confused on when it’s okay to nest them and not okay to nest them. lol

Weel, if 2 click events are triggered by 2 different elements (as is the case here) I wouldn’t nest them. 😊

I’m no JavaScript expert, but I think the proper way is to do this (within the context of jQuery):

$('a').click(function() {
   // Do something
   return false;
})

Yep you are absolutely correct. return false is what I was looking for but just couldn’t remember it at the time. Thanks for the reminder tip 😉

Best wishes,

Mark

I’ll barge in on this again 😉 .

$(function() {
        <!--$("#rssInfo").hide();-->
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("a#rssInfoClose");
            $("a#subscribeRollover").click(function () {
                rssInfo.animate({ opacity: "show" }, "slow");
                return false;
                });
                rssInfoClose.click(function () {
                rssInfo.animate({ opacity: "hide" }, "slow");
                return false;
            });
    });

Is that correct?

Almost.  You’re closing the click function too soon, so that first closing bracket you added should be followed by a comma, and not ); .

The click function essentially takes an unlimited number of arguments.  All of them functions.  If there is more than one argument it cycles through them on each click.  So let’s say a, b, and c are functions:

a = function() { /* do something */ }
b = function() { /* do something */ }
c = function() { /* do something */ }

$('#whatever').click(a, b, c);

When I click the ‘whatever’ div, it runs function a.  I click it again, it runs b.  Then c, and back to a again.

In javascript functions don’t need names, you could just put the functions themselves into the parameters - those are called anonymous functions.

$('#whatever').click(function() {/*stuff*/},
function() {/*stuff*/},
function() {/*stuff */});

So for your original problem.  You would hide the div when the page loads.

And then attach the click handlers.  However in this case you need two, because the click function only listens to one element.

So, using regular functions because it’s easier to read, you would do something like this:

var showit = function() {
    $('rssdiv').show();
    return false;
}

var hideit = function() {
    $('rssdiv').hide();
    return false;
}

$('#rssdiv').hide();
$('#subscribe').click(showit);
$('#closerss').click(hideit);

Then you can replace those show() and hide() actions with more fancy animations (which is what I thought the original problem was 😉 ).

Hope that helps.

[Edit: On returning false, that just tells the browser not to act on the click.  So you will stay on the same page.]

I’ll barge in on this again 😉 .

Please, barge all you want! That was a huge help. 😉 Sorry for not responding sooner. Been meaning to visit the thread for a couple days now.

Ok, so I tried your suggestion on how I was not closing the first click function correctly. I came up with this, but it doesn’t work:

$(function() {
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("#rssInfoRight a");
            $("a#subscribeRollover").click(function () {
                rssInfo.slideDown("fast");
            return false;
                },
                rssInfoClose.click(function () {
                rssInfo.slideUp("fast");
                return false;
                });
            });
    });

It works until I add the “},” and the return false’s in there and then fails. What did I do wrong there?

I took your suggestion above and got it to work perfectly:

$(function() {
            var showit = function() {
        $('#rssInfo').slideDown("fast");
        return false;
        }
        
        var hideit = function() {
        $('#rssInfo').slideUp("fast");
        return false;
        }
        
        $('a#subscribeRollover').click(showit);
        $('#rssInfoRight a').click(hideit);
    });

I actually like your suggestion better than what I had originally as I find it easier to read (as you said was a benefit). I did remove “$(’#rssInfo’).hide();” from the code you gave me. I don’t think it’s needed (correct me if I’m wrong). I’m hiding #rssInfo via CSS so that if by chance javascript is disabled, the user won’t see this absolutely positioned div showing up over the half the page. So, since CSS is displaying:none for #rssInfo, no need to hide it via javascript?

Is there a difference between the two methods above (my original and what you gave me?). Is one faster that the other maybe? Or is it basically two means to the same end, with one a little easier to read?

::headdesk:: Oh my, really sorry about that.  Your solution in 21 was fine (as e-man correctly identified), except for the html comment.  Javascript uses // and /* */ style comments.  I misread it as being a toggle for some reason :red: .

The hide() would only be needed if you wanted to display it with js turned off, of course.  There is no performance difference that I’m aware of, but the second solution is definitely more readable.

Glad it works now 😊 .