how to change a part of paragraph's color

Question

i have a draggable div that is under a blue paragraph , i wanna change the part of paragraph color that is on div ... like the image below

and here is my codes:

<html>
<head>
<script>
    $(document).ready(function(){
        $("#div1").draggable();
    });
</script>
<style>
    #div1{
      position : absolute ;
      top : 10px ;
      left : 20px ;
      background : black ;
      width : 200px ;
      height : 200px ;
      cursor : move ;
    }
    #p1{
      position : absolute ;
      top : 100px ;
      left : 200px ;
      color : blue ;
    }
</style>
<head>
<body>
    <div id="div1"></div>
    <p id="p1">some text</p>
</body>
</html>

jsfiddle : https://jsfiddle.net/e7qvqot9/

Quite an interesting question, i'd stay here to see it's answer. — Faisal Ashfaq, Mar 18 '16 at 09:51
@LGSon I don't think that is exactly the case here. The div on the BG is dragable. — rrk, Mar 18 '16 at 09:53
@RejithRKrishnan Does it matter if it is? .. It still shows how to solve the mixed color, doesn't it? — Asons, Mar 18 '16 at 09:54
@AkshayArora I understand that it's a close call, and if people disagree it will be reopened eventually. — Yoshi, Mar 18 '16 at 11:39
@Yoshi, my answer gets pretty close to what OP wants, although I agree it still needs a bit more fine tuning w.r.t detecting if x,y coordinates lie in the box. But that should give the OP a fair idea. — Akshay Arora, Mar 18 '16 at 11:41

Bálint · Answer 1 · 2016-03-18T11:33:29.780

Maybe do this:

You need to have 2 separate paraghraps, the first one is blue and is located inside the div, the second one is blue, and can be found outside the div.

Set the z-order, so the white text is on the top, then comes the div, and the the blue paragraph. The div also needs to have the overflow: hidden attribute.

This part is a bit finicky. Position the blue text somewhere, for example, ypu currently have ot at (100; 200). Then, set the white paragraph, so the divs position relatove to the top-left corner + the parapgraph's position relative to the div equals to the first paragraph's position. So, if you have the div at (10; 20), then you need to have the paragraph at (90; 180) relative to the div.

This works in most browsers, where z-ordering works. However, you can bypass that, by putting the elements in the rigjt place

Here, I made an example

https://goo.gl/PafOMJ

This is currently the shortest solution

Akshay Arora · Answer 2 · 2016-03-19T03:14:57.823

What about this: Fiddle

This works exactly as you want, and is a pure JavaScript solution. Although it involves a lot of performance overhead, it should be okay for the small text mentioned in the question.

$(document).ready(function(){

  var boxLeftX;
  var boxLeftY;

    $("#div1").draggable({
    drag: function(){
            var offset = $(this).offset();
            boxLeftX = offset.left;
            boxLeftY = offset.top;
        }
  });

  var $source = $('#p1');
  var characters = $source.html();
  var sourceLength = characters.length;
  var replacement = "";

  for(var i = 0 ; i < sourceLength ; ++i){
    replacement += "<span class='interesting'>" + characters[i] + "</span>";
  }

  $source.html(replacement);

  var positionsStore = [];
  var positionOfPara = $('#p1').position();

  $('.interesting').each(function(index, element){
    var tempObj = {};
    var tempPos = $(element).position();
    tempObj.x = Number(tempPos.left) + Number(positionOfPara.left);
    tempObj.y = tempPos.top + positionOfPara.top;
    tempObj.ele = element;

    positionsStore.push(tempObj);

  });



  $('#div1').on("mouseup", function(evt){
    $.each(positionsStore, function(index, item){

    var boxX = $('#div1').position().left;
    var boxY = $('#div1').position().top;


        if(checkIfCoordIsInBox(item,boxX, boxY)){
        $(item.ele).removeClass("blue").addClass("orange");
      }else{
        $(item.ele).removeClass("orange").addClass("blue");
      }
    })

  });



});


function checkIfCoordIsInBox(charObj,x,y){
    console.log(charObj.x);
  console.log(charObj.y);
    if(((charObj.x - x) <= 200) && ((charObj.y - y) <= 200)){
     return true;
  }
  return false;
}

The attached event is mouseup, so you need to release the mouse to see the changes. — Akshay Arora, Mar 18 '16 at 11:40

how to change a part of paragraph's color

2 Answers2