jQuery — how to animate a div using height:auto - javascript

I have a div that expands downward when a user presses "more." The div's height is always auto, and expands to fit the content accordingly.
I need to keep "height:auto" so that the CSS remains responsive when the screen is resized, but I want the changing height to be animated...how should I do that?
In other words, when the user presses more and additional content is added to this div, I want the div's expansion to be animated, without specifying a certain height like 5em or anything.
<div id="expand">
<p>This is the div I want to expand</p>
<div id="hidden" style="display:none">
<img />
<img />
</div>
</div>
Got it! I need to use the slideToggle method on the instead of the Thanks!

jsBin demo <-- Resize the window. Works great.
You can do it simply like:
$('.more').click(function(){
$("+ div", this).slideToggle();
});
having:
<button class="more">MORE</button>
<div>Lorem Ipsum...</div>
I would use the HTML you have, but that's the price when you did not showed some code in your Question ;)

I don't know exactly how you set up your code, but jQuery
$(link).on("click", function() {
$(element).slideToggle();
});
might work for you.
Is that what you are looking for?

You can always:
var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
height: naturalHeight}, {
duration: 1000,
completion: function() {
// set height to auto
targetDiv.css({height: 'auto'});
});

You can do this using jQuery. You just need to caluclate the height: auto absolute height.
JSFiddle: http://jsfiddle.net/CS2h9/

Related

Height auto div to expand height

