Check onload to see if element visible, if not show another element

Hi there,

I’m setting up some jQuery to check if a hotspot is visible on the screen to determine if a help message displays on screen or not. If the hotspot is visible it should not display the help message at all.

So far I’ve got some script to turn off the help message if you hover the hotspot after the help message fades in. However, I’m unsure how to check before the help message fades in if the hotspot has been hovered.

The main reason for this functionality is that both messages are in the same place on the page and at the moment it creates a stacking effect.

Please find my script so far below:

	$('.ws-hotspot').hover(function(){
		$('#ws-hotspot-helper').css('display', 'none');
		$(this).find(".ws-hotspot-view-more").animate({opacity: 0.8, marginLeft: "26px"},200);
	},function(){
		$('#ws-hotspot-helper').css('display', 'none');
	  	$(this).find(".ws-hotspot-view-more").stop().animate({opacity: 0, marginLeft: "22px"},50);
	});
	
	function hotspotHelper(){
		if(!$('#ws-hotspot-one .ws-hotspot-view-more').is(':visible')) {
			$('#ws-hotspot-helper').css('display', 'none');
		}
		else {
			$('#ws-hotspot-helper').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
		};
	
	};
	
	$(hotspotHelper);

Cheers,

Andrew

Hi,

I’ve noticed that if I remove the delay as follows then the hover works fine:

FROM:
$(‘#ws-hotspot-helper’).delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);

TO:
$(‘#ws-hotspot-helper’).fadeIn(1000).delay(5000).fadeOut(1000);

Is there a way to overcome this without having to remove the delay?

Cheers,

Andrew

Hi there,

I’ve now found the time to put together a better example of the issue - please see attached.
If you hover over the hotspot and then refresh you should see my problem.

Any thoughts on how to fix this - I presume I need to set some type of delay on the if statement to decide if the hotspot has been hovered, or run a check pre-load?

Cheers,

Andrew

hotspot-viewmore-issue.zip (46.5 KB)

That’s because after the .delay(), the .fadeIn() will take place no matter if the element was previously set to display: none or not. I think the easiest fix would be to .remove() that helper message altogether when the view-more was hovered, so that there’s nothing to fade any more; like

$('.ws-hotspot').hover(function hover () {
  $('#ws-hotspot-helper').remove()
  $(".ws-hotspot-view-more", this).animate({opacity: 0.8, marginLeft: "26px"}, 200)
}, function unhover () {
  $(".ws-hotspot-view-more", this).stop().animate({opacity: 0, marginLeft: "22px"}, 50)
});

Ah great, thanks very much!
I didn’t realise that fadeIn() continues - I assume that’s the same for all such as .css() etc. as it’s only the delay holding it back from running?

Glad I could help! Well actually, that .delay() method is only meant to delay animations (and only animations) following each other in a queue, as in

$('#ws-hotspot-helper')
  .delay(1000)
  .fadeIn(1000)
  .delay(5000) // <- this delay
  .fadeOut(1000)

It won’t delay setting some CSS (say); also, you can’t cancel it directly other than by removing the target element altogether (as we did above). So if you want more control (or actually keep the element), you might use a “real” setTimeout() for the initial .fadeIn() instead:

const showHotspot = window.setTimeout(() => {
  $('#ws-hotspot-helper')
    .fadeIn(1000)
    .delay(5000)
    .fadeOut(1000)
}, 1000)

$('.ws-hotspot').hover(function hover () {
  window.clearTimeout(showHotspot)
  $('#ws-hotspot-helper').hide()
  $(".ws-hotspot-view-more", this).animate({opacity: 0.8, marginLeft: "26px"}, 200)
}, function unhover () {
  $(".ws-hotspot-view-more", this).stop().animate({opacity: 0, marginLeft: "22px"}, 50)
})

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.