jQuery script working after the DOM has loaded within a .click event?
-
10-10-2019 - |
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.
Solution
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
});
OTHER TIPS
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.