I have several divs that I want to have fade in and out depending on a nav panel. I am running into an issue with two of the divs, but the others work fine so I am not sure what is happening.
here is the jQuery code, here the two divs that are wacky have been singled out, the real code generalizes it to work for all divs:
$('#behind_the_lens').click(function() {
$('#gallaries-page').fadeOut(0);
$('#behind_the_lens-page').fadeIn(750);
$('#pricing-page').fadeOut(750);
});
$('#pricing').click(function() {
$('#pricing-page').fadeIn(750);
$('#behind_the_lens-page').fadeOut(750);
});
When the first function runs #pricing-page just hides, no fading and #behind_the_lens-page does fade.
When the second function runs #pricing-page waits for #behind_the_lens-page to fade out, then it instantly shows.
this does not happen for any other combination of divs so it is very strange to me.
as for the contents of these divs, one #pricing-page uses a table and the other uses a floating layout. but there layouts types are not unique from other divs.
In summary, why is it working this way for these divs but not the others? furthermore, why is it doing this at all?
Edit: was able to come up with a fiddle here that shows the problem.
You are fading in and fading out simultaneously. Watch the scrollbar, your "clicked" page is appearing as the currently visible is disappearing, and jumps up into position after the visible completely disappears (display:none).
Use the complete callback on fadeOut so that fading in happens after fading out finishes.
https://jsfiddle.net/u3u8jsqr/2/
JS
if (thisID != visibleID) {
$(visibleID).fadeOut(750, function () {
$(thisID).fadeIn(750);
});
}
Related
I have two DIVs next to each other. If I scroll the first, the second should scroll too. This is working with this JS Code:
$('#firstDiv').on('scroll', function () {
$('#secondDiv').scrollTop($(this).scrollTop());
});
If I want to apply this to the second DIV too, so that the first DIV scrolls by scrolling the second, I tried it this way:
$('#firstDiv').on('scroll', function () {
$('#secondDiv').scrollTop($(this).scrollTop());
});
$('#secondDiv').on('scroll', function () {
$('#firstDiv').scrollTop($(this).scrollTop());
});
The problem now is, that both are scrolling super slow. Like so slow, that it nearly is not visible.
I guess they start to interact with each other or block each other.
How to do this properly?
They definitively slow down, particularly while scrolling with mouse wheel.
I think it's either use a timeout variable so there's not so many events fired when you're scrolling, or use some javascript code to keep them sync'd directly, like this small <1kb plugin does:
http://asvd.github.io/syncscroll/
I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..
In my simple javascript slide show I just want it to cycle through (at max of 5) divs that auto populate from a database. It populates and starts doing the slide show fine, but once it is suppose to loop it goes to a "blank" slide, then to the last one again and the it start cycling normally forever.
With this example I have to look at and play with it I am using two divs.
It can be viewed here: www.codekrewe.com/fbla
and the javascript code is here:
$(function() {
$('#dateHolder .featureHolder:gt(0)').hide();
setInterval(function() {
$('#dateHolder .featureHolder:first').fadeOut(1000)
.next('.featureHolder').fadeIn(1000)
.end().appendTo('#dateHolder');
}, 3000);
});
EDIT: I changed the JavaScript, the JS in the code block above is what I have now. However, I get the same problem.
Now with three divs in the slideshow you can see it is just the first slide that gets blanked out on the second loop through.
Well I found the fix for this, not quite sure why it had such an effect.
After all of the divs were called, a little <h1> was made to say featured divs in the holding box. Well that was getting pushed up with each slide changing, and once it reached the top it caused a blank slide.
So moving the <h1> to the top before the divs were called, fixed the blank slide issue.
I am writing here againg, because I have some problems with script in my page. I had one problem with menu focus and I write it a week or two ago at this forum, but the awesome script which suggest me one user has one bug and I don't know how to solve it. I have tried a lot's of plausible solutions, but problem still persists.
Here is code at Fiddle, which simulates my problem: http://jsfiddle.net/PRZYN/15/
$(document).ready(function() {
$('#handle').mouseenter(slideIn);
$("#box").mouseleave(function() {
$(this).animate({
left: "-=180px"
}, "fast");
$('#handle').mouseenter(slideIn);
});
$("[name='skin']").mouseleave(function(e) {
e.stopPropagation();
});
});
function slideIn() {
if ($("#box")) $("#box").animate({
left: "+=180px"
}, "slow");
$(this).unbind("mouseenter");
}
As you can see, there is one div (blue-green one which presents left menu pop-up), which show when div get focus and hide when div lost focus.
Problem in this script is, that when are this two divs in animation state and If user very fast move mouse through animation of front end animation and backend the script gets confused and menu start showing and hiding and it's very annoying. Also there are some other ways when menu gets the same bug but I didn't located it very well. I think, that problem also shows when user hover this div and mouse stop at some place - which is different from time to time.
I have located problem somehow, but I don't know how to solve it. I need to disable all other events on this div (but not .animation()) when menu is in animation state and on elements when mouse is not over div and then enable it again when animation complete and user wants again open or hide menu.
I hope, that you understand my question and I will be very happy if someone could help me on that how to solve problem.
Regards,
Miha
You can use .stop() to cancel your animation queue and to prevent the animation from running after the user has stopped interacting with the element. Also, it's better to used fixed values for left, as using += and -= will cause the box to be incorrectly aligned after rapidly mousing in and out of the container. ie use values such as "-180px" and "0px" instead of "-=180px" and "+=180px".
JSFiddle: http://jsfiddle.net/PRZYN/16/
So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.
Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clearly haven't been changed since I can't click on any links.
Anyone know what I'm doing wrong? Thanks so much!
The javascript is below:
$('.performer a').click(
function(){
$('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
$('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
});
$(document).click(
function(){
$('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
$('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
});
});
Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?
// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);
// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
$('#whitepage').hide();
});
Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.
$('.performer a').click(function () {
});
$(document).click(function () {
$('#whitepage:visible').animate(...
});
This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.
I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.
You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)
This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.
$('.performer a').click(function(event)
{
$('.lightboxinfo, #whitepage').fadeIn(500);
event.stopPropagation();
});