I wan't to fade in elements while scrolling down. Also it exists the possibility to add more elements by clicking on a button.
The problem is, that once the elements which are appended are offscreen, they wont be animated nor even displayed.
It occurs with wow.js as scrollReveal.js and any other so it seems to be a general problem, but I couldn't exactly figure out why it happens.
Here a sample so you see the exact problem.
Just press a few times the add button.
Edit
So, the problem was, that I had multiple div containers nested into each other and using a scrollbar plugin. It doesn't matter which - each will produce this problem. I've fixed the problem by changing one line in the scrollReveal.js - Line 78:
viewport: window.document.documentElement, // <HTML> element by default.
to
viewport: window.document.getElementById('right'), // it's my custom container-div
Now it works how supposed.
If you encounter a similar problem with any scrollbarplugin or wow.js it should also fix your problem. Just change the corresponding viewport.
The problem here is, if window.sr = new ScrollReveal() is called every time a new element is added, all the references to elements which has data-sr is removed and only the last element's reference will be saved.
Instead you can call window.sr.init(true);. For more details visit this github project https://github.com/julianlloyd/scrollReveal.js/blob/master/scrollReveal.js
Here is the working pen with above change : CodePen
So, the problem was, that I had multiple div containers nested into each other and using a scrollbar plugin. It doesn't matter which - each will produce this problem. I've fixed the problem by changing one line in the scrollReveal.js - Line 78:
viewport: window.document.documentElement, // <HTML> element by default.
to
viewport: window.document.getElementById('right'), // it's my custom container-div
Now it works how supposed.
If you encounter a similar problem with any scrollbarplugin or wow.js it should also fix your problem. Just change the corresponding viewport.
Related
I have no idea what to do with this button anymore (the "donate" one here).
I have used a plug-in in parallel for the mobile version which works just fine with a defined position of fixed.
This is also fixed position but the "donate" button keeps going behind pretty much all the elements which looks very bad since I want it on top :( any help is appreciated.
U should remove that button from there! Copy this element with id donate_widget, and paste it before container with class at-content.
I think this should work!
I had some similar issues with z-index as well. Here you can find some information about it https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
As for your solution, considering the button is fixed position for the whole web page (not just one section) you could maybe move it up in the HTML tree. In other words, make it a direct descendant of the body element - or row, or something which is above your other elements.
I found it. So I went to the parent element and the div with the id fws_577e3c5a64f62 that contains the button should have the high z-index. This seems to fix the problem for me.
In one of my projects, I am replacing the default cursor in the browser with an SVG one. I am appending this SVG cursor via jQuery. This works fine, but I want to change the cursor when it hovers over links, and right now, nothing I have tried has worked.
I think it is because even though the cursor has a position of fixed and a high z-index value, it cannot tell what it is hovering over because technically it is below the content.
Does anyone have suggestions?
EDIT: Right after I posted this question and after I included a JS Fiddle in the comments, I changed my code to make the cursor appear before the content. The issue remains, however.
Look above in the comments for #mcbex's JS Fiddle! Apparently, one does not simply add a class to an SVG, one must customize it with fill colors.
so I have multiple divs of the same class below each other. I now want to trigger a "loading comments"-function every time a visitor scrolls to a new div. However, I have no idea how to track jQuery scroll over a div. The comments for each div should only be loaded once, my idea would be to save the current position in a variable and only load comments when the new scroll position is greater than the old one.
Can you please help me out?
EDIT: I created a image that shows what I need to do.
Image: http://i.imgur.com/78EYK.jpg
EDIT 2: SOLVED!
Solved with Viewport (thanks to Royi Namir)
http://www.appelsiini.net/projects/viewport
My code:
load = $(".my-div:in-viewport").attr('id');
load_comments(load);
This is executed every second.
you should read about viewport
Viewport ads couple of extra selectors to jQuery. With these selectors you can check whether element is inside or outside of viewport. To see how it works check the demo.
http://www.appelsiini.net/projects/viewport/3x2.html
I am using the jScrollPane jQuery-Plugin on a -Box which is dynamically filled with content.
My problem is that on adding new content to the front of the old content, the maintainPosition option does not work. So I wrote my own code that moves the Scrollhandle back to it's original position.
The code works fine, but calling reinitialise() after adding the new content moves the handle to the top of the container just before my code reverts it's position. This results in a short flicker of the displayed content which is very disturbing.
Does anyone know a method to prevent the scroll handler to move to the top after calling "reinitialise()"?
Because noone has answered this question yet I've created a jsFiddle with my problem:
http://jsfiddle.net/hB4hE/1/
the calculation done on the second prepend link seems to solve the problem.
But if you run it StepByStep you see that the scrollbar is moved to top first.
Because I prepend many elements in my real environment this jumpy behavior is often visible.
So do you have an idea how to prevent it from jumping?
I didn't find any integrated solution to this, so I created a workaround:
1. calculate height of prepending elements
2. prepeding new elements
3. instantly scrolling down a distance equal to the height of the new prepended elements
Try using this setting: maintainPosition then you don't have to reposition yourself.
More information: http://jscrollpane.kelvinluck.com/settings.html#maintainPosition
I'm creating a custom select plugin. Everything is going great, but the dropdowns (<ul>-objects) are overlapping on each other :(
I understand, that the overlapping order is set after the elements order on page or when they are created. So my question is: What is the method to make the latest opened/shown object (<ul>) on top of the hierarchy?
I just need the correct method. I'm not going to copy the full code, but a little example:
$('#trigger').click(function () {
new_dropdown.slideDown();
});
(A picture is worth of 1000 words)
So lets say, that I open the green select the last.. How can I make it on top of the yellow one?
EDIT
For easier testing I created jsfiddle. For future references I'll post the link: http://jsfiddle.net/hobobne/uZV5p/1/ This is the live demo of the problem at hand.
What you're looking for is the CSS z-index property (higher values put elements at the front).
You could probably just set them in ascending order (e.g. set green one to 1000, yellow to 1001), but if you really need to bring it to the front when clicked, you can change the z-index with javascript
var zindex=100;
$("#trigger").click( function() {
newdropdown.css('z-index', ++zindex);
});
Here's a demo: http://jsfiddle.net/waitinforatrain/Vf7Hu/ (click the red and blue divs to bring to front).
Edit: gilly3's approach is better, and as was mentioned there may be some issues with older versions of IE.
Two ways:
Set a z-index
Setting a z-index will change the default stacking order. You can have a counter that increments and use that to set the z-index of newly stacked items. You may have issues with IE 7 or earlier, though, and those can be fixed by setting the z-index of other items. https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index
Use absolute positioning, and append the div to the body
If you use absolute positioning, you can append the div to the body and still have it appear below the element. If you append the div to the body, the one last added should be on top, because of the default stacking order.
Give it a class when it is opened, and remove that class from the previously opened ones:
$(".slidedown_active").removeClass("slidedown_active");
$(this).addClass(".slidedown_active");
Then your users can use z-index in their style definition for that class to ensure the active list is always visible.
The reason I don't recommend setting the z-index directly is because you can mess up your users' layout unnecessarily. These kind of overlap issues can be a real headache for a web developer. For a plugin to try to guess at how to resolve overlap issues, without any knowledge of the code or design, would be virtually impossible. Instead, give your users the tools they need to fix the overlap issues themselves. It may be that your users would never encounter overlap issues, so setting the z-index for them would be pointless at best, and potentially harmful.