I made a jsfiddle so you can reproduce the bug:
FIDDLE
I implemented a carousel to display 3 images. There's a current image (the image being displayed) and the other two remain hidden until I click one of the lateral arrows, causing the next image to slide from the side overlaying the (now previous) current image.
I've been 2 hours trying to figure out why there are certain specific 'transitions' in which the animation doesn't seem to work. For example, when clicking the left arrow to pass from the first image to the second and from the second to the third the animation works fine, but when clicking it again, the transition from 3 to 1 doesn't perform the slide animation. When moving in the opposite direction (using the right arrow) only one transition is animated. I think the problem has to do with that if in the click event handler function, but couldn't spot what's causing it.
Any help would be greatly appreciated.
TIA
The underlying issue here is related to the z-order of the three images. Your slide animations are only showing up where the image being slid in is above the displayed image; the "broken" transitions are actually occurring, they're just obscured by the "higher" visible image.
You can fix this by explicitly setting the z-index of the new and current image. For example, on the right transition:
prevLandscape.zIndex(1);
currLandscape.zIndex(0);
If you do this, you'll also need to increase the z-index of the arrows so they're above the images.
Fiddle
jsfiddle
The issue is with the hide method you just simply hide it add the slide transition for the hide method.
change this line currLandscape.hide(); to currLandscape.hide("slide");
there seemed to be a problem with the order of the images also. please try this code out. The code is reuse of the previous image arrow code. Just try it out.
$('.arrowRight').on('click',function(e) {
var currLandscape = $(this).siblings(".currImg");
var nextLandscape = currLandscape.nextAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var nextDesc= currDesc.nextAll(".hiddenDesc").first();
if (nextLandscape.length == 0) {
nextLandscape = currLandscape.siblings('.hiddenImg').first();
}
if (nextDesc.length == 0) {
nextDesc= currDesc.siblings('.hiddenDesc').first();
}
nextLandscape.show("slide", { direction: "right" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
nextLandscape.removeClass('hiddenImg').addClass('currImg');
});
Related
I have a test page to better explain my problem. I have several items on a list (they're images on the test page); when I click on one of them, a corresponding slideshow, using flexslider, sldes down.
The problem is that, on page load, the slideshow shows all slides at once, at a much smaller size than intended. But then, if I switch the focus from the window (i.e. switch between browser tabs or move to another program and come back), the slideshow is now working and the slides are the proper size. This happens in mobile devices too.
When I check with firebug, there's an element.style rule applying to ul.slides:
transform: translate3d(-89px, 0px, 0px);
Which hides one of the slides. Additionally, there's another rule for the list items inside ul.slides that gives them their initial width, which is not even the same for all sliders so I don't understand where it is coming from.
Can someone take a look and suggest a fix? I've tried overriding the element.style rule but so far unsuccessfully.
I think I've figured it out, in principal at least...
.flexslider{display:none;} seems throw off the re-size function of Flexslider.
You could just remove it, but that makes for some ugly loading.
To avoid said ugly loading I put together a quick, work-around- jsFiddle
$(document).ready(function(){
$(".flexslider").css('display','block').slideUp();
});
There's a still a quick glitch while loading, but hopefully it will at least steer you in the right direction.
Another method I played with a bit was to try and force the re-size function like so-
$(".client").click(function () {
$('.flexslider').resize(); // Problematic but promising
var project = this.id;
var project_id = '#' + project + '-project';
var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first");
elem.slideUp('slow', function () {
$(project_id).slideDown('slow');
});
});
This sort of solved the mini-picture issue, but was spotty at best.
I have a problem when trying achieve hover effect on mapped image. I have an image with mapped areas and on all of them I want to show a different image when hover.
You can see my work so far here:
http://mantasmilka.com/map/pries-smurta.html
The problem is when I hover over area it show the image, but when I move the cursor (not leaving the area) it starts flickering. It takes area space pixel by pixel.
I've tried working with Javascript and jQuery solutions:
Javascript:
mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';"
jQuery:
$('.hide').hide();
setTimeout(function(){
$("#area-kaunas").mouseenter(function(){
$('#Kaunas').show();
});
$("#area-kaunas").mouseleave(function(){
$('#Kaunas').hide();
});
}, 500);
Why not just use hover() inside of jQuery? I'm also unsure why you bind the events after a 500 millisecond timeout?
$('.hide').hide();
$("#area-kaunas").hover(function() {
$('#Kaunas').show();
}, function() {
$('#Kaunas').hide();
});
There is a css property called "pointer-event" which gives the value "none" to the img tags that overlap in the mapped image and works as you need it. This is the documentation https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
The problem will always be the compatibility of browsers.
Earlier today I asked a question about my webpage being very 'jumpy'.
I've posted a test version of my webpage here: http://armandbakx.nl/
And a codepen can be viewed here: http://codepen.io/anon/pen/GpmQoY
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
The idea of the page is that you click on an image (in this case a red square), resulting in a hidden container showing, which can be scrolled through, containing more information and images about this image.
However, when you click one of the squares, and the container and overlay show, the other images (squares) move. It was suggested to me that in my show function I should try and keep track of the position my browser was in when this container opened. Then in my hide function, return the browser to that position.
Truth to be told, I am not good with JavaScript AT ALL, so I'm pretty much clueless as to how I should apply this. I'm having more issues with this webpage and I have to fix them fast, hence I'm asking again. Could anybody help me with this?
From what I can tell, your squares are moving around because of the .no-scroll class. If I remove it, everything appears to work correctly.
try this:
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.overlay').removeClass('opacity');
}
In your show function, you can retrieve the scroll position before the Text is shown.
scrollHeight = $(document).scrollTop();
In your hide function, set the scroll position to the value you got previously.
$(document).scrollTop( scrollHeight );
I'm trying to hide a div on click (well i'm trying to slide it to the left), but what it will have to do is also from the main page div swap the background and also i think, swap the width of another div. I've got it swapping the background and removing the things I don't want (although they slide down rather then to the left)
This video shows what happens (and then at the end i use firebug to show you what i want to happen) http://www.youtube.com/watch?v=tti_L_ofelg&feature=youtu.be (edit: video online now)
Here is my html for the sliding div:
The CSS:
.slidingDiv {
}
.show_hide {
display:none;
}
And the jQuery:
var defOpen = 1;
jQuery(".slidingDiv").show();
jQuery(".show_hide").show();
jQuery('.show_hide').click(function(){
if(defOpen == 1)
{
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripeclear.png) fixed 0 0 repeat-y")
jQuery("#primary_right").css("width","")
jQuery(".slidingDiv").slideToggle();
defOpen = 0
} else {
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripe.png) fixed 0 0 repeat-y")
jQuery(".slidingDiv").slideToggle();
defOpen = 1
}
So it's bgwrap that has the image in it that i have to swap to a clear one (to stop it being there as it's a fixed image on the left)
and primary_right seems to be the one when I remove the width goes full screen (what i'm really trying to acheive)
It also needs to be able to toggle closed and open!
Thanks for any help you can give!
question is not clear..but as far as i understood...you want to hide a left side division by which the right side division occupies full screen and vice versa..is it?????
if yes defOpen variable will not help u..use JQuery toggle function...datz the best way to do it...
I think you need to set the width to "inherit". That's essentially what you're doing when you are selecting the delete style in Firebug.
jQuery("#primary_right").css("width","inherit")
What would be the best way to have a single image which when you hovered your mouse over it, it would cycle fade in/out into a series of other images (like 3 or 4) before returning back to the original? Also, it would stop fading/changing images and go back to the original image if you moved your mouse off of the image.
Any help is appreciated.
Thanks!
I would see about having the mouseover event (or hover if you are using an external library) of the object that you are wishing to switch tied to a window.setTimeout function. Make sure to store the timeout id so that you can cancel it if the user's mouse exits the window. The window.setTimeout would then scroll through the pictures.
Maybe something like this:
$(function(){
$("#test").hover(function(e) {
$.data("timeout", window.setTimeout(function() {
//Transition here
}));
}), function(e) {
window.clearTimeout($.data("timeout"));
//Put image back to normal
});
});
Hope this helps,
JMax