jQuery script working after the DOM has loaded within a .click event?

Question

I am trying to find out how to get a jQuery script to work correctly when a click event is started, the script calculates the height of a container (this script appears at the start of the page on load and works 100%) but I am now trying to get it to work inside a .click event.

If anyone knows how I should achieve this I would be very grateful.

p.s. I have tried doing document ready; waiting for the DOM to load but no cigar.

$(document).ready(function() {
    $("#hidden4").click(function(event) {
        event.preventDefault();
        $("#hidden4-1").slideToggle();

        var classDown = $('#hidden4 div.down').attr('class');
        var classUp = $('#hidden4 div.up').attr('class');

        if(classDown == 'down') {
            $("#hidden4 div.down").attr("class","up");
        }
        else if(classUp == 'up') {
            $("#hidden4 div.up").attr("class","down"); 
        }
            // Attain the absolute height of the container id container and assign to a usable variable
            var height = $("#container").height();
            alert (height);
            // Use the previous variable, divide by 4 then round that up and multiply by 4 and assign to new variable
            var newHeight = Math.ceil(height / 4) * 4;

            // Create a new variable and add the string "center" to it
            var finalHeight = "center ";

            // Using the previous variable add to it using the first 2 variables subtracting to find the difference and add 2
            finalHeight += (newHeight - height)+2;

            // Using the previous variable add to it the string "px" for the css selector usage
            finalHeight += "px";

            // Update the CSS of the required element altering the background position with the final variable
            $(".contentFooter").css('background-position', finalHeight);
    });
});

Thank you in advance.

What are you trying to do with the nested `$(document).ready` ?? I haven't done anything with JS in two years but isn't a document only ready *once*? — reinierpost, Oct 22 '10 at 11:25
please ignore the nested ready that was accidently left in when I was playing around trying to get it working :( — zealisreal, Oct 22 '10 at 11:35

Šime Vidas · Accepted Answer · 2010-10-22T13:04:02.450

2

You are nesting ready() inside ready(). Don't do such a thing. Try this:

$(document).ready(function () {
    $("#hidden4").click(function (event) {
        event.preventDefault();
        $("#hidden4-1").slideToggle();

        var classDown = $('#hidden4 div.down').attr('class');
        var classUp = $('#hidden4 div.up').attr('class');

        if (classDown == 'down') {
            $("#hidden4 div.down").attr("class", "up");
        }
        else if (classUp == 'up') {
            $("#hidden4 div.up").attr("class", "down");
        }
        // Attain the absolute height of the container id container and assign to a usable variable
        var height = $("#container").height();
        alert(height);
        // Use the previous variable, divide by 4 then round that up and multiply by 4 and assign to new variable
        var newHeight = Math.ceil(height / 4) * 4;

        // Create a new variable and add the string "center" to it
        var finalHeight = "center ";

        // Using the previous variable add to it using the first 2 variables subtracting to find the difference and add 2
        finalHeight += (newHeight - height) + 2;

        // Using the previous variable add to it the string "px" for the css selector usage
        finalHeight += "px";

        // Update the CSS of the required element altering the background position with the final variable
        $(".contentFooter").css('background-position', finalHeight);
    });
});

btw, if you want the container-height-calculation script to execute both at page load and on click, than put the code inside a function and run the function inside both ready() and click().

Update:

$("#foo").slideToggle(function() {
    // this code executes AFTER slideToggle has completed
});

edited Oct 22 '10 at 13:04

answered Oct 22 '10 at 11:24

Šime Vidas

182,163
62
281
385

I did sadly try that before posted on here, it doesnt work unforunately :( any other ideas? – zealisreal Oct 22 '10 at 11:34
Additional, I do already have the script as a function working in the ready() and click() functions of the site :( – zealisreal Oct 22 '10 at 11:38
What does the alert method alert? – Šime Vidas Oct 22 '10 at 11:48
the alert shows me what value of height the jquery took when the code was committed, that way I can see if it is grabbing the new height after the click event toggles a container down to show, thus setting a new height for #container. – zealisreal Oct 22 '10 at 11:50
Try alerting the finalHeight value right before you set it to the `.contentFooter` element(s). What's its value? btw, in JavaScript, we don't use the term "committed". JavaScript code is evaluated. Alternatively, you can say it is executed. – Šime Vidas Oct 22 '10 at 12:36
The alert function is only there for de-bugging, I should not of left it in when posting the original code. All I need is for the script that attains the height of #container to not get the height prior to the .slideToggle() function and to get the height of #container, after the .slideToggle() function has been fully executed. As of the moment it does the opposite, hopefully this clears things up for you, sorry if I have confused you prior to this. – zealisreal Oct 22 '10 at 12:58
If you want to read the height of #container AFTER the slideToggle() has completed, then read it inside the callback function of slideToggle(). I will update my answer to demonstrate this ... – Šime Vidas Oct 22 '10 at 13:02
Also, I believe using camelCase is preferred when setting CSS properties via css(). Use `backgroundPosition` instead of `background-position` – Šime Vidas Oct 22 '10 at 13:10
That worked a charm Šime, thank you for remaining patient when others didnt and finding a resolution to the problem. :D – zealisreal Oct 22 '10 at 15:12

score 0 · Answer 2 · answered Oct 22 '10 at 11:30

0

I don't think you need to nest another $(document).ready() in a jquery click, since the DOM is already ready when you applied the click event.

answered Oct 22 '10 at 11:30

Shaoz

10,573
26
72
100

Sadly this was not the problem, although wrong and only left in due to testing, removing it has not fixed the problem – zealisreal Oct 22 '10 at 11:37

jQuery script working after the DOM has loaded within a .click event?

2 Answers2