CODEWITHSUNDEEP
jquery
SmilingLily
SmilingLily

Reputation: 333

Jquery Height issue

I have a page when It loads for the first time I want to add a div with Height 450px. The page have 3 submit buttons and when ever anyone clicks any of those 3 buttons I need to set the height to 0px.

Here is what I did.`

     <style type="text/css">

    .DivHeight
    {
        height:450px;
    }
    .DivNoHeight
    {
        height:0px;
    }

   </style>

                   <script type="text/javascript">
          $(document).ready(function () {

           document.getElementById("divHeight").className = "DivHeight";

          $("#btnSubmit").click(function () {


            document.getElementById("#divHeight").className = "DivNoHeight";
            alert("Test");

        });
    });
      </script>

But when I have the above code on page load It is displaying fine but when I click on Submit button the results are coming after 450px :(

What am I missing?

UPDATE:

I am getting 450 PX height only if I add the class in the div Manually

Upvotes: 0

Views: 104

Answers (5)

Alfred
Alfred

Reputation: 21386

You can do that simply using

$(document).ready( function() {
  $("#divHeight").addClass("DivHeight");
  $("#btnSubmit").click(function () {
    $("#divHeight").addClass("DivNoHeight");
    alert("Test");
  });
});

Here is the fiddle live demo.

Upvotes: 0

Matt van Andel
Matt van Andel

Reputation: 657

//On ready... (shorthand)
$(function(){

    //Load the div element.
    var myDiv = $("#divHeight");

    //Assign the height class to the div element
    myDiv.addClass("DivHeight");

    //Set a click event for the submit button
    $("#btnSubmit").click(function () {
            //Remove height class from div element, set noheight class...
        myDiv.removeClass('DivHeight').addClass('DivNoHeight');
    });

});

You might want to consider using jQuery's .hide() method instead of juggling classes. Like so...

myDiv.hide();

It really depends on what you're going for. You could also use fadeOut() instead of hide() if you want to get really fancy ;-)

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

I'd suggest the following jQuery:

var div = $('#divHeight');
div.addClass('DivHeight');

$('button[type="submit"],input[type="submit"]').click(
    function(e) {
        e.preventDefault(); // prevents actual submission
        div.toggleClass('DivHeight DivNoHeight');
        console.log(div.height());
    });​

JS Fiddle demo.

The demo using this HTML (adapt to your needs, of course):

<div id="divHeight">
</div>
<!-- ...other html... -->
<input type="submit" />
<button type="submit">Submit</button>​

And this (or similar) CSS:

.DivHeight {
    background-color: #f90; // just for testing purposes
    height: 450px;
}

.DivNoHeight {
    background-color: #ffa; // just for testing purposes
    height: 0;
}​

This jQuery is based on the following assumptions:

  1. You're trying to deal with an element that has an id equal to divHeight,
  2. That you want the classes assigned to that div to control the height,
  3. That you have multiple buttons, or inputs, of type="submit",
  4. That you don't want to submit the form (or whatever) on clicking the buttons, but in response to another event (validation success, for example).

References:

Upvotes: 0

Buddha
Buddha

Reputation: 136

You state you have three submit buttons but references the submit button with an id (#btnSubmit). As I know you can only have one element with one id. Set the class on each button to class="btnSubmit" instead and reference them by ".btnSubmit".

As you are using jQuery I would recommend using it instead of plain old docuemt.getElementById as jQuery is browser independent.

I would probably do something likte this instead: 

$(document).ready(function() {
    $("#divHeight").addClass("DivHeight");
    $(".btnSubmit").click(function() {
        $("#divHeight").removeClass("DivHeight");
        $("#divHeight").addClass("DivNoHeight");
    });
});

Good luck!

Upvotes: 0

Sully
Sully

Reputation: 14943

The ready event is overwriting the submit. Everytime you submit the ready event will be triggered after the page loads, therefore, always 450.

Find a better event to update the height. I'm sure JQuery has some like beforeSubmit or complete. Or try to get rid of the document ready and use that style class initially on the div then try with only the submit\onclick event.

Also, listen to Matthew Van Andel. That's how JQuery should be coded.

Upvotes: 1

Related Questions