Show DIV On Highlight Then Hide

Question

I'm attempting to have a hidden div tag display when highlighting specific text. I was able to get a hidden div to display on highlighting but the 2 parts I cannot accomplish are:

Only show when highlighting specific text (I assume using a span tag id or something similar)
After the display has been changed to block, change it back to hidden after 5 seconds.

Here is my attempt. Again, this does show the hidden div on highlighting but that's as far as I got. Please help!

 function ShowNote() {
   document.getElementById('Note').style.display = 'block';
 }

 document.onmouseup = ShowNote;
 if (!document.all) document.captureEvents(Event.MOUSEUP);

 function HideNote() {
   document.getElementById('Note').style.display = 'hidden';
 }
 setTimeout("HideNote()", 5000); // after 5 secs

I DON'T want it to show when I highlight this text
<br />I DO want it to show when I highlight this text.
<div type='text' id='Note' style="display:none;">HIDDEN DIV CONTENT</div>

What errors do you get in your browser? Toss up a quick jsfiddle, but I can say now that with this code you're getting the error `Uncaught ReferenceError: HideNote is not defined`. — justDan, Feb 01 '17 at 23:04
[See this](http://stackoverflow.com/a/3545105/1891677) and possibly the one above it. — tao, Feb 01 '17 at 23:06
`style.display = 'hidden'` isn't valid. You want `style.display = 'none';` — Kevin Jantzer, Feb 01 '17 at 23:13

score 2 · Answer 1 · edited Feb 01 '17 at 23:19

You're very close!

Here's what I have:

function ShowNote() {
    if(window.getSelection() == "I DO want it to show when I highlight this text.")
        document.getElementById('Note').style.display = 'block';
        setTimeout(function(){
         document.getElementById('Note').style.display = 'none';
        }, 5000); // after 5 secs
    }
    
    document.onmouseup = ShowNote;
    if (!document.all) document.captureEvents(Event.MOUSEUP);

I DON'T want it to show when I highlight this text<br />
    I DO want it to show when I highlight this text.
    <div type='text' id='Note' style="display:none;" >HIDDEN DIV CONTENT</div>

Changes:

You need to check what is highlighted via the "window.getSelection()" function.
You were passing a string to setTimeout
hidden isn't a valid display option, none is

So you know, it's generally bad practice to just have text floating around outside of tags. So it's best to stick your first two lines in <p> tags or something.

Dot the i's and backtick the p's. That's the saying, right? :p — Turnip, Feb 01 '17 at 23:20

score 1 · Accepted Answer · answered Feb 01 '17 at 23:17

You are using quite old and antiquated code. Here's the modern approach:

function showNote() {
   document.getElementById('Note').classList.remove("hide");
   setTimeout(hideNote, 5000); // after 5 secs
}

function hideNote(){
  document.getElementById("Note").classList.add("hide");
}

document.getElementById("select").addEventListener("mouseup", showNote);

.hide { display: none; }

#select { color:red; }

<div>I DON'T want it to show when I highlight this text</div>
<div>I DO want it to show when I highlight <span id="select">this text</span>.</div>
<div type='text' id='Note' class="hide">HIDDEN DIV CONTENT</div>

score 0 · Answer 3 · answered Feb 02 '17 at 00:09

This is what I did for you. I setup interval. that occurs every time you mouse out.Or even better it will check if it's your div's style is block on the page. Hope this helps Live exapmle on Codepen

var target = document.getElementById('note');

var i = setInterval(function(){ 
   if (document.getElementById("note").style.display == 'block') { 
    hide();
  }
}, 5000);

function showNote() {
  target.style.display = 'block';
}
function hide(){
 document.getElementById("note").style.display = "none";
}

Show DIV On Highlight Then Hide

3 Answers3