4

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Sushil Raghav
  • 253
  • 1
  • 7
  • 16
  • It would be really helpful if you could set up a demo of your problem. Try using [jsfiddle.net](http://jsfiddle.net/) to build the demo and share it. – juan.facorro Nov 16 '12 at 06:53
  • Sorry forget to mentioned page :- http://ivyfa.advisorproducts.com/financial-planning-process You can see this page and hope understand my problem – Sushil Raghav Nov 16 '12 at 07:23
  • 2
    There's just so many wrong things it's hard to rewrite this into something that's workable. You're using a lot of plain js where you could be using jQuery, you're using an array of ID's that's later used in a jQuery selector that could just as well have been `$('[id^=slide]')`, you're passing an element in the for loop, but in the setupHandler() function you're binding a click to all the elements on every iteration, and a click function does not have two functions or the possibility to toggle anything, that would be toggle(), which is deprecated, and I could just go on forever ? – adeneo Nov 16 '12 at 07:32
  • What? I went to that page, in 3 different browsers, and couldn't see what you mean. What's the problem? – Lee Kowalkowski Nov 16 '12 at 09:16
  • You can see the problem in browser FF 12, IE9 – Sushil Raghav Nov 16 '12 at 10:30
  • You can now also see attached screenshot for the issue – Sushil Raghav Nov 16 '12 at 10:50

1 Answers1

15

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();
}
LittleSweetSeas
  • 6,786
  • 2
  • 21
  • 26