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

css, html, javascript, jquery

Solution

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();
}

Problem

When we refresh or reload the page, you can see a selected text in middle of circle when you click on below image portion: - Discuss Goals & Concern - Cash Flow Analysis - 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:

Original source