i have a div in which i have a button linked to a javascript function that will toggle a textarea. When the button is clicked the div size instantly changes. I tried adding transition effects to the div but there is no smooth change in size (height to be more specific).
My question is: is there any way in wich i can make the div to be resized smoothly?
use .animate() - http://api.jquery.com/animate/
If you can provide some code i'd be happy to explain this in greater detail.
I've coded a quick example for you - http://jsfiddle.net/ajthomascouk/eaBgT/
Don't just a height transition, use a scaley transform from 0 to 1. This should be smoother.
Related
I have a div that is serving as a chat, and depending on the users actions I append messages. I want it so, after each message is appended, the div will scroll down. However, it's not working 100%.
Here is the fiddle to check out: https://jsfiddle.net/mfj1ub8c/
I'm pretty sure it has something to do with the delays/fadein/hide methods on each append, but they need to be there to give a certain effect that is needed.
Any ideas on how to solve this?
The problem is scrollDown is being called before the element is actually shown (display: block) by fadeIn, so the scroll height hasn't changed yet. If you call scrollDown after fadeIn is complete, you'd miss the animation when the new content is off-screen. What you want to do is scroll when the element is displayed, but still transparent (opacity: 0). If you are on jQuery 1.8+ you can use the start option.
Here is a working fiddle https://jsfiddle.net/mfj1ub8c/2/
Also you are overshooting your scrollTop, which won't cause you problems here, but it should be the whole height minus the visible height.
$('#chat').prop("scrollHeight") - $('#chat').height()
Call scrollDown only when fadeIn is complete. You can use the complete callback parameter of fadeIn.
e.g.
.fadeIn(500, scrollDown))
Fixed fiddle: https://jsfiddle.net/mfj1ub8c/1/
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
I have visual selection for table which colorize mouse overed table cell and it row and column, like some crosshar.
see JSFiddle:
http:// jsfiddle.net/arhangelsoft/0ardb3u0/40/
But I'm need JS automated and animated movement with effects(like easing), like from 0,0 crosshair smooth moves to 55 cell, after that the same smooth moves to 22 cell and etc.
I thinking, how to do that.
Currently I have an idea:
Create absolute div for row(u see it in blue color), columns and target cell.
After that move theese elemets together in animate funtion from x point to y point.
Is there more simply method/idea to do it?
The similar example of result what I want get via JavaScript you can dewnload here(GIF picture, big(2 mb) ):
download and see
sorry, I can't make it smaller.
Here you go: http://jsfiddle.net/andunai/0ardb3u0/41/
(I've commented out all your code as a reference, the new code is at the bottom of fiddle.)
You are right: the approach here is to actually create 2 absolute divs and to move them according to hovered cell.
For the animation we can use CSS transition property here:
transition: all 0.1s linear
...so that when we do $(...).css(...) changing its width, height, top and bottom, properties are transitioned smoothly from old value to new one.
You can still use jQuery's $.animate() method for the animation, but CSS transitions are basically much more faster and smoother.
Also, note that I've used $(...).outerWidth(...) instead of width(...) to properly resize cells.
One more thing: note this CSS line -
pointer-events: none;
It is very important because it makes the crosshair divs 'transparent' for mouse events, meaning actual clicks will go "through" them and will be captured by appropriate td element.
Enjoy!
I asked a question yesterday on here and got some awsome help, but I need more help concerning more or less the same, only a bit different.
This is my old thread.
So ye, I made this and the idea is that you can customize the table to see it the way you want. for now its possible to drag the columns to change the order and its possible to order the columns on alphabet or high/low. Since I got help here, its now also possible to hide the columns.
Now I want to make the hiding process a bit more smooth, since its hard to see if something is hidden after a click if you use no animation. I use .fadeOut(200); now, but when the fading is done the column just 'jumps' to fill the gap, is it possible to animate this in some sort?
Edit: After thinking some more, I thought that I could just loop a -1px width untill the element's width is 1px and then just hide it, but for some reason that wont work, the table doesnt respond to .width(xxx); or .css('width', 'xxx');. It does change the value, but the td keeps the same width.
This is somewhat of a workaround, and there might be a better solution, but here it is anyway:
Animate the opacity to 0.0. Fadeout does the same, but it also sets display:none after completely fading out. It is the display:none that causes the adjacent column to jump and fill in the gap.
Animating will cause your hidden div to remain there. Now that it is no longer visible, animate its width to 0. This will cause the adjacent div to smoothly take over its place.
Once width is 0, set display:none
Here's a working sample I whipped up. Adjust accordingly to animate width: http://jsfiddle.net/x7BEv/8/
Here's how the magic happens:
$(document).ready(function(){
$('#button').click(function(){
$('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone);
});
});
function allDone()
{
$('#upper').hide();
}
I'm not sure how important the allDone() method is. You could probably do away with it.
you must use jqgrid
or just for sorting you can use tablesorter which is very easy to implement
I'm trying to build a content slider for a client that displays their last four posts. Right now it's just plain HTML but I'm having a problem.
The slider box needs to be 180px high with a scrollbar when necessary. My slider seems to work except it makes the slide boxes all as tall as the tallest box. That leaves short posts with a ton of blank space under them.
Anyone know a fix?
http://jsfiddle.net/insitedesignlab/kQDcb/1/
I've seen that Quovolver does this, but I'd love to know how
The basic problem is #slidesContainer needs to be dynamically resized in order for it's parent to know how long to scroll for. One way to solve the problem is to change your animate call to include a callback:
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},null,null,
function(){
$('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition) / $("#slideshow").width())) + 1) + ")").height() + "px");
}
);
There's probably a slightly better way to make that calculation, but this will work. You could alternatively hide all the other .slide divs that are not being displayed. Then #slidesContainer will auto-resize to only the visible (not display:none) slide.
I have updated your code here JS Fiddle. You need to remove the min-height property and set the background color to the slide div.