I'm using the wow.js framework based on JQuery Animate on this site I just completed: (http://adrenalinetv.com/). Problem is I noticed on the animations I have that slide up, the animated element slides above the div underneath the element I'm sliding. So you see the element in the next div or div's. So I thought, OK...I'll just make the z-index of that div higher and my problem will be gone. However, no matter what z-index I set that div, the animated element always appears on top of it as it slides into place. I'm not sure if that's because of the wow javascript, the animate.css or script or what. Anyone familiar with this framework know how to correct this? Or is it correctable?
The element that you are giving a z-index cannot have a position static. So give it a position relative and the z-index fix should work.
From CSS-tricks (http://css-tricks.com/almanac/properties/z/z-index/)
As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
Related
I have a problem when my page is long with many <img loading="lazy"> + some css animations (like AOS JS) revealing on scroll.
So if I want to use element.scrollIntoView() then the page scrolls to a position that's upper than required element. I guess it's because of loading="lazy" and perhaps due to css animations on scroll.
I tried to get position Y of my element but it always changes as I scroll the page until that element.
Is it possible to fix it? Thanks in advance!
Yes, AOS.JS is actually moving the element in a different position when it's not revealed.
I've encountered this once and I've did a quick-hack (don't take this as a best-practise) - I've created another invisible element (which didn't have the lazy and AOS effects) on the position where the revealed element should be and then I scrolled onto the invisible element.
My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/animated background. However, I found that when using ScrollMagic on a div with absolute positioning, the scroll behavior only works when indicators are added using the addIndicators plugin.
Here is an example:
https://codesandbox.io/s/elegant-sound-x3gop?file=/index.html (without indicators, no scrolling)
https://codesandbox.io/s/ancient-https-iop96?file=/index.html (indicators added, has scrolling)
Is there any way to fix this problem and use the absolutely positioned div as the background without having to add indicators? Or if this is not possible, is there any other way to achieve the same effect where the title appears above the scrolling/animated background? I previously tried making the title absolutely positioned instead, but this did not work because I also wanted to have more content further down the page that would also appear above the background, but it was hard to format with absolute positioning on the content instead of the background.
I have created a slideshow plugin that takes a list of images and builds a slide show. The slide show is positioned 100px from the top + $(document).scrollTop().
This is pretty simple and works very well. I am running into some issues when someone one has used css zoom on the page. The calculation for the top position will be off due to the zoom. Does anybody know a good way to correct this/ work around?
Thanks in advance!
I had the same problem, and found out that jQuery .offset().top is returning some values which depend on window scroll position if there is CSS zoom added to element that is wrapping the elements we need to get position from.
So, I used the native JavaScript .offsetTop in this context:
$("#scrollDestination").get(i).offsetTop;
But, keep in mind that this will get the position relative to it's parent, not like jQuery .scrollTop() which is returning the scroll bar position. So you will need to do some calculations maybe, but at least you will get the consistent returning value for element's position, when you have CSS zoom involved.
So i made sort of a grid-layout in javascript, but it isn't working like it should yet. I have set it up so that it changes the left margin of an elemenent to make it "slide" to the left/right. However, for some reason it refuses to slide to the last slide. No idea why, can't seem to find the bug!
Here's a copy of the whole page:
http://jsbin.com/obivap/3/edit#preview
Click on one of the other "pages" to slide to the next slide.
Any ideas?
You're animating with margins and floats. So once you push the leftmost box out of its container with a margin, the boxes to its right (which until now have moved with it, because of the float) will stop moving. At -600px the box leaves the container entirely, so the next boxes are now up against the container's border. You're not animating their margins, so they won't leave their container.
If you try and solve this by animating their margins, it will get messy. I haven't gone over your code thoroughly, but if the boxes are already position:relative, so you might as well style all of their left amounts. This means two simple changes in the code: remove every :first selector (since you want to animate them all), and change all marginLeft to just left.
http://jsbin.com/obivap/6/edit
I have problem with the slide effect with jquery-ui. I have a sidebar with a few buttons, which when clicked will spawn another sidebar to slide out from its left edge. One of these "secondary sidebars" contains a google JS map, and sliding that one out works fine.
Another one contains discussion with comments regarding the resource the right sidebar is showing. These discussions are filled using the template plugin and the code for filling the container is called before .toggle() is called.
While the container is sliding out the container (which has background color #eee) is not "spanning over its children in height." I'm seeing a box of perhaps 500x40 pixels with the correct background color, and the children of this container are shown as if their markup was outside the container.
Upon animation completion the container is stretched vertically to span over all its children and all is good. Unfortunately I cannot give anyone a link to a living example of this code, so what I am asking for is suggestions as to how I can start looking for the problem. This could be anything, but my guess is that it's jquery ui's fault.
important:
JQuery-UI's .slideToggle() does not reproduce this error, not does .fadeIn() or .toggle(). Unfortunately .slideToggle() does not take a direction parameter.
Thanks
check for floats, make suring your clearning them inside the sliding div, just before it, and just after it.
Add the following after a floated element(s) (divs with float:left or float:right)
Most people have a css class called "clear" or "clr"
.clr {clear:both;}
So then you can do
<div class="clr"></div>
It reads slightly better as you may use them alot in future :)