I have this little jQuery slideDown effect http://jsfiddle.net/Gg4eP/2/
But the animation isn't smooth? What I am doing wrong?
Thanks for your time.
You just need to add the width to each expandable div.
http://jsfiddle.net/BpMam/
To explain:
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
Some browsers don't particularly like text that is automaticly wrapped when animating, and it gets a little jerky when it tries to figure out the height of the element.
Try formatting the text to fit the element and see if that helps.
I actually did it for you, check if this FIDDLE solves it ?
Would probably work to give the slided elements a fixed height aswell ?
FIDDLE
I had this problem, because the div to be animated had an animation-time.
transition-time: all 1s;
Deleted it and got a smooth animation.
Related
I'm working on a website and I want to have a Javascript image-slideshow as background.
The slideshow works and I got the HTML and CSS for the part which is supposed to sit on top of it ready as well. But I just can't figure out how to combine those two. I tried working with positive and negative z-index, but that doesn't work. Is there any way to actually set the Javascript slideshow as background, so that it won't affect my HTML and CSS?
Be sure to add position:relative to the elements you're trying to use z-index on.
Finally got it figured out. position: absolute and z-index to 1000, while the Slider remains at z-index 0. :) thanks
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
I'm using tinyscrollbar to show a nice scrollbar.
Part of my content is hidden (display:none), and only shown after a button is clicked, in a slideDown()/slideToggle() animation.
When I reveal the extra content, the scrollbar does not update, and part of the content is now unreachable. Is there a solution that updates smoothly with the animation?
FYI, here is a non-smooth solution (just call .tinyscrollbar() again after the animation finishes):
$(".toggler").slideToggle().promise().then(function(){
$("#scrollbar").tinyscrollbar()
});
Use the the tinyscrollbar_update() method. Thats a lot cleaner then initializing the scrollbar again.
$(".toggler").slideToggle().promise().then(function(){
$('#scrollbar').tinyscrollbar_update();
});
Maybe use 'relative'
$('#scrollbar').tinyscrollbar_update();
There will be no need to animate scrollbar after toggle content. This solution has helped in my issue.
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.
I have a simple Javascript drag function. You can see it here:
http://jsfiddle.net/XpAyA/12/
The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute.
Is there a way yo fix this? Make the scroll happen when it exceeds the limits?
Thank you
First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.
I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.
Here's a version that scrolls http://jsfiddle.net/vcJuF/1/
I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.