I am trying to adjust the widths of two elements to expand to a wider area when a user closes a left panel.
To do this I animate the left panel to right: 100%, and expand the first element to take over more area while keeping the second element with a fixed width (which also is an animation since now the whole div takes up more space so his percentage needs to change in order for it to take up the same pixel width)
The code is rather long so I won't post much of it here, stack overflow requires something so here's how I do the width animations:
$('#centerWeb').animate({
"width": "81.33333333%"
}, {
duration: 1000,
queue: false
});
JSFiddle: http://jsfiddle.net/dpPG7/
I have several problems, the first, the animation isn't 'smooth', it's fidgety, I've heard or people saying that you can use the same timer queue for queuing animations but I couldn't find how (since I believed that small differences in percentages might cause this).
Any ideas anyone could help with?
My second problem is that sometimes, like in the jsfiddle example, one of the center elements bounces down a row. In my complete web this happens when re-expanding the left area however in the JSfiddle example it happens when minimizing the left area.
In the JSFiddle: The left area when clicked removes it and expands the rest, and the red button when clicked expands the left area back.
My third and final problem, the animation of the left area, when expanding it back, doesn't occur at the same time as the expansion of the first center area (the actionList), it occurs once it's finished, despite being queue:false.
As I commented, I personally prefer this codepen example:
#rightContainer{
-webkit-transition: all linear 300ms;
.. /* browser compatibility & remaining styles */
}
#rightContainer.shrink {
left:20%;
}
and
$("#btn").click(function(){
$("#rightContainer").toggleClass("shrink");
});
Which is imo clean & good practise.
Related
I have an horizontal slider with lots of "cards".
The JS code that defines its CSS is as follows:
cardCarouselSlider: {
zIndex: 0,
overflow: 'hidden',
width: 300 * cardsNumber,
height: 200,
position: 'absolute',
left: (targetedPlanIndex >= 0)
? -281 * targetedPlanIndex + 40
: -281 * (targetedPlanIndex + 1) + 40,
transition: 'left 0.5s ease',
},
As the value of left shows, I can have the slider slide horizontally by changing the value of targetedPlanIndex.
However, my customer wants to have also a scrollbar (you see it in the image) to be able to scroll rapidly between the cards.
Problem is: when I increase targetedPlanIndex, the slider scrolls to the left, but the scrollbar remains always glued to its start position. See next image, where the index was increased by 1:
I'd like to see the scrollbar slide to the right as the slider goes left, as it would happen if I used the scrollbar to move the slider (see third image).
Any idea how I could do this?
My page is built with React, so basically I believe I am willing to attach some scroll event listener to my slider div, and not to the whole document. After that, there should be some useScrollPosition hook to tinker with.
After pursuing this quest for another couple of days, I haven't been able to find examples of React hooks that are able to detect/manage the scroll of individual components in page, let alone horizontal scroll.
I have solved my problem by leaving CSS aside and putting in place a JS/DOM-based solution, catering to the Element methods that control scroll.
These React solutions are all based on using a useRef hook tied to the page Element that is to be controlled, and accessing its methods through the current property of the reference.
The main drawback of these solutions is that (regardless of what the standards seem to promise) I cannot exploit CSS easing functions to implement a smooth scroll transition: for that I was forced to use a setInterval/setTimeout solution to perform many partial scrolls of my component.
Is there any way to make an image move up when users scroll the page? I have 2 square images (each 400px in wide and height), both are visible. The left image is fixed by position. The right image is positioned 200px below the left image. I need to make the right image to move up by 200px (get aligned with the left image) when we scroll the page. Then the it stays still on that position.
I found the one on this page is quite the same with what I'm trying to create http://jessandruss.us/#waiting The difference is my images are all visible, while on this page the overflow of the left image is hidden and it gets back to its original position when users scroll up.
Really appreciate any help on this matter. Thank you.
$(document).ready(function(){
var aligned = false; // A flag to tell us when the images are aligned
$(window).scroll(function(){
if($(this).scrollTop() == 192 ) { // when the window scroll to the alignment point...
aligned = true; // the images are aligned
}
if (aligned) { // if they're aligned...
$(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property
} // to the window's scrollTop value, +
// 8px for the body's margin.
})
})
Here's a JSFiddle with what I think you want.
There's simply a boolean to tell us when the images are lined up. When they are, image-2's CSS property 'top' is matched to the window's scrollTop value.
The boolean variable is currently hard coded to tell us when the images are lined up (I looked at the window's scrollTop value when they were lined up, 192 in this case). This isn't a great approach since it won't account for changes in the images' positions or sizes, but this should be enough to get to going.
EDIT
https://jsfiddle.net/eLdo0s3w/5/
Here's another method to achieve the same result. As long as having the second image position: fixed is OK, then it should be more efficient, and will hopefully avoid the jumping around that OP says happened with the first method.
It targets image-2's top CSS property and matches it to the window.scrollTop value, until image-2 reaches the necessary point.
Again, this code isn't very reusable, but it should work fine for a one-off situation. If anyone wants improve on it, please do so!
Sounds like you need to use jQuery to link the picture's transform: translateY() property with scrollTop(). It's a little hard to explain in words, but if you provide a jsfiddle I'll show you what I mean.
I'm having an issue with the scrollTop property in JavaScript and was hoping someone could help. According to MDN, the value corresponds to a pixel offset, which makes sense. What I'm having trouble with is the fact that it doesn't seem to be that simple. Here's a Codepen example: http://codepen.io/anon/pen/vGJZMV
I want to create a shrinking header effect in which the header shrinks up to a certain point upon scroll and then stops. Sounds simple enough (and should be). I'm listening to the 'scroll' event on my scrollable element and subtracting the value from the maximum header height, with some conditionals ensuring it stays between my desired amounts. I'm not using any kind of scalar multiplier on my difference function so, in my mind, there should be no parallax scrolling effect happening between the scrollable area and the header (though in my example, there clearly is). Any ideas?
EDIT:
To better clarify the problem, I want the header to shrink at the same rate the text scrolls so that the text does not go behind the header until the header is at its minimum height. The way it is now, the vertical translation of the content box effectively causes the text to move twice as fast as its scrollTop value because it's both scrolling and translating.
If by "parallax scrolling effect", you mean that the header shrinks slower than the content scrolls, then it is because of your CSS. In your CSS, you have a line that says transition all 0.3s ease for your header. This means that all properties will not have changes apply immediately, but will "animate" for 0.3s with an easing. Every time you change header height, it would take 0.3s, regardless of whatever is happening in the rest of the world.
If you remove that line, header should shrink at the same rate as your content.
After realizing what the real issue was (the text container translating vertically while also scrolling), I was able to resolve it by padding the top of the content container by the scroll amount, thereby pushing the text down to compensate for the container's vertical movement. This updated pen shows the result, in case anyone is interested:
http://codepen.io/sunny-mittal/pen/LNjgEK
The relevant changes to the previous code are surrounded with asterisks:
header.on 'scrolling' (_, howmuch) ->
if howmuch is 0
header.css 'height' 150
**content.css 'padding-top' 0**
else if howmuch >= 50
header.css 'height' 100
**content.css 'padding-top' 50**
else
header.css 'height' 150 - howmuch
**content.css 'padding-top' howmuch**
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 hope this question is no exact duplicate ... But none of those related questions helped me to tackle my problem. I want to animate an endless "stream" of rectangles. Whenever the user clicks an element I want:
All elements, including the new one, slowly moving to the left until the second rectangle is in the place of the first rectangle
The first rectangle to fade out
A new rectangle to fade in at the end
So far I have come up with this (According jsFiddle):
$('.block').first().animate({
opacity: 0.75,
left: '-=50'
}, 300, function() {
$('.block').first().remove();
addBlock(index++);
});
Animating the opacity works fine, moving to the left does not. I would suspect this is probably due too the surrounding div. But to be honest I have not much clue about web techniques, thats why I am asking you.
What can I do to make my rectangles move left?
Can I possibly move them to the left while "sliding under" the surrounding div?
Just add position:relative to your css .block entry, use marginLeft and you'll get the desired effect -
http://jsfiddle.net/BsEWp/67/
To slide it under a wrapper div, all you'll have to do is give the wrapper element a css property overflow:hidden.
May be like this?
$('.block').first().animate({
opacity: 0.25,
width: '-=50'
}
or:
$('.block').first().animate({
opacity: 0.25,
marginLeft: '-=50'
}
it's works