CODEWITHSUNDEEP
javascripttextbox
Martijn
Martijn

Reputation: 5

Javascript text box hover on mouse over and on mouse click

This question is about the 'Javascript text box hover on mouse over' code on this page

script:

var oVTog = {
toggle: function (el) {

    var container  = el.parentNode;
    var para = container.getElementsByTagName('p')[0];  
    para.style.display = "none";

    el.onmouseover = function () {
                  para.style.display = '';
                  return false;
            };
    el.onmouseout = function () {
                  para.style.display = 'none';
                  return false;
            };
    el.onclick = function () {
                  para.style.display = para.style.display == 'none' ? '' : 'none';
                  return false;
            };
    }
};
window.onload = function () {
var l = document.getElementById('togTrigger');
oVTog.toggle(l);
var l = document.getElementById('togTrigger2');
oVTog.toggle(l);
};

My question is: This is also works on mouseclick. How can i get it to work so that a mouseclick makes the text box stay open and close it again? Clicking it should set it to a clicked state or something because i also want the mouse-over option to work when you haven't clicked on it yet. I like the mouseover option and it should be retained but i want to be able to keep the box open so i can use the content inside it (copy it, click links, etc.)

Basically this is the scenario i want; I want to be able to:

  1. mouse over the text or button to open the hovering text box.
  2. click the text or button to keep the text box open
  3. now the box stays open and mouse over doesnt work anymore
  4. click on the text or button again to close the box
  5. and enable mouse over again

Upvotes: 0

Views: 2967

Answers (1)

Tim S.
Tim S.

Reputation: 13843

I have modified your fiddle.

I have added a variable called isClicked. By setting it when you click, I can ignore hiding the element on the mouseout handler.

var oVTog = {
    toggle: function (el) {
        var container  = el.parentNode;
        var para = container.getElementsByTagName('p')[0];
        para.style.display = "none";

        // create variable
        var isClicked = false;

        el.onmouseover = function () {
            para.style.display = '';
            return false;
        };
        el.onmouseout = function () {
            // ignore if button was clicked
            if(!isClicked)
                para.style.display = 'none';

            return false;
        };
        el.onclick = function () {
            // if it's clicked, change it to TRUE
            // if it's clicked again, change it back to FALSE

            isClicked = !isClicked; // toggle

            para.style.display = ((isClicked) ? '' : 'none');
            return false;
        };
    }
};

Upvotes: 1

Related Questions