CODEWITHSUNDEEP
javascriptjquerycss
Belmark Caday
Belmark Caday

Reputation: 1683

How to maintain the size of a div through jquery?

$('.invoice_resend').hide();
$('.invoice_resend #update_paid').hide(); 
$('.invoice_send').hide();

So i have this code above, class invoice_resend is a div, which when a button is clicked will be hidden as shown above, and the #update_paid and .invoice_send too will be hidden, leaving me with a "RESIZED DIV" element.

What i want is that when all other elements are hidden, the .invoice_resend div will maintain its height or whatever needs to be edited.

EDIT:

Ok here is my whole code: 

if (selected_tab == 0) { //Released tab


$('.invoice_resend').hide();
$('.invoice_send').show();
}
else if ( selected_tab == 1 ) { //Invoiced tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').show(); 
$('.invoice_send').hide();
}
else if ( selected_tab == 2 ) { //Paid tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').hide(); 
$('.invoice_send').hide();
}
else if ( selected_tab == 3 ) { //Pending tab


$('.invoice_resend').hide();
$('.invoice_resend #update_paid').hide(); 
$('.invoice_send').hide();
}

Seems like the css.({visibility: 'hidden' or 'visible'}) did the job but generated another problem. You see, I have several tabs, so when i click on the last tab which i hide all the elements, it will become unstable, showing or hiding random elements when i click on another tab. The above code is my original code, which i edited all to .css based on your answers.

Upvotes: 0

Views: 85

Answers (4)

AdityaSaxena
AdityaSaxena

Reputation: 2157

$('.invoice_resend #update_paid').css({ visibility: 'hidden' });

From the MDN docs:

    The visibility CSS property has two purposes:

 1. The hidden value hides an element but leaves space where it would
    have been.

 2. The collapse value hides rows or columns of a table. It also
    collapses XUL elements.

For the edited question:

if (selected_tab == 0) { //Released tab


$('.invoice_resend').hide();
$('.invoice_send').show();
}
else if ( selected_tab == 1 ) { //Invoiced tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').css({ visibility: 'visible' }); 
$('.invoice_send').hide();
}
else if ( selected_tab == 2 ) { //Paid tab


$('.invoice_resend').show();
$('.invoice_resend #update_paid').css({ visibility: 'hidden' }); 
$('.invoice_send').hide();
}
else if ( selected_tab == 3 ) { //Pending tab


$('.invoice_resend').hide();
$('.invoice_resend #update_paid').css({ visibility: 'hidden' }); 
$('.invoice_send').hide();
}

Upvotes: 2

reyaner
reyaner

Reputation: 2819

you could also extend jQuery to make your own show / hide class, and dicide there what to do:

jQuery.fn.myShow = function() {
    var o = $(this[0]); 
    o.addClass("show").removeClass("hide");
};
jQuery.fn.myHide = function() {
    var o = $(this[0]);
    o.addClass("hide").removeClass("show");
};

$('.invoice_resend').myHide();

.hide {
    visibility:hidden; 
}

Upvotes: 0

Md Mahmudul Haque Fahim
Md Mahmudul Haque Fahim

Reputation: 283

just make another div and put invoice_resend div inside it and in css set parent div's width and height.

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

Instead of show() hide()

use css properties 

visibility:visible; 

visibility:hidden;

A sample demo found here.

If you check,event the element have it's height there even not visible.

Upvotes: 5

Related Questions