Jquery Help Need For Div Height - javascript

i'm trying to get the auto height of my div, normally the div box its setup via css 160px but with overflow: hidden; how i can check the auto height its more then 160px or not via jquery ?
i need this because i have box what i have a button for Show More or Show Less so if the height its not bigger then normally height 160px to pass the command ... right now its making my box smaller
My code is this:
<script type="text/javascript">
$("#Show_More_Websites").click(function() {
var Button_Value = $("#Show_More_Websites").attr("value");
var Box_Height = $('.Box_Show_Websites').outerHeight();
if(Button_Value == "Show More") {
if(Box_Height <= "160") {
var el = $('.Box_Show_Websites'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 500);
}
$("#Show_More_Websites").attr('value', 'Show Less');
}
if(Button_Value == "Show Less") {
var el = $('.Box_Show_Websites'),
curHeight = el.height(),
autoHeight = el.css('height', '160px').height();
el.height(curHeight).animate({height: autoHeight}, 500);
$("#Show_More_Websites").attr('value', 'Show More');
}
});
</script>
Update
Here you can find my code: http://jsfiddle.net/rAjBH/

here is the solution
demo fiddles - Note: the following fiddle has change in only html part to increase the autoheight using html <br/>
http://jsfiddle.net/rAjBH/1/ - autoHeight is less
http://jsfiddle.net/rAjBH/2/ - auto height is more
$(document).ready(function() {
$("#Show_More_Websites").click(function() {
var Button_Value = $("#Show_More_Websites").attr("value");
var el = $('.Box_Show_Websites')
var Box_Height = el.outerHeight();
var autoHeight = el.css('height', 'auto').height();
el.css('height',Box_Height+'px');
if(Button_Value == "Show More") {
if(autoHeight > Box_Height) {
el.height(curHeight).animate({height: autoHeight}, 500);
}
$("#Show_More_Websites").attr('value', 'Show Less');
}
if(Button_Value == "Show Less") {
curHeight = el.height();
autoHeight = el.css('height', '160px').height();
el.height(curHeight).animate({height: autoHeight}, 500);
$("#Show_More_Websites").attr('value', 'Show More');
}
});
});

Related

trying to stop textarea from growing after 300px and then destroying autogrow textarea

I am Trying to stop a textarea with autogrow.js from growing after 300px height and then destroying autogrow textarea so that it has scrollbars, although the code I have used to do this is working fine I can stop the textarea from growing after 300px but when that happens the textarea becomes smaller than 300px suddenly.
I need it to stop growing at 300px but still remain 300px in height, is this possible?
I am recreating the facebook messages box - the text area can grow but after a certain height it stops growing and the textarea has scrollbars and once you delete text from the textarea the scrollbars go away and the textarea can then grow again.
I have a working jsfiddle example with my problem inside it.
http://jsfiddle.net/jphillips/k2a2pwc8/2/
here is the code also
function scrollar() {
elem = document.getElementById('box_area');
if (elem.clientHeight < elem.scrollHeight) {
alert('has scrollbars');
var inpbh = $("#inner_postbox").height();
var inpbh_val = $("#box_area_height").val(inpbh);
$("#box_area").height(inpbh_val);
//$("#box_area").autosize();
if ($("#box_area").hasClass("detract")) {
var inpbh = $("#inner_postbox").height();
var inpbh_val = $("#box_area_height").val(inpbh);
$("#box_area").height(inpbh_val);
}
} else {
$("#box_area").autosize();
$("#box_area").attr('class', 'expand');
}
}
$("#box_area").autosize();
$("#box_area").keyup(function() {
if ($("#box_area").height() > 300) {
if ($("#box_area").hasClass("expand")) {
$("#box_area").trigger('autosize.destroy');
$("#box_area").attr('class', 'detract');
}
} else {
$("#box_area").autogrow();
$("#box_area").attr('class', 'expand');
}
});
$("#box_area").addClass('expanded');
just add this piece of code to the keyup function
$("#box_area").keyup(function() {
if ($("#box_area").height() > 300) {
if ($("#box_area").hasClass("expand")) {
$("#box_area").trigger('autosize.destroy');
$("#box_area").attr('class', 'detract');
$("#box_area").addClass('expanded');
}
} else {
$("#box_area").autogrow();
$("#box_area").attr('class', 'expand');
}
});
<style>
.expanded{height:300px; overflow-x:auto}
</style>
var minHeight = 50;
var maxHeight = 200;
$('textarea').on('input' , function(){
var clone = $(this).clone();
clone.attr('rows' , 1);
clone.css('height' , 'none');
clone.css('position' , 'absolute');
clone.css('visibility' , 'visible');
clone.val($(this).val());
$(this).after(clone);
var rowsCount = (clone[0].scrollHeight-2*parseFloat(clone.css('padding')))/clone.height();
var textHeight = rowsCount*parseFloat($(this).css('font-size'));
textHeight = textHeight > minHeight && textHeight < maxHeight ? textHeight : textHeight >= maxHeight ? maxHeight : minHeight;
$(this).attr('rows', Math.round(textHeight / parseFloat($(this).css('font-size'))))
$(this).css('height' , 'none');
clone.remove();
})
$('textarea').attr('rows', Math.round(minHeight / parseFloat($('textarea').css('font-size'))))
http://jsfiddle.net/yann86/5zrw3zrb/5/

