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
Related
I am using OpenLayers to display a map, and AdminLte for the interface.
My problem : When collapsing the main left sidebar on a given page, all the boxes and what it contains changes size (I don't really know how) so the maps gets bigger as well. The problem is that when it happens, all the features displayed on the maps apparently change position and are not where they are supposed to be anymore.
What I would like: To redraw the map after the sidebar collapses.
Any suggestion?
I tried:
$('.navbar-collapse').on('shown.bs.collapse', function() {
map.updateSize();
});
and:
$('.sidebar').on('shown.bs.collapse', function() {
map.updateSize();
});
but to no avail...
EDIT : My question is similar to this one: OpenLayers: How to re-align mouse coordinates and vector layers after fluid css rendering of map div but his solution doesn't work for me :)
EDIT 2 : Just to clarify: I think the solution to my problem would be to call the map.updateSize() method when the sidebar has finished collapsing. The problem is that I don't know how to catch the moment when the sidebar has finished collapsing/expanding!
A temporary solution I found was to start a timeout when the button triggering the sidebar collapse and then call the map.updateSize() method:
$('.sidebar-toggle').click(function(){
setTimeout(function(){ map.updateSize(); }, 500);
});
It works...but it's kind of meh :/
If you're trying to redraw the map after the sidebar collapses, change your event handler to the following:
$('.sidebar').on('hidden.bs.collapse', function() {
map.updateSize();
});
According to the list of event handlers here, the hidden.bs.collapse event is fired when a collapse element has been hidden from the user.
I have the same problem, using React and a class component my (awful) solution is this:
shouldComponentUpdate = async () =>
await new Promise(res =>
setTimeout(() => {
this.map.updateSize()
res(false)
}, 500)
)
It's awful because the resize causes the map to jump. If there is a way of achieving the map resize without a jump that would be pretty cool.
(500 is the animation time for my drawer to close)
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 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');
});
I have some javascript that calls for an overlay to display a full preview of images, and a button to zoom-in/out and a button to go back.
The trouble is when I first view the full image, the zoom in/out toggle works fine, but when I go back to the thumbnails and launch another image, the zoom-in/out does not work.
The DOM tree structure is like this:
overlay(**parent**) >> imgContainer >> imgCanvas(draggable) >> img
May be some code would help my case. Can anyone tell me what I may be doing wrong here?
//enables the zoom-in/zoom-out toggle function
$('#Zoom').toggle(function() {
img.removeAttribute("height");
$("#draggable").draggable();
iconZ.setAttribute("src", "nav/nav-zoom-out.gif");
},
function() {
img.setAttribute("height", "270px");
$("#draggable").draggable('destroy');
$("#draggable").animate(
{ "left": $("#draggable").data("Left"), "top": $("#draggable").data("Top")}, "slow");
iconZ.setAttribute("src", "nav/nav-zoom.gif");
});
//navigates back to the thumbnails
home.addEventListener('click', function() {
$('imgCanvas').remove();
imgContainer.removeChild(imgCanvas);
overlay.removeChild(imgContainer);
$('#overlay').removeClass("on");
}
, false);
You are destroying what looks like the sections of the page you are putting the images in. I think you mean to hide them only.