Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove text selection from selected text which is coming by default on page load?

When we refresh or reload the page, you can see a selected text in middle of circle when you click on below image portion:

  1. Discuss Goals & Concern
  2. Cash Flow Analysis
  3. Tax Analysis...

And so on.

Example: http://ivyfa.advisorproducts.com/financial-planning-process

The selected text is only coming on the first click - when you click again on those image portions you will not see selected text. So I want to remove the selection from the text on the first attempt too.

It's difficult for me to explain this issue. Below is the JS code I am using - I think the issue is in the ChangeText() functionality.

/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide5', 'slide8', 'slide9', 'slide12', 'slide13', 'slide14', 'slide15', 'slide16'];
window.onload = function() {
  for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
    var el = document.getElementById(IdAry[zxc0]);
    if (el) {
      setUpHandler(el);
      el.onmouseover = function() {
        $(this).addClass("hover");
      }
      el.onmouseout = function() {
        $(this).removeClass("hover");
      }
    }
  }
}
function setUpHandler(el) {
  /*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
  $("#" + IdAry.join(",#")).click(function() {
    $(this).addClass("selected");
    $("#graphics .selected").not(this).removeClass("selected");
  })
  /*---------This will add show hide class to thier spans and vise versa-------*/
  $("#" + IdAry.join(",#")).click(
    function() {
      changeText(this, "hide", "show");
    },
    function() {
      changeText(this, "show", "hide");
    })
}
function changeText(obj, cl1, cl2) {
  obj.getElementsByTagName('SPAN')[0].className = "hide";
  obj.getElementsByTagName('SPAN')[1].className = "show";
  if (prev && obj !== prev) {
    prev.getElementsByTagName('SPAN')[0].className = "show";
    prev.getElementsByTagName('SPAN')[1].className = "hide";
  }
  prev = obj
}

I only want to remove the selected text from the text in the middle when you click on different-2 image tag.

Image to view selected text:

image to view selected text

like image 726
Sushil Raghav Avatar asked Dec 12 '22 20:12

Sushil Raghav


1 Answers

You should clear text selection once you display your control; you can do this by calling this function (should be fully cross-browser):

function clearSelection() {
    if (window.getSelection) window.getSelection().removeAllRanges();
    else if (document.selection) document.selection.empty();
}
like image 171
LittleSweetSeas Avatar answered Jan 11 '23 23:01

LittleSweetSeas