Clickable info-box

Question

How can I edit the JS (or CSS?) for this page (http://thepostrider.com/2018-senate-election/) in order to have the "info-box" stop glitching out, and make each state clickable so that the infobox pops up and you could read it until clicking off to another state?

Here is the JS:

    $("path, circle").click(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, circle").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('a').on('click touchend', function() {
    var link = $(this).attr('href');
    window.open(link,'_blank');
    return false;
  });
}

score 0 · Answer 1 · edited Nov 01 '18 at 14:07

0

In CSS you can change the position of info box as absolute instead of relative. When you do it, it will not affect the position of the remaining website. Then you will need to give correct coordinates to info box for positioning it on page.

How to overlay one div over another div

Here there is a detailed explanation in answers.

edited Nov 01 '18 at 14:07

trinaldi

2,872
2
32
37

answered Nov 01 '18 at 13:36

Kemal Çaymaz

21
2

Okay it looks better now, I think that worked pretty well (http://thepostrider.com/2018-senate-election/) - but how can I make it "clickable", I think that's a JS requirement? They're all still hover over so I can't click on the links (for example for Wisconsin). – lemerson Nov 01 '18 at 18:13

Clickable info-box

1 Answers1