I have a DIV with content that is inserted dynamically using jQuery. I want that div to appear as if it was enlarged from size 0px to the size it suppose to take when the div is rendered with its content.
The content is text, so I have no information about the size it will take when it is appended to the document. I know how to animate the div using jQuery Animate when I know the final size, but don't know how to do it when I don't know it.
if I use width: "+=10" for example, I get a div that is larger than the one that I get without animating. Thanks.
Insert your item, save the width and the height, and then set the width and the height of the item to zero. This will happen too quickly to be visible, and you'll have the final width and height values you need for animation.
Live Demo
var $div = $('<div>', {
text: <your text>
});
// <append your element>
var width = $div.width();
var height = $div.height();
$div.css({
width: 0,
height: 0
});
$div.animate({
width: width,
height: height
}, {
duration: 'slow',
easing: 'linear'
});
Related
I'm having an issue with reading the height of a div when I change the content
My scenario is...
I have a customisable design to which the user uploads a photo. When the photo is uploaded, the design preview is reloaded to display the image
What I need to do is read the size of the image and the size of the parent div to see if the image is too large. If it is, I need to make the image draggable so the user can set the position
My code at the moment is this...
function reloadPreview(data) {
$.when(
$.post('/ajax/get_design_preview.php', data, function(response) {
$('#design_previews').html(response.preview);
}, 'json')
).then(initDraggables);
}
function initDraggables() {
$('.image_preview > img').each(function() {
$(this).bind('load', function() {
var img_height = $(this).height(),
div_height = $(this).parent().height(),
overlap_y = img_height - div_height;
console.log('Img Height: ' + img_height);
console.log('Div Height: ' + div_height);
console.log(overlap_y);
})
})
}
I have the same code for the width which works perfectly, but the height doesn't give the correct value
The img_height and the div_height variables always match the height of the image (680px in my current test) but the div has a fixed height with overflow hidden (applied dynamically, 380px in my current test)
I had the same issue with the width but adding the $.when().then() fixed it
I also had to add the $(this).bind('load', function() { to make sure the image was loaded fully before reading its height
I know/assume it's related to the code triggering before the style for the div height is being applied, but I'm not sure how I can tell when this has happened or how to wait for it before triggering my code
Any help would be much appreciated
Is there a way to get the realtime width and height values using Javascript and apply them to a number of div id's? I want to build a site that has 5 sections that are always width: 100vw and height: 100vh. Only one section can be seen at a time as each section has a # anchor and vertical scrolling is disabled.
The problem I'm having is when I resize the browser window, the CSS doesn't keep up and must be refreshed for new values for the section width and height. I'm wondering if there is a way for Javascript to constantly monitor the browser width and height and apply those values to a set of id's.
Example
The browser window is 1000px by 500px so the id #one, #two now have a width: 1000px and height: 500px and when the browser is resized to 1200px by 600px the values for #one , #two would be set as width: 1200px and height: 600px in the CSS.
Here is my codepen.
As #gary-storey already said, use the resize event:
$(window).resize(function() {
var curWinWidth = $(window).width();
var curWinHeight = $(window).height();
// do stuff here
});
i've done this for my own page, that way:
$(window).resize(function() {
<!-- get viewport size//set content size -->
var currentViewPortHeight = $( window ).height();
var currentViewPortWidth = $( window ).width();
$("#mainFrame").css({ "height" : currentViewPortHeight, "width" : currentViewPortWidth });
$("#mainFrame").resize();
};
you may set a timeout interval though - since this event fires very often during a windo resize - especially if the user uses drag&drop. according to my stackoverflow studies, the best would be a 300ms timeout, to get a smooth resize transition, and not firing it to often...
can you please tell me how to increase the height of row (which is div ).I am appending data in a div .But I need to increase the height of div .Mean height Example :50 px .It mean after 50px new line will start ?
Fiddle
http://jsfiddle.net/naveennsit/rgeHe/3/
setInterval(function () {
$('#realTimeContents').append("Hiiiii. is div")
}, 1000);
height for any object can be set on JQuery with .height(20) or as .css("height","20")
For an inline-block element (div is a block element) you might need to use line-height instead.
Note, If you are adding content & you want the height to increase, then you should be setting
height:auto
which is the default for div.
For you current problem, you rather need to be fixing a width, for the content to grow.
To take it the next line append a <br/> as well.
Try this:
<div id="realTimeContents" style="width:100%;height:auto ">
</div>
setInterval(function () {
$('#realTimeContents').append("<div height = '50' background = 'yellow'>Hiiiii. is div</div><br/>")
}, 1000);
I have a #banner that holds content, basically what i want to do is show a certain amount of the content and then have a more button that will show the rest of the content if clicked. This in turn will also animate the height of #banner, I have set the #banner height at 300px but want to find the height of the content #inner and animate this accordingly. At the moment I have the following version but reckon Im using a lot of #ids / to achieve the effect, can anyone advise how I can make this better?
Fiddle here: http://jsfiddle.net/43gTt/1/
Thanks
Kyle
I suggest you compute the height of the inner div and use that to animate.
var $tmpInner = inner.clone().appendTo('body');
var divHeight = $tmpInner.outerHeight();
$tmpInner.remove();
Below will compute the height of the innerDiv based on the content of the div.
Also, updated the css style for the banner to overflow:hidden so that you don't need separate animate for the banner.
DEMO
CSS:
#banner{background:#dedede;overflow: hidden; }
#outer{margin:0 auto;width:200px;}
#middle{height:200px;overflow:hidden}
#inner{width:200px;margin:0 auto;}
.entry{display:none;}
JS:
$(document).ready(function() {
var outer = $('#outer'),
middle = $('#middle'),
inner = $('#inner'),
/*innerH = inner.height(),*/
banner = $('#banner'),
more = $('#more');
var $tmpInner = inner.clone().appendTo('body');
var divHeight = $tmpInner.outerHeight();
$tmpInner.remove();
// animate banner and #middle to reveal additional content
more.on('click', function(e) {
middle.animate({
height: divHeight
}, 300);
/*banner.animate({
height: innerH
}, 300);*/
});
});
Note: I am not sure why you need that many wrappers div, but I presume that would be part of your HTML. Also I will leave the code cleanup to you.
Here's where the site is located: http://pwnage.me/
The javascript is located here: {site}/scripts/main.js
I'm using jQuery to dynamically load the content into the #container div on the main page. When you click a link on the main page (eg. "Test Project 1"), it loads the content from ajax.php and sticks the new html in the #container div. I've tried tons of different solutions but I can't get the height to fit the new content. It just ends up extending past the end of the div. However, if you go to http://pwnage.me/projects/test, it works as intended. I tried the same way I use on page load, but it doesn't work:
$('#container').html(d);
var h = $('#container').height();
$('#container').html(load_html); // load_html is a predefined var that holds html of a loading image
$('#container').animate({ height: h, opacity: 0 }, 300); // open to new height and fade out loading image
setTimeout("$('#container').html(d);", 300); // d is saved in a global var so this works
setTimeout("$('#container').animate({ opacity: 1 }, 300);", 300);
So it should:
Get the new height
Load the loading image html
Slide the height out to the new value and fade out
Load the new html
Fade in
It works as it should except that when it loads the new html the first time, the div never expands the height to fit the new content, so it gets the old height value.
You might try doing this in your animate instead of trying to specify an exact height. In addition, put your loading spinner in a div that's separate from your content area:
$('#container').animate({ height: 'hide', opacity: 0 }, 300, function() {
$('#container').empty();
$('#loading').fadeIn();
});
Then do this when you have your new content (i.e. at the end of your AJAX request):
$('#loading').hide();
$('#container').html(d).animate({ height: 'show', opacity: 1 }, 300);
I hope this will help you get on track.
Have you tried $.slideDown() ?
var html = $(d);
d.wrap('<div />')
.hide()
.appendTo($('#container'))
.slideDown();
The reason the container isn't re-sizing properly is because the content has a static height set on it that is too small.
The problem appears to be that you have fixed the container height at 67px.
Vs the example that didn't have a fixed container height until the html was loaded.