Refresh javascript onclick

Question

i'm trying to refresh a javascript i created that set height on my div when page load.

<script>
    jQuery(function($) {
        $('#bloc2').height($('#zonetexteposition').height());
        $('#bloc2-vertical').height($('#zonetexteposition').height());
        $('#bloc2-horizontal').height($('#zonetexteposition').height());
    });
</script>

Until now, everything works fine. my divs are getting the right height from div #zonetexteposition.

The thing is, it calculate the height of the page only onload. My F.A.Q page have questions in it and the anwser appear on click of the question, so it change the height of my div #zonetexteposition. Since the javascript only run onload it doesnt resize to the new height of #zonetexteposition. So i would like to know if its possible to make a script that gonna refresh the above script onclick of a question.

Thanks, hope it's clear

Joel Almeida · Accepted Answer · 2015-07-13 15:16:07Z

1

Create a function that has the calculations:

function foo () {
    $('#bloc2').height($('#zonetexteposition').height());
    $('#bloc2-vertical').height($('#zonetexteposition').height());
    $('#bloc2-horizontal').height($('#zonetexteposition').height());
}

Add an event listener to the button:

$("button").on('click', function(event) {
   foo();
   //anything you want on the click also
});

Call the function on load:

jQuery(function($) {
    foo();
});

answered Jul 13, 2015 at 15:16

Joel Almeida

8,0775 gold badges27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antoine St-Pierre Over a year ago

when im creating the function like you did. it gives me an error Uncaught TypeError: $ is not a function

Joel Almeida Over a year ago

jQuery(function($) { function foo() {....}; $(button).on(...); foo(); }); put it like this

Zander · Accepted Answer · 2015-07-13 15:14:00Z

1

Wrap all the code you have done into a function, then, when page loads, call that function, whenever you click on the desired element, call the same function.

answered Jul 13, 2015 at 15:14

Zander

1,0861 gold badge10 silver badges24 bronze badges

Comments

enguerranws · Accepted Answer · 2015-07-13 15:27:34Z

1

One quick answer would be : instead of calculating height everytime, just set the min-height instead of height on DOM load.

Like that :

$('#bloc2, #bloc2-vertical, #bloc2-horizontal').css('min-height',$('#zonetexteposition').height());

So you wouldn't have to recalculate height of the container after the DOM load, as the container would handle it "naturally" it it gets bigger.

Tout simplement :)

answered Jul 13, 2015 at 15:27

enguerranws

8,2338 gold badges53 silver badges101 bronze badges

Collectives™ on Stack Overflow

Refresh javascript onclick

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related