CSS Transition is not triggering after insertBefore - javascript

I am trying to create an horizontal carousel that loops.
You can check the code here: https://codepen.io/nobitta/pen/xNOyrj
At the moment I am stuck. I managed to make it work, however the CSS transition that mimics the movement to the right, is not triggering when you click "next".
I already did some research and some say this has to do with browsers optimization and that setting a timeout or calling offsetWidth or getBoundingRect() should do the trick, as it forces the browser to re-render. However, even with those tips, I was not able to make it work...
Am I doing something wrong or missing something here? What should I do?
Thanks in advance ~

I managed to fix it by playing around with the margin-left property.
My bet is that when I prepended the last slider's item, it naturally shifted right due to the new element's size and the space it occupies. Therefore I decided to shift it back to mask the insertion shift. I followed the same reasoning for the appended items.
You can check the codepen in the question for more detail.
I hope this helps someone.

Related

Jquery animation faking the async

I googled and confirmed that there is no async thing in animate(), but couldn't find any solution for my case.
Demo http://www.bootply.com/mTPm9tr8Iu
in my demo, when you hover over first box u will see the 4th (bottom right) change it's css to margin-top:-100px and vice versa for the right first box. As you can see it seem not so smooth, how to fix that?
I think I understand what the final result should be.
The way you constructed your dom tree makes it very difficult to achieve. It would be easier if you had columns instead of cells. That way you dont have to bother about the forth cell positioning.
see how I did it : http://www.bootply.com/g2i7xGm0fb
I hope that it will be what you expected.
note: There is no use of jquery in this solution.

Wordpress template div not expanding

I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.

CSS Skill Bar Animation on Scroll

I'm looking to do something like this. I'm using code from this answer here but the answer is never made entirely clear. They are suggested to use this jquery plugin here but I haven't been able to get it to work. I would go with the first example's code, only, I'm using Foundation 4 and the progress bars are something that come with it and are simpler to create. Also, the animation code provided in the second example is a lot cleaner-- overall, the first example is kinda messy, code heavy, and redundant.
My code is live here. I'm working with the skill bars in the about section. Before the user gets to this point, the animation should be paused. Once the user scrolls to this part of the page, the animation should play.
EDIT: Also, if you have any suggestions to stop the bars from "breaking" out of their containers when you scale the page (this site is meant to be responsive), I would appreciate that as well.
EDIT2: I've noticed as I've been playing with this that overflow: hidden; on .progress fixes my "breaking" issue.. however, when you resize the window, the sizes stay at what they initialized at. I know realistically users visiting my site likely won't be resizing the window a whole lot, but for employers looking at it, it'll kinda be lame if it doesn't work properly. I'm having this same issue with the grumpy-cat button overlays where it initializes at the first size and doesn't resize the overlay after that. Suggestions to this would be really, really appreciated!
If you know where your skill bar is and you know where your screen is at, you only need javascript. (no plugins or weird stuff)
To get the vertical position of your screen it's simple:
window.pageYOffset
To get the vertical position of your div, you just need
div.offsetTop
In your case, I would give an id to the div that wraps all the skill bars and set a loop (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) to check if you're within reach of the div (say, if the difference between the window offset and the div is less than some amount).
If the answer is yes, trigger the animation.
The best way to do the animation is by a css transition. (if you need a good intro to css animations here's a video that i found helpful: http://www.youtube.com/watch?v=VoncDvOfUkk )
You can set css animations from javascript.
The idea is that you would set all your "meter" widths to 0. Then in javascript do something like:
div.style.transition = "width 1s";
div.style.width = someValue;
My recommendation for the value to include in the div is some constant fraction of the "progress" div, as in with % as opposed to em or px. This technique should work. (in case you still have issues, you have a window.requestAnimationFrame loop going on so you can recalculate the values at each timestep... although... beware performance).
The reason you were recommended jQuery is because when you're going to have to update all the divs in order to animate them, just writing $(this).find('.meter') and then addClass('.expand') is so much easier.
Hope this helps

Fixing problematic layout / How to get elements height?

this question is related to my before question:
position relative elements after absolute elements
I updated the JsFiddle provided there to reflect my current html (for which I've no URL right now) more exact. See here: http://jsfiddle.net/dkxUX/22/
I realised that this layout is problematic for me.
In the comments to o.v.'s answer he pointed out that I could create additional wrappers,
like for example a #header div. This is not a bad idea indeed, since this way I would still be able to position my elements absolute within it, however - as long it is positioned anything else than static.
And here comes my problem:
I was curious if the height of an absolute positioned element will affect the height of its parent.
Actually, it seems not: http://jsfiddle.net/qFh6s/1/
Beeing frustrated I tried it with jQuery:
http://jsfiddle.net/WD6LF/1/
Result: Beeing even more frustrated, running out of ideas.
I just cannot give the elements fixed heights, because their content will vary.
Actually, I'm already annoyed by my html, for example the additional wrappers for the sticky footer make it seeming less semantic to me. Furthermore, I begin to understand that putting everything into divs and giving it an absolute position is NOT the answer to all CSS hurdles.
So I'm open to any useful suggestion, whilst making myself ready to scratch everything and start over.
You should really look into floats. Floats will help you position elements even if there height is not known. And you will stop swearing...:)
Good designers do not use tables or positioning, they use floats. You can use clear:both on any div if you don't want it to follow any other div. I didn't quite completely read your question but I am pretty much sure its floats you are looking for. Here is a quick tutorial on floats. Go through it and you yourself will be able to solve your problem. I hope your problem gets solved. Happy designing!!

How to do a smooth-scroll?

I have the following working code to make a element of my scrollbox visible:
var next = elements.item(i+1);
var xpcomInterface = scroll.boxObject.QueryInterface(
Components.interfaces.nsIScrollBoxObject);
xpcomInterface.ensureElementIsVisible(elements);
But I would like to make a smooth-scroll (slow or not). Any idea how to do it?
update
By the way, it's for Mozilla environment.
The simplest way would be to just use a setTimeout function and just keep moving the top and left value on the element's div by a small number, until you get where you want to be.
You may want to experiment with how fast to make it move, as there is a trade-off with smooth, and the fact that it should reach the endpoint in some reasonable time.
Update:
I forgot, you will want to keep calling the setTimeout until you reach the final destination, otherwise it won't redraw the browser window.
I don't know exactly how to do it, but here's a Chrome Extension called "Smooth Scroll" where you can potentially pick through the code to see what they do and maybe get you in the right direction.
PS I love this extension.
jQuery .animate() with accelerated motion can be kind of smooth (see demo for animate with a relative move). And with a plug-in, there are other easing equations it can use.

Categories