Please check: http://wixwebsite.seobrasov.com for reference.
My goal here is to achieve a body/wrapper div height according to the content instead of having a scrollbar for a 3500px height body on a 500px content.
I have a one page design with divs sliding in and out. There is a wrapper with overflow hidden and position relative that contains all the divs. Inside that, there are the divs having position absolute and height auto. Inside each div there are the content divs with height aut as well and they correctly expand to fit their content. It is all connected to a javascript that does the sliding. The whole thing only works if I set a fixed height to the wrapper div. Otherwise, having height auto on the wrapper or using javascript to set the wrapper div to the inner div height (which is height auto as well) makes the page not to expand & show any content AT ALL.
The first thing you would think about would be that the wrapper div does not expand height due to position absolute of the inner divs. That is only part of the problem. If I do indeed change the position to relative, it will only show part of the divs.
I have tried using javascript to set the wrapper div to take position from inner divs, but those inner divs also have height auto. And I cannot do the javascript on the content divs as there are more using the same class and having different heights, as they expand depending on content.
So the question that follows is:
Even if I achieve the wrapper div to expand height to its containing divs, wouldn't that height be the height of the biggest div? Since they are all on the same page?
Here is some code:
<div class="content-wrap">
<div class="dhome">
content
</div>
<div class="dabout">
content
</div>
etc.
.content-wrap{
overflow:hidden;
position:relative;
clear:both;
height: 3500px -> aiming for auto
}
.dhome,.dabout{
position:absolute;
right:-200%;
height:auto;
}
So far the only solution I'm seeing to this would be to place the content on different pages but I don't think that I'll manage to do the sliding.
Thanks in advance,
So I got this Javascript that does the animation:
function animate() {
var currentPageI = -1;
var pages = [
$('div.dhome'),
$('div.dabout'),
];
var viewsWidth = 1300;
var showPage = function(index){
if(index === currentPageI){return;}
var currentPage = pages[currentPageI];
if(currentPage){
currentPage.stop().animate({left: -viewsWidth})
}
var nextPage = pages[index];
nextPage
.stop()
.css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
.animate({left: Math.max(0,(($(window).width() - 980)/2))})
currentPageI = index;
};
showPage(-1);
$('a.dhome').click(showPage.bind(null, 0));
$('a.dabout').click(showPage.bind(null, 1));
$(document).ready(function () {
animate();
});
First of all I have added the suggested Javascript at the end of this one and didn't do anything...after that I have added it into the animation script and used nextPage instead of the wrapper childNodes, and it still didn't do the trick. I will further look into this.
Thank you!
set an ID on the div with class="content-wrap"
var wrapper=document.getElementById(IDcontentwrap);
var childNode, childNodes=wrapper.childNodes, i, l=childNodes.length;
var maxWidth=0, maxHeight=0;
for (i=0;i<l;i++)
{
childNode=childNodes[i];
if (childNode.nodeType==1)
{
if (maxWidth<childNode.offsetWidth) maxWidth=childNode.offsetWidth;
if (maxHeight<childNode.offsetHeight) maxHeight=childNode.offsetHeight;
}
}
wrapper.style.width=maxWidth+"px";
wrapper.style.height=maxHeight+"px";

Wrong position imgAreaSelect plugin in bootstrap modal window

I have a problem with imgAreaSelect plugin in Bootstrap.
I set parent in initializing imgAreaSelect to prevent scroll moving area :
thumb.imgAreaSelect({
handles: true,
aspectRatio: '1:1',
fadeSpeed: 300,
parent: "#thumbBox"
})
and this is my html :
<div class="modal-body">
<div class="row">
<div class="col-xs-12" style="font-weight:bold;">
Upload your picture and crop it.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="thumbBox">
<img id="thumb" class="img-responsive" />
</div>
</div>
</div>
whene I trying to select an area,ImgAreaSelect selects an area outside the picture but points ( I mean x1,x2 etc) are exactly that I want(the functionality works correct but in interface there is problem).
In smaller devices's,ImgAreaSelect interface is nit but in some situation it mess up !
I used to search a lot but i didn't find anything useful.
How can i fix this problem ?
UPDATE :
I solved this My self...
Refer to this link :
github
We must remove these lines from code :
/* Also check if any of the ancestor elements has fixed position */
if ($p.css('position') == 'fixed')
position = 'fixed';
And we must position relative the parent box that we initialized ourselves( parent: "#thumbBox").
Had same problem.
solution was:
parent:$('.modal-content')
you need to set modal content as parent not image container.
I mean the parent div of Image that you want to use image area select on it , must be position relative .
<div id="thumbBox" style="position:relative;">
<img id="thumb" class="img-responsive" />
</div>
And We must remove these lines from jquery.imageareaselect.js :
/* Also check if any of the ancestor elements has fixed position */
if ($p.css('position') == 'fixed')
position = 'fixed';
There are several scenarios that bootstrap.css can affect your imgareaselect. For me setting box-sizing:content-box on the image fixed my problem.
<img id="cartPhoto" class="cartImageThumb" style="box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;">
I prefer to overwrite the css inline vs modifying the bootstrap.css file because those chan it can affect the whole system.
If you run into issues with bootstrap.css affecting your code, comment out sections of bootstrap.css until you find which style is affecting you.
HTML:
<div><img id="cropimage" /></div>
JQUERY:
$(function () {
$('#cropimage').imgAreaSelect({ handles: true, parent: "cropimage", maxWidth: 200, maxHeight: 200, aspectRatio: '4:3' });
});
SOLUTION:
Use "parent" option to fix the imgAreaSelect to a parent div/window.
People who are having trouble with this in combination with Bootstrap 2
Go to bootstrap.css and comment out the following line
img {
width: auto\9;
height: auto;
/* max-width: 100%; DISABLE FOR IMGAREASELECT */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
I had the same issue. I was looked for a solution on this thread, trying all options.
But, when I read the documentation I found this 2 properties:
http://odyniec.net/projects/imgareaselect/usage.html
imageHeight - True height of the image (if scaled with the CSS width and height properties)
imageWidth - True width of the image (if scaled with the CSS width and height properties)
So, there is no need to change any code of js or css.
The only thing to do is set these 2 properties with the real size of the image.
Something like this:
var image = $("#image");
image.imgAreaSelect({
imageHeight: image[0].naturalHeight,
imageWidth: image[0].naturalWidth
});

Positioning tool tip using .css()

I created a tooltip with CSS and I want to position the arrow just above the icon of each button. I tried using jQuery Mobile but it has not worked for me so the easiest way for me to accomplish this now is to position the tool tip manually :(
Also I was wondering if manually positioning the tooltip would change in anyway if I were to use this page on a mobile app with a different resolution or perhaps shrink the page size?
What I've tried it to use .offset() to get my tool tip class around the relative area of each button id.
var CS_x_pos = $("#CS").offset();
var CS_y_pos = $("#CS").offset();
var GH_x_pos = $("#GH").offset();
var GH_y_pos = $("#GH").offset();
//CS
$(".tooltip").css({
left: CS_x_pos,
top: CS_y_pos
});
//GH
$(".tooltip").css({
left: GH_x_pos,
top: GH_y_pos
});
When I try:
var CS_x_pos = $("#CS").offset().left;
var CS_y_pos = $("#CS").offset().top;
I get this:
I am not sure why the tool tip ends up on the bottom
Here is my jsfiddle:
http://jsfiddle.net/liondancer/rKPfe/
I thought .offset() would position the tooltips around the relative area but it is still pretty far =/
Could someone help me or guide me to manually positioning these tool tips? Much appreciated!
There are lots of plugin related to tooltip. like tipsy or jQuery ui and many more you can find on googling.
If you want it to do completely with css, the best approach is to wrap tooltip and trigger element. like
<div class="holder">
<div class = "tooltip">
<div class = "tooltip_body"> GH is OFF
<div class = "tooltip_arrow"></div>
</div>
</div>
<a class="holder" data-role="button" data-icon="plus"> GH</a>
</div>
Than you can give css of tooltip relative to your trigger element.
like bottom: 60px; right:0;
Note : Give display:inline-block and position:relative; on holder so it not require any extra space and tooltip will absolute to holder
Check fiddle http://jsfiddle.net/rKPfe/3/
Update
If you are not sure about the bottom position you can do with jQuery;
$('.tooltip').each(function(){
var elm=$(this),
holder=elm.closest('.holder');
elm.css('bottom',holder.outerHeight()+'px');
});
Left and right you can give relative(like left:0 or right:0) to holder position( which is not affected by changing window size) . Only in case if you want tooltip to be centered respect to holder yo can write.
$('.tooltip').each(function(){
var elm=$(this),
holder=elm.closest('.holder');
elm.css({
'bottom':holder.height()+'px',
'left':-(elm.outerWidth()-holder.outerWidth())/2+'px'
});
});
Because you are not taking into account the height and width of the tooltip itself.
Calculate its height and width and minus this off of the top and left values.
var width = parseFloat($(".tooltip").css('width'));
var height = parseFloat($(".tooltip").css('height'));
$(".tooltip").css({
left: CS_x_pos - width,
top: CS_y_pos - height
});

Dynamically resize div based on window size

I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that?
This is my website if you want to take a look at its code:
http://www.briefeditions.com
If you resize the page the div will resize with it and on load of the page.
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
var windowHeight = $(window).height();
$('#divID').css('min-height',windowHeight+'px');
});
UPDATE
If you want that site will resize based on browser resize then use % instead of px
CSS:
html {height:100%; overflow:hidden}
body {height: 100%;}
I guess you need screen width and height for client(users) machine.
at onload of page get screen width & height and set those values to divs using jquery/javascript
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
check this for more info
Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.
I checked the code from the provided link in question.
Change width to 80% in #content style.
And in .wrapper change width to 100%.
You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;
You can do like this
var width = $(window).width();
$("#divId").width(width);

How can I get the width of a layoutUnit that doesn't include its scrollbar?

I'm trying to make my layout update the width of another element, but I need to get at its width NOT including its scrollbar (if one is indeed present). getMainContentBounds() in this case seems to be returning the entire width along with the scrollbar.
I have also tried getSizes() with the same result.
myDataTable.on('postRenderEvent', function() {
var bounds = YAHOO.specify.app.layout.getMainContentBounds();
Dom.setStyle(YAHOO.util.Selector.query('div.yui-dt-hd', c.body), 'width', bounds.width+'px');
Dom.setStyle(YAHOO.util.Selector.query('div.yui-dt-bd', c.body), 'width', bounds.width+'px');
});
Why don't you place your a marker "element" inside the scrollable.
<div style="width: 200px; overflow: auto;">
<div id="the-div-width">
Your content.
</div>
</div>
Then just focus on getting the width on the-div-width's actual width...

Categories