Apply hover class on a certain time interval

[SporeDev]

Hello,

I am trying to simulate a hover on the clickable areas of the website so that the user knows what can be clicked.

I camed up with this function:

<script> var $blink = $(".mapify-polygon"); setInterval(function(){ $blink.toggleClass("mapify-hover"); }, 4000); </script>

It seems to work well and add the class as intended if I use it on the area but if I use it on the polygon (where the hover class needs to be activated) it doesn't work anymore.

How can this be achieved? Am I targeting the wrong class?

Also, is there any that I could simulate the hover effect only or certain areas or maybe set a delay to the blinking? Like... an area would highlight first, after 2 seconds the next and so on. 10s pause if there's no action on the website and then it starts again.

The website address is https://sporedev.ro/pleiade

Thank you!

[etienne-martin]

Hi there, the website address is not working.

[SporeDev]

@etienne-martin Sorry, the address is https://sporedev.ro/pleiade :) I missed the ".ro".

[SporeDev]

@etienne-martin

I did some research and camed up with this script:

<script>
function blinkIn() {
  setTimeout(function() {
	$("#map area").eq(1).trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
	$(".mapify-svg polygon").eq(1).css("stroke", "#FFEB3B");
	blinkOut();
  }, 3000);
}

function blinkOut() {
  setTimeout(function() {
	$("#map area").eq(1).trigger('mouseout.mapify');
	blinkIn();
  }, 2000);
}

blinkIn();
</script>

Seems to work alright but I get a weird outline that keeps staying there when it shouldn't be highlighted.

https://sporedev.ro/pleiade/

You can see the effect taking place on the second statue on the right side. Wait 3 seconds and it will start blinking.

Any idea why this happens?

[etienne-martin]

Good job!

The stroke stays because you're not removing it on blinkOut.

Try removing it with: $(".mapify-svg polygon").eq(1).css("stroke", "");

[SporeDev]

Thank you! That seemed to solve it!

Please leave the issue open for a few more days, I'll improve the script and I'll drop it here in case anybody needs to use blinking. :)

[etienne-martin]

Any update?

[SporeDev]

Yes, sorry for the late answer. Just managed to finish the effect.

This is the full code:

var timeout;
function blinkIn() {
   timeout = setTimeout(function() {
    $("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
    $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "#FFF").css('opacity', '0.5').css('stroke-dasharray', '50').css('stroke-dashoffset', '100').css('animation', 'dash 1.5s linear forwards');
    blinkOut();
  }, 3000);
}

function blinkOut() {
   setTimeout(function() {
    $("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger('mouseout.mapify');
    $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "").css('opacity', '').css('stroke-dasharray', '').css('stroke-dashoffset', '').css('animation', '');;
    blinkIn();
  }, 1500);
}

blinkIn();
$(document).click(function(e) { clearTimeout(timeout); blinkIn(); });

You can see it in effect here:

https://sporedev.ro/pleiade/lobby.html

Still working on the stroke.

[migty44]

Yes, sorry for the late answer. Just managed to finish the effect.

This is the full code:

var timeout;
function blinkIn() {
   timeout = setTimeout(function() {
    $("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
    $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "#FFF").css('opacity', '0.5').css('stroke-dasharray', '50').css('stroke-dashoffset', '100').css('animation', 'dash 1.5s linear forwards');
    blinkOut();
  }, 3000);
}

function blinkOut() {
   setTimeout(function() {
    $("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger('mouseout.mapify');
    $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "").css('opacity', '').css('stroke-dasharray', '').css('stroke-dashoffset', '').css('animation', '');;
    blinkIn();
  }, 1500);
}

blinkIn();
$(document).click(function(e) { clearTimeout(timeout); blinkIn(); });

You can see it in effect here:

https://sporedev.ro/pleiade/lobby.html

Still working on the stroke.

Thx you! I've complete this script for the scheme with a sections string list. By clicking on the line we highlight matched section! The popOver content I get with AJAX

``