Adjusting the content area in 2 column layout when the left column is moved

I'm having a 2 column layout with left menu having fixed width and i'm following the structure
as given in http://blog.html.it/layoutgala/LayoutGala24.html.
On click of the navigation menu I'm trying to hide it to certain pixels.
How can right content adjust itself automatically when the navigation menu is animated to the left side?
JS
$("#navigation").on('click', function() {
var $el = $(this), animateLeft;
if(parseInt($el.css('margin-left')) === 0) {
animateLeft = "-=180px";
}else{
animateLeft = "+=180px";
}
$(this).animate({
marginLeft : animateLeft
},500, function() {
console.log("anim complete");
});
});
Demo - http://codepen.io/anon/pen/hCmKl
Try this:
$("#navigation").on('click', function() {
var $el = $(this), animateLeft;
if(parseInt($el.css('margin-left')) === 0) {
animateLeft = "-=180px";
}else{
animateLeft = "+=180px";
}
$(this).animate({
marginLeft : animateLeft
},500, function() {
console.log("anim complete");
});
$("#content").animate({
marginLeft: animateLeft
}, 500);
});
http://codepen.io/anon/pen/Ikgnm
You have fixed margin-left , so in your case one solutions is to animate whole content :
$("#navigation").on('click', function() {
var $el = $(this).parent(), animateLeft;
if(parseInt($el.css('margin-left')) === 0) {
animateLeft = "-=180";
}else{
animateLeft = "+=180";
}
$(this).parent().animate({
marginLeft : animateLeft
},500, function() {
console.log("anim complete");
});
});

Persistent header causes website to collapse in height

This is my code:
http://jsfiddle.net/KCb5z/8/embedded/result/
http://jsfiddle.net/KCb5z/8/
$(function () {
var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;
$window.scroll(function () {
var currentScrollTop = $window.scrollTop();
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
} else if (currentScrollTop <= init && isFixed === true) {
isFixed = false;
$select.css('position', 'relative');
}
});
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('body').animate({
scrollTop: $(divId).offset().top - $select.height()
}, 500);
});
});
The issue is when I scroll past the yellow bar it changes its CSS from relative to fixed. This means the website is now less tall and it drags all the content up, causing a kind of glitching effect.
It's almost like I need a containing div for the yellow bar which remains to keep that height, or insert some sort of div to keep the website height the same if the bar is docked or not.
Can anyone show me please how this might be implemented?
When the position is set to fixed, add padding to the top of the body to accommodate it. Similarly, remove the padding when the element is un-fixed:
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
$('body').css('padding-top', $select.height());
}
else if (currentScrollTop <= init && isFixed === true) {
isFixed = false;
$select.css('position', 'relative');
$('body').css('padding-top', 0);
}
Example fiddle
Note, the padding-top can be set on any element above the one to be fixed if required. I just used body as it was the most convenient for an example.

jQuery animate() doesn't correctly animate height the second time

I have built a toggle that will slide down a div to reveal content. I am not using the normal toggle() function of jQuery because I wanted to show the top 300px of content and then slide to reveal the rest.
Anyways, I have a script setup that animates the height of the container div, which reveals the content inside.
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
var h = p.css('height', 'auto').height();
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
The problem is, the second time it animates the height to the full size (sliding the div to reveal content) it does not animate, it just jumps to the full height. Why is this happening?
Working example: http://jsfiddle.net/6xp2Y/3/
After all that hard work and fiddle being broken, all we had to do was remove one line from your code:
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
//var h = p.css('height', 'auto').height(); //REMOVE THIS LINE
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
slideCut();
Updated your fiddle: http://jsfiddle.net/brandonscript/6xp2Y/5/
Updated answer!
The proplem lies here
if (finalHeight == 0) {
parent.css('height', 'auto');
finalHeight = parent.height();
parent.height(revertHeight);
console.log('finalHeight:'+finalHeight);
}
This is only running at the beginning, because finalHeight is not 0 anymore after first run.
You can fix this by setting finalHeight back to 0 after closing it again, like so
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
parent.animate({height:revertHeight}, {
duration: speed
});
cut.fadeIn('fast');
finalHeight = 0;
} else { [...]

Changing the size of a jquery UI dialog dynamically

I have a jquery dialog . I am displaying an asp.net gridview within the dialog.
I want the size of the dialog to change based on the size of the grid view.
There is a button, which shows the dialog when its clicked.
I want to set the size of the dialog such that the gridview fits in it perfectly.
I have my javascript code below :
$("#ViewModalPopup").dialog({
height: 800px,
scrollable: true,
width: 800,
modal: true
});
Here #ViewModalPopup is the div that encloses the modal popup.
I tried implementing the following logic to adjust the height of the dialog based on the size of the div :
var maxHeight = 600;
var currentHeight = $('#ViewModalPopup').height();
if (currentHeight < maxHeight) {
var desiredHeight = currentHeight
}
else
{
var desiredHeight = maxHeight;
}
$("#ViewModalPopup").dialog({
height: desiredheight,
scrollable: true,
width: 800,
modal: true
});
But it is not working as
var currentHeight = $('#ViewModalPopup').height();
is coming out to be null from the second button click onwards.
Is there any way I can change the size of the dialog dynamically ?
Set like
$("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);
API
/* set dynamic height of modal popup and scroll according to window height */
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function () {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function () {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});

Categories